SelectGoods.vue

<template>
  <!-- 选择商品规格 -->
  <div class="livedSelectionSpe">
    <div class="aaa" :style="{ 'z-index': show ? 999 : -999 }">
      <div class="bg" v-if="show" @click="close"></div>
      <div class="goodsMess" :style="{
        'bottom': show ? 0 : '',
        'padding-bottom': isIphonex ? '34px' : 0
      }">
        <div class="sku">
          <!-- 关闭按钮 -->
          <div class="close" @click="closeDia">
            <van-icon name="cross" />
          </div>
          <!-- 内容 -->
          <div class="cont flex">
            <div class="pic">
              <img width="100%" height="100%" :src="product_goods_info.goodsImgUrl" alt />
            </div>
            <div class="content">
              <div class="price" v-if="product_goods_info.discountPrice">
                <div>￥{{ product_goods_info.discountPrice }}</div>
                <div v-if="product_goods_info.singleItemActivityId">
                  <p class="delPrice">￥{{ product_goods_info.originalPrice }}</p>
                  <!-- <del style="color:#666;">￥{{product_goods_info.originalPrice}}</!-->
                </div>
                <div
                  v-else-if="product_goods_info.discountPrice - 0 < product_goods_info.goodsSuggestedRetailPrice - 0">
                  <p class="delPrice">￥{{ product_goods_info.goodsSuggestedRetailPrice }}</p>
                  <!-- <del style="color:#666;">￥{{product_goods_info.goodsSuggestedRetailPrice}}</del> -->
                </div>
              </div>
              <template v-else-if="minSale < maxSale">
                <div class="price">￥{{ minSale }}-￥{{ maxSale }}</div>
                <p class="delPrice"
                  v-if="(minSale - 0 < minSuggestedRetailPrice - 0) && (maxSale - 0 < maxSuggestedRetailPrice - 0)">
                  ￥{{ minSuggestedRetailPrice }}-￥{{ maxSuggestedRetailPrice }}
                </p>
                <!-- <del
                      v-if="(minSale-0<minSuggestedRetailPrice-0)&&(maxSale-0<maxSuggestedRetailPrice-0)"
                    >￥{{minSuggestedRetailPrice}}-￥{{maxSuggestedRetailPrice}}</del> -->
              </template>
              <template v-else>
                <div class="price">￥{{ minSale }}</div>
              </template>
              <div class="num" v-if="product_goods_info.oversoldFlag == 1 && isGetMixId">库存充足</div>
              <div class="num" v-else-if="product_goods_info.oversoldFlag != 1 && isGetMixId">
                库存{{ product_goods_info.sellMaxQty }}件</div>
              <div class="Choice" v-if="isChoice && !nonstandardGoods">【请选择规格】</div>
              <div class="Choice line-clamp1" v-else>
                <span v-for="(item, index) in goodsGuige" :key="index">{{ item }}&nbsp;&nbsp;&nbsp;</span>
              </div>
            </div>
          </div>
          <div class="commoditySty">
            <ul>
              <li v-for="(ProductItem, n) in goodsGuiges" :key="n">
                <div class="property">{{ ProductItem.specificationName }}</div>
                <div class="specification clearfix">
                  <div v-for="(oItem, index) in ProductItem.specificationValue" :key="index"
                    @click="specificationBtn(oItem.name, n, $event, index)"
                    :class="[oItem.isShow ? '' : 'soldOut', subIndex[n] == index ? 'active' : '']"
                    class="specification-item">
                    <div>{{ oItem.name }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="buyQty flex">
            <div class="ti">购买数量</div>
            <van-stepper :value="buyQty"
              :step="product_goods_info.plusPurchaseMultiple"
              :min="product_goods_info.productMinCount > 0 ? product_goods_info.productMinCount : 1" :max="MaxQtyNum"
              :disable-input="true" @change="changeQty" input-class="ipt" />
          </div>
        </div>
        <div v-if="!goodsLowerShelf && !sellOut" class="bottom flex">
          <div class="addCart van-button" @click="onAddCartClicked">加入购物车</div>
          <div class="toPay van-button" @click="onBuyClicked">立即购买</div>
        </div>
        <div v-else-if="!goodsLowerShelf && sellOut" class="goodsStand">商品已售罄</div>
        <div v-else class="goodsStand">商品已下架</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
import goods from "@/api/goods";
const app = getApp();
export default {
  name: "",
  data() {
    return {
      show: false,
      productInfoId: "",
      minSale: "",
      maxSale: "",
      goodsImg: "",
      minSuggestedRetailPrice: "",
      maxSuggestedRetailPrice: "",
      goodsLowerShelf: false,
      product_goods_info: {
        afterSaleContent: "",
        goodsImgUrl: "",
        maxQty: "",
        pdtName: "",
        productGoodsId: "",
        productGoodsMixId: "",
        productId: "",
        referencePrice: "",
        marketPrice: "",
        oversoldFlag: Number,
        originalPrice: "",
        sellMaxQty: "",
        limitQty: "",
        specifications: [], //原规格
        discountPrice: "",
        plusPurchaseMultiple: 1,
      },
      buyQty: 1,
      goodsGuige: [],
      // 对应商品所有规格
      goodsGuiges: [],
      // 规格转json对象
      goodsString: {},
      // 规格对象
      choose: {},
      MaxQtyNum: 0,
      isGetMixId: false, // 是否取价格
      isChoice: true, //显示“请选择规格”
      getProductInfos: [], //产品信息数组
      getProductInfo: {}, //产品信息
      isSingle: false, //是否为单规格商品
      saleStatus: 1, //销售状态,
      goodsStand: 1, //上下架,
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      isLogin: false, //是否登录
      nonstandardGoods: false, //无规格商品
      selectedPrice: "", // 选中的规格价格
      isChoice: true, //显示“请选择规格”
      productUrl: "", // 产品主图
      sellOut: false, //售罄及无库存且不是超卖
      isGetMixId: false, // 是否取价格
      paramData: "", //埋点数据
      maxSelectedPrice: 0, //  限时特惠选中规格后划线价
      allSellOut: false, //全部售罄标识
      isDefault: false,
    };
  },
  components: {},
  computed: {
    isIphonex() {
      const res = wx.getSystemInfoSync();
      return res.model.search('iPhone') != -1 && res.screenHeight >= 812;
    }
  },
  created() { },
  onLoad() { },
  mounted() {
    let _this = this;
    app.openSelectGoods = (val) => {
      console.log("----打开弹窗");
      _this.open(val);
    }
  },
  methods: {
    open(val) {
      wx.showLoading({
        title: '加载中...',
      })
      Object.assign(this.$data, this.$options.data());
      this.productId = val.productId;
      this.productInfoId = val.productId;
      this.terminalProductId = val.terminalProductId;
      this.productName = val.productName;
      if (val.productNature == 5) {
        return wx.showToast({
          title: '电子卡券不可加入购物车',
          icon: 'none',
        });
      }
      if (val.productNature == 3) {
        return wx.showToast({
          title: '会员卡不可加入购物车',
          icon: 'none',
        });
      }
      if (val.productNature == 2) {
        return wx.showToast({
          title: '虚拟商品不可加入购物车',
          icon: 'none',
        });
      }
      live.getProductInfo(this.productId).then(res1 => {
        let res = res1.data;
        if (res.code == 200) {
          this.maxSale = Number(
            res.data.maxSuggestedRetailPrice
          );
          this.minSale = Number(
            res.data.minSuggestedRetailPrice
          );
          this.maxDiscountPrice = Number(
            res.data.maxDiscountPrice
          );
          this.minDiscountPrice = Number(
            res.data.minDiscountPrice
          );
          this.productNature = res.data.productNature;
          this.goodsLowerShelf =
            res.data.saleStatus != 1 ? true : false; //1 上架  0下架  true 下架
          if (
            res.data.productPictures &&
            res.data.productPictures.length > 0
          ) {
            this.goodsImg = DFSImg(
              res.data.productPictures[0].url
            );
          }
          this.showAddShopCartFlag = res.data.showAddShopCartFlag;
          this.productNature = res.data.productNature - 0;
          // 商品开售状态 1：立刻开售，2：定时开售）
          this.saleWay = res.data.saleWay ? res.data.saleWay - 0 : 1;
          this.init(val);
        }
      })
    },
    close() {
      this.show = false;
    },
    // 初始化
    async init(val) {
      let query = {
        productInfoId: val.productId,
        terminalProductId: val.terminalProductId,
      }
      await live
        .getProductGoodsByProductInfo(query)
        .then(res => {
          if (res.data.code == 200) {
            this.getProductInfos = res.data.data;
            this.product_goods_info.productGoodsId = res.data.data[0].productGoodsId;
            this.product_goods_info.goodsId = res.data.data[0].goodsId;
            this.product_goods_info.productGoodsMixId =
              res.data.data[0].productGoodsMixId;
            this.product_goods_info.specifications = res.data.data[0].specifications;
            this.product_goods_info.oversoldFlag = res.data.data[0].oversoldFlag;
            this.product_goods_info.plusPurchaseMultiple = res.data.data[0].plusPurchaseMultiple - 0;
          }
        });
      // 获取商品规格
      let productId = this.productInfoId;
      await live.getProductGoodsSpecifications(productId).then(res => {
        if (res.data.code == 200) {
          this.goodsGuiges = res.data.data;
          console.log(this.goodsGuiges, '------------188')
          //做判断如果只有一套规格，直接添加规格 不用弹出选择规格弹窗直接进行下单 4.8建
          let isSingles = [];
          this.goodsGuiges.forEach((item, index) => {
            if (item.specificationValue.length >= 2) {
              isSingles.push(1);
            }
            if (isSingles.length != 0) {
              this.isSingle = false; //多规格
              this.goodsGuige = [];
              this.subIndex.pop();
            } else {
              this.isSingle = true; // 单规格商品
              this.isChoice = false;
              // this.goodsGuige.push(item.specificationValue[0]);
              this.goodsGuige = [];
              this.subIndex.push(0);
              // 通过mixid取价格
            }
          });
          if (this.isSingle == true) {
            this.getMixId(0);
          } else {
            this.show = true;
          }

          //  规格数据重组
          for (var i = 0; i < this.goodsGuiges.length; i++) {
            for (
              var j = 0;
              j < this.goodsGuiges[i].specificationValue.length;
              j++
            ) {
              this.goodsGuiges[i].specificationValue[j] = {
                name: this.goodsGuiges[i].specificationValue[j],
                isShow: true
              };
            }
          }

          // console.log(this.specifications,'-------------规格')
          this.getProductInfos.forEach((item, index) => {
            item.twoSpecifications = [];
            item.specifications.forEach((item1, index1) => {
              item.specifications.splice(index1, 1, item1.specificationValue);
              item.twoSpecifications.splice(
                index1,
                1,
                item1.specificationValue
              );
            });
            item.specifications = item.specifications.join("abab@&*");
          });
          for (var i in this.getProductInfos) {
            this.shopItemInfo[
              this.getProductInfos[i].specifications
            ] = this.getProductInfos[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
          }
          let defaultnoSellOut=this.getProductInfos.filter((item,index)=>{return !((item.oversoldFlag==0&&item.saleQty-0<=0)||item.saleStatus=='0')});
          // 默认选中一个只有一个未售罄的规格
          // this.defaultSelection(defaultnoSellOut[0].twoSpecifications,this.goodsGuiges);
          if (defaultnoSellOut.length == 1) {
            // 默认选中一个只有一个未售罄的规格
            this.defaultSelection(defaultnoSellOut[0].twoSpecifications, this.goodsGuiges);
          }
          if (this.goodsGuiges.length == 1) {
            this.goodsGuiges[0].specificationValue.forEach((item, index) => {
              for (var i in this.shopItemInfo) {
                if (item.name == i && this.shopItemInfo[i].saleStatus == "0") {
                  item.isShow = false;
                }
                if (
                  item.name == i &&
                  this.shopItemInfo[i].oversoldFlag == 0 &&
                  this.shopItemInfo[i].saleQty - 0 <= 0
                ) {
                  item.isShow = false;
                }
              }
            });
          }
          // this.checkItem();
        } else if (res.data.code == -1) {
          this.isSingle = true;
          this.nonstandardGoods = true;
          this.goodsGuige = [];
          this.getMixId(0);
        }
      });
    },
    changeQty(event) {
      console.log(event.mp.detail, '------------------------------279')
      this.buyQty = event.mp.detail;
      this.getMixId(1, true);
    },
    // 默认选中一组规格
    // 两个参数goodsSpc,allSpc  sku及所有规格
    defaultSelection(goodsSpc, allSpc) {
      // 是默认调取getMixid接口状态
      this.isDefault = true;
      // console.log(goodsSpc,'-------371')
      // console.log(allSpc,'-------372')
      for (let i = 0; i < allSpc.length; i++) {
        for (let j = 0; j < allSpc[i].specificationValue.length; j++) {
          for (let k = 0; k < goodsSpc.length; k++) {
            if (allSpc[i].specificationValue[j].name == goodsSpc[k]) {
              this.specificationBtn(allSpc[i].specificationValue[j].name, i, null, j);
              break;
            }
          }
        }
      }
    },
    onAddCartClicked() {
      let productGoodsId = this.product_goods_info.productGoodsId;
      if (
        this.goodsGuige.length < this.goodsGuiges.length ||
        this.checkGoodsGuigeValue()
      ) {
        wx.showToast({
          title: '请选择规格',
          icon: 'none',
        })
      } else if (
        this.product_goods_info.oversoldFlag == 0 &&
        this.product_goods_info.sellMaxQty <= 0
      ) {
        wx.showToast({
          title: '商品暂无库存',
          icon: 'none',
        })
      } else {
        live
          .addCart([{ productGoodsId: productGoodsId, qty: this.buyQty }])
          .then(res => {
            if (res.data.code == 200) {
              wx.showToast({
                title: '加入成功',
                icon: 'success',
              })
              // 新华优选埋点
              if (app.trackEvent) {
                goods.queryProductInformation(this.getProductInfos[0].productId).then(res => {
                  if (res.data.code == 200) {
                    let productCode = res.data.data.productCode;
                    if (typeof productCode === 'string') productCode = productCode.trim();
                    app.trackEvent('resourceCartClick', {
                      resourceId: productCode,
                      resourceName: res.data.data.productName
                    });
                  }
                })
              }
              this.show = false;
            } else {
              wx.showToast({
                title: res.data.msg,
                icon: 'none',
              })
            }
          });
      }
    },
    // 立即购买
    onBuyClicked() {
      if (
        this.goodsGuige.length < this.goodsGuiges.length ||
        this.checkGoodsGuigeValue()
      ) {
        wx.showToast({
          title: '请选择规格',
          icon: 'none',
        })
      } else if (
        this.product_goods_info.oversoldFlag == 0 &&
        this.product_goods_info.sellMaxQty <= 0
      ) {
        wx.showToast({
          title: '商品暂无库存',
          icon: 'none',
        })
      } else {
        let query = {};
        query.productGoodsMixId = this.product_goods_info.productGoodsMixId;
        query.productGoodsId = this.product_goods_info.productGoodsId;
        query.goodsId = this.product_goods_info.goodsId;
        query.qty = this.buyQty;
        query.goodsString = JSON.stringify(this.goodsString);
        query.maxQty = this.product_goods_info.maxQty;
        query.productMinCount = this.product_goods_info.productMinCount;
        query.plusPurchaseMultiple = this.product_goods_info.plusPurchaseMultiple;
        query.fromLived = 1;
        query.liveId = this.liveId;
        this.show = false;
        // 将规格转化为json字符串
        this.backPath = `/order/orderConfirm`;
        wx.reLaunch({
          url: `../index/main?from=livedToOrderConfirm&backpath=${this.backPath
            }&params=${JSON.stringify(query)}`
        })
      }
    },
    // 取价格
    getMixId(val, getNewPrice) {
      if (!this.isDefault) {
        wx.showLoading({
          title: '加载中...',
        })
      }
      this.isDefault = false;
      this.isGetMixId = true; 
      let productGoodsMixId = this.product_goods_info.productGoodsMixId
      live
        .getProductGoodsByMixId(productGoodsMixId)
        .then(res => {
          this.show = true;
          wx.hideLoading()
          if (res.data.code == 200) {
            if (this.nonstandardGoods == false) {
              res.data.data.specifications.forEach((item, index) => {
                if (item.specificationPictureUrl != "") {
                  this.product_goods_info.goodsImgUrl = DFSImg(
                    item.specificationPictureUrl,
                    400,
                    400
                  );
                }
              });
              if (this.product_goods_info.goodsImgUrl == "") {
                this.productUrl = res.data.data.productUrl || "";
                this.product_goods_info.goodsImgUrl =
                  DFSImg(res.data.data.productUrl, 400, 400) || "";
              }
            } else {
              this.productUrl = res.data.data.productUrl || "";
            }
            this.product_goods_info.goodsImgUrl =
              DFSImg(res.data.data.productUrl, 400, 400) || DFSImg("", 400, 400);
            this.product_goods_info.marketPrice = Number(res.data.data.marketPrice);
            this.product_goods_info.originalPrice = Number(res.data.data.originalPrice);
            this.product_goods_info.discountPrice = Number(res.data.data.discountPrice);
            this.product_goods_info.sellMaxQty = Number(res.data.data.sellMaxQty); //可销售库存
            this.product_goods_info.limitQty = Number(res.data.data.limitQty); //  实际库存
            this.product_goods_info.productMinCount = Number(res.data.data.productMinCount); //最小购买数  0不限
            this.product_goods_info.maxQty = Number(res.data.data.maxQty); // 最大购买数   0不限
            this.product_goods_info.oversoldFlag = res.data.data.oversoldFlag; // 1超卖 0不超卖
            this.product_goods_info.goodsSuggestedRetailPrice =
              Number(res.data.data.goodsSuggestedRetailPrice);
            this.product_goods_info.singleItemActivityId =
              res.data.data.singleItemActivityId || '';
            this.product_goods_info.plusPurchaseMultiple =
              res.data.data.plusPurchaseMultiple - 0 || 1;
            if (!getNewPrice) {
              this.buyQty =
                this.product_goods_info.productMinCount > 0 ? this.product_goods_info.productMinCount : 1;
            }
            if (
              this.product_goods_info.oversoldFlag != 1 &&
              this.product_goods_info.sellMaxQty - 0 <= 0
            ) {
              this.sellOut = true;
              // console.log(this.sellOut, "cg416");
            } else {
              this.sellOut = false;
            }
            this.getMaxQtyNum(); //更新最大值
            this.$forceUpdate();
          }
        });
    },
    checkGoodsGuigeValue() {
      for (let i = 0; i < this.goodsGuige.length; i++) {
        if (
          this.goodsGuige[i] == "" ||
          this.goodsGuige[i] == "undefined" ||
          this.goodsGuige[i] == undefined
        ) {
          return true;
        }
      }
      return false;
    },
    getMaxQtyNum() {
      let num = 0;
      if (this.product_goods_info.maxQty == "0") {
        //无限制
        if (this.product_goods_info.oversoldFlag == "0") {
          //不允许超卖
          num = this.product_goods_info.sellMaxQty;
        } else {
          num = 999;
        }
      } else {
        if (
          this.product_goods_info.sellMaxQty > this.product_goods_info.maxQty
        ) {
          num = this.product_goods_info.sellMaxQty;
        } else {
          num = this.product_goods_info.maxQty;
        }
      }
      this.MaxQtyNum = num;
    },
    specificationBtn(item, n, event, index) {
      this.isChoice = false;
      if (this.goodsGuige[n] != item) {
        this.goodsGuige[n] = item;
        // this.goodsGuige[n] = item;
        this.subIndex[n] = index;
        this.subIndex.splice(n, 1, index);
      } else {
        this.goodsGuige[n] = "";
        this.subIndex[n] = -1; //去掉选中的颜色
        this.subIndex.splice(n, 1, -1); //去掉选中的颜色
        this.product_goods_info.discountPrice = null;
        this.goodsStand = 1;
        let isChoice = 0;
        // this.product_goods_info.goodsImgUrl=DFSImg(this.goodsImg,400,400);
        this.product_goods_info.goodsImgUrl =
          this.goodsImg || DFSImg("", 1024, 1024);
        this.sellOut = false;
        this.isGetMixId = false;
        this.goodsGuige.forEach((item, index) => {
          if (item == "") {
            isChoice++;
          }
        });
        if (isChoice == this.goodsGuige.length) {
          this.isChoice = true;
          this.goodsGuige = [];
          isChoice = 0;
        } else {
          this.isChoice = false;
        }
      }
      this.checkItem();
      let noStr = 0;
      this.goodsGuige.forEach((item, index) => {
        if (item != "") noStr++;
      });
      if (noStr == this.goodsGuiges.length) {
        this.getMixId(1);
      }
    },
    checkItem() {
      var option = this.goodsGuiges;
      var result = []; //定义数组存储被选中的值
      // console.log(this.goodsGuiges,"cg524")
      for (var i in option) {
        result[i] = this.goodsGuige[i] ? this.goodsGuige[i] : "";
      }
      for (var i in option) {
        var last = result[i]; //把选中的值存放到字符串last去
        for (var k in option[i].specificationValue) {
          result[i] = option[i].specificationValue[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
          option[i].specificationValue[k].isShow = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
      }
      this.$forceUpdate(); //重绘
    },
    isMay: function (result) {
      for (var i in result) {
        if (result[i] == "") {
          return true; //如果数组里有为空的值，那直接返回true
        }
      }
      // console.log(result,this.goodsGuige,"cg494")
      for (var i in this.shopItemInfo) {
        let newArr = i.split("abab@&*");
        let isTrue = this.isContained(result, newArr);
        if (isTrue == true) {
          // console.log(newArr,i,result,"cg498")
          if (this.goodsGuige.length == this.goodsGuiges.length) {
            let isGoods = this.isContained(this.goodsGuige, newArr);
            if (isGoods == true) {
              this.product_goods_info.productGoodsMixId = this.shopItemInfo[
                i
              ].productGoodsMixId;
              this.product_goods_info.productGoodsId = this.shopItemInfo[
                i
              ].productGoodsId;
              this.product_goods_info.goodsId = this.shopItemInfo[i].goodsId;
            }
          }
          // 判断上下架、售罄
          console.log(
            this.shopItemInfo[i].saleStatus == 0,
            this.shopItemInfo[i].oversoldFlag == 0 &&
            this.shopItemInfo[i].saleQty - 0 <= 0,
            "-------------------703"
          );
          if (
            this.shopItemInfo[i].saleStatus == 0 ||
            (this.shopItemInfo[i].oversoldFlag == 0 &&
              this.shopItemInfo[i].saleQty - 0 <= 0)
          ) {
            return false;
          } else {
            return true;
          }
        }
      }
    },
    isContained(aa, bb) {
      if (
        !(aa instanceof Array) ||
        !(bb instanceof Array) ||
        aa.length < bb.length
      ) {
        return false;
      }
      for (var i = 0; i < bb.length; i++) {
        var flag = false;
        for (var j = 0; j < aa.length; j++) {
          if (aa[j] == bb[i]) {
            flag = true;
            break;
          }
        }
        if (flag == false) {
          return flag;
        }
      }
      return true;
    },
    //   关闭
    closeDia() {
      this.$emit("closeSpeDia");
    }
  }
};
</script>

<style lang="scss" scoped>
.is-iphonex {
  padding-bottom: 34px;  
}

.aaa {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  overflow: hidden;
  justify-content: flex-end;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(#000000, 0.75);
}

.delPrice {
  text-decoration: line-through;
  color: #666;
}

.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;
}

.livedSelectionSpe {
  .goodsMess {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px 8px 0px 0px;
    bottom: -100vh;
    transition: all 0.3s linear;
    background: #fff;
    position: relative;
    overflow-y: auto;

    .sku {
      padding: 8px 10px;
      position: relative;

      .close {
        position: absolute;
        right: 8px;
        top: 8px;
        font-size: 20px;
      }
    }

    .cont {
      width: 100%;
      height: 126px;
      border-bottom: 1px solid #e5e5e5;

      .pic {
        width: 100px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        margin-left: 8px;
        width: 65%;

        .price {
          font-size: 13px;
          font-weight: 400;
          color: #ff4240;
          margin-top: 10px;
        }

        .num,
        .size {
          font-size: 11px;
          font-weight: 400;
          color: rgba(146, 146, 146, 1);
        }

        .size {
          color: rgba(41, 41, 41, 1);
        }

        .Choice {
          width: 100%;
          margin-top: 10px;
          font-size: 14px;
          color: #292929;
        }

        .num,
        .soldout {
          margin-top: 10px;
          margin-bottom: 13px;
        }
      }
    }

    .commoditySty {
      border-bottom: 1px solid #e5e5e5;

      // max-height: 240px;
      // overflow-y: scroll;
      ul {
        height: 100%;

        li {
          height: 100%;

          .property {
            margin: 10px 0;
            font-size: 15px;
          }

          .specification {
            div.specification-item {
              font-size: 15px;
              border: 1px solid #606060;
              border-radius: 4px;
              color: #606060;
              text-align: center;
              padding: 2px 4px;
              float: left;
              margin-right: 6px;
              min-width: 30px;
              margin-bottom: 6px;
              box-sizing: content-box;

              div {
                text-align: left;
                display: inline-block;
              }
            }

            div.active {
              color: #fff;
              background-color: #ff4240;
              border-color: #ff4240;
            }

            div.soldOut {
              background-color: #ccc;
              opacity: 0.4;
              color: #000;
              pointer-events: none;
              border-color: #606060;
            }
          }
        }
      }
    }

    .buyQty {
      margin-top: 10px;
      width: 100%;
      height: 60px;
      justify-content: space-between;

      .ti {
        font-size: 14px;
      }

      /deep/.ipt {
        color: #000 !important;
      }
    }

    .bottom {
      margin-top: 60px;

      .van-button {
        width: 50vw;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
      }

      .toPay {
        background: #ff4240;
        color: #fff;
      }

      .addCart {
        background-color: #fff;
        color: #292929;
      }
    }

    .goodsStand {
      margin-top: 60px;
      background: #606060;
      width: 100%;
      height: 49px;
      text-align: center;
      line-height: 49px;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>