livedExplainingCommodities.vue

<template>
  <!-- 讲解商品 -->
  <div class="livedExplainingCommodities">
    <div class="goods clearfix" v-if="!showFixedGoods" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <div
        class="goodsList"
        :class="{isEC:item.upperScreenState==1}"
        v-for="(item,index) in list"
        :key="index"
        @click="toGoodsInfo(item)"
      >
        <!-- <img :src="item.productImgUrl" alt /> -->
        <image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
        <p class="num">{{item.number}}</p>
        <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
      </div>
    </div>
    <!-- 左上角展示讲解中商品 -->
    <div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0&&!isFocusComments">
      <div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index" @click="toGoodsInfo(item)">
        <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
        <image :src="item.productImgUrl" mode="aspectFill" alt=""></image> 
        <div class="price" v-if="item.minPrice">
          <span>￥</span> <span>{{item.minPrice}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
  props: ["updateGoods", "goodsList","isFocusComments"],
  name: "",
  data() {
    return {
      showFixedGoods: false, //展示讲解中商品方式  false底部|true左侧固定
      list: [],
      // 讲解中浮动商品
      fixedGoodsList: [],
      firstCom: true, //首次进入
      liveId: 0,

      fixedGoodsTimer : null, //讲解商品隐藏的定时器

      reserveList : []
    };
  },
  watch: {
    updateGoods() {
      console.log(this.goodsList,'---------------------------------46goodsList')
      this.goodsList.forEach((item,index) => {
        this.$set(this.goodsList[index],'minPrice',Number(item.minPrice).toFixed(2))
      })
      console.log(this.firstCom,'this.firstCom----------')
      if (this.firstCom == true) {
        this.list = [];
        this.firstCom = false;
        let arr1 = [];
        let arr2 = [];
        this.goodsList.forEach((item, index) => {
          if (item.upperScreenState == 1) {
            arr1.push(item);
          } else if (item.upperScreenState == 0 || item.upperScreenState == 2) {
            arr2.push(item);
          }
        });


        
        this.list = [...arr1, ...arr2];
        this.reserveList = arr1;
        console.log(this.list,'--------------------------------this.list1212')
        this.fixedGoodsTimer = setTimeout(() => {
          console.log('这是上屏商品',arr1)
          this.fixedGoodsList = arr1 ? arr1 : [];
          this.showFixedGoods = true;
        }, 5000);
      } else {
        if (!this.equalsObj(this.list, this.goodsList)) {
          let newArr = [];
          newArr = this.goodsList.filter((item, index) => {
            if (item.upperScreenState == 1) {
              return item;
            }
          });
          if (newArr) {
            console.log('这是上屏商品',newArr)
            this.fixedGoodsList = newArr;
          }
        }
      }
    }
  },
  components: {},
  computed: {},
  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]
    }
  },
  onUnload() {
    this.fixedGoodsList = [];
    this.showFixedGoods = false;
  },
  mounted() {},
  methods: {
    
    // 到商品详情
    toGoodsInfo(val) {
      // 点击商品埋点
      let info={
        liveBroadcastId:Number(this.liveId),
        liveBroadcastGoodsId:Number(val.productId),
      }
      live.addLiveUserGoodsByUser(info).then(res=>{});
      let query = {
        fromLived: 1,
        liveId: this.liveId
      };
      let backPath = `/goods/${val.productId}`;
      wx.reLaunch({
        url: `../index/main?from=livedToGoodsInfo&backpath=${
          backPath
        }&params=${JSON.stringify(query)}`
      });
    },
    /**
     * 判断此对象是否是Object类型
     * @param {Object} obj
     */
    isObject(obj) {
      return Object.prototype.toString.call(obj) === "[object Object]";
    },
    /**
     * 判断此类型是否是Array类型
     * @param {Array} arr
     */
    isArray(arr) {
      return Object.prototype.toString.call(arr) === "[object Array]";
    },

    /**
     *  深度比较两个对象是否相同
     * @param {Object} oldData
     * @param {Object} newData
     */
    equalsObj(oldData, newData) {
      // 类型为基本类型时,如果相同,则返回true
      if (oldData === newData) return true;
      if (
        this.isObject(oldData) &&
        this.isObject(newData) &&
        Object.keys(oldData).length === Object.keys(newData).length
      ) {
        // 类型为对象并且元素个数相同

        // 遍历所有对象中所有属性,判断元素是否相同
        for (const key in oldData) {
          if (oldData.hasOwnProperty(key)) {
            if (!this.equalsObj(oldData[key], newData[key]))
              // 对象中具有不相同属性 返回false
              return false;
          }
        }
      } else if (
        this.isArray(oldData) &&
        this.isArray(oldData) &&
        oldData.length === newData.length
      ) {
        // 类型为数组并且数组长度相同

        for (let i = 0, length = oldData.length; i < length; i++) {
          if (!this.equalsObj(oldData[i], newData[i]))
            // 如果数组元素中具有不相同元素,返回false
            return false;
        }
      } else {
        // 其它类型,均返回false
        return false;
      }

      // 走到这里,说明数组或者对象中所有元素都相同,返回true
      return true;
    },
    touchstart(){
      clearTimeout(this.fixedGoodsTimer)
    },
    touchmove(){
      clearTimeout(this.fixedGoodsTimer)
    },
    touchend(){
      this.fixedGoodsTimer = setTimeout(() => {
        this.fixedGoodsList = this.reserveList
        this.showFixedGoods = true;
      },5000)
    },
  }
};
</script>

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

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
}
.livedExplainingCommodities {
  width: 100%;
  padding: 0 12px;
  overflow-x: auto;
  .goods {
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    margin-bottom: 10px;
    .goodsList {
      display: inline-block;
      position: relative;
      width: 30vw;
      height: 30vw;
      border: 1px solid #949494;
      margin-right: 10px;
      overflow: hidden;
      image {
        width: 30vw;
        height: 30vw;
      }
      .num {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 12px;
        background: #666;
        padding: 2px 4px;
        border-bottom-right-radius: 6px;
      }
      .explain {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        font-size: 12px;
        background: #ff3334;
        padding: 2px 4px;
        border-bottom-left-radius: 6px;
      }
    }
  }
  .isEC {
    border-color: #ff3334;
  }
  .fixedGoods {
    position: fixed;
    top: 22vh;
    left: 12px;
    .goodsList {
       width: 78px;
        margin-bottom: 15px;
        border-radius: 2px;
        overflow: hidden;
        position: relative;
        background-color: white;
      image {
        width: 22vw;
        height: 78px;
      }
      .num {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 12px;
        background: #666;
        padding: 2px 4px;
        border-bottom-right-radius: 6px;
      }
      .explain {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 12px;
        background: #ff3334;
        padding: 2px 4px;
        border-bottom-right-radius: 6px;
      }
      .price{
        width: 100%;
        color: #FA7018;
        background: #fff;
        text-align: center;
        height: 21px;
        font-size: 16px;
        line-height: 17px;
      }
    }
  }
}
</style>