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

<template>
  <uv-popup
    ref="popupRef"
    mode="bottom"
    :style="{ height: '50%' }"
    round="round"
  >
    <view
      class="goodAttrSelect"
      v-if="storeInfo"
    >
      <view class="goodAttrSelect-goods">
        <goods
          list
          min
          :storeName="storeInfo.storeName"
          :price="storeInfo.price"
          surplus="200"
          :data="storeInfo"
        />
      </view>

      <div class="line"></div>
      <view class="goodAttrSelect-attr row">
        <view class="goodAttrSelect-attr-title">
          数量
        </view>
        <view class="goodAttrSelect-attr-content">
          <uv-number-box
            v-model="storeNum"
            min="1"
          />
        </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>
            <view
              :class="{ attr: true, check: select[item.attrName] == attr.attr }"
              v-for="(attr, attrIndex) in item.attrValue"
              :key="attrIndex"
              @tap="handleSelectAttr(item.attrName, attr)"
            >{{ attr.attr }}</view>
          </space>
        </view>
      </view>
      <view class="goodAttrSelect-action">
        <uv-button
          round
          block
          type="primary"
          @tap="handleSubmit"
        >
          确定
        </uv-button>
      </view>
    </view>
  </uv-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import { getProductDetail, getProductAddCollect, getProductDelCollect } from '@/api/product'

const props = defineProps(["id"])

const emit = defineEmits(['onSelect', 'submit'])

const popupRef = ref()
const select = ref({})
const visible = ref(false)
const detailData = ref(null)
const storeInfo = ref(null)
const productAttr = ref(null)
const productValue = ref(null)
const storeNum = ref(1)

const selectAttrPanel = ref(false)

const handleGetDetail = async (id) => {

  const detail = await getProductDetail(id)
  if (detail) {
    detailData.value = detail
    storeInfo.value = detail.storeInfo
    productAttr.value = detail.productAttr
    productValue.value = detail.productValue
    let attr = {}
    detail.productAttr.forEach(item => {
      attr[item.attrName] = ''
    })
    select.value = attr
  }
}


const handleSelectAttr = (attr, value) => {
  select.value[attr] = value.attr
}

const handleSubmit = () => {


  let value = []
  productAttr.value.map(item => {
    value.push(select.value[item.attrName] || '')
  })

  if (value.includes('')) {
    uni.showToast({
      title: '请选择规格',
      icon: 'none',
      duration: 2000,
    })
    return
  }



  emit('select', {
    store: productValue.value[value.toString()],
    num: storeNum.value
  })
}

const open = () => {
  popupRef.value.open()
  handleGetDetail(props.id)
}

const close = () => {
  popupRef.value.close()
}


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

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

  &-goods {
    padding: 20rpx 20rpx;
  }

  &-action {
    padding: 20rpx 20rpx;

  }

  &-attr {
    padding: 40rpx 30rpx;

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

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

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

    &-content {}
  }
}

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

.attr {
  height: 68rpx;
  border: 1rpx solid #333333;
  padding: 0 20rpx;
  line-height: 68rpx;

  font-size: 28rpx;

  &.check {
    background: #333333;
    color: #fff;
  }
}
</style>