uniProject/pages/admin/Kaoshi/checkList.vue

<template>
	<view class="phone-zjzgs-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">考试查询</text>
		</view>
		<view class="jiazheng-search-box">
			<uni-datetime-picker v-model="data.range" type="daterange" @change="onDateSelect" style="flex: 1"
				class="yishou-date-box" />
		</view>
		<view v-show="data.showA||data.showB||data.showC||data.showD">
			<view :class="{active: data.showA}" @click="handleShow(1)">需要考试</view>
			<view :class="{active: data.showB}" @click="handleShow(2)">考试通过</view>
			<view :class="{active: data.showC}" @click="handleShow(3)">考试未通过</view>
			<view :class="{active: data.showD}" @click="handleShow(4)">未考试</view>
		</view>

<hr>
		<view v-show="data.showA">
			<view>总数：{{data.listA.length}}</view>
			<view v-for="item in data.listA" :key="item.userName">
				<view>用户名：{{item.realName}}</view>
				<view>手机号：{{item.userName}}</view>
				<view>职业名称：{{item.zyName}}</view>
				<view>职业等级：{{item.zyLevel}}</view>
			</view>
		</view>
		<view v-show="data.showB">
			<view>总数：{{data.listB.length}}</view>
			<view v-for="item in data.listB" :key="item.userName">
				<view>用户名：{{item.realName}}</view>
				<view>手机号：{{item.userName}}</view>
				<view>职业名称：{{item.zyName}}</view>
				<view>职业等级：{{item.zyLevel}}</view>
			</view>
		</view>
		<view v-show="data.showC">
			<view>总数：{{data.listC.length}}</view>
			<view v-for="item in data.listC" :key="item.userName">
				<view>用户名：{{item.realName}}</view>
				<view>手机号：{{item.userName}}</view>
				<view>职业名称：{{item.zyName}}</view>
				<view>职业等级：{{item.zyLevel}}</view>
			</view>
		</view>
		<view v-show="data.showD">
			<view>总数：{{data.listD.length}}</view>
			<view v-for="item in data.listD" :key="item.userName">
				<view>用户名：{{item.realName}}</view>
				<view>手机号：{{item.userName}}</view>
				<view>职业名称：{{item.zyName}}</view>
				<view>职业等级：{{item.zyLevel}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as httpApi from "@/api/zijiazhenggongsi"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const data = reactive({
		list: [], // 办证列表
		range: [],
		showA: false,
		showB: false,
		showC: false,
		showD: false,
		listA: [],
		listB: [],
		listC: [],
		listD: [],
	})

	function onDateSelect(data1) {
		data.range = data1;
		httpApi.getKzchaxunInfo({
			endDate: data.range[1],
			startDate: data.range[0]
		}).then(res => {
			data.listA = res.data.list;
			data.listB = res.data.ytgList;
			data.listC = res.data.wtgList;
			data.listD = res.data.wksList;

			data.showA = true;
			data.showB = false;
			data.showC = false;
			data.showD = false;
		})
	}

	function handleShow(code) {
		if (code == 1) {
			data.showA = true;
			data.showB = false;
			data.showC = false;
			data.showD = false;
		}
		if (code == 2) {
			data.showA = false;
			data.showB = true;
			data.showC = false;
			data.showD = false;
		}
		if (code == 3) {
			data.showA = false;
			data.showB = false;
			data.showC = true;
			data.showD = false;
		}
		if (code == 4) {
			data.showA = false;
			data.showB = false;
			data.showC = false;
			data.showD = true;
		}
	}

	function goUpPage() {
		uni.redirectTo({
			url: `/pages/admin/ShouYe/shouye`
		})
	}
</script>

<style>

</style>