mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-03-26 23:33:17 +00:00
307 lines
7.8 KiB
Vue
307 lines
7.8 KiB
Vue
<template>
|
||
<base-drawer
|
||
mode="right"
|
||
:visible="visible"
|
||
background-color="transparent"
|
||
mask
|
||
maskClosable
|
||
@close="closeDrawer"
|
||
>
|
||
<view class="edit-lable">
|
||
<!-- #ifdef MP -->
|
||
<view class="accountTitle">
|
||
<view :style="{ height: getHeight.barTop + 'px' }"></view>
|
||
<view
|
||
class="sysTitle acea-row row-center-wrapper"
|
||
:style="{ height: getHeight.barHeight + 'px' }"
|
||
>
|
||
<view>添加标签</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
:style="{ height: getHeight.barTop + getHeight.barHeight + 'px' }"
|
||
></view>
|
||
<view
|
||
class="list"
|
||
v-if="isStore"
|
||
:style="
|
||
'height: calc(100% - ' +
|
||
(getHeight.barTop + getHeight.barHeight * 2 + 150) +
|
||
'rpx - constant(safe-area-inset-bottom));height: calc(100% - ' +
|
||
(getHeight.barTop + getHeight.barHeight * 2 + 150) +
|
||
'rpx - env(safe-area-inset-bottom))'
|
||
"
|
||
>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP -->
|
||
<view class="header">添加标签</view>
|
||
<view class="list" v-if="isStore">
|
||
<!-- #endif -->
|
||
<scroll-view scroll-y="true" style="height: 100%">
|
||
<view class="item" v-for="(item, index) in labelList" :key="index">
|
||
<view class="title" v-if="item.list && item.list.length">{{
|
||
item.cate_name
|
||
}}</view>
|
||
<view
|
||
class="listn acea-row row-middle"
|
||
v-if="item.list && item.list.length"
|
||
>
|
||
<view
|
||
class="name acea-row row-center-wrapper"
|
||
:class="{ on: j.disabled }"
|
||
v-for="(j, indexn) in item.list"
|
||
:key="indexn"
|
||
@click="selectLabel(j)"
|
||
>
|
||
<text class="line1">{{ j.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="empty-box" v-else>
|
||
<emptyPage
|
||
title="暂无标签～"
|
||
src="/statics/images/empty-box.png"
|
||
></emptyPage>
|
||
</view>
|
||
<view class="footer acea-row row-between-wrapper">
|
||
<view class="bnt acea-row row-center-wrapper" @tap="reset">重置</view>
|
||
<view class="bnt on acea-row row-center-wrapper" @tap="define"
|
||
>确定</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</base-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
import emptyPage from "@/components/emptyPage.vue";
|
||
import { getProductLabel, postBatchProcess } from "@/api/admin";
|
||
import { handleError } from "vue";
|
||
import baseDrawer from "@/components/tuiDrawer/tui-drawer.vue";
|
||
|
||
export default {
|
||
components: {
|
||
emptyPage,
|
||
baseDrawer,
|
||
},
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
data: function () {
|
||
return {
|
||
// #ifdef MP
|
||
getHeight: this.$util.getWXStatusHeight(),
|
||
// #endif
|
||
labelList: [],
|
||
goodsInfo: {}, //列表中已存在id（固定不变）
|
||
dataLabel: [], //已存在选中id(随着选中可以变化)
|
||
isStore: false, //判断是否存在标签
|
||
num: 0, // 判断是否为批量
|
||
ids: [], //批量时的id集合
|
||
};
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
define() {
|
||
console.log(this.ids);
|
||
let data = {
|
||
label_list: this.dataLabel,
|
||
};
|
||
data.ids = this.ids;
|
||
if (this.num) {
|
||
} else {
|
||
data.ids = this.goodsInfo.id;
|
||
}
|
||
postBatchProcess(data)
|
||
.then((res) => {
|
||
this.$util.Tips({
|
||
title: res.msg,
|
||
});
|
||
this.$emit("successChange");
|
||
})
|
||
.catch((err) => {
|
||
this.$util.Tips({
|
||
title: err,
|
||
});
|
||
});
|
||
},
|
||
reset() {
|
||
this.productLabel(this.goodsInfo, this.num, this.ids);
|
||
},
|
||
inArray: function (search, array) {
|
||
for (let i in array) {
|
||
if (array[i] == search) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
},
|
||
productLabel(data, num, ids) {
|
||
this.dataLabel =
|
||
data.label_list && data.label_list.length
|
||
? data.label_list.split(",")
|
||
: [];
|
||
this.goodsInfo = JSON.parse(JSON.stringify(data));
|
||
this.num = num;
|
||
this.ids = ids;
|
||
getProductLabel()
|
||
.then((res) => {
|
||
res.data.map((el) => {
|
||
if (el.list && el.list.length) {
|
||
this.isStore = true;
|
||
el.list.map((label) => {
|
||
if (this.inArray(label.id, this.dataLabel)) {
|
||
label.disabled = true;
|
||
} else {
|
||
label.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
this.labelList = res.data;
|
||
})
|
||
.catch((err) => {
|
||
this.$util.Tips({
|
||
title: err,
|
||
});
|
||
});
|
||
},
|
||
selectLabel(label) {
|
||
if (label.disabled) {
|
||
let index = this.dataLabel.indexOf(
|
||
this.dataLabel.filter((d) => d == label.id)[0],
|
||
);
|
||
this.dataLabel.splice(index, 1);
|
||
label.disabled = false;
|
||
} else {
|
||
this.dataLabel.push(label.id);
|
||
label.disabled = true;
|
||
}
|
||
},
|
||
closeDrawer() {
|
||
this.$emit("closeDrawer");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.accountTitle {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
z-index: 99;
|
||
padding-bottom: 6rpx;
|
||
.sysTitle {
|
||
width: 100%;
|
||
position: relative;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
font-size: 34rpx;
|
||
font-family:
|
||
PingFang SC,
|
||
PingFang SC;
|
||
}
|
||
}
|
||
.edit-lable {
|
||
background-color: #fff;
|
||
width: 670rpx;
|
||
border-radius: 40rpx 0 0 40rpx;
|
||
height: 100%;
|
||
padding: 20rpx 34rpx 0 32rpx;
|
||
.header {
|
||
text-align: center;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
font-size: 34rpx;
|
||
font-family:
|
||
PingFang SC,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
position: relative;
|
||
}
|
||
.list {
|
||
overflow: auto;
|
||
height: calc(100% - 208rpx);
|
||
height: calc(100% - (208rpx + constant(safe-area-inset-bottom)));
|
||
height: calc(100% - (208rpx + env(safe-area-inset-bottom)));
|
||
.item {
|
||
margin-top: 48rpx;
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-family:
|
||
PingFang SC,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
.listn {
|
||
.name {
|
||
width: 184rpx;
|
||
height: 56rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 50rpx;
|
||
border: 1rpx solid #f5f5f5;
|
||
font-size: 24rpx;
|
||
font-family:
|
||
PingFang SC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-right: 26rpx;
|
||
margin-top: 24rpx;
|
||
padding: 0 8rpx;
|
||
&.on {
|
||
background-color: $light-primary-admin;
|
||
border-color: $primary-admin;
|
||
color: $primary-admin;
|
||
}
|
||
&:nth-of-type(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
width: 100%;
|
||
height: 112rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 0 32rpx;
|
||
background-color: #fff;
|
||
border-radius: 0 0 0 40rpx;
|
||
height: calc(112rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||
height: calc(112rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
|
||
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
|
||
.bnt {
|
||
width: 296rpx;
|
||
height: 72rpx;
|
||
border: 1px solid $primary-admin;
|
||
border-radius: 200rpx;
|
||
font-size: 26rpx;
|
||
font-family:
|
||
PingFang SC,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: $primary-admin;
|
||
&.on {
|
||
background: $primary-admin;
|
||
border-color: $primary-admin;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|