feat(sku)：sku 合并

pages/product/components/propertyDetail.vue

@@ -9,8 +9,12 @@
                 <view class="property-value ss-flex ss-gap-40">
                     <view class="property-value-text">规格值</view>
                     <view class="property-value-value ss-flex ss-gap-10">
-            <view v-for="sitem in item.propertyValues" @tap="chooseProperty(item)"
+                        <view
-              :class="['item', sitem.checked ? 'active' : '']">{{ sitem.name }}</view>
+                            v-for="sitem in item.propertyValues"
+                            @tap="chooseProperty(sitem)"
+                            :class="['item', sitem.checked ? 'active' : '']"
+                            >{{ sitem.name }}</view
+                        >
                     </view>
                 </view>
             </view>
@@ -19,8 +23,8 @@
 </template>
 
 <script setup>
-import { defineProps, ref, computed } from 'vue'
+import { defineProps, defineEmits, ref, computed } from 'vue'
-import { goodsPropertyList } from '../js/sku';
+import { goodsPropertyList } from '../js/sku'
 
 const props = defineProps({
     modelValue: {
@@ -33,8 +37,11 @@ const props = defineProps({
     },
 })
 
+const emit = defineEmits(['changeSubProperty'])
+
 function chooseProperty(item) {
     item.checked = !item.checked
+    emit('changeSubProperty')
 }
 </script>
 

pages/product/js/sku.js

@@ -1,89 +1,150 @@
-import { ref, computed } from "vue";
+import { ref, computed } from 'vue'
-import { onLoad } from "@dcloudio/uni-app";
+import { onLoad } from '@dcloudio/uni-app'
-import peach from "@/peach";
+import peach from '@/peach'
-import GoodsApi from "@/peach/api/trade/goods";
+import GoodsApi from '@/peach/api/trade/goods'
-import { SPEC_TYPE } from "./config";
+import { SPEC_TYPE } from './config'
 
-const pickerRef = ref(null);
+const pickerRef = ref(null)
 
 // 多属性商品 sku 列表
-const skus = ref([]);
+const skus = ref([])
 
-const propertyList = ref([]);
+const propertyList = ref([])
 
-const goodsPropertyList = ref([]);
+const goodsPropertyList = ref([])
 
-const propertyListRef = ref(null);
+const propertyListRef = ref(null)
 
 const formData = ref({
     specType: true,
     specText: SPEC_TYPE[0].label,
-});
+})
 
 async function showPropertyList() {
-  await getGoodsProperty();
+    await getGoodsProperty()
-  propertyListRef.value.onOpen();
+    propertyListRef.value.onOpen()
 }
 
 function onRDPickerConfirm(e) {
-  peach.$store("trade").specType = SPEC_TYPE[e.value[0]].value;
+    peach.$store('trade').specType = SPEC_TYPE[e.value[0]].value
-  formData.value.specText = SPEC_TYPE[e.value[0]].label;
+    formData.value.specText = SPEC_TYPE[e.value[0]].label
-  formData.value.specType = SPEC_TYPE[e.value[0]].value;
+    formData.value.specType = SPEC_TYPE[e.value[0]].value
 }
 
 function pickerProperty() {
-  let index = specType.value ? 1 : 0;
+    let index = specType.value ? 1 : 0
-  pickerRef.value.onOpen([index]);
+    pickerRef.value.onOpen([index])
 }
 
 async function onPropertyConfirm(e) {
-  await getGoodsProperty();
+    await getGoodsProperty()
-  console.log(e);
+    console.log(e)
 }
 
 async function getGoodsProperty() {
-  let { data } = await GoodsApi.getHistoryProperty();
+    let { data } = await GoodsApi.getHistoryProperty()
 
     // 把 propertyList 中 id 相同的属性合并，并去重
-  propertyList.value = peach.$store("trade").selectedProperty;
+    propertyList.value = peach.$store('trade').selectedProperty
 
-  console.log(propertyList.value);
+    console.log(propertyList.value)
 
     // 根据已经选择数据，设置默认选中
     data.forEach((item) => {
         // 判断属性是否已经选中
-    let propertyParent = propertyList.value.find(
+        let propertyParent = propertyList.value.find((sitem) => sitem?.id === item.id)
-      (sitem) => sitem?.id === item.id
-    );
 
-    item.checked = propertyParent ? true : false;
+        item.checked = propertyParent ? true : false
 
         // 如果属性已经选中，查询子类中是否有选中
         if (item.checked) {
             item.propertyValues.forEach((child) => {
-        let childResult = propertyParent?.children.some(
+                let childResult = propertyParent?.children.some((schild) => schild === child.id)
-          (schild) => schild === child.id
+                child.checked = childResult ? true : false
-        );
+            })
-        console.log(childResult);
-        child.checked = childResult ? true : false;
-      });
         }
-  });
+    })
 
-  goodsPropertyList.value = data;
+    goodsPropertyList.value = data
+    console.log(goodsPropertyList.value)
 }
 
-const specType = computed(() => peach.$store("trade").goodsInfo.specType);
+function changeSubProperty() {
+    // 修改子属性状态，需要同步更新 skus 的显示
+    console.log(goodsPropertyList.value)
+    // 过滤父属性 checked 选项，深拷贝避免后面循环改变元数据内容
+    let temp = JSON.parse(JSON.stringify(goodsPropertyList.value.filter((item) => item.checked)))
+    temp.forEach((item) => {
+        item.propertyValues = item.propertyValues.filter((child) => child.checked)
+    })
+
+    let result = temp.map((item) => {
+        return item.propertyValues.map((child) => ({
+            propertyId: item.id,
+            propertyName: item.name,
+            valueId: child.id,
+            valueName: child.name,
+        }))
+    })
+
+    let tempSkus = []
+
+    for (let item of reduceArr(result)) {
+        let obj = {
+            picUrl: '',
+            barCode: '',
+            price: 0,
+            marketPrice: 0,
+            costPrice: 0,
+            stock: 0,
+            weight: 0,
+            volume: 0,
+            properties: item,
+        }
+        tempSkus.push(obj)
+    }
+
+    skus.value = tempSkus
+}
+
+function reduceArr(arr) {
+    return arr.reduce((acc, cur) => {
+        let tempAcc = []
+
+        if (acc.length < 1) {
+            cur.forEach((item, index) => {
+                if (tempAcc[index]) {
+                    tempAcc[index].push(item)
+                } else {
+                    tempAcc[index] = [item]
+                }
+            })
+        } else {
+            acc.forEach((item, index) => {
+                cur.forEach((sitem, sindex) => {
+                    tempAcc.push([...item, sitem])
+                })
+            })
+
+            if (cur.length < 1) {
+                tempAcc = acc
+            }
+        }
+        return tempAcc
+    }, [])
+}
+
+const specType = computed(() => peach.$store('trade').goodsInfo.specType)
 
 function initial() {
     onLoad(() => {
-    formData.value.specType = specType.value ? true : false;
+        formData.value.specType = specType.value ? true : false
-    formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label;
+        formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label
-    skus.value = peach.$store("trade").skus;
+        skus.value = peach.$store('trade').skus
         if (specType.value) {
-      getGoodsProperty();
+            getGoodsProperty()
         }
-  });
+    })
 }
 
 export {
@@ -98,4 +159,5 @@ export {
     propertyList,
     showPropertyList,
     goodsPropertyList,
-};
+    changeSubProperty,
+}

pages/product/sku.vue

@@ -1,11 +1,26 @@
 <template>
-  <pb-layout class="goods-property" title="商品属性" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
+    <pb-layout
-    opacityBgUi="bg-white" color="black">
+        class="goods-property"
+        title="商品属性"
+        leftIcon="leftIcon"
+        navbar="normal"
+        :bgStyle="bgStyle"
+        opacityBgUi="bg-white"
+        color="black"
+    >
         <view class="property">
             <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
                 <uni-forms-item label="商品规格" @tap="pickerProperty" name="specType" label-position="left" required>
-          <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
+                    <uni-easyinput
-            :inputBorder="false" v-model="formData.specText" placeholder="请选择商品规格" disabled>
+                        type="text"
+                        :clearable="false"
+                        :styles="selfStyles"
+                        placeholderStyle="color:#8a8a8a"
+                        :inputBorder="false"
+                        v-model="formData.specText"
+                        placeholder="请选择商品规格"
+                        disabled
+                    >
                         <template v-slot:right>
                             <uni-icons type="right" />
                         </template>
@@ -15,8 +30,12 @@
         </view>
         <template v-if="formData.specType">
             <button class="ss-reset-button add-property" @tap="showPropertyList">+添加规格</button>
-      <property-detail v-if="propertyList.length > 0" v-model="propertyList"
+            <property-detail
-        :goodsPropertyList="goodsPropertyList"></property-detail>
+                v-if="propertyList.length > 0"
+                v-model="propertyList"
+                :goodsPropertyList="goodsPropertyList"
+                @changeSubProperty="changeSubProperty"
+            ></property-detail>
             <mutiple-sku :skus="skus"></mutiple-sku>
         </template>
 
@@ -26,8 +45,12 @@
 
         <p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>
 
-    <PropertyList ref="propertyListRef" v-model="propertyList" :goodsPropertyList="goodsPropertyList"
+        <PropertyList
-      @confirm="onPropertyConfirm" />
+            ref="propertyListRef"
+            v-model="propertyList"
+            :goodsPropertyList="goodsPropertyList"
+            @confirm="onPropertyConfirm"
+        />
     </pb-layout>
 </template>
 
@@ -48,7 +71,8 @@ import {
     showPropertyList,
     goodsPropertyList,
     pickerProperty,
-  skus
+    skus,
+    changeSubProperty,
 } from './js/sku'
 
 const bgStyle = {