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

更新多规格添加

This commit is contained in:
weipengfei 2023-11-20 18:38:50 +08:00
parent d8c0bbe9cf
commit 4a153ea84c
3 changed files with 235 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -212,6 +212,7 @@
setFormData: {
store_name: '',
imageList: [],
attrValue: [],
cate_name: '', //平台名称
unit_name: '', //商品单位
cate_id: '', // 平台分类id
@ -317,6 +318,7 @@
initDataEditData() {
this.setFormData = {
imageList: [],
attrValue: [],
specification: '',
image: '', //主图
slider_image: '', // 轮播图
@ -372,9 +374,7 @@
imageList: res.data.content?.image
}
})
// 多规格
if (this.setFormData.spec_type == 1) {
}
// 单规格
if (this.setFormData.spec_type == 0) {
this.$refs.priceRef.setDatas(res.data.attrValue[0]);
}
@ -611,7 +611,8 @@
uni.navigateTo({
url:'/pages/product/addGood/specGood?product_id=' + this.product_id,
success: (e) => {
uni.$emit()
// console.log(this.setFormData.attrValue, e);
e.eventChannel.emit('updateAttrValue', this.setFormData.attrValue);
}
})
}

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

@ -1,6 +1,6 @@
<template>
<view class="container">
<select-form style="border-radius: 10rpx 10rpx 0 0;" :platformClassification="formList" :form="singleSpecification"
<select-form :class="show_sku?'container_input':'border-radius'" :platformClassification="formList" :form="singleSpecification"
@input="input"></select-form>
<view class="more_than" @click="moreThanFlag?selectMoreThan():spliceMoreThan()">
<view v-if="moreThanFlag">更多</view>
@ -22,10 +22,11 @@
components: {
selectForm
},
props: ['product_id', 'bar_code'],
props: ['product_id', 'bar_code', 'datas', 'show_sku'],
data() {
return {
singleSpecification: {
sku: '', //名称
price: '', // 售价
cost: '', // 成本价
stock: '', // 库存
@ -106,27 +107,25 @@
}
},
watch: {
singleSpecification: {
handler(val, old) {
this.singleSpecification = val;
this.$emit('updateCode', val.bar_code);
},
deep: true
},
},
// watch: {
// singleSpecification: {
// handler(val, old) {
// console.log('新', val);
// this.singleSpecification = val;
// },
// deep: true
// },
// },
mounted() {
if (getStorage('addGoodsFormData').image) {
this.singleSpecification.image = getStorage('addGoodsFormData').image;
}
if (getStorage('singleSpecification')) {
Object.keys(this.singleSpecification).forEach(item => {
if (getStorage('singleSpecification')[item]) {
this.singleSpecification[item] = getStorage('singleSpecification')[item]
}
this.singleSpecification.bar_code = this.$props.bar_code + '';
if(this.$props.datas){
// this.singleSpecification = this.$props.datas;
// this.$set(this, 'singleSpecification', this.$props.datas);
Object.keys(this.singleSpecification).forEach((key)=>{
this.singleSpecification[key] = this.$props.datas[key]
})
}
this.singleSpecification.bar_code = this.$props.bar_code + '';
let userInfo = this.$store.state.app.userInfo;
if(typeof userInfo == 'string') userInfo = JSON.parse(userInfo);
// 市级供应链才需填写批发价
@ -160,9 +159,10 @@
spliceMoreThan() {
this.moreThanFlag = true;
// this.formList.splice(!this.$props.product_id ? 2 : 1, this.formList.length);
let len = 4;
if(this.$store.state.app?.userInfo?.mer_info?.type_code=="TypeSupplyChain")
this.formList.splice(4, this.formList.length);
else this.formList.splice(3, this.formList.length);
this.formList.splice(len, this.formList.length);
else this.formList.splice(len-1, this.formList.length);
},
setDatas(data){
this.singleSpecification = data;
@ -217,4 +217,11 @@
border-radius: 43rpx;
}
}
.container_input{
margin-top: 0;
border-radius: 0;
}
.border-radius{
border-radius: 10rpx 10rpx 0 0;
}
</style>

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

@ -1,34 +1,229 @@
<template>
<view>
<block v-for="item in attrValue">
<priceComponent ref="priceRef" :product_id="item.product_id" :bar_code="item.code" @updateCode="updateCode">
<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>
</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>
<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>
</view>
</view>
</view>
<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>
</view>
<u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false" @confirm="deleteAttr()"></u-modal>
</view>
</template>
<script>
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";
export default {
components:{
priceComponent
priceComponent,
avatar
},
data(){
return{
attrValue: [],
product_id: ''
product_id: '',
uuid: '', //选择图片的id
deleteIndex: '', //删除图片下标
showDelete: false,
userInfo: {}
}
},
onLoad(options) {
this.product_id = options.product_id
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 = e;
uni.setStorageSync('attrValue', JSON.stringify(e));
})
this.userInfo = this.$store.state.app.userInfo;
if(typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
},
methods:{
updateCode(e){
console.log(e);
},
// 提交数据
submitAttr(){
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];
})
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)return Toast('请填写完整信息')
},
// 选择图片
clk(uuid) {
this.uuid = uuid;
let avatar = this.$refs.avatar;
avatar.fChooseImg(1, { selWidth: '350upx', selHeight: '350upx', inner: true });
},
doUpload(rsp) {
// console.log(rsp);
let that = this
uni.uploadFile({
url: HTTP_REQUEST_URL + '/api/upload/image/field',
filePath: rsp.path,
name: 'field',
formData: {
'filename': rsp.path,
'name': that.imgName
},
header: {
// #ifdef MP
"Content-Type": "multipart/form-data",
// #endif
[TOKENNAME]: 'Bearer ' + this.$store.state.app.token
},
success: (uploadFileRes) => {
let imgData = JSON.parse(uploadFileRes.data)
let item = this.attrValue.find(item=>item.uuid==this.uuid);
item.image = imgData.data.path;
},
complete(res) {
// console.log(res)
}
});
},
getImgName(name) {
this.imgName = name
},
// 删除图片
deleteImage(item) {
item.image = '';
},
// 添加规格
addAttrValue(){
this.attrValue.push({
uuid: this.attrValue.length + '-' + Math.floor(Math.random() * 10000)
})
},
// 预删除
deleteByIndex(index){
this.deleteIndex = index;
this.showDelete = true;
},
// 删除规格
deleteAttr(){
this.attrValue.splice(this.deleteIndex, 1);
this.showDelete = false;
}
},
onBackPress: () => {
}
}
</script>
<style>
<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;
}
}
.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%;
}
}
.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;
}
}
</style>