baiyuApp/pages/expert/components/tagpop.nvue

<template>
	<view class="tagpopcon" >
		<view class="tagpopcon-title" :style="{width:width+'px'}">选择标签</view>
		<list  class="tagpop-box" :show-scrollbar="true" :style="{height:height+'px'}" :scrollable="true">
			<cell v-for="(item,index) in tags" :key="index" >
				<view class="tag-group">
					<view class="tag-label">{{ item.label }}</view>
					<image class="close_icon" src="/static/close_icon.png" @click="closePopup"></image>
					<view class="child-label-box">
						<u-tag class="child-label" v-for="(it,idx) in item.children" :key="idx" :text="it.label"
							:color="it.checked?'#2583EB':'#666'" :bgColor="it.checked?'#ffe8dc':'#fff'"
							:borderColor="it.checked?'#ffe8dc':'#eee'" @click="handleChooseTag(index,idx)"></u-tag>
					</view>
				</view>
			</cell>
		</list>
	</view>
</template>

<script>
	import { getTag } from "@/api/expert.js"
	export default {
		data() {
			return {
				height: 0,
				width: 350,
				tags:[]
			}
		},
		onLoad(){
			this.height = uni.getSystemInfoSync().screenHeight / 2 - uni.getSystemInfoSync().statusBarHeight
			this.width = uni.getSystemInfoSync().screenWidth
			this.getTags()
		},
		methods: {
			getTags() {
				getTag().then(res => {
					if (res.code == 200) {
						this.tags = res.data || []
						this.tags = this.addCheckedProperty(this.tags)
						uni.$emit('chooseTag',this.tags)
					}
				})
			},
			addCheckedProperty(tags) {
				return tags.map(tag => {
					// 为当前对象添加checked属性
					const updatedTag = {
						...tag,
						checked: false
					};
					// 如果有子对象，递归处理
					if (updatedTag.children) {
						updatedTag.children = this.addCheckedProperty(updatedTag.children);
					}
					return updatedTag;
				});
			},
			handleChooseTag(index, idx) {
				this.tags[index].children[idx].checked = !this.tags[index].children[idx].checked
				uni.$emit('chooseTag',this.tags)
			},
			closePopup() {
				const subNVue = uni.getSubNVueById('tagpop');
				subNVue.hide('slide-out-bottom');
			},
		}
	}
</script>

<style scoped lang="scss">
	.tagpopcon {
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx;
		position: relative;
		&-title {
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			height: 44px;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
		}
		.close_icon {
			position: fixed;
			top: 10px;
			right: 10px;
			width: 22px;
			height: 22px;
		}
	
		.tagpop-box {
			padding-top: 44px;
		}
	
		.tag-label {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 5px;
			// background-color: #f7f7f7;
		}
	
		.child-label-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
		}
	
		.child-label {
			margin: 0 16rpx 16rpx 0;
		}
	}
</style>