<template>
|
<view class="">
|
|
<u-popup :show="isShow" @close="closePopup" :safeAreaInsetTop="true" mode="bottom" :closeable="true" round="12">
|
<view class="popup-title fw f-30">标签选择</view>
|
|
<view class="popup-list flex a-i-c">
|
<scroll-view scroll-y="true" class="scroll">
|
<view class="popup-box">
|
<view :class="['box-item','f-28',index == fIndex?'c-main fw':'']"
|
v-for="(item,index) in categoryList" :key="index" @click="handleSelect(item,index)">
|
{{item.categoryName}}
|
</view>
|
</view>
|
</scroll-view>
|
<u-line direction="col" length="300rpx" v-if="childList.length"></u-line>
|
<scroll-view scroll-y="true" class="scroll" v-if="childList.length">
|
<view class="popup-box">
|
<view :class="['box-item','f-28',item.isSelect?'c-main fw':'']"
|
v-for="(item,index) in childList" :key="index" @click="handleSelectChild(item,index)">
|
{{item.categoryName}}
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<!-- <view class="popup-footer flex j-c-s-b a-i-c">
|
<view class="popup-btn c-main" @click="closePopup">
|
取消
|
</view>
|
<view class="popup-btn bgc-main c-ff">
|
确定
|
</view>
|
</view> -->
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getLabelCate
|
} from "@/api/label/categoryLabel.js";
|
export default {
|
name: "selector",
|
data() {
|
return {
|
isShow: false,
|
fIndex: null,
|
selectedItem: [],
|
selectedId: [],
|
categoryList: [],
|
childList: []
|
}
|
},
|
methods: {
|
|
getCategory(level, id) {
|
let params = {
|
level
|
}
|
if (level == 2) {
|
params.parentNo = id;
|
}
|
getLabelCate(params).then(res => {
|
if (res.code == 200) {
|
if (level == 2) {
|
let data = res.data;
|
for (let i of data) {
|
i.isSelect = false;
|
}
|
this.childList = data;
|
} else {
|
|
this.categoryList = res.data;
|
}
|
}
|
})
|
},
|
|
open() {
|
this.isShow = true;
|
},
|
close() {
|
this.isShow = false;
|
},
|
handleSelect(item, index) {
|
if (index == this.fIndex) return;
|
this.fIndex = index;
|
this.selectedItem = [item];
|
this.selectedId = [item.id]
|
this.getCategory(2, item.categoryNo);
|
this.$emit("select", {
|
selected: this.selectedItem,
|
selectedId: this.selectedId
|
})
|
},
|
handleSelectChild(item, index) {
|
this.childList[index].isSelect = !this.childList[index].isSelect;
|
this.getSelected()
|
this.$emit("select", {
|
selected: this.selectedItem,
|
selectedId: this.selectedId
|
});
|
|
},
|
getSelected() {
|
let arr = []
|
let ids = []
|
for (let i of this.childList) {
|
if (i.isSelect) {
|
arr.push(i);
|
ids.push(i.id)
|
}
|
}
|
this.selectedItem = arr;
|
this.selectedId = ids;
|
},
|
|
setDefault(arr) {
|
let ids = [];
|
this.selectedItem = arr;
|
if (arr.length == 1) {
|
for (let i = 0, ii = this.categoryList.length; i < ii; i++) {
|
if (this.categoryList[i].id == arr[0].id) {
|
this.fIndex = i;
|
this.selectedId = [arr[0].id]
|
}
|
}
|
} else {
|
for (let i = 0, ii = this.childList.length; i < ii; i++) {
|
for (let k = 0, kk = arr.length; k < kk; k++) {
|
if (this.childList[i].id == this.arr[k].id) {
|
this.childList[i].isSelect = true;
|
ids.push(this.arr[k].id);
|
}
|
}
|
}
|
this.selectedId = ids;
|
}
|
}
|
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popup-title {
|
padding: 20rpx 0;
|
text-align: center;
|
}
|
|
.scroll {
|
flex: 1;
|
height: 700rpx;
|
transition: all .2s;
|
}
|
|
// .scroll:first-child {
|
// flex:1;
|
// .box-item{
|
// border-bottom:1px solid #F5F5F5;
|
// }
|
// }
|
|
// .scroll:last-child {
|
// flex:2;
|
// }
|
.p-20 {
|
padding: 20rpx;
|
}
|
|
|
.popup-list {
|
width: 100%;
|
height: 700rpx;
|
padding: 10rpx 0;
|
box-sizing: border-box;
|
|
.bgc-f4 {
|
background-color: #f4f4f4;
|
}
|
|
.popup-box {
|
width: 100%;
|
height: 700rpx;
|
|
.box-item {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
text-align: center;
|
}
|
}
|
}
|
|
.popup-footer {
|
padding: 20rpx;
|
box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
.popup-btn {
|
width: 45%;
|
height: 78rpx;
|
line-height: 78rpx;
|
border-radius: 10rpx;
|
text-align: center;
|
font-size: 28rpx;
|
}
|
|
.popup-btn:nth-child(1) {
|
border: 1px solid currentColor;
|
}
|
}
|
</style>
|
