livedControls.vue

<template>
  <div class="livedControls" :style="{'bottom' : info.openPlayback == 0 && info.playbackUrl && info.playbackUrl[0] && info.liveBroadcastState == 2 ? '40px' : '20px'}">
    <!-- 公告层 -->
    <livedAnnouncement v-if="info.liveNotice && !info.playbackUrl" :liveNotice="info.liveNotice"></livedAnnouncement>
    <!-- 用户进入通知 -->
    <div class="userComing userComingAni" v-if="userComing">
      <span>{{entryNoticeText}}</span>
      <span>来了</span>
    </div>
    <!-- 评论层 -->
    <livedIsMsg
      :guestBookList="guestBookList"
      :updateVal="updateVal"
      :isSend="isSend"
      :liveId="liveId"
      :info="info"
      :fixedHeight="getBottom"
    ></livedIsMsg>
    <!-- 带货商品层 -->
    <livedExplainingCommodities
      v-if="(info.liveBroadcastState==1||info.liveBroadcastState==3)&&list"
      :updateGoods="updateGoods"
      :goodsList="list"
      :isFocusComments="isFocusComments"
    ></livedExplainingCommodities>
    <!-- 商品列表弹层 -->
    <livedGoodsDia
      :showDia="showDia"
      :updateVal="updateVal"
      :goodsList="list"
      :updateGoods="updateGoods"
      v-if="list"
      @changeStatus="changeStatus"
    ></livedGoodsDia>
    <!-- 分享弹层 -->
    <livedShareDia v-if="loadingShare"  :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia>
    <!-- 底部控制层 -->
    <div class="control flex" >
      <template v-if="!isSend">
        <div class="goodsImg" @click="showGoodsList" v-if="info.liveBroadcastSales==0">
          
          <img src="../../../static/images/lived/goodsImg.png" alt />
          <p class="goodsNum" v-if="list.length>0">{{list.length}}</p>
        </div>
        <div class="goodsImg" v-else></div>
        <div class="iptCopy" v-if="!info.playbackUrl || info.liveBroadcastState==3 || info.liveBroadcastState==1" @click="isLogin">跟主播说点什么...</div>
        <div class="iptCopy" style="background:none;" v-else></div>
        <div class="shareIcon" @click="showShare">
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADwElEQVR4Xu2aS6hNURjH//+RgYGRKAMDr1tmFJGBSxmIjGTgKq/rUURi5qKQkhKlLt1IHkl05VUG7r3lkW4MPMIVRXkNFMqAqL++2len45y99mPtc/bu7FWnc2qv9X3f/7fX41trHaLFC1tcP0oAZQ9ocQLlEGjxDlBOguUQKIdAixPI1RCQ1EbyZSPfSW4ASHoGYCqABwC2kBxsBIhcAJB0CsDKCsGfAKwleTNrCHkB0A9gbpXY3wDWkDyTJYQ8AxjWvY3k4awgFAGAad9PcmcWEIoCwLQfJ7nBN4QiATDtl22yJPnDF4iiATDdAwGEdz4gFBGA6bacwXrCo7QQmg5A0iQAJ2osgy5tliusInnLVTHsecMBSBoHYAaAmcG3/R6ZUITlCgbhXML2jTsPkDQdwLrgkzTeeu22kjySxGjmPSBj4ZWa95HsigshMwCSxgDYHnzixpW0fjfJjXEaZwJAkiUsJn5CnGA81b0EoIPkryj2vAKQNA3AAQALojjPsI5trlaQ/ODy4Q2ApIUAzgMY5XLaoOdPAwiPM18GJa0H0N0gYXHcWK5gPeF2vUape4CkGwDs7ee1WK6wjGRvrQBTAZB0BcCSvCqviOsNyYleAUg6CmBzAcRbiAMk270BkGTCDUBRSjtJ20X+V2IPAUnzANSdVHJIZArJV14mQUkjAPQBmJ1DodUhfQcwluRPb8ugpIMAdhRA/BDJtihxRh4CkhYDuBrFaJPr9JGcHzWGOADs4KHZKa5L12mSlRcsrvrRzgMkLQdw1mmtuRX2ktwVN4RIPUDSfQCz4hpvYP1Okj1J/DkBSOoA4Pt66huA5wCeADC4qxOcCZrePwAWpTkXjALgguXSSegGbT4HS6cJfQFgsPpcX1Ktu0GXy/c2J5E0m4lLKIDgAHMowaGlTZj3APSTvOuKLgGAhwAsu0t9QeICEGeba/tu2xz1kgzdg1cDiQngOklbkr0UF4BrNsYcnu4AOEQycY4QA0APyU4vygMjdQFIGg/gbYizj4Hw1FfXEQEkOvV1wQoDEDb7HwvEhwFy+f73PAKATSTNp/cSBuAigKU1PNq/Nk76jCQEwFe7SCFpJ72ZlDAANvtPrvI6h6TN7l5LHQC2vJl45yqSJpgwAMP/2hq2P5rklzTO6rWVtAfA7ornlheY+NdZ+Ku0GQbAgrIZ18a5HSpa4pFZkWSriN0f2tDr8rHGRwnWmQlGMVLkOiWAIr89H7GXPcAHxSLbKHtAkd+ej9jLHuCDYpFtlD2gyG/PR+wt3wP+AsW7I1AzjlUOAAAAAElFTkSuQmCC" alt="">
        </div>
        <div class="heardIcon">
          <div class="clickEl" @click="addLike(1)"></div>
          <img class="like" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADu0lEQVR4Xu2aTYhOURjH//+VspRSksiKKRsjWShT2FE2jK80xAj5CpHkI8nkm8aYwZiGGTORDQsKzcpqZomtmixsWCnZPHpypl5v8957zrnnfrzve596N+99znP+z+8+5957PogmNzZ5/igBlBXQ5ATKIdDkBVA+BMshkHQIiMhiAGsBLAIwx/y+A9DfJwAvSP7w6UdEFgBYDaClIvYvE1vjPyI56RN7qo13BYhIO4AjAFZYCBgCMELytYUvHGOPABiyjV3dvzMAEVkK4DQABeBqrwD01RKbZuxaQp0AiMhmADcAzHXNvMr/Fsmjlf+lGTtKqzUAETkP4FzCxCubvyOpzw4t+dRix+m1AiAiXQBOxgXzuK6Jq4aQYKdkXCGpQzXSYgGIyA4Ag3GBCnr9AkmFXNNsAIwDWFbQBG1ktZKc8HoIisheAL02vRTYR986nb4APgJYWeDkbKUtJPl1OueaQ0BE5gFI9JVlqy4Dvw6SA64AtgAYzkBcFl0MkOxwBXAVwPEs1GXQxzjJ5a4A9NWnr8BGsEmS810BvAWwrhGyB/CH5AxXAC8BbGwQAD9JznIF0ANgX4MA+EJyiSuA0BOUPFmOkWxzBaAfQPoh1AhWc04QORcQkW8B5v5FANhGcsypAtRZRHQeoPOBerYJkq21EoirAJ0F6mywnq2TZJ8XgAaogsi7r/nZrAfMBvCmDtcEfqtmkp+jyjcWgKmCVQbCzDoaCy1xyVtVwFTCIrIJwGidAFhD8r2NVqsKqICgewHPbALn6LOBpO4/WJkTADMctupOjFX07J3aSTpVqTMAA2E7gCfZ5xfZ4y6Sj101eQEwEHYCmHaZyVVEAP8DJO/5xPEGYCDoMlO/T8cB25wgec03XiIABsJuAA99BSRsd47kxSQxEgMwEPborm8SIR5tu0ie8mj3X5MgAAwE3Xy4n1SQZfs7JA9b+ka6BQNgIOwH0B1CWESMbpIHQ/URFICBoOLuhhJYFaeHpEIOZsEBGAiHANwOpvJfoF6SwdcoUwFgIOj5oZuBIDwgmcrCTGoADIRjAK4nhNBPUl+1qViqAAwE3V7TbTYfq7mn5xNsujapAzAQ9HiNHrNxsUGS+rmdqmUCwEDQ8zqXLbN5SjKTfcnMABgIZwBcioEwTHKbJajEbpkCMBDOAqj1/T5K0ucApjeIzAEYCHosrvr01nOSuuyWqeUCwEDQMb4egB5+/kAylwWW3ABkepsjOisBFOVO5KWjrIC8yBel37ICinIn8tJRVkBe5IvS71/x8QxQBHuXTgAAAABJRU5ErkJggg==" alt="">
          <p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
          <div class="box">
            <div
              class="img"
              :class="{'imgAni':imgAni}"
              v-for="(item,index) in imgList"
              :key="index"
            >
              <img :src="item.img" alt />
            </div>
          </div>
        </div>
        
      </template>
      <template v-else>
        <div class="sendOut" :style="{'bottom':getBottom+'px'}">
          <input
            class="sendIpt"
            :adjust-position="false"
            :focus="getFocus"
            type="text"
            @focus="onFocus"
            @blur="onblur"
            v-model="sendVal"
            placeholder="和主播说点什么吧~"
          />
          <div class="send" :class="{'noSendVal':sendVal==''}" @click="toSend">发送</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
import livedIsMsg from "@/components/livedModel/livedIsMsg";
import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
import livedShareDia from "@/components/livedModel/livedShareDia";
import live from "@/api/live";
export default {
  props: [
    "info",
    "entryNoticeText",
    "updateVal",
    "guestBookList",
    "likeInfo",
    "goodsList",
    "updateGoods"
  ],
  name: "",
  data() {
    return {
      liveId: 0,
      imgList: [],
      likeNum: 0,
      iconList: [
        // "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
        // "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
        // "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
        // "//img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
      ],
      list: [],
      num: 0,
      userComing: false,
      showDia: false, //显示商品列表弹窗
      showShareDia: false, //显示分享弹窗
      isSend: false, //显示评论输入框
      sendVal: "", //输入内容
      getFocus: false, //获取焦点
      imgAni: false, //给点赞元素加动画
      getBottom:0,//动态绑定输入框位置
      loadingShare:false,
      isClick:true,

      isFocusComments:false, //是否在评论中，如果在评论中就隐藏掉上屏商品
    };
  },
  components: {
    livedAnnouncement,
    livedIsMsg,
    livedExplainingCommodities,
    livedGoodsDia,
    livedShareDia
  },
  computed: {
    likeNumCopy() {
      return this.watchMan(this.likeNum);
    }
  },
  watch: {
    updateVal(newVal, oldVal) {
      if (this.likeNum < this.likeInfo.likeNum) {
        this.getAdd();
      }
      this.likeNum = this.likeInfo.likeNum;
      if (this.entryNoticeText) {
        this.userComing = true;
        setTimeout(() => {
          this.userComing = false;
        }, 4600);
      } else {
        this.userComing = false;
      }
    },
    updateGoods() {
      this.list = this.goodsList;
    }
  },
  created() {},
  onLoad(options) {
    if(options.params){
      let params = JSON.parse(options.params);
      this.liveId = params.liveId;  
    }else if(options.scene){
      var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
      console.log(scene)
      let sceneInfo = scene.split(',')
      console.log('sceneInfo',sceneInfo)
      this.liveId = sceneInfo[0].split('=')[1]
    }
    
    let _this=this;
    wx.getStorage({
      key: "sessionid",
      success(res) {
        _this.loadingShare=true;
      },
      fail(res) {
        _this.loadingShare=false;
      }
    });
    // 获取直播配置
    this.getLivedConfig();
  },
  mounted() {},
  methods: {
    // 数量大于1w
    watchMan(val) {
      return val - 0 > 10000 ? ((val - 0) / 10000).toFixed(1) + "w" : val;
    },
    // 点赞
    addLike(val) {
      this.imgAni = true;
      if (val == 1) {
        // if (this.info.liveBroadcastState < 1) {
        //   this.notAgainLive();
        //   return;
        // }
        this.likeNum++;
        let query = {
          liveBroadcastId: this.liveId,
          clickNum: 1
        };
        live.addLiveLikeByUser(query).then(res => {});
      }
      setTimeout(() => {
        this.num++;
        if (this.num >= 4) {
          this.num = 0;
        }
        this.imgList.push({
          img: this.iconList[this.num]
        });
      }, 300);
    },
    // 直播未开始提示
    notAgainLive() {
      wx.showModal({
        content: "直播还未开始",
        confirmColor: "#ff877d",
        success: function(res) {
          if (res.confirm) {
          } else if (res.cancel) {
          }
        }
      });
    },
    // 接口获取触发点赞
    getAdd() {
      if (this.imgList.length > 20) {
        this.imgList = [];
      }
      for (let i = 0; i < this.iconList.length; i++) {
        setTimeout(() => {
          this.addLike(2);
        }, 200 * i);
      }
    },
    // 显示商品
    showGoodsList() {
      this.showDia = true;
    },
    changeStatus() {
      this.showDia = false;
    },
    showShare() {
      this.loadingShare=true;
      this.showShareDia = true;
    },
    closeShareDia() {
      this.showShareDia = false;
    },
    // 是否登录
    isLogin() {
      let _this = this;
      wx.getStorage({
        key: "sessionid",
        success(res) {
          _this.toSendOut();
        },
        fail(res) {
          console.log("未登录------150");
          // 跳转登录页
          let backUrl = "/lived/main";
          let query = {
            liveId: _this.liveId,
            fromType: "mini"
          };
          let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
            query
          )}`;
          wx.navigateTo({
            url: url
          });
        }
      });
    },
    // 发送评论
    toSendOut() {
      this.isSend = true;
      this.getFocus = true;
    },
    // 失焦点
    onblur() {
      this.imgAni = false;
      setTimeout(() => {
        this.isSend = false;
        this.sendVal = "";
        this.isFocusComments = false;
      }, 300);
    },
    // 获取焦点
    onFocus(e){
      this.isFocusComments = true;
      this.getBottom=(e.mp.detail.height-10);
    },
    // 点击发送留言
    toSend() {
      if(this.isClick){
        this.isClick=false;
        setTimeout(() => {
          this.isClick=true;
        },300);
        console.log("点击按钮-------------------200");
        if (this.sendVal == "") {
          this.getFocus = true;
        } else {
          let query = {
            guestbookType: "1",
            guestbookContent: this.sendVal,
            liveBroadcastId: Number(this.liveId)
          };
          this.$emit("toSendMsg", query);
        }
      }
    },
    getLivedConfig(){
      let configCode="LIVE_LIKE_ICON";
      live.getConfigValueByConfigCode({configCode}).then(res=>{
        if(res.data.code==200){
          let newArr=res.data.data;
          this.iconList=JSON.parse(newArr);
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.livedControls {
  position: fixed;
  left: 0;
  width: 100vw;
  z-index: 2;
  .userComing {
    margin-bottom: 10px;
    background: rgba(#000, 0.4);
    color: #fff;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    border-radius: 26px;
    padding: 0 8px;
    display: inline-block;
  }
  .userComingAni {
    animation: userComingAni 4.7s linear;
  }
  @keyframes userComingAni {
    0% {
      transform: translateX(150vw);
      opacity: 0.3;
    }
    30% {
      transform: translateX(12px);
      opacity: 1;
    }
    80% {
      transform: translateX(12px);
      opacity: 1;
    }
    100% {
      transform: translateX(-150vw);
      opacity: 0;
    }
  }
  .control {
    height: 40px;
    align-items: center;
    justify-content: space-around;
    padding: 0 12px;
    .goodsImg {
      width: 30px;
      height: 30px;
      position: relative;
      img {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .goodsNum {
        color: #fff;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
      }
    }
    .iptCopy {
      margin: 0 10px;
      width: 50vw;
      background: rgba(#000, 0.4);
      color: #999;
      font-size: 16px;
      height: 38px;
      border-radius: 38px;
      line-height: 38px;
      text-indent: 1em;
    }
    .shareIcon,
    .heardIcon{
      position: relative;
      width: 50px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 32px;
        height: 32px;
      }
    }
    .heardIcon {
      .clickEl{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
      }
      .like {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -16px;
      }
      .heardNum {
        text-align: center;
        transform: translateY(-20px);
        background: rgba(#e60012, 0.5);
        border-radius: 8px;
        padding: 0 2px;
        font-size: 12px;
        color: #fff;
        min-width: 30px;
      }
      .box {
        width: 100px;
        height: 260px;
        position: absolute;
        overflow: hidden;
        bottom: 0;
        right: -30px;
        pointer-events: none;
        .img {
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -20px;
          width: 40px;
          height: 40px;
          opacity: 0;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .imgAni {
          animation: moveImg 1.5s linear 0.1s;
        }
        @keyframes moveImg {
          0% {
            opacity: 1;
          }
          20% {
            transform: translateY(-40px) translateX(-5px) scale(1);
          }
          40% {
            transform: translateY(-80px) translateX(0) scale(1);
          }
          60% {
            transform: translateY(-120px) translateX(0) scale(1);
          }
          80% {
            transform: translateY(-160px) translateX(5px) scale(1);
          }
          100% {
            opacity: 0;
            transform: translateY(-200px) translateX(0) scale(1);
          }
        }
      }
    }
    .sendOut {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(#000, 0.4);
      width: 96vw;
      height: 40px;
      border-radius: 40px;
      line-height: 40px;
      font-size: 16px;
      .sendIpt {
        width: 70vw;
        color: white;
        margin-left: 10px;
      }
      .send {
        color: #fff;
        height: 30px;
        width: 70px;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
        background: linear-gradient(to right, #ff877d, #fb566d);
        margin-right: 6px;
      }
      .noSendVal {
        background: #ababa9;
      }
    }
  }
}
</style>