<template>
|
<view class="">
|
<view class="cell flex j-c-s-b a-i-c bgc-ff" @click="isShow = true">
|
<text class="f-28">选择标签</text>
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
<view class="mt-20 p-20 bgc-ff" v-if="selectedItem.length">
|
<view class="f-28">已选标签</view>
|
<view class="p-20 flex flex-wrap">
|
<view v-for="(item,index) in selectedItem" :key="index" class="mr-20">
|
<u-tag :closable="true" size="mini" @close="delTag(index)"
|
:text="item.categoryName"></u-tag>
|
</view>
|
</view>
|
</view>
|
|
|
|
|
|
<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 {
|
data() {
|
return {
|
isShow: false,
|
categoryList: [],
|
childList: [],
|
fIndex: null,
|
cId: null,
|
showLabelList: [],
|
selectedItem: []
|
}
|
},
|
|
onLoad() {
|
this.getCategory(1);
|
},
|
|
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;
|
}
|
}
|
})
|
},
|
handleSelect(item, index) {
|
if (index == this.fIndex) return;
|
this.fIndex = index;
|
this.selectedItem = [item];
|
this.getCategory(2, item.categoryNo);
|
console.table( "选择父级=>",this.selectedItem)
|
},
|
handleSelectChild(item, index) {
|
this.childList[index].isSelect = !this.childList[index].isSelect;
|
this.getSelected()
|
|
},
|
|
getSelected() {
|
let arr = []
|
for (let i of this.childList) {
|
if (i.isSelect) {
|
arr.push(i);
|
}
|
}
|
this.selectedItem = arr;
|
console.table("选择子级=>",this.selectedItem);
|
},
|
|
showSelected() {
|
for (let i = 0, ii = this.childList.length; i < ii; i++) {
|
for (let k = 0, kk = this.selectedItem.length; k < kk; k++) {
|
if (this.childList[i].id == this.selectedItem[k].id) {
|
this.childList[i].isSelect = true;
|
}
|
}
|
}
|
},
|
|
|
closePopup(){
|
this.isShow = false;
|
},
|
|
delTag(index){
|
this.selectedItem.splice(index,1);
|
}
|
|
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.cell {
|
padding: 20rpx;
|
}
|
|
.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>
|
