v1.0

components/good-attr-select/good-attr-select.vue

@@ -0,0 +1,203 @@
+<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>