Huanyuyuehui/pages/product/addGoods/specificationProperties.vue

276 lines
5.8 KiB
Vue
Raw Normal View History

2024-03-21 17:52:58 +08:00
<template>
<view class="container">
<view class="content_input">
<view>规格名称</view>
<view><input type="text" v-model="formData.template_name" placeholder="填写规格名称" placeholder-class="placeholderClass" /></view>
</view>
<view class="content_add" @click="addSingleSpecification">
<text class="iconfont icon-tianjia1"></text>
<span>添加规格属性</span>
</view>
<view v-if="formData.template_value.length > 0">
<view v-for="(item, index) in formData.template_value" :key="index" class="content_message">
<view class="content_message_title">
<view class="title line1">{{item.value}}</view>
<view>
<span class="btn btn_del" @click="formData.template_value.splice(index,1)">删除</span>
<span class="btn btn_edit" @click="editAttr(item,index)">编辑</span>
</view>
</view>
<view class="content_message_content">
<view v-for="(val, i) in item.detail" :key="i">
{{val}}
</view>
</view>
</view>
</view>
<view class="handle">
<view class="handle_button" @click="submit">
保存
</view>
</view>
<specification-attr ref="increaseSpec" :specData="specData" @changeClose="close" @getData="getAttr"></specification-attr>
</view>
</template>
<script>
2024-03-21 18:05:36 +08:00
2024-03-21 17:52:58 +08:00
import { navigateTo } from '../../../libs/uniApi.js';
import specificationAttr from '../components/specificationAttr.vue';
import { specificationAdd, specificationDetail, specificationUpdate } from "@/api/product";
export default {
components: {
specificationAttr
},
data() {
return {
mer_id: '',
template_id: '',
specData: {
showpopup: false,
name: '',
detail: ''
},
formData: {
template_name: '',
template_value: []
},
index: '',
};
},
onLoad(options) {
this.mer_id = options.mer_id
this.template_id = options.template_id
if(this.template_id)this.getSpecData()
},
methods: {
// 添加规格属性
addSingleSpecification() {
this.$set(this, 'index', "");
this.$set(this.specData, 'showpopup', true);
this.$refs.increaseSpec.resetData();
},
getAttr(data){
if(this.index == ""){
this.formData.template_value.push(data);
}else{
this.$set(this.formData.template_value, this.index-1, data);
}
this.$set(this.specData, 'showpopup', false);
},
close() {
this.$set(this.specData, 'showpopup', false);
},
/*获取属性规格值*/
getSpecData(){
let that = this
uni.showLoading({
title: '',
mask: true
});
specificationDetail(that.mer_id, that.template_id).then(res=>{
uni.hideLoading();
that.formData = res.data
}).catch(err => {
return that.$util.Tips({
title: err
});
});
},
submit(){
let that = this
if (!that.formData.template_name) return that.$util.Tips({
title: '请输入规格名称'
});
if (that.formData.template_value.length == 0) return that.$util.Tips({
title: '请添加规格属性'
});
that.template_id ? specificationUpdate(that.mer_id,that.template_id,that.formData)
.then(res=>{
that.$util.Tips({
title: res.message,
icon: 'success'
});
uni.redirectTo({
url: `/pages/product/addGoods/mulSpecification?mer_id=${that.mer_id}`
})
}).catch(err => {
return that.$util.Tips({
title: err
});
}) :
specificationAdd(that.mer_id,that.formData).then(res=>{
that.$util.Tips({
title: res.message,
icon: 'success'
});
uni.redirectTo({
url: `/pages/product/addGoods/mulSpecification?mer_id=${that.mer_id}`
})
}).catch(err => {
return that.$util.Tips({
title: err
});
});
},
/*编辑*/
editAttr(item,index){
this.index = index+1
this.$set(this.specData, 'showpopup', true);
this.$set(this.specData, 'name', item.value);
let str = "";
for(var i=0; i<item.detail.length;i++){
str+=item.detail[i]+"\n"
}
this.$set(this.specData, 'detail', str);
}
}
};
</script>
<style lang="scss" scoped>
.container {
padding-top: 20rpx;
padding-bottom: 130rpx;
}
.content_input {
padding: 32rpx 30rpx;
box-sizing: border-box;
margin: auto;
width: 710rpx;
height: 106rpx;
background: #ffffff;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
> view:nth-child(1) {
font-size: 30rpx;
color: #333333;
}
> view:nth-child(2) {
text-align: right;
}
}
.content_add {
margin: auto;
margin-top: 30rpx;
width: 710rpx;
height: 106rpx;
background: #ffffff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 35rpx;
margin-right: 10rpx;
color: #e93323;
}
span {
color: #e93323;
font-size: 30rpx;
}
}
.content_message {
background: #ffffff;
padding: 32rpx 20rpx 30rpx 20rpx;
width: 710rpx;
margin: auto;
margin-top: 30rpx;
border-radius: 10rpx;
&_title {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #EEEEEE;
padding-bottom: 32rpx;
>view:nth-child(1) {
padding-left: 10rpx;
}
>view:nth-child(2) {
padding-right: 10rpx;
}
.title{
max-width: 460rpx;
}
}
&_content {
padding-top: 30rpx;
}
.btn {
font-size: 26rpx;
margin: 0 20rpx;
position: relative;
}
.btn_del{
color: #999999;
&:after{
content: "";
display: inline-block;
width: 1rpx;
height: 18rpx;
background-color: #BBBBBB;
position: absolute;
top: 11rpx;
right: -20rpx;
}
}
.btn_edit{
margin-right: 10rpx;
color: #E93323;
}
}
.handle {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 126rpx;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
&_button {
width: 690rpx;
height: 86rpx;
background: #E93323;
border-radius: 43rpx;
font-size: 32rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
.placeholderClass {
color: #bbbbbb;
font-size: 30rpx;
}
</style>