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, SKU_RULE_CONFIG } from './config' const pickerRef = ref(null) // 多属性商品 sku 列表 const skus = ref([]) // 已选中商品规格的规格属性和值 const propertyList = ref([]) const goodsPropertyList = ref([]) const propertyListRef = ref(null) const canEdit = computed(() => peach.$store('trade').canEdit) const formData = ref({ specType: true, specText: SPEC_TYPE[0].label, }) async function showPropertyList() { await getGoodsProperty() propertyListRef.value.onOpen() } function onRDPickerConfirm(e) { formData.value.specType = SPEC_TYPE[e.value[0]].value formData.value.specText = SPEC_TYPE[e.value[0]].label // 如果商品规格不一致,则需要重新初始化 sku 列表 initSku() } function pickerProperty() { if (canEdit.value) { let index = formData.value.specType ? 1 : 0 pickerRef.value.onOpen([index]) } } async function onPropertyConfirm(e) { await getGoodsProperty() console.log(e) } function onConfirm() { console.log(skus.value) } async function getGoodsProperty() { let { data } = await GoodsApi.getHistoryProperty() // 此处处理商品详情情况下,多规格属性 // 把 propertyList 中 id 相同的属性合并,并去重 propertyList.value = peach.$store('trade').selectedProperty || [] // 根据已经选择数据,设置默认选中 data.forEach((item) => { // 判断属性是否已经选中 let propertyParent = propertyList.value.find((sitem) => sitem?.id === item.id) item.checked = propertyParent ? 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 console.log(goodsPropertyList.value) } 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 } /** * @author Ankkaya * @description 新增商品初始化商品 sku * @param {Type} - * @returns {Type} */ function initSku() { // 单规格 if (!formData.value.specType) { let obj = { picUrl: '', barCode: '', price: 0, marketPrice: 0, costPrice: 0, stock: 0, weight: null, volume: null, properties: [ { propertyId: 0, propertyName: '默认', valueId: 0, valueName: '默认', }, ], } skus.value = [obj] } else { // 初始化已选中规格,属性和格式化后的结果 propertyList.value = [] goodsPropertyList.value = [] // 多规格 skus.value = [] } } /** * @author Ankkaya * @description 确认属性 * @param {Type} - * @returns {Type} */ function submitProperty() { try { validateSku(skus.value) peach.$store('trade').$patch({ skus: skus.value, specType: formData.value.specType, }) peach.$router.back() } catch (e) { console.log(skus.value) console.log(e, '校验失败') } } function validateSku(skus) { let warningInfo = '请检查商品各行相关属性配置,' let validateStatue = true let skusValue = skus ?? peach.$store('trade').skus // 判断如果是多规格,并且 skusValue 为空 [],则提示 if (formData.value.specType && skusValue.length < 1) { uni.showToast({ title: '请选择商品规格', icon: 'none', duration: 4000, }) throw new Error('请选择商品规格') } for (const sku of skusValue) { for (const rule of SKU_RULE_CONFIG) { const arg = getValue(sku, rule.name) if (!rule.rule(arg)) { validateStatue = false warningInfo += rule.message break } } if (!validateStatue) { uni.showToast({ title: warningInfo, icon: 'none', duration: 4000, }) throw new Error(warningInfo) } } } function getValue(obj, arg) { const keys = arg.split('.') let value = obj for (const key of keys) { if (value && typeof value === 'object' && key in value) { value = value[key] } else { value = undefined break } } return value } 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').specType) function initial() { onLoad(() => { formData.value.specType = specType.value formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label skus.value = JSON.parse(JSON.stringify(peach.$store('trade').skus)) // 如果新增商品 sku,并且是单规格,初始化 sku if (!skus.value) { initSku() } if (specType.value) { getGoodsProperty() } }) } export { initial, canEdit, skus, pickerRef, pickerProperty, validateSku, onConfirm, submitProperty, propertyListRef, formData, onRDPickerConfirm, onPropertyConfirm, propertyList, showPropertyList, goodsPropertyList, changeSubProperty, }