<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.parentName">
|
<view class="f-28">已选标签</view>
|
<view class="p-20 flex flex-wrap">
|
<view class="mr-20">
|
<text v-if="selectedItem.parentName">{{selectedItem.parentName}}</text>
|
<text v-if="selectedItem.childrenName">、{{selectedItem.childrenName}}</text>
|
</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',item.key == selectedTemp.parentId?'c-main fw':'']"
|
v-for="(item,index) in categoryList" :key="index" @click="handleSelect(item,index)">
|
{{item.title}}
|
</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.key == selectedTemp.childrenId?'c-main fw':'']"
|
v-for="(item,index) in childList" :key="index" @click="handleSelectChild(item,index)">
|
{{item.title}}
|
</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
|
v-if="(childList.length && !selectedTemp.childrenId) || (!childList.length && !selectedTemp.parentId)"
|
class="popup-btn bgc-gray c-ff" @click="comfirmPopup">
|
确定
|
</view>
|
<view v-else class="popup-btn bgc-main c-ff" @click="comfirmPopup">
|
确定
|
</view>
|
</view>
|
</u-popup>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
bizDictionaryTree
|
} from '@/api/system/dict.js'
|
export default {
|
name: "cateSelector",
|
data() {
|
return {
|
isShow: false,
|
categoryList: [],
|
childList: [],
|
selectedItem: {
|
parentId: "",
|
childrenId: "",
|
parentName: "",
|
childrenName: ""
|
},
|
selectedTemp: {
|
parentId: "",
|
childrenId: "",
|
parentName: "",
|
childrenName: ""
|
},
|
index: null,
|
tempIndex: null
|
}
|
},
|
|
created() {
|
this.getCateList()
|
},
|
|
methods: {
|
|
open() {
|
this.isShow = true;
|
},
|
|
close() {
|
this.isShow = false;
|
},
|
|
getCateList() {
|
bizDictionaryTree({
|
code: "nineType"
|
}).then(res => {
|
if (res.code == 200) {
|
this.categoryList = res.data;
|
}
|
})
|
},
|
|
handleSelect(item, index) {
|
if (index == this.tempIndex) return;
|
this.tempIndex = index;
|
this.$set(this.selectedTemp, "parentId", item.key);
|
this.$set(this.selectedTemp, "parentName", item.title);
|
this.$set(this.selectedTemp, "childrenId", "");
|
this.$set(this.selectedTemp, "childrenName", "");
|
if (item.hasChildren) {
|
this.childList = item.children;
|
} else {
|
this.childList = [];
|
}
|
},
|
|
handleSelectChild(item, index) {
|
this.$set(this.selectedTemp, "childrenId", item.key);
|
this.$set(this.selectedTemp, "childrenName", item.title);
|
},
|
|
closePopup() {
|
if (this.selectedTemp.parentId) {
|
this.$set(this.selectedTemp, "parentId", this.selectedItem.parentId);
|
this.$set(this.selectedTemp, "parentName", this.selectedItem.parentName);
|
this.$set(this.selectedTemp, "childrenId", this.selectedItem.childrenId);
|
this.$set(this.selectedTemp, "childrenName", this.selectedItem.childrenName);
|
if (this.index != null) {
|
this.tempIndex = this.index;
|
if ((this.index != "" || this.index != null) && this.categoryList[this.index].hasChildren) {
|
this.childList = this.categoryList[this.index].children;
|
}
|
if (this.index == "" || this.index == null) {
|
this.childList = [];
|
}
|
}
|
|
}
|
this.isShow = false;
|
},
|
|
comfirmPopup() {
|
this.$set(this.selectedItem, "parentId", this.selectedTemp.parentId);
|
this.$set(this.selectedItem, "parentName", this.selectedTemp.parentName);
|
this.$set(this.selectedItem, "childrenId", this.selectedTemp.childrenId);
|
this.$set(this.selectedItem, "childrenName", this.selectedTemp.childrenName);
|
this.index = this.tempIndex;
|
this.isShow = false;
|
this.$emit("comfirm", this.selectedItem);
|
|
},
|
|
showDefault(id) {
|
for (let i = 0, ii = this.categoryList.length; i < ii; i++) {
|
if (this.categoryList[i].hasChildren) {
|
for (let k = 0, kk = this.categoryList[i].children.length; k < kk; k++) {
|
if (id == this.categoryList[i].children[k].key) {
|
this.index = i;
|
this.tempIndex = i;
|
this.childList = this.categoryList[i].children;
|
this.$set(this.selectedItem, "parentId", this.categoryList[i].key)
|
this.$set(this.selectedItem, "parentName", this.categoryList[i].title)
|
this.$set(this.selectedItem, "childrenId", this.categoryList[i].children[k].key)
|
this.$set(this.selectedItem, "childrenName", this.categoryList[i].children[k].title)
|
this.$set(this.selectedTemp, "parentId", this.categoryList[i].key)
|
this.$set(this.selectedTemp, "parentName", this.categoryList[i].title)
|
this.$set(this.selectedTemp, "childrenId", this.categoryList[i].children[k].key)
|
this.$set(this.selectedTemp, "childrenName", this.categoryList[i].children[k].title)
|
}
|
}
|
} else {
|
if (id == this.categoryList[i].key) {
|
this.index = i;
|
this.tempIndex = i;
|
this.$set(this.selectedItem, "parentId", this.categoryList[i].key)
|
this.$set(this.selectedItem, "parentName", this.categoryList[i].title)
|
this.$set(this.selectedTemp, "parentId", this.categoryList[i].key)
|
this.$set(this.selectedTemp, "parentName", this.categoryList[i].title)
|
}
|
}
|
}
|
}
|
}
|
}
|
</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;
|
}
|
}
|
|
.bgc-gray {
|
background-color: darkgray;
|
}
|
</style>
|
