diff --git a/pages/product/components/propertyDetail.vue b/pages/product/components/propertyDetail.vue index 9c7a76f..17da832 100644 --- a/pages/product/components/propertyDetail.vue +++ b/pages/product/components/propertyDetail.vue @@ -1,77 +1,84 @@ diff --git a/pages/product/js/sku.js b/pages/product/js/sku.js index 56cc18b..1273e46 100644 --- a/pages/product/js/sku.js +++ b/pages/product/js/sku.js @@ -1,101 +1,163 @@ -import { ref, computed } from "vue"; -import { onLoad } from "@dcloudio/uni-app"; -import peach from "@/peach"; -import GoodsApi from "@/peach/api/trade/goods"; -import { SPEC_TYPE } from "./config"; +import { ref, computed } from 'vue' +import { onLoad } from '@dcloudio/uni-app' +import peach from '@/peach' +import GoodsApi from '@/peach/api/trade/goods' +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, -}); + specType: true, + specText: SPEC_TYPE[0].label, +}) async function showPropertyList() { - await getGoodsProperty(); - propertyListRef.value.onOpen(); + await getGoodsProperty() + propertyListRef.value.onOpen() } function onRDPickerConfirm(e) { - peach.$store("trade").specType = SPEC_TYPE[e.value[0]].value; - formData.value.specText = SPEC_TYPE[e.value[0]].label; - formData.value.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.specType = SPEC_TYPE[e.value[0]].value } function pickerProperty() { - let index = specType.value ? 1 : 0; - pickerRef.value.onOpen([index]); + let index = specType.value ? 1 : 0 + pickerRef.value.onOpen([index]) } async function onPropertyConfirm(e) { - await getGoodsProperty(); - console.log(e); + await getGoodsProperty() + 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 中 id 相同的属性合并，并去重 + propertyList.value = peach.$store('trade').selectedProperty - console.log(propertyList.value); + console.log(propertyList.value) - // 根据已经选择数据，设置默认选中 - data.forEach((item) => { - // 判断属性是否已经选中 - let propertyParent = propertyList.value.find( - (sitem) => sitem?.id === item.id - ); + // 根据已经选择数据，设置默认选中 + data.forEach((item) => { + // 判断属性是否已经选中 + let propertyParent = propertyList.value.find((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( - (schild) => schild === child.id - ); - console.log(childResult); - child.checked = childResult ? true : false; - }); - } - }); + // 如果属性已经选中，查询子类中是否有选中 + if (item.checked) { + item.propertyValues.forEach((child) => { + let childResult = propertyParent?.children.some((schild) => schild === child.id) + 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.specText = SPEC_TYPE[specType.value ? 1 : 0].label; - skus.value = peach.$store("trade").skus; - if (specType.value) { - getGoodsProperty(); - } - }); + onLoad(() => { + formData.value.specType = specType.value ? true : false + formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label + skus.value = peach.$store('trade').skus + if (specType.value) { + getGoodsProperty() + } + }) } export { - initial, - skus, - pickerRef, - pickerProperty, - propertyListRef, - formData, - onRDPickerConfirm, - onPropertyConfirm, - propertyList, - showPropertyList, - goodsPropertyList, -}; + initial, + skus, + pickerRef, + pickerProperty, + propertyListRef, + formData, + onRDPickerConfirm, + onPropertyConfirm, + propertyList, + showPropertyList, + goodsPropertyList, + changeSubProperty, +} diff --git a/pages/product/sku.vue b/pages/product/sku.vue index 1f80a78..a19143c 100644 --- a/pages/product/sku.vue +++ b/pages/product/sku.vue @@ -1,34 +1,57 @@