uniProject/pages/admin/banzheng/filter.vue

<template>
	<uni-popup ref="filterPopup" 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">
			<!-- 报证机构 -->
			<view class="filter-body-name">报证机构</view>
			<view class="phone-radio-group filter-radio-group">
				<view class="phone-radio-item" v-for="(item,index) in bzJigouList" :class="{radioActive: showData.jigouId===index}" @click="radioSelect('jg',item,index)">{{item.name}}</view>
			</view>
			
			<!-- 职业 -->
			<view class="filter-body-name">职业</view>
			<view class="phone-radio-group filter-radio-group">
				<view class="phone-radio-item" v-for="(item,index) in zhiyeList" :class="{radioActive: showData.zhiyeId===index}" @click="radioSelect('zy',item,index)">{{item.name}}</view>
			</view>
			
			<!-- 等级 -->
			<view class="filter-body-name">等级</view>
			<view class="phone-radio-group filter-radio-group">
				<view class="phone-radio-item" v-for="(item,index) in LevelList" :class="{radioActive: showData.levelId===index}" @click="radioSelect('dj',item,index)">{{item.name}}</view>
			</view>
			
			<!-- 办证状态 -->
			<view class="filter-body-name">办证状态</view>
			<view class="phone-radio-group filter-radio-group">
				<view class="phone-radio-item" v-for="(item,index) in banzhengList" :class="{radioActive: showData.banzhengId===index}" @click="radioSelect('bzStatus',item,index)">{{item.name}}</view>
			</view>
			
			<!-- 考试状态 -->
			<view class="filter-body-name">考试状态</view>
			<view class="phone-radio-group filter-radio-group">
				<view class="phone-radio-item" v-for="(item,index) in kaoshiList" :class="{radioActive: showData.kaoshiId===index}" @click="radioSelect('ksStatus',item,index)">{{item.name}}</view>
			</view>
		</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="confirmBtn">筛选</button>
		</view>
	</view>
	</uni-popup>
</template>

<script setup>
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import {ref,reactive} from "vue"
	import * as banzhengApi from "@/api/banzheng.js"
	const filterPopup = ref(null); // 索引
	const $emit = defineEmits(['confirm-btn'])
	// 页面显示active
	const showData = reactive({
		jigouId: '',
		zhiyeId: '',
		levelId: '',
		banzhengId: '',
		kaoshiId: '',
	})
	// 传到父组件
	const bzData = reactive({
		jigouId: '',
		zhiyeId: '',
		levelId: '',
		banzhengId: '',
		kaoshiId: '',
	})
	const bzJigouList = ref([]);
	const zhiyeList = ref([]);
	const LevelList = ref([]);
	const banzhengList = ref([]);
	const kaoshiList = ref([]);
	
	// 打开弹窗
	function handleShow() {
		filterPopup.value.open();
	}
	// 取消
	function handleClose() {
		filterPopup.value.close();
	}
	// 确认
	function confirmBtn(){
		$emit('confirm-btn',bzData);
		filterPopup.value.close();
	}
	
	function initPage(){
		getKaozhengJigouList();
		getKaozhengZhiyeList();
		getKaozhengLevelList();
		getKaozhengBanzhengList();
		getKaozhengKaoshiList();
	}
	
	function getKaozhengJigouList(){
		banzhengApi.getKaozhengJigou().then(res => {
			bzJigouList.value = res.data;
		})
	}
	
	function getKaozhengZhiyeList(){
		banzhengApi.getKaozhengZhiye().then(res => {
			zhiyeList.value = res.data;
		})
	}
	
	function getKaozhengLevelList(){
		banzhengApi.getKaozhengLevel().then(res => {
			LevelList.value = res.data;
		})
		
	}
	
	function getKaozhengBanzhengList(){
		banzhengApi.getKaozhengBanzheng().then(res => {
			banzhengList.value = res.data;
		})
	}
	
	function getKaozhengKaoshiList(){
		banzhengApi.getKaozhengKaoshi().then(res => {
			kaoshiList.value = res.data;
		})
	}
	
	function radioSelect(name,item,index){
		switch (name) {
			case 'jg':
				showData.jigouId = index;
			    bzData.jigouId = item.jgId;
			    break;
			case 'zy':
			    showData.zhiyeId = index;
				bzData.zhiyeId = item.id;
			    break;	
			case 'dj':
			    showData.levelId = index;
				bzData.levelId = item.id;
			    break;	
			case 'bzStatus':
			    showData.banzhengId = index;
				bzData.banzhengId = item.id;
			    break;
			case 'ksStatus':
			    showData.kaoshiId = index;
				bzData.kaoshiId = item.id;
			    break;			
		}
	}
	
	function goUpPage(){
		filterPopup.value.close();
	}
	
	function handleReset(){
		bzData.jigouId = '';
		bzData.zhiyeId = '';
		bzData.levelId = '';
		bzData.banzhengId =  '';
		bzData.kaoshiId =  '';
		
		showData.jigouId = '';
		showData.zhiyeId = '';
		showData.levelId = '';
		showData.banzhengId =  '';
		showData.kaoshiId =  '';
	}
	defineExpose({
			handleShow,
			initPage,
			handleClose
		})
</script>

<style>
</style>