<template>
<view class="main">
<view class="header" @click="add_sp_name">
<text class="title">新增规格</text>
<text class="b_q">></text>
</view>
<!-- 新增列表 -->
<view class="list_main">
<view class="list_item" v-for="(i, n) in msg" :key="n">
<view class="list_title">
<text>{{ i.spName }}</text>
<image class="fenlei_xx" src="../../static/ioc/fenlei_xx.png" mode=""></image>
</view>
<view class="list_item_item">
<view class="item_text_main" v-for="(z, q) in i.specValueList" :key="q">
<text
@click="create_meney_store(i.spId, z.spValueId, z.spValueName, n)"
@longpress="delsp(i.spName, z.spValueName, z.spValueId, i.spId)"
class="item_text"
:class="{ active: s_v_id.includes(z.spValueId) }"
>
{{ z.spValueName }}
</text>
</view>
<view class="item_text_main"><text class="item_text" @click="upSpValueMame(i.spId)">自定义</text></view>
</view>
</view>
</view>
<!-- 价格库存 -->
<view class="meney_story">
<view class="meney_story_title"><text>价格/库存</text></view>
<view class="" v-for="(i, index) in quanSpec" :key="index">
<text class="money_story_text">
<text>{{ i.specValueName }}</text>
</text>
<view class="input">
<input v-model="i.specQuanPrice" placeholder="输入价格" type="text" value="" />
<input v-model="i.specQuanStorage" placeholder="输入库存" type="text" value="" />
</view>
</view>
</view>
<button type="primary" class="bao_cun" @click="save">保存</button>
<!-- 弹窗输入 -->
<view class="tan_main" v-show="show_gg">
<view class="tan">
<image @click="colse_tan" class="tan_img" src="../../static/ioc/gg_xx.png" mode=""></image>
<text class="tan_title">新增规格</text>
<input v-model="data1.sp_name" class="tan_input" type="text" placeholder="请输入规格名" value="" />
<text class="yes" @click="add_gg">确认</text>
</view>
</view>
<!-- 分离弹窗 -->
<view class="tan_main" v-show="show_fl">
<view class="tan">
<image @click="colse_tan" class="tan_img" src="../../static/ioc/gg_xx.png" mode=""></image>
<text class="tan_title">添加规格值</text>
<input v-model="data2.sp_value_name" class="tan_input" type="text" placeholder="请输入规格名" value="" />
<text class="yes" @click="add_ggz()">确认</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show_gg: 0, //添加 显示规格弹出窗
show_fl: 0, //添加 显示规格分类弹出窗
data1: {
//规格名
sp_name: ''
},
data2: {
//分类名
sp_value_name: '', //规格值
sp_id: '' //规格id
// sp_value_id :'' //规格值id
},
data3: {
//删除规格分类值
sp_value_name: '',
sp_id: '',
sp_value_id: ''
},
msg: '',
quanSpec: [],
s_id: [], //规格id
s_v_id: [],
list: [
// {id:1,item:[{id:11,name:'200ml'},{id:12,name:'600ml'}]},
// {id:2,item:[{id:21,name:'红色'},{id:22,name:'蓝色'}]}
]
};
},
onLoad() {
this.getdata();
},
methods: {
save() {
console.log(this.quanSpec);
this.$emit('changes', this.quanSpec);
},
// 创建规格
create_meney_store(sid, svalueid, svaluename, n) {
//第一步,建立规格s_id和规格值s_v_id数组,为排序做准备
if (this.s_id.indexOf(sid) == -1) {
this.s_id.push(sid);
this.s_v_id.push(svalueid);
this.list.push({ id: sid, item: [{ id: svalueid, name: svaluename }] });
//console.log('不存在sid就添加'+this.list)
} else {
if (this.s_v_id.indexOf(svalueid) == -1) {
//console.log('存在sid就'+this.list)
let i = this.s_id.indexOf(sid);
this.s_v_id.push(svalueid);
this.list[i].item.push({
id: svalueid,
name: svaluename
});
// console.log(this.list[i])
// console.log(this.list)
} else {
let i = this.s_id.indexOf(sid);
let s = this.s_v_id.indexOf(svalueid);
let w_id = '';
let w_v_id = '';
for (let t = 0; t < this.list.length; t++) {
if (sid == this.list[t].id) {
w_id = t;
for (let e = 0; e < this.list[t].item.length; e++) {
if (svalueid == this.list[t].item[e].id) {
w_v_id = e;
}
}
}
}
console.log(w_id + '值为' + w_v_id);
this.list[w_id].item.splice(w_v_id, 1);
this.s_v_id.splice(s, 1);
if (this.list[w_id].item.length == 0) {
this.list.splice(w_id, 1);
this.s_id.splice(i, 1);
}
console.log(this.list);
}
}
// 第二步,将排序的名字转化对应二维数组
let erwei = new Array();
for (let i = 0; i < this.list.length; i++) {
erwei.push(this.list[i].item);
// [[{id:11,name:'200ml'},{id:12,name:'600ml'}],[{id:21,name:'红色'},{id:22,name:'蓝色'}]]
}
var newAry = [];
for (var i = 0; i < erwei.length; i++) {
var subAry = [];
for (var j = 0; j < erwei[i].length; j++) {
subAry.push(erwei[i][j].name);
}
newAry.push(subAry);
}
//转换成功
//console.log(newAry)
this.printResult(this.Zuhe(newAry));
// 第三步,将排序id转化对应二维数组
var newAry1 = [];
for (var q = 0; q < erwei.length; q++) {
var subAry1 = [];
for (var w = 0; w < erwei[q].length; w++) {
subAry1.push(erwei[q][w].id);
}
newAry1.push(subAry1);
}
this.printResult_id(this.Zuhe(newAry1));
console.log(this.quanSpec);
},
//算法
Zuhe() {
var heads = arguments[0][0];
for (var i = 1, len = arguments[0].length; i < len; i++) {
heads = this.addNewType(heads, arguments[0][i]);
}
return heads;
},
printResult(result) {
// console.log(result)
this.quanSpec = [];
for (var i = 0, len = result.length; i < len; i++) {
console.log(result[i]);
this.quanSpec.push({
specValueId: '', //规格值id
specQuanPrice: '', //价格
specQuanStorage: '', //库存
specValueName: result[i] //名称
});
}
console.log(this.quanSpec);
},
printResult_id(result) {
// console.log(result)
for (var i = 0, len = result.length; i < len; i++) {
console.log(result[i]);
this.quanSpec[i].specValueId = result[i];
}
},
addNewType(heads, choices) {
var result = [];
for (var i = 0, len = heads.length; i < len; i++) {
for (var j = 0, lenj = choices.length; j < lenj; j++) {
result.push(heads[i] + '+' + choices[j]);
}
}
return result;
},
//删除规格名
delsp(spname, spvaluename, spvalueid, spid) {
this.data3.sp_id = spid;
this.data3.sp_value_id = spvalueid;
this.data3.sp_value_name = spvaluename;
uni.showModal({
title: '提示',
content: '是否删除规格 ' + spname + '-->' + spvaluename,
success: res => {
if (res.confirm) {
this.$apis.delSpecName(this.data3).then(res => {
if (res.code == 0) {
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'none'
});
this.getdata();
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//新增规格名
upSpValueMame(code) {
this.show_fl = 1;
this.data2.sp_id = code;
},
//新增规格
add_gg() {
this.$apis.insertSpecName(this.data1).then(res => {
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'none'
});
this.getdata();
this.colse_tan();
this.data1.sp_name = '';
});
},
add_ggz() {
this.$apis.updateSpecName(this.data2).then(res => {
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'none'
});
this.getdata();
this.colse_tan();
this.data2.sp_value_name = '';
});
},
//显示规格弹窗
add_sp_name() {
this.show_gg = 1;
},
//关闭弹窗
colse_tan() {
this.show_fl = 0;
this.show_gg = 0;
},
getdata() {
this.$apis.quanSpValue().then(res => {
this.msg = res.data;
});
}
}
};
</script>
<style>
.fenlei_xx {
height: 28upx;
width: 28upx;
margin-left: 10upx;
}
/* 添加选择 */
.xx {
height: 100upx;
background: #007aff;
}
/* 弹窗 */
.yes {
font-size: 28upx;
color: #3f6bac;
margin-top: 50upx;
}
.tan_input {
font-size: 28upx;
margin-top: 50upx;
}
.tan_img {
height: 28upx;
width: 28upx;
position: absolute;
right: 20upx;
top: 20upx;
}
.tan_title {
font-size: 28upx;
font-weight: bold;
margin-top: 40upx;
}
.tan {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
height: 300upx;
width: 520upx;
background: #ffffff;
margin-top: 200upx;
}
.tan_main {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
/* 保存 */
.bao_cun {
background: #3f6bac;
height: 88upx;
width: 554upx;
border-radius: 88upx;
font-size: 28upx;
line-height: 88upx;
margin: 0 auto;
margin-top: 60upx;
}
/* 价格库存 */
.input input {
border: 1upx solid #999999;
height: 60upx;
width: 170upx;
text-align: center;
border-radius: 15upx;
margin-left: 30upx;
font-size: 28upx;
margin-top: 20upx;
}
.input {
display: flex;
}
.money_story_text {
font-size: 28upx;
color: #999999;
margin-left: 30upx;
}
.meney_story {
margin-top: 80upx;
}
.meney_story_title {
font-size: 28upx;
font-weight: bold;
margin-left: 30upx;
}
/* 列表 */
.list_item {
margin-top: 50upx;
}
.item_text_main {
width: 25%;
display: flex;
justify-content: center;
margin-top: 24upx;
}
.item_text {
height: 60upx;
width: 144upx;
border: 2upx solid #999999;
border-radius: 17upx;
display: block;
text-align: center;
line-height: 60upx;
font-size: 28upx;
color: #999999;
}
.list_item_item {
display: flex;
flex-wrap: wrap;
}
.list_title {
font-size: 28upx;
font-weight: bold;
margin-left: 30upx;
display: flex;
align-items: center;
}
/* 头部 */
.title {
margin-left: 30upx;
}
.b_q {
margin-right: 30upx;
}
.header {
height: 100upx;
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
font-size: 28upx;
font-weight: bold;
}
.active {
border-color: #3f6bac;
color: #3f6bac;
}
</style>