index.vue

<template>
  <div class="lived">
    <!-- 背景(未开始&&已结束) -->
    <div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1">
      <!-- <img :src="liveNoticeInfo.coverUrl" alt /> -->
      <image :src="liveNoticeInfo.coverUrl" mode="aspectFill" alt=""></image>
    </div>
    <!-- 直播展示层 -->
    <div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1">
      <!-- 自定义返回按钮 -->
      <!-- ,'height':(navHeight*2-2)+'rpx' -->
      <div class="customBack flex" :style="{'top':(navHeight)+'rpx'}">
        <div class="backIcon">
          <img
            @click="back"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACWklEQVR4Xu3by2rVUBSH8fVXRCmiiCIWUbwi3tpSFRFFFBEviOKF4hv4BM51rO8htoPOfQZBHDgUBX0Gp58EVsGB5hx3drLXTk+mhxPy/bKSQC6yTb5ok/fbDGA2AYEFgDdm9sw38YOkF7k3N+QhAGwxs/d/xG90v5b0KidCOABgq8c//UfoUUnfcyGEAgC2efzjlsBlSZ9GBwBs9/hHLXFfzWxB0q9RAQA7PP7hhLAnktZzxTfrKX4IAHMe/2BC2IqktZzxxQGAnR5/v0R8UQBgl8ffLRVfDADY7fF3SsYXAQD2ePzt0vGDAwB7Pf5WhPhBAYB9ZrZqZjejxA8GAOz3PX8jUvwgAMABj78eLb53AGDex/5axPheAYCDvuevRo3vDQA45PFXIsf3AgAc9rG/HD0+OwBwxOMv1RCfFQA45mN/sZb4bADACY9frik+CwBw0sd+qbb4zgDAKd/zizXGdwIATnv8+VrjkwGAMz72Z2uO7wLwzsye1x6fBODX+m9jiE8FWDCzzy0Aa5JWJgCF+Tnptjjw0cwujAEhFeCemTVPbttOglVMQhJAs+envBKER0gGGAtCJ4AxIHQGqB0hC0DNCNkAakXIClAjQnaA2hB6AagJoTeAWhB6BagBoXeA6AiDAERGGAwgKsKgABERBgeIhlAEIBJCMYAoCEUBIiAUByiNEALgPxDeSnqZ8556GIApEX5Kal6/ybaEApgC4Yukc9nqI3wv8LeYllvu4/9oagMEOO4PX5r3in+YWRM/rg8mco5y6rrCnQNSQ1L/NwNIlRvL/34D8BMaUGntkTQAAAAASUVORK5CYII="
            alt
          />
        </div>
        <div class="shopName flex">
          <div class="img" v-if="shopLogo">
            <img :src="shopLogo" alt />
          </div>
          <div class="info">
            <p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
            <p class="num" v-if="liveNoticeInfo.liveBroadcastState != 2 && liveNoticeInfo.liveBroadcastState != 4">
              <span>{{historyWatchNum}}</span>
              <span style="margin-left:6px;">观看</span>
            </p>
          </div>
          <div class="toShop" @click="toShop">进店</div>
        </div>
      </div>
      <!-- 未开始展示 -->
      <notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
      <!-- 直播暂停展示 -->
      <isPauseShow v-if="liveNoticeInfo.liveBroadcastState==3" :info="liveNoticeInfo"></isPauseShow>
      <!-- 结束展示 -->
      <livedIsEnded
        v-if="(liveNoticeInfo.openPlayback == 1 && (liveNoticeInfo.liveBroadcastState==2 || liveNoticeInfo.liveBroadcastState==4)) || (liveNoticeInfo.openPlayback == 0 && !liveNoticeInfo.playbackUrl && (liveNoticeInfo.liveBroadcastState==4 || liveNoticeInfo.liveBroadcastState==2))"
        :updateGoods="updateGoods"
        :endInfo="endInfo"
        :status="liveNoticeInfo.liveBroadcastState"
        :goodsList="goodsList"
      ></livedIsEnded>
      <!-- 控件层 -->
      <livedControls
        v-if="liveNoticeInfo.liveBroadcastState==0 || liveNoticeInfo.liveBroadcastState==1 || (liveNoticeInfo.liveBroadcastState==2 && liveNoticeInfo.openPlayback == 0 && liveNoticeInfo.playbackUrl) || liveNoticeInfo.liveBroadcastState==3"
        :info="liveNoticeInfo"
        :entryNoticeText="entryNoticeText"
        :guestBookList="guestBookList"
        :updateVal="updateVal"
        :updateGoods="updateGoods"
        :likeInfo="likeInfo"
        :goodsList="goodsList"
        @toSendMsg="toSendMsg"
      ></livedControls>

      <video
        v-if="liveNoticeInfo.openPlayback == 0 && liveNoticeInfo.playbackUrl && liveNoticeInfo.playbackUrl[0] && liveNoticeInfo.liveBroadcastState == 2"
        style="width:100%;height:100vh;z-index:-1"
        :src="liveNoticeInfo.playbackUrl[0]"
        autoplay
        :show-fullscreen-btn="false"
        object-fit="cover"
      />
      <div class="masker" ></div>
    </div>
    <!-- 直播 -->
    <live-player
      v-if="liveNoticeInfo.liveBroadcastState==1&&liveNoticeInfo.boStreamRTMP"
      class="livePlayer"
      id="liveDemo"
      :src="liveNoticeInfo.boStreamRTMP"
      mode="live"
      :picture-in-picture-mode="['push','pop']"
      autoplay
      object-fit="fillCrop"
      orientation="vertical"
      auto-pause-if-open-native="true"
      auto-pause-if-navigate="true"
      @error="error"
      @statechange="changes"
    />

    

  
    <!-- object-fit="fillCrop" -->
    <!-- orientation="horizontal" -->
  </div>
</template>

<script type="text/ecmascript-6">
import {
  serialize,
  getQueryVariable,
  DFSImg,
  getNavbarInfo
} from "@/utils/index";
import live from "@/api/live";
import notStarted from "@/components/livedModel/notStarted";
import livedControls from "@/components/livedModel/livedControls";
import livedIsEnded from "@/components/livedModel/livedIsEnded";
import isPauseShow from "@/components/livedModel/isPauseShow";
import spokesman from "@/api/spokesman";
import shop from "@/api/shop";
export default {
  name: "",
  data() {
    return {
      liveId: "", //直播间id
      livedUrl: "rtmp://58.200.131.2:1935/livetv/hunantv",
      shopName: "",
      shopLogo: "",
      backPath: "",
      isLoading: false,
      status: 0, // 0：未开始 1：直播中 2：已结束
      // 总数据
      liveNoticeInfo: {}, //详情
      historyWatchNum:0,
      entryNoticeText: "", //用户通知
      guestBookList: [], // 定时查评论
      goodsList: [], //商品列表
      updateVal: 0, //子组件监听此数据进行数据赋值
      updateGoods: 0, //商品相关组件监听
      likeInfo: {}, //点赞
      isVideo: false, //是否有直播或回放链接
      liveTime: null, //定时器
      isWifi: true, //提示网络环境
      infoTiming: null, //全局定时器
      goodTiming: null, //商品定时器
      endInfo: {}, //直播结束详情
      firstComing: true, // 首次进入
      params: {},
      // userId: "",
      hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
      spokesmanObj: {}, //分销员信息
      userId : '', //用户id
      navTop: 0,
      navHeight: 0,
      isTimeLock: true, //时间锁

      isTimeFirstReq: true, //第一次数据请求

      newCommentsTime: 0,
      userActivebeginTime: 0,
      videoContext:null,

      openLiveTimer : null,
    };
  },
  components: {
    notStarted,
    livedControls,
    livedIsEnded,
    isPauseShow
  },
  computed: {},
  onLoad(options) {
    if(this.videoContext){
      this.videoContext.resume()
      this.videoContext.play()
    }
    
    console.log("onLoad",options);
    this.isTimeLock = true;
    this.isTimeFirstReq = true;
    this.newCommentsTime = 0;
    wx.setKeepScreenOn({
      keepScreenOn: true
    });
    getNavbarInfo(res => {
      console.log(res, "--------------------125");
      this.navTop = res.navTop;
      this.navHeight = res.navHeight;
    });
    wx.getNetworkType({
      success: function(res) {
        if (res.networkType != "wifi") {
          wx.showModal({
            content: "您当前处于非wifi网络环境下",
            confirmColor: "#ff877d",
            success: function(res) {
              if (res.confirm) {
              } else if (res.cancel) {
              }
            }
          });
        }
      }
    });
    if(options.params){

      this.params = JSON.parse(options.params);

      console.log(this.params, "-----------------133");
      this.$store.commit("setOfflineShopCode", this.params.offlineShopCode);
      this.liveId = this.params.liveId;
      this.shopName = this.params.shopName;
      this.backPath = this.params.fromPagePath || "/";
      this.shopLogo = DFSImg(this.params.shopLogo, 40, 40);
      // 是否有分销员信息
      if (this.params.spokesmanGroupId) {
        this.$store.commit("setSpokesman", {
          spokesmanGroupId: this.params.spokesmanGroupId,
          spokesmanShopId: this.params.spokesmanShopId,
          spokesmanRelId: this.params.spokesmanRelId,
          userId : this.params.userId
        });
      }
    }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]
      this.backPath = '/';
      console.log('liveId',this.liveId)
      if(sceneInfo[1]){
        let fxyInfo = sceneInfo[1].split('=')[1]
        console.log('fxyInfo',fxyInfo)
        if(fxyInfo){
          let querys = fxyInfo.split('_');
          if(querys[1]){
            this.$store.commit("setSpokesman", {
              spokesmanGroupId: querys[1],
              spokesmanShopId: querys[2],
              spokesmanRelId: querys[3]
            });
            this.$set(this.params,'spokesmanGroupId',querys[1])
            this.$set(this.params,'spokesmanShopId',querys[2])
            this.$set(this.params,'spokesmanRelId',querys[3])

            console.log('this.params',this.params)
          }
        }
      }
      
    }

    this.init();
    this.openLiveTimer = setInterval(() => {
        this.init();
    },5000)
    

    // this.userEntry("IN");

    // 通过分享进入直播间重新查询订阅消息配置
    this.getMsgConfig();
    this.isLogin();

    this.getServerTimeNow();
  },

  onShareAppMessage(options) {
    let query = {
      liveBroadcastId: this.liveId,
      shareType: "WX"
    };
    live.addShareRecord(query).then();
    let _this = this;
    console.log(this.userId,'this.userId')
    if(this.userId){
      if (this.hasInvitationStatus == 1) {
        Object.assign(this.params, this.params, this.spokesmanObj,{userId : this.userId});
      }else{
        Object.assign(this.params, this.params,{userId : this.userId});
      }
    }
    
    console.log(options)
    console.log(this.params, "--------------161");
    console.log(`/pages/lived/main?params=${JSON.stringify(this.params)}`)
    let shareObj = {
      title: this.liveNoticeInfo.title,
      path: `/pages/lived/main?params=${JSON.stringify(this.params)}`,
      imageUrl: this.liveNoticeInfo.shareUrl,
      success: function(res) {
        console.log("-----------success");
        // 转发成功之后的回调
        if (res.errMsg == "shareAppMessage:ok") {
          console.log(res, "分享成功");
        }
      },
      fail: function(res) {
        console.log("-----------fail");
        // 转发失败之后的回调
        if (res.errMsg == "shareAppMessage:fail cancel") {
          console.log(res, "取消转发");
        } else if (res.errMsg == "shareAppMessage:fail") {
          console.log(res, "转发失败");
        }
      }
    };
    console.log(shareObj, "----------------168");
    return shareObj;
  },
  onHide() {
    this.userEntry("OUT");
  },
  onShow() {
    if(this.videoContext){
      this.videoContext.resume()
      this.videoContext.play()
    }
    
    console.log("onShow");
    this.userEntry("IN");
    this.isLogin()
  },
  onUnload() {
    this.liveNoticeInfo.liveBroadcastState = -1;
    this.liveNoticeInfo = {};
    this.liveNoticeInfo.boStreamRTMP = "";
    this.videoContext = wx.createLivePlayerContext("liveDemo");
    this.videoContext.stop();
    this.userEntry("OUT");
    this.firstComing = true;
    if (this.infoTiming) {
      clearInterval(this.infoTiming);
      this.infoTiming = null;
    }
    if (this.goodTiming) {
      clearInterval(this.goodTiming);
      this.goodTiming = null;
    }
    if(this.openLiveTimer){
      clearInterval(this.openLiveTimer);
      this.openLiveTimer = null;
    }
  },
  mounted() {},
  methods: {
    // 初始化数据
    init() {
      let  _this = this;
      let liveBroadcastId = this.liveId;
      live.getLiveInfo(liveBroadcastId).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.data, "------73");
          this.shopName = res.data.data.orgName;
          this.shopLogo = DFSImg(res.data.data.logoUrl, 40, 40);
          this.liveNoticeInfo = res.data.data;
          this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl? DFSImg(this.liveNoticeInfo.coverUrl): "";
          this.liveNoticeInfo.shareUrl = this.liveNoticeInfo.coverUrl? DFSImg(this.liveNoticeInfo.coverUrl, 500, 400): "";
          this.getGoodsList();
          if (this.liveNoticeInfo.liveBroadcastState == 2) {
            // 调直播结束
            this.endLived();
          } else {
            console.log("这里");
            // this.timingGetInfo();
          }
          // if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
          //   this.goodTiming = setInterval(() => {
          //     console.log("--------获取商品接口");
              
          //   }, 5000);
          // } else if (
          //   this.liveNoticeInfo.liveBroadcastState == 2 &&
          //   this.goodTiming
          // ) {
          //   clearInterval(this.goodTiming);
          // }

          if(this.liveNoticeInfo.liveBroadcastState == 4){
            this.endLived();
          }
        }
      });
      //绑定关系
      wx.getStorage({
        key: "sessionid",
        success : res => {
          // 查询分销员信息
          console.log(res,'绑定关系',this.params,this.params.spokesmanRelId,this.params.userId)
          if(this.params.spokesmanRelId){
            live.becomepokesmanCustomer(this.params.spokesmanRelId).then(res=>{
              console.log(res,"----------------------becomepokesmanCustomer")
            })
          }else if(this.params.userId){
            live.saveCustomerInviterInviteeRel(this.params.userId).then(res=>{
              console.log(res,"----------------------saveCustomerInviterInviteeRel")
            })
          }
        },
        fail(res) {}
      });
    },
    back() {
      console.log(this.backPath,'this.backPath')
      let query = {
        sessionid: wx.getStorageSync("sessionid") || ""
      };
      // 返回商城
      wx.reLaunch({
        url: `../index/main?from=livedBackShop&backpath=${
          this.backPath
        }&params=${JSON.stringify(query)}`
      });
    },
    // 是否登录
    isLogin() {
      let _this = this;
      wx.getStorage({
        key: "sessionid",
        success(res) {
          // 查询分销员信息
          _this.getSpokesman();
          _this.getUserId();
        },
        fail(res) {}
      });
    },
    getMsgConfig() {
      if (!this.$store.state.subscribeMessageObj) {
        shop.getWxMiniSubscribeMessageConfig().then(res => {
          if (res.data.code == 200) {
            const data = res.data.data;
            console.log("wx mini subscribe message data: ", data);
            if (data != null) {
              const subscribeMessageObj = {};
              for (var key in data) {
                if (data[key] && data[key].template_id) {
                  subscribeMessageObj[key] = data[key].template_id;
                }
              }

              this.$store.commit("setSubscribeMessageObj", subscribeMessageObj);
            }
          }
        });
      }
    },
    //获取分销员信息
    getSpokesman() {
      spokesman.getSpokesmanidByShare().then(res => {
        if (res.data.code == 200) {
          if (res.data.data.hasInvitationStatus == 1) {
            this.hasInvitationStatus = 1;
            this.spokesmanObj = {
              spokesmanGroupId: res.data.data.groupId,
              spokesmanShopId: res.data.data.shopId,
              spokesmanRelId: res.data.data.spokesmanId
            };
          }
        }
      });
    },
    getUserId(){
      live.getUserInfo().then(res => {
        if(res.data.code=="200"&&res.data.data){ 
          console.log('getUserId')
          this.userId = res.data.data.userId
        }
      })
    },
    toShop() {
      // 到商城首页
      this.backPath = "/";
      wx.reLaunch({
        url: `../index/main?from=livedToIndex&backpath=${this.backPath}`
      });
    },
    // 定时查询直播数据
    timingGetInfo(serverTime) {
      if (this.isTimeLock) {
        this.isTimeLock = false;
        let dataTime = this.isTimeFirstReq
          ? serverTime - 2000
          : this.newCommentsTime;
        let userTime = this.isTimeFirstReq
          ? serverTime - 2000
          : this.userActivebeginTime;
        // 前五秒
        let query = {
          id: Number(this.liveId),
          beginTime: dataTime,
          userActivebeginTime: userTime //用户进入时间
        };
        live.getLiveStateById(query).then(res => {
          this.isTimeFirstReq = false;
          this.isTimeLock = true;
          if (res.data.code == 200) {
            let resData = res.data.data;
            // 1、判断状态如果发生改变才init();
            // 2、直播中给用户进入通知、评论、点赞数赋值
            if (
              this.liveNoticeInfo.liveBroadcastState == 0 &&
              resData.liveState == "NO_LIVE"
            ) {
              // 未开始且接口也未开始不作操作
            } else if (
              this.liveNoticeInfo.liveBroadcastState == 1 &&
              resData.liveState == "IN_LIVE"
            ) {
            } else if (
              this.liveNoticeInfo.liveBroadcastState == 0 &&
              resData.liveState == "IN_LIVE"
            ) {
              console.log("未开始----直播中");
              // 未开始且接口直播中/直播中且接口已结束
              this.init();
            } else if (
              (this.liveNoticeInfo.liveBroadcastState == 2 &&
                resData.liveState == "END_LIVE") ||
              (this.liveNoticeInfo.liveBroadcastState == 1 &&
                resData.liveState == "END_LIVE")
            ) {
              //直播结束且接口已结束
              if (this.firstComing) {
                this.firstComing = false;
                this.init();
              }
            } else if (
              this.liveNoticeInfo.liveBroadcastState == 1 &&
              resData.liveState == "PAUSE_LIVE"
            ) {
              this.liveNoticeInfo.liveBroadcastState = 3;
            } else if (
              this.liveNoticeInfo.liveBroadcastState == 3 &&
              resData.liveState == "IN_LIVE"
            ) {
              this.liveNoticeInfo.liveBroadcastState = 1;
            }
            // console.log("resData.guestBookList---》", resData.guestBookList)
            this.guestBookList = resData.guestBookList; //评论列表
            if (resData.guestBookList && resData.guestBookList.length) {
              this.newCommentsTime =
                resData.guestBookList[
                  resData.guestBookList.length - 1
                ].createTimeStamp;
            }
            if (resData.entryNoticeList && resData.entryNoticeList.length) {
              this.userActivebeginTime =
                resData.entryNoticeList[
                  resData.entryNoticeList.length - 1
                ].createTimeStamp;
            }
            this.likeInfo = resData.likeInfo; //点赞信息
            // 直播中且接口直播中---主要操作
            // 数据初始化
            this.entryNoticeText = "";
            this.liveNoticeInfo.historyWatchNum = resData.historyWatchNum - 0 >= 10000 ? ((resData.historyWatchNum - 0) / 10000).toFixed(1) + 'w' : resData.historyWatchNum; //观看人数
            this.historyWatchNum = resData.historyWatchNum - 0 >= 10000 ? ((resData.historyWatchNum - 0) / 10000).toFixed(1) + 'w' : resData.historyWatchNum; //观看人数
            if (resData.entryNoticeList.length > 0) {
              if (resData.entryNoticeList.length == 1) {
                this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
              } else {
                this.entryNoticeText = `${
                  resData.entryNoticeList[0].userName
                }等${resData.entryNoticeList.length}人`; //用户进入
              }
            }

            this.updateVal = new Date().getTime(); //监听使用数据
          } else {
            // if (this.infoTiming) {
            //   clearInterval(this.infoTiming);
            // }
          }
        });
      } else {
        console.log("上次请求未结束，进行了下一次请求");
      }
    },
    // 获取商品列表
    getGoodsList() {
      let id = this.liveId;
      live.getListByLiveBroadcastId(id).then(res => {
        if (res.data.code == 200) {
          this.goodsList = [];
          let arr = [];
          if (res.data.data.length > 0) {
            this.goodsList = res.data.data.forEach((item, index) => {
              if (item.productImgUrl) {
                item.productImgUrl = DFSImg(item.productImgUrl);
                item.minPrice = Number(item.minPrice);
              }
              arr.push(item);
            });
            this.goodsList = arr;
            this.updateGoods = Math.random();
          }
        }
      });
    },
    // 直播结束数据
    endLived() {
      let query = {
        id: Number(this.liveId)
      };
      live.getLiveStatisticsById(query).then(res => {
        if (res.data.code == 200) {
          let result = res.data.data
          result.watchNum = result.watchNum - 0 > 10000 ? ((result.watchNum - 0) / 10000).toFixed(1) + 'w' :  result.watchNum
          result.guestBookNum = result.guestBookNum - 0 > 10000 ? ((result.guestBookNum - 0) / 10000).toFixed(1) + 'w' :  result.guestBookNum
          result.likeNum = result.likeNum - 0 > 10000 ? ((result.likeNum - 0) / 10000).toFixed(1) + 'w' :  result.likeNum
          this.endInfo = result;
        }
      });
    },
    userEntry(type) {
      let query = {
        liveBroadcastId: Number(this.liveId),
        activityType: type
      };
      live.userEntryOrExitsLiveRoom(query).then(res => {});
    },
    toSendMsg(val) {
      live.addGuestbook(val).then(res => {
        if (res.data.code == 200) {
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: "none"
          });
        }
      });
    },
    //服务器时间戳
    getServerTimeNow() {
      live.queryServerTimeNow().then(res => {
        if (res.data.code == 200) {

          this.newCommentsTime = res.data.data;
          this.userActivebeginTime = res.data.data;
          console.log("newCommentsTime", this.newCommentsTime);
          // setTimeout(() => {
          this.infoTiming = setInterval(() => {
            this.timingGetInfo(res.data.data);
          }, 2000);
          // }, 2000);
        }
      });
    },
    error(res) {
      console.log(res, "------------------237");
    },
    changes(res) {
      console.log(res, "---------------241");
    }
  }
};
</script>

<style lang="scss" scoped>
img {
  display: block;
}
.flex {
  display: flex;
}
/*清除浮动*/
.clearfix {
  zoom: 1;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
}
/* 一行否则出现省略号 */
.line-clamp1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 22px;
}

.lived {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  .bgImg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      // 亮度
      filter: brightness(0.8);
    }
  }
  .liveModel {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(102,102,102,.38);
    .customBack {
      position: absolute;
      left: 12px;
      width: 70%;
      z-index: 2;
      align-items: center;
      .backIcon {
        img {
          width: 18px;
          height: 18px;
        }
      }
      .shopName {
        margin-left: 20px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 30px;
        align-items: center;
        padding: 2px 10px 2px 2px;
        .img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          overflow: hidden; 
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          margin: 0 8px;
          color: #fff;
          flex: 1;
          font-size: 14px;
          padding: 2px 0;
          .num {
            font-size: 12px;
          }
        }
        .toShop {
          background: linear-gradient(
            90deg,
            rgba(255, 135, 125, 1),
            rgba(251, 86, 109, 1)
          );
          padding: 0 8px;
          color: #fff;
          font-size: 14px;
          display: inline-block;
          border-radius: 10px;
          height: 20px;
          line-height: 20px;
        }
      }
    }
  }
  .livePlayer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
  }
}
.masker{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(102,102,102,0.38);
  z-index: 1;
  pointer-events: none;
}
</style>