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

更新多规格添加

This commit is contained in:
weipengfei 2023-11-21 19:13:43 +08:00
parent 4a153ea84c
commit 91ada60e6f
5 changed files with 505 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@ -95,7 +95,7 @@
if (option.referrerInfo?.extraData?.uniMP) {
if (option?.referrerInfo?.extraData?.uniMP) {
uni.setStorageSync('uniMP', option.referrerInfo?.extraData?.uniMP);
// uni.setStorageSync('APP_token', option.referrerInfo?.extraData?.token);
this.$store.commit("LOGIN", {

7
pages/index/index.vue
View File

@ -131,8 +131,8 @@
<view class="list-one_right-b">待发货</view>
</view>
</view>
<view class="" v-for="(g,h) in item.orderProduct">
<view class="list-two">
<view class="">
<view class="list-two" v-for="(g,h) in item.orderProduct">
<view class="list-two_left">
<image :src="g.cart_info.product.image" mode=""></image>
</view>
@ -964,7 +964,6 @@
this.getindex()
this.getGoods(true)
}
merstreet({
street_code: res.data.mer_info.street_id
}).then((res) => {
@ -977,7 +976,7 @@
this.company = res.data.title
this.organization_code = res.data.organization_code
}).catch(res => {
console.log(res)
console.log('错误:', res)
})
});
},

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

@ -43,7 +43,7 @@
<!-- 商品详情 -->
<commodityComponent ref="commodityRef" v-if="showCommodity" :key="showCommodity" :showCommodity="showCommodity"
:product_id="product_id" :merId="merId" :code="code" @lastStep="lastStep">
:product_id="product_id" :merId="merId" :code="code">
</commodityComponent>
<view class="popup_group">
@ -93,11 +93,14 @@
show-cancel-button confirm-text="继续" @confirm="changeSpecType2" @cancel="showSpecType=false"
></u-modal>
</picker>
<priceComponent v-if="setFormData.spec_type==0" ref="priceRef" :product_id="product_id" :bar_code="code" @updateCode="updateCode">
<priceComponent v-if="setFormData.spec_type==0" :datas="setFormData.attrValue[0]" ref="priceRef" :product_id="product_id" :bar_code="code" @updateCode="updateCode">
</priceComponent>
<view v-else class="popup_group" style="margin-top: 0;border-top: 1rpx solid #eeeeee;">
<view class="popup_group_item" @click="navToSpecGood()">
<view class="popup_group_item_label" style="flex: 1; text-align: center;">设置多规格</view>
<view class="popup_group_item_label" style="flex: 1; text-align: center;">
设置多规格
<text v-if="setFormData.attrValue.length>0">({{setFormData.attrValue.length}})</text>
</view>
</view>
</view>
@ -134,7 +137,7 @@
</view>
<view class="radio">
<view class="radio_label ">送货方式</view>
<checkbox-group class="select_group flex_start" @change="deliveryWayChange">
<checkbox-group class="select_group flex_start">
<label class="radio_select" v-for="(val, i) in deliveryFreeList" :key="val.value">
<view>
<checkbox :value="val.value" disabled :checked="val.value" />
@ -153,11 +156,6 @@
<view class="handle_button" @click="submitCreatedGoods">提交</view>
</view>
<uni-popup ref="tempId" type="bottom">
<linkage-assembly selectProductTitle="选择运费模板" :form="setFormData" :classifiedData="classified['temp_id']"
:selectProductItem="productItem" :mer_id="merId" @getLinkageData="getTempIdData" @multipleList="multipleList"
@close="$refs.tempId.close()" @scrolltolower="scrolltolower"></linkage-assembly>
</uni-popup>
<!-- 图片选择器 -->
<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
@ -261,7 +259,9 @@
this.showCommodity = true;;
this.initData();
this.initClasiffy();
this.initDataEditData();
if(this.product_id){
this.initDataEditData();
}
},
onBackPress() {},
onShow() {
@ -545,9 +545,12 @@
// 创建商品
submitCreatedGoods() {
console.log('创建商品');
return console.log('商品规格', this.setFormData.attr);
console.log('是否推荐', this.$refs.commodityRef.addGoodsSecoundData);
console.log('商品详情', this.$refs.commodityRef.goodsDis, this.$refs.commodityRef.store_name);
console.log('价格库存', this.$refs.priceRef.singleSpecification);
if(this.setFormData.spec_type==0){
console.log('价格库存', this.$refs.priceRef.singleSpecification);
}
let postData = {
...this.setFormData,
...this.$refs.commodityRef.addGoodsSecoundData,
@ -556,8 +559,10 @@
image: this.$refs.commodityRef.goodsDis?.imageList || []
},
video_link: this.$refs.commodityRef.addGoodsSecoundData.video_link,
attrValue: [this.$refs.priceRef.singleSpecification]
};
if(this.setFormData.spec_type==0){
postData.attrValue = [this.$refs.priceRef.singleSpecification];
}else postData.attrValue = this.setFormData.attrValue;
postData.stock = postData.attrValue[0]?.stock||0;
// return console.log('商品数据', postData);
Loading();
@ -612,7 +617,13 @@
url:'/pages/product/addGood/specGood?product_id=' + this.product_id,
success: (e) => {
// console.log(this.setFormData.attrValue, e);
e.eventChannel.emit('updateAttrValue', this.setFormData.attrValue);
e.eventChannel.emit('updateAttrValue', {
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));
})
}
})
}

4
pages/product/addGood/components/price.vue
View File

@ -26,7 +26,7 @@
data() {
return {
singleSpecification: {
sku: '', //名称
// sku: '', //名称
price: '', // 售价
cost: '', // 成本价
stock: '', // 库存
@ -35,7 +35,7 @@
bar_code: '', // 商品条码
weight: '', // 重量
volume: '', // 体积
image: '',
// image: '',
extension_one: '',
extension_two: ''
},

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

@ -1,40 +1,101 @@
<template>
<view>
<avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
<view class="mode">
<view class="line">
<view class="title">规格模板</view>
<view class="input">
<view>点击选择模板</view>
<uni-icons type="right"></uni-icons>
</view>
<view class="btn">添加模板</view>
</view>
<view class="line-warp">
</view>
<view class="btn-box" @click="test()">
<view class="btn">点击设置规格</view>
</view>
<uni-popup ref="modeRef" type="top">
<view class="mode-ref" style="min-height: 300rpx;width: 100%;background-color: #fff;">
<view style="height: 1rpx;"></view>
<scroll-view scroll-y style="max-height: 550rpx;min-height: 220rpx;">
<view class="mode-item" v-for="(item, index) in attr" :key="item+index">
<view class="mode-head">{{item.value}}</view>
<view class="mode-body">
<view class="box mode-body-box" v-for="(t, i) in item.detail" :key="t+i"
@click="deleteAttrTow(index, i)">
{{t}}<uni-icons type="close" color="#f84221" style="margin-left: 10rpx;"></uni-icons>
</view>
<view class="box mode-body-add" @click="addSpecTow(index)"><uni-icons type="plus" color="#333"
style="margin-right: 10rpx;"></uni-icons>添加</view>
</view>
<view class="delete-spec" @click="deleteAttrOne(index)"><uni-icons type="close" color="#f84221"
style="margin-right: 10rpx;"></uni-icons>删除规格</view>
</view>
</scroll-view>
<view class="tab">
<view class="add-btn" @click="addSpecOne()">添加新规格</view>
<view class="save">保存模板</view>
</view>
</view>
</uni-popup>
<uni-popup ref="inputModeRef" type="center">
<view class="input-mode">
<view class="head-tips">{{addAttrType==1?'添加规格值': '添加新规格'}}</view>
<view class="input-box">
<input v-if="addAttrType==2" v-model="attrName" placeholder="请输入规格名称" />
<input v-model="attrDetail" placeholder="请输入规格值" />
</view>
<view class="show-btn-box">
<view class="cof prai" @click="addAttr()">确认</view>
<view class="can" @click="closeAddAttr()">取消</view>
</view>
</view>
</uni-popup>
</view>
<avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx"
selHeight="250upx">
</avatar>
<block v-for="(item,index) in attrValue" :key="item.uuid">
<view class="popup_group">
<view class="popup_group_item head_close">
<view class="popup_group_item_label"><text style="color: #e93323;font-size: 28rpx;">{{'* '}}</text>规格名称</view>
<view class="popup_group_item_value"><input v-model="item.sku" type="text"
placeholder="请填写规格名称" /></view>
<view class="delete_btn" @click="deleteByIndex(index)">
<image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
<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_label">{{key}}</view>
<view class="popup_group_item_value">
<input :value="value" type="text" disabled placeholder="请填写规格名称" />
</view>
</view>
<view class="delete_btn" @click="deleteByIndex(index)">
<image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
</view>
<view class="popup_group_item">
<view class="popup_group_item_label">规格图片</view>
<view style="width: 120rpx;height: 120rpx;position: relative;">
<block v-if="item.image">
<image @click="clk(item.uuid)" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" :src="item.image"></image>
<image @click="clk(item.uuid)" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;"
:src="item.image"></image>
<view class="close-icon" @click="deleteImage(item)">
<image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
</view>
</block>
<view v-else style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;border-radius: 10rpx;">
<image @click="clk(item.uuid)" style="height: 60rpx;width: 60rpx;" src="../static/images/creamer.png"></image>
<view v-else
style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;border-radius: 10rpx;">
<image @click="clk(item.uuid)" style="height: 60rpx;width: 60rpx;" src="../static/images/creamer.png">
</image>
</view>
</view>
</view>
</view>
<priceComponent ref="priceRef" :product_id="product_id" :datas="item" :bar_code="item.bar_code" @updateCode="updateCode" :show_sku="true">
<priceComponent ref="priceRef" :product_id="product_id" :datas="item" :bar_code="item.bar_code"
@updateCode="updateCode" :show_sku="true">
</priceComponent>
</block>
<button class="add_btn" @click="addAttrValue">点击添加规格</button>
<view class="submit">
<button class="btn" @click="submitAttr">确认</button>
<button class="btn" @click="submitAttr">确认<text>({{attrValue.length}})</text></button>
</view>
<u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false" @confirm="deleteAttr()"></u-modal>
<u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false"
@confirm="deleteAttr()"></u-modal>
</view>
</template>
@ -42,55 +103,178 @@
import priceComponent from "./components/price.vue";
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import { TOKENNAME, HTTP_REQUEST_URL } from '@/config/app.js';
import { Toast } from "../../../libs/uniApi";
import { Toast } from "../../../libs/uniApi";
import {
specificationUpdate
} from "@/api/product.js"
export default {
components:{
components: {
priceComponent,
avatar
},
data(){
return{
data() {
return {
attrValue: [],
attr: [],
product_id: '',
uuid: '', //选择图片的id
deleteIndex: '', //删除图片下标
showDelete: false,
userInfo: {}
userInfo: {},
addAttrType: 1, // 规格类型, 1为添加规格值, 2为添加新规格
attrName: '', // 规格名称
attrDetail: '', // 规格值
changeAttr: 0, // 选中的规格
}
},
onLoad(options) {
this.product_id = options.product_id;
this.attrValue = JSON.parse(uni.getStorageSync('attrValue')||'[]');
this.getOpenerEventChannel().once('updateAttrValue', (e)=>{
e.forEach((item, index)=>{
item.uuid=index + '-' + Math.floor(Math.random() * 10000);
this.attrValue = JSON.parse(uni.getStorageSync('attrValue') || '[]');
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);
})
this.attrValue = e;
uni.setStorageSync('attrValue', JSON.stringify(e));
this.attrValue = e.attrValue;
uni.setStorageSync('attrValue', JSON.stringify(e.attrValue));
this.attr = e.attr;
uni.setStorageSync('attr', JSON.stringify(e.attr));
})
this.userInfo = this.$store.state.app.userInfo;
if(typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
if (typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
},
methods:{
updateCode(e){
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() {
this.$refs.modeRef.open();
},
// 添加规格二级
addSpecTow(index) {
this.addAttrType = 1;
this.changeAttr = index;
this.$refs.inputModeRef.open();
},
// 添加规格一级
addSpecOne() {
this.addAttrType = 2;
this.$refs.inputModeRef.open();
},
// 删除规格二级
deleteAttrTow(i, j) {
this.attr[i].detail.splice(j, 1);
},
// 删除规格一级
deleteAttrOne(i) {
this.attr.splice(i, 1);
},
// 关闭添加规格
closeAddAttr() {
this.$refs.inputModeRef.close();
},
// 获取产品的组合
computeAttr(arr) {
let s = [];
arr.forEach(item => {
s.push(item.detail);
})
let t = this.getCombination(s);
// t = t.map(item=>{
// if(typeof item=='object'){
// return item.join(',')
// }else return item;
// })
return t;
},
// 递归计算
getCombination(arr) {
if (arr.length === 1) {
return arr[0];
}
var result = [];
var first = arr[0];
var rest = arr.slice(1);
for (var i = 0; i < first.length; i++) {
var subResult = this.getCombination(rest);
for (var j = 0; j < subResult.length; j++) {
result.push([first[i]].concat(subResult[j]));
}
}
return result;
},
// 确认添加规格
addAttr() {
if (this.addAttrType == 1) {
if (this.attr[this.changeAttr].detail.find(name => name == this.attrDetail)) {
this.closeAddAttr();
this.$nextTick(() => {
Toast('该规格已存在')
})
} else {
this.attr[this.changeAttr].detail.push(this.attrDetail);
this.closeAddAttr();
}
} else {
if (this.attr.find(item => item.value == this.attrName)) {
this.closeAddAttr();
this.$nextTick(() => {
Toast('该规格已存在')
})
} else {
this.attr.push({
value: this.attrName,
detail: [this.attrDetail]
});
this.closeAddAttr();
}
}
},
// 保存模板
saveAttrMode() {
},
// 提交数据
submitAttr(){
submitAttr() {
if (this.attrValue.length < 1) return Toast('请至少添加一种规格');
let flag = true;
this.attrValue.forEach((item,index)=>{
Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key=>{
item[key]=this.$refs.priceRef[index].singleSpecification[key];
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.price<=0)flag=false;
if(item.stock<=0)flag=false;
if(item.cost<=0)flag=false;
if(item.procure_price<=0&&this.userInfo.mer_info.type_code=='TypeSupplyChain')flag=false;
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(!flag)return Toast('请填写完整信息')
if (!flag) return Toast('请填写完整信息');
else {
uni.$emit('updateSpecType', this.attrValue);
uni.navigateBack();
}
},
// 选择图片
clk(uuid) {
@ -117,7 +301,7 @@ import { Toast } from "../../../libs/uniApi";
},
success: (uploadFileRes) => {
let imgData = JSON.parse(uploadFileRes.data)
let item = this.attrValue.find(item=>item.uuid==this.uuid);
let item = this.attrValue.find(item => item.uuid == this.uuid);
item.image = imgData.data.path;
},
complete(res) {
@ -133,18 +317,18 @@ import { Toast } from "../../../libs/uniApi";
item.image = '';
},
// 添加规格
addAttrValue(){
addAttrValue() {
this.attrValue.push({
uuid: this.attrValue.length + '-' + Math.floor(Math.random() * 10000)
})
},
// 预删除
deleteByIndex(index){
deleteByIndex(index) {
this.deleteIndex = index;
this.showDelete = true;
},
// 删除规格
deleteAttr(){
deleteAttr() {
this.attrValue.splice(this.deleteIndex, 1);
this.showDelete = false;
}
@ -156,74 +340,255 @@ import { Toast } from "../../../libs/uniApi";
</script>
<style lang="scss">
@import './scss/index.scss';
.popup_group{
margin-bottom: 0;
}
.popup_group_item{
border-bottom: 1rpx solid #eee;
padding-left: 18rpx !important;
.close-icon{
position: absolute;
top: 0;
right: 0;
width: 30rpx;
height: 30rpx;
border-radius: 10rpx;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(#000, 0.4);
color: #fff;
@import './scss/index.scss';
.popup_group {
margin-bottom: 0;
}
}
.head_close{
position: relative;
.popup_group_item {
border-bottom: 1rpx solid #eee;
padding-left: 18rpx !important;
.close-icon {
position: absolute;
top: 0;
right: 0;
width: 30rpx;
height: 30rpx;
border-radius: 10rpx;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(#000, 0.4);
color: #fff;
}
.delete_btn{
position: absolute;
top: -15rpx;
right: -15rpx;
width: 40rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
color: #fff;
border-radius: 50%;
}
}
.add_btn{
width: 710rpx;
margin: 28rpx auto;
margin-bottom: 160rpx;
font-size: 30rpx;
padding: 28rpx;
color: #333;
}
.submit{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 20rpx 0;
.head_close {
position: relative;
.delete_btn {
position: absolute;
top: -15rpx;
right: -15rpx;
width: 40rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
color: #fff;
border-radius: 50%;
}
.btn{
width: 694rpx;
height: 80rpx;
margin: 0 auto;
background: #e93323;
border-radius: 43px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #ffffff;
}
}
.add_btn {
width: 710rpx;
margin: 28rpx auto;
margin-bottom: 160rpx;
font-size: 30rpx;
padding: 28rpx;
color: #333;
}
.submit {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 20rpx 0;
.btn {
width: 694rpx;
height: 80rpx;
margin: 0 auto;
background: #e93323;
border-radius: 43px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #ffffff;
}
}
.mode {
width: 100%;
background-color: #fff;
.line {
padding: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
.btn {
background-color: #f84221;
color: #fff;
width: 140rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
}
.input {
flex: 1;
padding: 0 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.line-warp {
padding: 0 28rpx;
display: flex;
}
.btn-box {
padding: 20rpx 28rpx;
display: flex;
justify-content: center;
border-top: 1rpx solid #eee;
}
.mode-ref {
.mode-item {
margin: 20rpx;
border: 1rpx solid #eee;
border-radius: 10rpx;
font-size: 26rpx;
position: relative;
overflow: hidden;
.mode-head {
padding-top: 20rpx;
padding-left: 20rpx;
font-size: 32rpx;
font-weight: bold;
}
.mode-body {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
padding-left: 0;
.box {
padding: 10rpx 20rpx;
border: 1px solid #f84221;
margin-left: 20rpx;
border-radius: 10rpx;
margin-bottom: 10rpx;
background-color: rgba(#f84221, 0.1);
color: #f84221;
display: flex;
justify-content: center;
align-items: center;
}
.mode-body-add {
border: 1rpx solid #ddd;
background-color: #fff;
color: #333;
}
}
.delete-spec {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
background-color: #eee;
padding: 5rpx;
border-radius: 0 0 0 10rpx;
color: #f84221;
}
}
.tab {
padding: 20rpx;
border-top: 1rpx solid #eee;
display: flex;
font-size: 28rpx;
.add-btn {
flex: 1;
background-color: #f84221;
color: #fff;
padding: 10rpx;
text-align: center;
border-radius: 10rpx;
}
.save {
color: #333;
border: 1rpx solid #ddd;
padding: 10rpx;
text-align: center;
border-radius: 10rpx;
margin-left: 20rpx;
}
}
}
.input-mode {
width: 694rpx;
padding: 28rpx;
font-size: 28rpx;
border-radius: 10rpx;
background-color: #fff;
.head-tips {
font-size: 32rpx;
font-weight: bold;
text-align: center;
padding-bottom: 20rpx;
}
.input-box {
input {
height: 80rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
border: 1rpx solid #ddd;
padding: 0 20rpx;
border-radius: 10rpx;
}
}
.show-btn-box {
width: 100%;
display: flex;
justify-content: space-between;
.cof,
.can {
height: 80rpx;
line-height: 80rpx;
width: 300rpx;
text-align: center;
border: 1rpx solid #ddd;
border-radius: 10rpx;
}
.prai {
background-color: #f84221;
border: 1rpx solid #f84221;
color: #fff;
}
}
}
}
</style>