yshop-pro-uniapp/components/good-attr-select/good-attr-select.vue

<template>
  <Popup
      ref="popupRef"
      :showCloseable="false"
      @close="emit('close')"
  >
    <view
        class="goodAttrSelect"
    >
      <view
          class="goodAttrSelect-goods"
          v-if="curAttr"
      >
        <uv-image
            class="attr-image"
            :src="curAttr.image || storeInfo.image"
            width="150rpx"
            height="150rpx"
        ></uv-image>
        <view class="attr-info">
          <view class="name">
            {{ storeInfo.storeName }}
          </view>
          <view class="attr-info-bottom">
            <!-- 普通SKU -->
            <template v-if="actionType==='singleBuy' || !curAttr.campaignType">
              <view class="price">¥{{ curAttr.price }}</view>
              <view class="stock">库存：{{ curAttr.stock }}</view>
            </template>
            <!-- 活动SKU -->
            <template v-else>
              <view class="flex flex-ai__end">
                <view
                    class="price-name"
                    v-if="curAttr.campaignState===1">{{ activityName }}
                </view>
                <view class="price primary-color">¥{{ curAttr.campaignPrice }}</view>
                <view class="old-price">￥{{ curAttr.price }}</view>
              </view>
              <view class="stock">库存：{{ curAttr.campaignStock }}</view>
            </template>
          </view>
        </view>
      </view>
      <!-- 没有选中sku -->
      <view
          class="goodAttrSelect-goods"
          v-else
      >
        <uv-image
            class="attr-image"
            :src="storeInfo.image"
            width="150rpx"
            height="150rpx"
        ></uv-image>
        <view class="attr-info">
          <view class="name">
            {{ storeInfo.storeName }}
          </view>
          <view class="attr-info-bottom">
            <view class="price">¥{{ storeInfo.price }}</view>
            <view class="stock">库存：{{ storeInfo.stock }}</view>
          </view>
        </view>
      </view>

      <div class="line"></div>
      <view
          class="goodAttrSelect-attr row"
          v-if="curAttr"
      >
        <view class="goodAttrSelect-attr-title">
          数量
        </view>
        <view class="goodAttrSelect-attr-content">
          <!-- cart number -->
          <view
              class="cart-num flex flex-ai__center flex-jc__sb"
              @click.stop=""
          >
            <view
                class="button"
                :class="storeNum <= 1 && 'disabled'"
                @click="handleCartNumberChange(curAttr,'minus')"
            >
              <uv-icon
                  name="minus"
                  color="#333"
                  size="24rpx"
              ></uv-icon>
            </view>
            <view class="input">
              <input
                  type="number"
                  inputmode="numeric"
                  v-model="storeNum"
                  @blur="(e)=>handleCartNumberInputChange(e,curAttr)"
                  @input="(e)=>cartNumberInput(e,curAttr)"
              >
            </view>
            <view
                class="button"
                :class="storeNum >= curAttr.stock && 'disabled'"
                @click="handleCartNumberChange(curAttr,'plus')"
            >
              <uv-icon
                  name="plus"
                  color="#333"
                  size="24rpx"
              ></uv-icon>
            </view>
          </view>
        </view>
      </view>
      <div class="line"></div>

      <view
          class="goodAttrSelect-attr"
          v-for="(item, index) in productAttr"
          :key="index"
      >
        <view class="goodAttrSelect-attr-title">
          {{ item.attrName }}
        </view>
        <view class="goodAttrSelect-attr-content">
          <space
              wrap="warp"
              gap>
            <view
                :class="{ attr: true, check: selectedAttr[index] === attr,disabled:checkAttrDisable(index,attr)}"
                v-for="(attr, attrIndex) in item.attrValueArr"
                :key="attrIndex"
                @tap="handleSelectAttr(index, attr)"
            >{{ attr }}
            </view>
          </space>
        </view>
      </view>
      <view class="goodAttrSelect-action">
        <uv-button
            :disabled="!curAttr || curAttr&&curAttr.stock===0 || storeNum===0"
            round
            block
            type="primary"
            @tap="handleSubmit"
        >
          确定
        </uv-button>
      </view>
    </view>
  </Popup>
</template>

<script setup>
import {computed, nextTick, ref, toRefs} from 'vue';
import { useInterface } from "@/hooks/useInterface";
import Popup from '@/components/Popup/index.vue';
// ====================== hooks ============================
const {toast} = useInterface()

// ====================== 组件相关 ============================
const emit = defineEmits(['select', 'close'])
/**
 * @property goodsDetail 商品详情
 * @property skuId sku打开时默认sku
 */
const props = defineProps({
  goodsDetail: {
    type: Object,
  },
  skuId: {
    type: [String, Number],
  }
})
const {goodsDetail, skuId} = toRefs(props)

// ======================= 数据相关 ==============================
const storeInfo = computed(() => goodsDetail.value.storeInfo) // 商品信息
const productAttr = computed(() => goodsDetail.value.productAttr) // 商品sku attr细腻些
const productValue = computed(() => goodsDetail.value.productValue) // 商品sku value信息
const activityName = computed(() => {
  if (!curAttr.value) return ''
  return ['拼团价', '秒杀价', '折扣价'][curAttr.value.campaignType - 1]
})

// ======================= sku 操作相关 ==========================
const selectedAttr = ref([]) // 当前选中sku的attr key信息
const curAttr = ref(null) // 当前选中的sku

/**
 * 检查是否为disable
 * @param attrRowIndex
 * @param attr
 * @return {boolean}
 */
function checkAttrDisable(attrRowIndex, attr) {
  // 模拟当前值选中
  const selectedAttrMock = JSON.parse(JSON.stringify(selectedAttr.value))
  selectedAttrMock[attrRowIndex] = attr
  const filterAttrMock = selectedAttrMock.filter(i => i);
  // 如果不是最后一次选择属性，构不成sku比较，直接return false
  if (filterAttrMock.length < productAttr.value.length) return false
  const mockNameStr = filterAttrMock.filter(i => i)
  for (const skuName in productValue.value) {
    if (skuName.includes(mockNameStr)) {
      const sku = productValue.value[skuName]
      const trueStock = sku.campaignState === 1 ? sku.campaignStock : sku.stock // 真实库存 （区分活动和普通）
      // ！！！从有库存的开始查，不要从没库存的直接break
      // 只要有一条includes且库存大于0就直接break
      if (trueStock > 0) return false
    }
  }
  return true
}

/**
 * 设置默认sku选中
 */
function handleSetDefaultSkuSelect() {
  const skuList = productValue.value
  // 遍历sku的对象数组，匹配到id相同的项
  if (skuId.value) {
    for (const skuName in skuList) {
      const sku = skuList[skuName]
      const trueStock = sku.campaignState === 1 ? sku.campaignStock : sku.stock // 真实库存 （区分活动和普通）
      if (sku.id === skuId.value && trueStock > 0) {
        // 设置默认选中
        selectedAttr.value = skuName.split(',')
        curAttr.value = sku
        break;
      }
    }
  }
  // 如果没有找到，那就默认选中sku的第一个、
  if (selectedAttr.value.filter(i => i).length <= 0) {
    const skuNameList = Reflect.ownKeys(skuList)
    if (skuNameList.length > 0) {
      let defaultSku, defaultSkuName
      for (const skuName of skuNameList) {
        const sku = skuList[skuName];
        const trueStock = sku.campaignState === 1 ? sku.campaignStock : sku.stock // 真实库存 （区分活动和普通）
        if (trueStock > 0) {
          defaultSku = sku
          defaultSkuName = skuName
          break;
        }
      }
      if (defaultSku) {
        selectedAttr.value = defaultSkuName.split(',')
        curAttr.value = defaultSku
      }
    }
  }
  handleSetStoreNum()
}

/**
 * sku选中
 * @param attrRowIndex sku属性row索引
 * @param attrItemName sku选中的item的名称（object的key）
 */
const handleSelectAttr = (attrRowIndex, attrItemName) => {
  if (checkAttrDisable(attrRowIndex, attrItemName)) return toast({title: "商品抢完啦~看看其他的吧"})
  curAttr.value = undefined
  if (selectedAttr.value[attrRowIndex] && selectedAttr.value[attrRowIndex] === attrItemName) {
    selectedAttr.value[attrRowIndex] = ''
    return;
  }
  selectedAttr.value[attrRowIndex] = attrItemName
  if (selectedAttr.value.filter(i => i).length === productAttr.value.length) {
    curAttr.value = productValue.value[selectedAttr.value.join(',')]
    // 设置库存
    handleSetStoreNum()
  }
}


/**
 * 提交
 */
const handleSubmit = () => {
  if (!curAttr.value) return;
  if (curAttr.value.stock === 0 && storeNum.value === 0) return
  emit('select', {
    store: curAttr.value,
    num: storeNum.value
  })
  close()
}

// ========================== 数量相关 ===========================

const storeNum = ref(1) // 数量

/**
 * 用户手动输入改变数量
 * @param e
 * @param item
 * @returns {*}
 */
function handleCartNumberInputChange(e, item) {
  const value = Number(e.detail.value)
  const trueStock = item.campaignState === 1 ? item.campaignStock : item.stock // 真实库存 （区分活动和普通）
  if (value <= 0) {
    storeNum.value = 1
  } else if (value > trueStock) {
    storeNum.value = trueStock
  } else {
    storeNum.value = value.toString().replace(/^0+/, '')
  }
}

/**
 *  购买数量验证
 */
function cartNumberInput(e, item){
  const pattern = /^0+|[.]*/g;
  nextTick(() => {
    storeNum.value = e.detail.value.replace(pattern,'');
  })
}

/**
 * 用户点击购物车+-改变数量
 * @param item
 * @param type
 * @returns {*}
 */
function handleCartNumberChange(item, type = 'plus') {
  const trueStock = item.campaignState === 1 ? item.campaignStock : item.stock // 真实库存 （区分活动和普通）
  if (type === 'plus') {
    if (storeNum.value + 1 > trueStock) {
      storeNum.value = trueStock
    } else {
      storeNum.value += 1
    }

  } else {
    if (storeNum.value - 1 <= 0) {
      storeNum.value = 1
    } else {
      storeNum.value -= 1
    }
  }
}

/**
 * 设置选中数量
 * 当sku发生改变的时候需要调用
 */
const handleSetStoreNum = () => {
  if (!curAttr.value) return storeNum.value = 0
  if (storeNum.value === 0 && curAttr.value.stock > 0) {
    storeNum.value = 1
  }
  if (storeNum.value > curAttr.value.stock) {
    storeNum.value = curAttr.value.stock
  }
}

// ========================= 弹窗相关 ============================
const popupRef = ref()
const actionType = ref('select') //  select:普通选择 cart:购物车选择 buy:普通下单 activeBuy:活动下单 singleBuy:单独购买
/**
 * 打开弹窗
 * @param cartNum
 * @param action 打开弹窗类型
 */
const open = (cartNum = 1, action = 'select') => {
  actionType.value = action
  storeNum.value = cartNum || 1
  const attrLength = productAttr.value.length
  selectedAttr.value = new Array(attrLength).fill('')
  handleSetDefaultSkuSelect()
  popupRef.value.show()
}

const close = () => {
  curAttr.value = null
  emit('close')
  popupRef.value.close()
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss">
.goodAttrSelect {
  height: 100%;

  &-goods {
    padding: 40rpx 30rpx;
    display: flex;

    .attr-image {

    }

    .attr-info {
      max-width: calc(100% - 150rpx - 30rpx);
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 30rpx;

      .name {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
      }

      &-bottom {
        display: flex;
        justify-content: space-between;

        .price {
          font-size: 30rpx;
          line-height: 42rpx;
          color: #ee6d46;
          font-weight: bold;
        }

        .price-name {
          background: #ee6d46;
          color: #fff;
          border-radius: 10rpx;
          font-size: 24rpx;
          font-style: italic;
          padding: 3rpx 10rpx;
          margin-right: 5rpx;
        }

        .old-price {
          font-size: 22rpx;
          color: grey;
          text-decoration: line-through;
        }

        .stock {
          font-size: 24rpx;
          line-height: 42rpx;
          color: #666666;
        }
      }
    }
  }

  &-action {
    padding: 20rpx 20rpx;

  }

  &-attr {
    padding: 40rpx 30rpx 10rpx 0;

    &.row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 40rpx;

      .goodAttrSelect-attr-title {
        margin-bottom: 0;
      }
    }

    &-title {
      margin: 0 0 30rpx 30rpx;
    }

    &-content {
    }
  }
}

.line {
  height: 1rpx;
  background: #E6E6E6;
}

.attr {
  height: 68rpx;
  border: 1rpx solid #333333;
  padding: 0 20rpx;
  font-size: 28rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 30rpx 30rpx;

  &.check {
    background: #333333;
    color: #fff;
  }

  &.disabled {
    border: none;
    background: #f5f7fa;
    color: #ccced3;
  }
}

.cart-num {
  font-size: 24rpx;

  .input {
    width: 120rpx;

    input {
      width: 100%;
      text-align: center;
      color: #333;
    }
  }

  .button {
    font-size: 32rpx;
    width: 40rpx;
    height: 40rpx;
    aspect-ratio: 1/1;
    border-radius: 5rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    border: 1px solid #999999;

    &:active {
      scale: 1.2;
    }

    &.disabled {
      border-color: #dddddd;

      :deep(.uv-icon__icon) {
        color: #dddddd !important;
      }

      &:active {
        scale: 1;
      }
    }
  }
}

.gap {
  gap: 20rpx;
}

</style>