筛选功能

pages/admin/banzheng/filter.vue

@@ -1,4 +1,6 @@
 <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>
@@ -8,40 +10,47 @@
 			<!-- 报证机构 -->
 			<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="{active: jigouId===index}" @click="radioSelect('jg',index)">{{item.name}}</view>
+				<view class="phone-radio-item" v-for="(item,index) in bzJigouList" :class="{radioActive: bzData.jigouId===index}" @click="radioSelect('jg',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="{active: jigouId===index}" @click="radioSelect('jg',index)">{{item.name}}</view>
+				<view class="phone-radio-item" v-for="(item,index) in zhiyeList" :class="{radioActive: bzData.zhiyeId===index}" @click="radioSelect('zy',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="{active: jigouId===index}" @click="radioSelect('jg',index)">{{item.name}}</view>
+				<view class="phone-radio-item" v-for="(item,index) in LevelList" :class="{radioActive: bzData.levelId===index}" @click="radioSelect('dj',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="{active: jigouId===index}" @click="radioSelect('jg',index)">{{item.name}}</view>
+				<view class="phone-radio-item" v-for="(item,index) in banzhengList" :class="{radioActive: bzData.banzhengId===index}" @click="radioSelect('bzStatus',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="{active: jigouId===index}" @click="radioSelect('jg',index)">{{item.name}}</view>
+				<view class="phone-radio-item" v-for="(item,index) in kaoshiList" :class="{radioActive: bzData.kaoshiId===index}" @click="radioSelect('ksStatus',index)">{{item.name}}</view>
 			</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'])
 	const bzData = reactive({
 		jigouId: '',
 		zhiyeId: '',
@@ -54,9 +63,20 @@
 	const LevelList = ref([]);
 	const banzhengList = ref([]);
 	const kaoshiList = ref([]);
-	onLoad((options) => {
-		initPage();
-	})
+	
+	// 打开弹窗
+	function handleShow() {
+		filterPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		filterPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn',bzData);
+		filterPopup.value.close();
+	}
 	
 	function initPage(){
 		getKaozhengJigouList();
@@ -98,14 +118,42 @@
 	}
 	
 	function radioSelect(name,index){
-		
+		console.log(name,index,'name,index');
+		switch (name) {
+			case 'jg':
+			    bzData.jigouId = index
+			    break;
+			case 'zy':
+			    bzData.zhiyeId = index
+			    break;	
+			case 'dj':
+			    bzData.levelId = index
+			    break;	
+			case 'bzStatus':
+			    bzData.banzhengId = index
+			    break;
+			case 'ksStatus':
+			    bzData.kaoshiId = index
+			    break;			
+		}
 	}
 	
 	function goUpPage(){
-		uni.redirectTo({
-			url: '/pages/admin/banzheng/list'
-		})
-	}
+		filterPopup.value.close();
+	}
+	
+	function handleReset(){
+		bzData.jigouId = '';
+		bzData.zhiyeId = '';
+		bzData.levelId = '';
+		bzData.banzhengId =  '';
+		bzData.kaoshiId =  '';
+	}
+	defineExpose({
+			handleShow,
+			initPage,
+			handleClose
+		})
 </script>
 
 <style>