uniProject/pages/admin/Jiazheng/common/kechengLeixing.vue

<template>
	<uni-popup ref="popupKechengLeixingRef" type="top" :animation="false" :is-mask-click="false"
		mask-background-color="rgba(0, 0, 0, 0.4)">
		<view class="phone-filter-page">
			<view class="icon-title-navBar-box">
				<view @click="goUpPage" class="nav-bar-icon"></view>
				<text class="nav-bar-title">筛选</text>
			</view>
			<view class="filter-body-box">
				<radio-group @change="handleChange">
					<!-- 报证机构 -->
					<view class="filter-body-radio" v-for="item in data.list">
						<label class="radio-name-box"
							:class="{radioActive: activeSelect && activeSelect.id==item.id}">
							<radio :value="`${item.id}`" :checked="item.checked" activeBackgroundColor="#3fd2a1" style="transform:scale(0.8)"/>
							{{item.lable}}
						</label>
						<view class="phone-radio-group filter-radio-group">
							<view class="phone-radio-item" v-for="citem in item.children"
								:class="{radioActive: activeSelect && activeSelect.id == citem.id}"
								@click.stop="handleSelect(citem,item)">
								{{citem.lable}}
							</view>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="filter-btn-box">
				<button type="default" class="phone-white-btn filter-btn" @click="handleReset">重置</button>
				<button type="default" class="phone-green-btn filter-btn" @click="handleConfirm">筛选</button>
			</view>
		</view>
	</uni-popup>


</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";

	const emits = defineEmits(['select', 'reset']);
	const data = reactive({
		list: []
	})
	const activeSelect = ref(null);

	const popupKechengLeixingRef = ref(null);

	function goUpPage() {
		popupKechengLeixingRef.value.close();
	}

	function handleConfirm() {
		emits('select', activeSelect.value)
		popupKechengLeixingRef.value.close();
	}

	function handleReset() {
		activeSelect.value = null;
		emits('reset')
		popupKechengLeixingRef.value.close();
	}

	function handleChange(myData) {
		const activeD = myData.detail.value;
		data.list.forEach(item => {
			if (item.id != activeD) {
				item.checked = false
			} else {
				item.checked = true;
				activeSelect.value = item;
			}

		})
	}

	function handleSelect(myData) {
		data.list.forEach(item => {
			item.checked = false
		})
		activeSelect.value = myData;
	}

	function showPopup({
		data: myData
	}) {
		data.list = myData;
		popupKechengLeixingRef.value.open('top')
	}


	defineExpose({
		showPopup
	})
</script>

<style lang="scss">
	.active {
		color: red
	}
</style>