feat(商品属性): 多 sku
This commit is contained in:
unknown
parent
3f51efcebe
commit
1c71006dc5
|
|
@ -1,97 +1,108 @@
|
|||
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'
|
||||
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)
|
||||
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 canEdit = computed(() => peach.$store('trade').canEdit)
|
||||
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()
|
||||
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
|
||||
formData.value.specType = SPEC_TYPE[e.value[0]].value;
|
||||
formData.value.specText = SPEC_TYPE[e.value[0]].label;
|
||||
|
||||
// 如果商品规格不一致，则需要重新初始化 sku 列表
|
||||
initSku()
|
||||
initSku();
|
||||
|
||||
peach.$store('trade').specType = SPEC_TYPE[e.value[0]].value
|
||||
peach.$store("trade").specType = SPEC_TYPE[e.value[0]].value;
|
||||
}
|
||||
|
||||
function pickerProperty() {
|
||||
if (canEdit.value) {
|
||||
let index = formData.value.specType ? 1 : 0
|
||||
let index = formData.value.specType ? 1 : 0;
|
||||
|
||||
console.log(index)
|
||||
console.log(index);
|
||||
|
||||
pickerRef.value.onOpen([index])
|
||||
pickerRef.value.onOpen([index]);
|
||||
}
|
||||
}
|
||||
|
||||
async function onPropertyConfirm(e) {
|
||||
await getGoodsProperty()
|
||||
console.log(e)
|
||||
await getGoodsProperty();
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function onConfirm() {
|
||||
console.log(skus.value)
|
||||
console.log(skus.value);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if (propertyList.value) {
|
||||
// 根据已经选择数据，设置默认选中
|
||||
data.forEach((item) => {
|
||||
// 判断属性是否已经选中
|
||||
let propertyParent = propertyList.value.find((sitem) => sitem?.id === item.id)
|
||||
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)
|
||||
child.checked = childResult ? true : false
|
||||
})
|
||||
let childResult = propertyParent?.children.some(
|
||||
(schild) => schild === child.id
|
||||
);
|
||||
child.checked = childResult ? true : false;
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
goodsPropertyList.value = data
|
||||
console.log(goodsPropertyList.value)
|
||||
goodsPropertyList.value = data;
|
||||
} else {
|
||||
goodsPropertyList.value = [];
|
||||
}
|
||||
|
||||
console.log(goodsPropertyList.value);
|
||||
}
|
||||
|
||||
function changeSubProperty() {
|
||||
// 修改子属性状态，需要同步更新 skus 的显示
|
||||
console.log(goodsPropertyList.value)
|
||||
console.log(goodsPropertyList.value);
|
||||
// 过滤父属性 checked 选项，深拷贝避免后面循环改变元数据内容
|
||||
let temp = JSON.parse(JSON.stringify(goodsPropertyList.value.filter((item) => item.checked)))
|
||||
let temp = JSON.parse(
|
||||
JSON.stringify(goodsPropertyList.value.filter((item) => item.checked))
|
||||
);
|
||||
temp.forEach((item) => {
|
||||
item.propertyValues = item.propertyValues.filter((child) => child.checked)
|
||||
})
|
||||
item.propertyValues = item.propertyValues.filter((child) => child.checked);
|
||||
});
|
||||
|
||||
let result = temp.map((item) => {
|
||||
return item.propertyValues.map((child) => ({
|
||||
|
|
@ -99,15 +110,15 @@ function changeSubProperty() {
|
|||
propertyName: item.name,
|
||||
valueId: child.id,
|
||||
valueName: child.name,
|
||||
}))
|
||||
})
|
||||
}));
|
||||
});
|
||||
|
||||
let tempSkus = []
|
||||
let tempSkus = [];
|
||||
|
||||
for (let item of reduceArr(result)) {
|
||||
let obj = {
|
||||
picUrl: '',
|
||||
barCode: '',
|
||||
picUrl: "",
|
||||
barCode: "",
|
||||
price: 0,
|
||||
marketPrice: 0,
|
||||
costPrice: 0,
|
||||
|
|
@ -115,11 +126,11 @@ function changeSubProperty() {
|
|||
weight: 0,
|
||||
volume: 0,
|
||||
properties: item,
|
||||
}
|
||||
tempSkus.push(obj)
|
||||
};
|
||||
tempSkus.push(obj);
|
||||
}
|
||||
|
||||
skus.value = tempSkus
|
||||
skus.value = tempSkus;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -132,8 +143,8 @@ function initSku() {
|
|||
// 单规格
|
||||
if (!formData.value.specType) {
|
||||
let obj = {
|
||||
picUrl: '',
|
||||
barCode: '',
|
||||
picUrl: "",
|
||||
barCode: "",
|
||||
price: 0,
|
||||
marketPrice: 0,
|
||||
costPrice: 0,
|
||||
|
|
@ -143,17 +154,17 @@ function initSku() {
|
|||
properties: [
|
||||
{
|
||||
propertyId: 0,
|
||||
propertyName: '默认',
|
||||
propertyName: "默认",
|
||||
valueId: 0,
|
||||
valueName: '默认',
|
||||
valueName: "默认",
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
skus.value = [obj]
|
||||
skus.value = [obj];
|
||||
} else {
|
||||
// 多规格
|
||||
skus.value = []
|
||||
skus.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,96 +176,108 @@ function initSku() {
|
|||
*/
|
||||
function submitProperty() {
|
||||
try {
|
||||
validateSku(skus.value)
|
||||
peach.$store('trade').skus = skus.value
|
||||
peach.$router.back()
|
||||
validateSku(skus.value);
|
||||
peach.$store("trade").skus = skus.value;
|
||||
peach.$router.back();
|
||||
} catch (e) {
|
||||
console.log(skus.value)
|
||||
console.log(e, '校验失败')
|
||||
console.log(skus.value);
|
||||
console.log(e, "校验失败");
|
||||
}
|
||||
}
|
||||
|
||||
function validateSku(skus) {
|
||||
let warningInfo = '请检查商品各行相关属性配置，'
|
||||
let validateStatue = true
|
||||
let skusValue = skus ?? peach.$store('trade').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)
|
||||
const arg = getValue(sku, rule.name);
|
||||
if (!rule.rule(arg)) {
|
||||
validateStatue = false
|
||||
warningInfo += rule.message
|
||||
break
|
||||
validateStatue = false;
|
||||
warningInfo += rule.message;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!validateStatue) {
|
||||
uni.showToast({
|
||||
title: warningInfo,
|
||||
icon: 'none',
|
||||
icon: "none",
|
||||
duration: 4000,
|
||||
})
|
||||
throw new Error(warningInfo)
|
||||
});
|
||||
throw new Error(warningInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getValue(obj, arg) {
|
||||
const keys = arg.split('.')
|
||||
let value = obj
|
||||
const keys = arg.split(".");
|
||||
let value = obj;
|
||||
for (const key of keys) {
|
||||
if (value && typeof value === 'object' && key in value) {
|
||||
value = value[key]
|
||||
if (value && typeof value === "object" && key in value) {
|
||||
value = value[key];
|
||||
} else {
|
||||
value = undefined
|
||||
break
|
||||
value = undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return value
|
||||
return value;
|
||||
}
|
||||
|
||||
function reduceArr(arr) {
|
||||
return arr.reduce((acc, cur) => {
|
||||
let tempAcc = []
|
||||
let tempAcc = [];
|
||||
|
||||
if (acc.length < 1) {
|
||||
cur.forEach((item, index) => {
|
||||
if (tempAcc[index]) {
|
||||
tempAcc[index].push(item)
|
||||
tempAcc[index].push(item);
|
||||
} else {
|
||||
tempAcc[index] = [item]
|
||||
tempAcc[index] = [item];
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
acc.forEach((item, index) => {
|
||||
cur.forEach((sitem, sindex) => {
|
||||
tempAcc.push([...item, sitem])
|
||||
})
|
||||
})
|
||||
tempAcc.push([...item, sitem]);
|
||||
});
|
||||
});
|
||||
|
||||
if (cur.length < 1) {
|
||||
tempAcc = acc
|
||||
tempAcc = acc;
|
||||
}
|
||||
}
|
||||
return tempAcc
|
||||
}, [])
|
||||
return tempAcc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
const specType = computed(() => peach.$store('trade').goodsInfo?.specType || false)
|
||||
const specType = computed(
|
||||
() => peach.$store("trade").goodsInfo?.specType || false
|
||||
);
|
||||
|
||||
function initial() {
|
||||
onLoad(() => {
|
||||
formData.value.specType = specType.value ? true : false
|
||||
formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label
|
||||
skus.value = JSON.parse(JSON.stringify(peach.$store('trade').skus))
|
||||
formData.value.specType = specType.value ? true : false;
|
||||
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()
|
||||
initSku();
|
||||
}
|
||||
if (specType.value) {
|
||||
getGoodsProperty()
|
||||
getGoodsProperty();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
|
|
@ -274,4 +297,4 @@ export {
|
|||
showPropertyList,
|
||||
goodsPropertyList,
|
||||
changeSubProperty,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue