heshanApp/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">
						<text
							class="tag-item" 
							v-for="(it,idx) in item.children" 
							:key="idx"
							:class="{'tag-item-active': it.checked}"
							@click="handleChooseTag(index,idx)"
						>{{ it.label }}</text>
					</view>
				</view>
			</cell>
		</list>
	</view>
</template>

<script>
	import { getTag } from "@/api/expert.js"
	export default {
		data() {
			return {
				height: 0,
				width: 350,
				tags:[]
			}
		},
		onLoad(){
			const sysInfo = uni.getSystemInfoSync()
			const { screenHeight, statusBarHeight, safeAreaInsets, safeArea } = sysInfo
			
			// 方法1：使用 safeAreaInsets.bottom（推荐，iOS 11+）
			const bottomSafeArea = safeAreaInsets?.bottom || 0
			this.height = screenHeight / 2 - bottomSafeArea - 20
			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>
	.tagpopcon {
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx;
		position: relative;
	}
	.tagpopcon-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;
	}
	.tag-item {
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		padding: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		border-width: 2rpx;
		border-style: solid;
		border-color: #eee;
		font-size: 28rpx;
		color: #666;
	}
	
	.tag-item-active {
		background-color: #ffe8dc;
		border-color: #ffe8dc;
		color: #FF5030;
	}
</style>