xdd-uniapp-new/components/ProductWindow.vue

<template>
  <view>
    <view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
      <view class="textpic acea-row row-between-wrapper">
        <view class="pictrue" @click="previewImg(attr.productSelect.image)">
          <image :src="attr.productSelect.image" class="image" />
        </view>
        <view class="text">
          <view class="money font-color-lightred v12-font-">
            ￥
            <text class="num v12-font-40">{{ attr.productSelect.price }}</text>
            <text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">￥</text>
            <text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attr.productSelect.otPrice }}</text>
            <text class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
            <!-- <text class="stock">库存: {{ attr.productSelect.stock }}</text> -->
          </view>
          <view class="more-t">{{ attr.productSelect.store_name }}</view>
        </view>
        <view class="iconfont icon-guanbi" @click="closeAttr"></view>
      </view>
      <view class="productWinList">
        <view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
          <view class="title">{{ item.attrName }}</view>
          <view class="listn acea-row v12-justify-start">
            <view
              v-for="(itemn, indexn) in item.attrValue"
              :key="indexn"
              :class="{
                'actived': item.index == indexn,
                'disabled': getAttrItemData(itemn.attr).stock === 0
              }"
              class="itemn v12-radius-40"
              @click="tapAttr(indexw, indexn, itemn)"
            >
              {{ itemn.attr }}
                <text v-if="getAttrItemData(itemn.attr).stock === 0" class="less-tag" style="color: #fff !important;">缺货</text>
            </view>
          </view>
        </view>
      </view>
      <view class="cart v12-justify-between v12-align-center">
        <view class="titlev12-dark-text f12-font-32">购买数量</view>
        <view class="carnum acea-row row-left">
          <view style="border-radius: 40rpx  0rpx 0rpx 40rpx" class="cart-btn item reduce  v12-font-36 v12-font-bold v12-white-text v12-dark1 v12-dark1-border" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
          <view class="item v12-font-36 v12-font-bold v12-dark-text cart-btn">{{ cartNum }}</view>
          <view
            style="border-radius:0 40rpx 40rpx 0"
            class="item plus v12-font-bold v12-white-text v12-primary v12-primary-border  v12-font-36 cart-btn"
            :class="
              cartNum >= attr.productSelect.stock
                ? 'on'
                : ''
            "
            @click="CartNumAdd"
          >+</view>
        </view>
      </view>
    </view>
    <view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
  </view>
</template>
<script>
export default {
  name: "ProductWindow",
  props: {
    attr: {
      type: Object,
      default: () => {
        return {
          productAttr: []
        }
      }
    },
    // 使用字符串再转成对象的原因是，当key='2.5g'时，会变成key='2'，导致数据丢失
    productValueStr: {
      type: String,
      default: '{}'
    },
    productValueArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    cartNum: {
      type: Number,
      default: () => 1
    }
  },
  methods: {
	  previewImg:function(imgUrl){
		  uni.previewImage({
		  	urls:[imgUrl]
		  })
	  },
    closeAttr: function() {
      this.$emit("changeFun", { action: "changeattr", value: false })
    },
    CartNumDes: function() {
      this.$emit("changeFun", { action: "ChangeCartNum", value: false })
    },
    CartNumAdd: function() {
      this.$emit("changeFun", { action: "ChangeCartNum", value: 1 })
    },
    getAttrItemData(attr) {
      let result = {
        stock: 0
      }
      if (this.attr.productAttr.length === 1) {
        this.productValueArr.map(item => {
          if (item.attrItemkey === attr) {
            result = item
          }
        })
      } else {
        result.stock = 1
      }
      return result
    },
    tapAttr: function(indexw, indexn, itemn) {
      if (this.getAttrItemData(itemn.attr).stock === 0) {
        return
      }
      // 修改商品规格不生效的原因：
      // H5端下面写法，attr更新，但是除H5外其他端不支持，
      // 尽量避免下面的骚写法，不要在子组件内更新props
      // 这里修改是为了能获取到被选中的属性
      this.attr.productAttr[indexw].index = indexn
      const value = this.getCheckedValue().sort().join(",")
      this.$emit("changeFun", {
        action: "ChangeAttr",
        value: {
          value,
          indexw,
          indexn
        }
      })
    },
    // 获取被选中属性
    getCheckedValue: function() {
      const productAttr = this.attr.productAttr
      const value = []
      for (let i = 0; i < productAttr.length; i++) {
        for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
          if (productAttr[i].index === j) {
            value.push(productAttr[i].attrValueArr[j])
          }
        }
      }
      return value
    }
  }
}
</script>
<style scope>
  .itemn{
    margin: 28rpx 0 0 34rpx !important;
    width: auto;
  }
  .money{
    margin-top: 0 !important
  }
  .actived{
    border-color: #C52733 !important;
    color: #fff !important;
    background: #C52733
  }
  .cart-btn{
    height:52rpx !important;
    width:52rpx !important
  }
  .less-tag{
    position: absolute;
    background: #FF5562;
    border-radius: 8rpx;
    height: 38rpx;
    line-height: 38rpx;
    right: -15px;
    top: -10px;
    padding: 0 3px;
    font-size: 24rpx;
    font-weight:400
  }
</style>