livedGoodsDia.vue

<template>
  <div class="livedGoodsList">
    <van-popup
      :show="showDia"
      position="bottom"
      custom-style="height: 50vh;border-top-left-radius:10px;border-top-right-radius:10px;"
      :close-on-click-overlay="true"
      @close="closeDia"
    >

      <div class="tit" v-if="list.length>0">
          <span>商品列表</span>
          <span>({{list.length}})</span>
        </div>
        
        <div class="list" v-if="list.length>0">
        
          <div class="item" v-for="(item,index) in list" :key="index" @click="toGoodsInfo(item)">
            <div class="img" >
              <div class="num">{{item.number}}</div>
              <!-- <img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> -->
              <image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
            </div>
            <div class="info">
              <div class="name text-overflow2">{{item.productName}}</div>
              <div class="bottom">
                <div class="price">
                  <div>
                    <span>￥</span>
                    <span>{{item.minPrice}}</span>
                  </div>
                  <!-- <p class="del">
                    <span>￥</span>
                    <span>{{999}}</span>
                  </p>-->
                </div>
                <div class="icon" @click.stop="isLogin(item)">
                  <img src="../../../static/images/lived/shopCart.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      
      
      <div style="text-align:center;font-size:16px;padding-top:10px;" v-else>暂无商品</div>
    </van-popup>
    <!-- 选择规格弹层 -->
    <livedSelectionSpe
      v-if="showSpe"
      :show="showSpe"
      :productInfoId="itemGoods.productId"
      :minSale="itemGoods.minSale"
      :maxSale="itemGoods.maxSale"
      :goodsImg="itemGoods.goodsImg"
      :minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice"
      :maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice"
      :goodsLowerShelf="itemGoods.goodsLowerShelf"
      @closeSpeDia="closeSpeDia"
    ></livedSelectionSpe>
  </div>
</template>

<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
  props:["showDia","updateGoods","goodsList"],
  name: "",
  data() {
    return {
      liveId: 0,
      list: [],
      itemGoods: {}, //选中商品
      showSpe: false
    };
  },
  components: {
    livedSelectionSpe
  },
  watch:{
    updateGoods(){
      this.list=this.goodsList;
      this.list.forEach((item, index) => {
        item.minPrice = Number(item.minPrice).toFixed(2);
      });
    },
  },
  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]
    }
  },
  mounted() {},
  methods: {
    //   关闭
    closeDia() {
      this.$emit("changeStatus");
    },
    // 是否登录
    isLogin(val) {
      let _this = this;
      wx.getStorage({
        key: "sessionid",
        success(res) {
          _this.showSpeDia(val);
        },
        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
          });
        }
      });
    },
    showSpeDia(val) {
      if (val.multiSpecificationFlag != 1) {
        // 不是多规格直接加入购物车
        live
          .addCart([{ productGoodsId: val.productGoodsId, qty: 1}])
          .then(res => {
            if (res.data.code == 200) {
              wx.showToast({
                title: "加入成功",
                icon: "success"
              });
              this.showSize = false;
            } else {
              wx.showToast({
                title: res.data.msg,
                icon: "none"
              });
            }
          });
        return;
      }
      let productId = val.productId;
      this.itemGoods.productId = productId;
      wx.showLoading({
        title: "加载中..."
      });
      live.getProductInfo(productId).then(res => {
        wx.hideLoading();
        if (res.data.code == 200) {
          this.itemGoods.maxSale = Number(
            res.data.data.maxSuggestedRetailPrice
          );
          this.itemGoods.minSale = Number(
            res.data.data.minSuggestedRetailPrice
          );
          this.itemGoods.maxDiscountPrice = Number(
            res.data.data.maxDiscountPrice
          );
          this.itemGoods.minDiscountPrice = Number(
            res.data.data.minDiscountPrice
          );
          this.itemGoods.productNature = res.data.data.productNature;
          this.itemGoods.goodsLowerShelf =
            res.data.data.saleStatus != 1 ? true : false; //1 上架  0下架  true 下架
          if (
            res.data.data.productPictures &&
            res.data.data.productPictures.length > 0
          ) {
            this.itemGoods.goodsImg = DFSImg(
              res.data.data.productPictures[0].url
            );
          }
          this.showSpe = true;
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: "none"
          });
        }
      });
    },
    closeSpeDia() {
      this.showSpe = false;
    },
    // 到商品详情
    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)}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
img{
  display: block;
}
.livedGoodsList {
  .tit {
      font-size: 16px;
      padding: 10px 10px;
    }
  .list {
    overflow-y:auto;
    max-height: 44vh;
    .item {
      padding: 10px 4px;
      display: flex;
      align-items: center;
      padding: 14px;
      box-sizing: border-box;
      border-bottom: 1rpx solid #EEEEED;
      .img {
        width: 70px;
        height: 70px;
        border-radius: 6px;
        overflow: hidden;
        background: #999;
        position: relative;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .num {
          position: absolute;
          top: 0;
          left: 0;
          color: #fff;
          font-size: 12px;
          background: #666;
          padding: 2px 6px;
          border-bottom-right-radius: 6px;
        }
      }
      .info {
        flex: 1;
        height: 80px;
        margin-left: 16px;
        color: #333;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          text-align: left;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: #ff0000;
          }
          .price {
            font-size: 18px;
            .del {
              font-size: 16px;
              text-decoration: line-through;
              span {
                color: #666;
              }
            }
          }
          .icon {
            img{
              width: 30px;
              height: 26px;
            }
          }
        }
      }
    }
  }
}
</style>