mkm
/
shop-applet
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新多规格商品的添加/编辑

This commit is contained in:
weipengfei 2023-11-22 15:47:48 +08:00
parent 91ada60e6f
commit fec01de9c0
2 changed files with 142 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/product/addGood/addGood.vue
View File

@ -545,7 +545,7 @@
// 创建商品
submitCreatedGoods() {
console.log('创建商品');
return console.log('商品规格', this.setFormData.attr);
// return console.log('商品规格', this.setFormData.attr);
console.log('是否推荐', this.$refs.commodityRef.addGoodsSecoundData);
console.log('商品详情', this.$refs.commodityRef.goodsDis, this.$refs.commodityRef.store_name);
if(this.setFormData.spec_type==0){
@ -610,6 +610,8 @@
changeSpecType2(){
this.showSpecType = false;
this.setFormData.spec_type = this.spec_type + '';
this.setFormData.attrValue = [];
this.setFormData.attr = [];
},
// 跳转多规格页面
navToSpecGood(){
@ -621,8 +623,9 @@
attrValue: JSON.parse(JSON.stringify(this.setFormData.attrValue)),
attr: JSON.parse(JSON.stringify(this.setFormData.attr))
});
uni.$once('updateSpecType', (attr)=>{
this.setFormData.attrValue = JSON.parse(JSON.stringify(attr));
uni.$once('updateSpecType', (e)=>{
this.setFormData.attrValue = JSON.parse(JSON.stringify(e.attrValue));
this.setFormData.attr = JSON.parse(JSON.stringify(e.attr));
})
}
})

178
pages/product/addGood/specGood.vue
View File

@ -1,5 +1,5 @@
<template>
<view>
<view class="page">
<view class="mode">
<view class="line">
<view class="title">规格模板</view>
@ -12,7 +12,7 @@
<view class="line-warp">
</view>
<view class="btn-box" @click="test()">
<view class="btn-box" @click="settingSpec()">
<view class="btn">点击设置规格</view>
</view>
<uni-popup ref="modeRef" type="top">
@ -32,6 +32,10 @@
<view class="delete-spec" @click="deleteAttrOne(index)"><uni-icons type="close" color="#f84221"
style="margin-right: 10rpx;"></uni-icons>删除规格</view>
</view>
<view v-if="attr.length==0" style="color: #ccc;height: 220rpx;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view>暂无规格</view>
<view>点击下方按钮添加新规格</view>
</view>
</scroll-view>
<view class="tab">
<view class="add-btn" @click="addSpecOne()">添加新规格</view>
@ -59,7 +63,7 @@
</avatar>
<block v-for="(item,index) in attrValue" :key="item.uuid">
<view class="popup_group head_close">
<view class="popup_group_item " v-for="(value, key) in item.detail" :key="value">
<view class="popup_group_item " v-for="(value, key) in item.detail" :key="key">
<view class="popup_group_item_label">{{key}}</view>
<view class="popup_group_item_value">
<input :value="value" type="text" disabled placeholder="请填写规格名称" />
@ -90,7 +94,7 @@
@updateCode="updateCode" :show_sku="true">
</priceComponent>
</block>
<button class="add_btn" @click="addAttrValue">点击添加规格</button>
<!-- <button class="add_btn" @click="addAttrValue">点击添加规格</button> -->
<view class="submit">
<button class="btn" @click="submitAttr">确认<text>({{attrValue.length}})</text></button>
</view>
@ -116,6 +120,18 @@
return {
attrValue: [],
attr: [],
attr_mode: {
"detail": {},
"sku": "",
"stock": 0,
"image": "",
"bar_code": "",
"cost": "",
"ot_price": "",
"price": "",
"volume": "",
"weight": "",
},
product_id: '',
uuid: '', //选择图片的id
deleteIndex: '', //删除图片下标
@ -133,7 +149,7 @@
this.attr = JSON.parse(uni.getStorageSync('attr') || '[]');
this.getOpenerEventChannel().once('updateAttrValue', (e) => {
e.attrValue.forEach((item, index) => {
item.uuid = index + '-' + Math.floor(Math.random() * 10000);
item.uuid = Date.now() + '-' + Math.floor(Math.random() * 10000);
})
this.attrValue = e.attrValue;
uni.setStorageSync('attrValue', JSON.stringify(e.attrValue));
@ -143,50 +159,85 @@
this.userInfo = this.$store.state.app.userInfo;
if (typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
},
watch: {
attr: {
handler(n, o) {
let arr = this.computeAttr(n);
let t = [];
n.forEach(item=>{
t.push(item.value)
})
this.attrValue.forEach((item)=>{
t.forEach(key=>{
console.log(item.detail[key]);
})
})
console.log(arr);
},
deep: true
}
},
methods: {
updateCode(e) {
console.log(e);
},
// 点击设置规格
test() {
settingSpec() {
this.$refs.modeRef.open();
},
// 添加规格二级
addSpecTow(index) {
this.attrDetail = '';
this.addAttrType = 1;
this.changeAttr = index;
this.$refs.inputModeRef.open();
},
// 添加规格一级
addSpecOne() {
this.attrName = '';
this.attrDetail = '';
this.addAttrType = 2;
this.$refs.inputModeRef.open();
},
// 删除规格二级
deleteAttrTow(i, j) {
if(this.attr[i].detail.length<=1){
return this.deleteAttrOne(i); // 当规格的最后一个属性被删除时,直接删除该规格
}
this.attrValue = this.attrValue.filter(item=>{
return !(item.detail[this.attr[i].value] == this.attr[i].detail[j]);
})
this.attr[i].detail.splice(j, 1);
},
// 删除规格一级
deleteAttrOne(i) {
let attr = this.attr[i];
if(this.attr.length==1){ // 如果只有一个规格, 并且删除这个规格时, 直接清空规格
this.$set(this, 'attrValue', []);
this.attr.splice(i, 1);
return ;
}
// 删除多余的规格值
this.attrValue.forEach(item => {
let a = item.sku.split(',');
a = a.filter(e=>e!=item.detail[attr.value]);
item.sku = a.join(',');
delete item.detail[attr.value];
})
// 过滤掉重复的值
this.attrValue = Array.from(new Set(this.attrValue.map(item => item.sku))).map(sku => {
return this.attrValue.find(item => item.sku === sku);
});
this.attr.splice(i, 1);
},
// 添加商品规格卡片
addAttrValueCard(){
let arr = this.computeAttr(this.attr); // 计算出sku的值
let t = [];
let keys = this.attr.map(e => { // 获取规格名称
return e.value;
})
let temp = [];
arr.forEach((sku) => { // 根据sku遍历当前规格数组
if (this.attrValue.find(e => e.sku == sku)) return;
else {
let detail = {};
let t = sku.split(',');
keys.forEach((e, i) => { // 设置detail的值
detail[e] = t[i];
})
temp.push(Object.assign({}, this.attr_mode, {
sku: sku,
detail: detail,
uuid: Date.now() + '-' + Math.floor(Math.random() * 10000) // 重设uuid
})) // 追加数据
}
})
setTimeout(() => {
this.attrValue = [...this.attrValue, ...temp] // 延后追加数据
})
},
// 关闭添加规格
closeAddAttr() {
@ -199,11 +250,11 @@
s.push(item.detail);
})
let t = this.getCombination(s);
// t = t.map(item=>{
// if(typeof item=='object'){
// return item.join(',')
// }else return item;
// })
t = t.map(item => {
if (typeof item == 'object') {
return item.join(',')
} else return item;
})
return t;
},
// 递归计算
@ -224,7 +275,9 @@
},
// 确认添加规格
addAttr() {
if (this.addAttrType == 1) {
this.attrDetail = this.attrDetail.trim();
this.attrDetail = this.attrDetail.trim();
if (this.addAttrType == 1) { // 2级
if (this.attr[this.changeAttr].detail.find(name => name == this.attrDetail)) {
this.closeAddAttr();
this.$nextTick(() => {
@ -233,18 +286,37 @@
} else {
this.attr[this.changeAttr].detail.push(this.attrDetail);
this.closeAddAttr();
setTimeout(()=>{
this.addAttrValueCard();
})
}
} else {
} else { // 1级
if (this.attr.find(item => item.value == this.attrName)) {
this.closeAddAttr();
this.$nextTick(() => {
Toast('该规格已存在')
})
} else {
console.log('添加新规格');
this.attr.push({
value: this.attrName,
detail: [this.attrDetail]
});
if(this.attrValue.length){
this.attrValue.forEach((item) => {
item.detail[this.attrName] = this.attrDetail;
item.sku = item.sku + ',' + this.attrDetail;
})
}
else {
let detail = {};
detail[this.attrName] = this.attrDetail;
this.attrValue.push(Object.assign({}, this.attr_mode, {
sku: this.attrDetail,
detail: detail,
uuid: Date.now() + '-' + Math.floor(Math.random() * 10000)
}))
}
this.closeAddAttr();
}
}
@ -257,22 +329,40 @@
submitAttr() {
if (this.attrValue.length < 1) return Toast('请至少添加一种规格');
let flag = true;
let str = '请填写完整信息';
this.attrValue.forEach((item, index) => {
Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key => {
item[key] = this.$refs.priceRef[index].singleSpecification[key];
})
console.log(item);
if (flag) {
if (item.sku == undefined || item.sku == null || item.sku == '') flag = false;
if (!item.price) flag = false;
if (!item.stock) flag = false;
if (!item.cost) flag = false;
if (!item.procure_price && this.userInfo.mer_info.type_code == 'TypeSupplyChain') flag = false;
if (item.sku == undefined || item.sku == null || item.sku == '') {
flag = false;
str = '规格不能为空';
}
else if (!item.price) {
flag = false;
str = '零售价不能小于等于0';
}
else if (!item.stock) {
flag = false;
str = '库存不能小于等于0';
}
else if (!item.cost) {
flag = false;
str = '成本价不能小于等于0';
}
else if (!item.procure_price && this.userInfo.mer_info.type_code == 'TypeSupplyChain') {
flag = false;
str = '批发价不能小于等于0';
}
}
})
if (!flag) return Toast('请填写完整信息');
if (!flag) return Toast(str);
else {
uni.$emit('updateSpecType', this.attrValue);
uni.$emit('updateSpecType', {
attr: this.attr,
attrValue: this.attrValue
});
uni.navigateBack();
}
},
@ -318,9 +408,9 @@
},
// 添加规格
addAttrValue() {
this.attrValue.push({
uuid: this.attrValue.length + '-' + Math.floor(Math.random() * 10000)
})
this.attrValue.push(Object.assign({}, this.attr_mode, {
uuid: Date.now() + '-' + Math.floor(Math.random() * 10000) // 重设uuid
}))
},
// 预删除
deleteByIndex(index) {
@ -342,6 +432,10 @@
<style lang="scss">
@import './scss/index.scss';
.page{
padding-bottom: 150rpx;
}
.popup_group {
margin-bottom: 0;
}