uniProject/pages/client/Kaoshi/list.vue

<template>
	<view class="phone-list-page">
		<customNavbarVue title="考试管理" :show-back-btn="true" @back="goUpPage"></customNavbarVue>
		
		<!-- 考试列表 -->
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
			:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh" @scrolltolower="onScrolltolower"
			:style="{ height: `calc(100vh - ${statusBarHeight}px - 212rpx);`}" class="phone-scroll-overflow">
			<uni-list class="admin-list-box">
				<uni-list-item v-for="item in data.list" class="admin-list-item-box" :key="item.ksId">
					<template v-slot:body style="width: 100%;">
						<!-- 考试项 -->
						<view class="item-card-row">
							<!-- 考试名 + 等级 -->
							<view class="ks-item-top">
								<view class="ks-name">{{item.zyName}}</view>
								<view class="ks-zyLevelName">{{item.zyLevelName}}</view>
							</view>
							<!-- 时间 -->
							<view class="ks-totalTm">
								<icon class="phone-time-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.phoneTimeIcon + ')' }"/>时间：{{item.totalTm}}分钟
							</view>
							<view class="ks-totalTm">
								<icon class="phone-cishu-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.phoneCiShuIicon + ')' }"/>次数：{{item.maxTimes ? item.loseTimes:'不限'}}次
							</view>
							<!-- 分数 -->
							<view class="ks-score-content">
								<view class="ks-score">
									<icon class="phone-zongfen-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.phoneZongfenIcon + ')' }"/>总分：<text>{{item.ksScore}}</text>
								</view>
								<view class="ks-okScore">
									<icon class="phone-jigefen-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.phoneJigefenIcon + ')' }"/>及格分：<text>{{item.okScore}}</text>
								</view>
							</view>
		
							<button type="primary" size="mini" @click="checkKsXz(item)" v-if="item.status == 1" class="item-view-btn">进行考试</button>
							<button type="primary" size="mini" @click="checkKsXz(item)" v-if="item.status == 2" class="item-view-btn">进行考试</button>
							<button type="primary" size="mini" @click="checkKsXz(item)" v-if="item.status == 3" class="item-view-btn">考试中</button>
						</view>
					</template>
				</uni-list-item>
				<uni-load-more :status="data.state" @click="getMore(0)" :contentText="data.contentText"></uni-load-more>
			</uni-list>
		</scroll-view>
		<!-- 页面底端 -->
		<customTabbarClientVue></customTabbarClientVue>
		<!-- 考试须知 -->
		<kaoshixuzhiVue ref="ksxzRef" @confirm="handleConfirmKs" key="1"></kaoshixuzhiVue>
		<!-- 身份确认 -->
		<identificationVue ref="shenfenRef" @confirm="handleConfirmIdent" @changeData="handleChangeIdentification"
			key="2"></identificationVue>
	</view>
</template>

<script setup>
	import cacheManager from '@/utils/cacheManager.js';
	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
	import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-client.vue";
	import kaoshixuzhiVue from "@/components/kaoshixuzhi/kaoshixuzhi.vue";
	import identificationVue from "@/components/identification/identification.vue";
	import {useIdentificationTools} from "@/utils/examTools.js"

	import {ref,reactive,onMounted} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import * as kaoshiApi from "@/api/kaoshi.js";

	const statusBarHeight = ref(0);
	const {
		saveIdentCache,
		getIdentCache,
		removeIdentCache
	} = useIdentificationTools();

	const ksxzRef = ref(null);
	const shenfenRef = ref(null);
	const activeks = ref(null);

	const data = reactive({
		zyName: '', // 职业名称
		list: [], // 考试列表
		loading: false,
		page: 0,
		size: 8,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		},
		from: '',
		imgsArr: {
			phoneZongfenIcon: '',
			phoneJigefenIcon: '',
			phoneCiShuIicon: '',
			phoneTimeIcon: '',
		},
	})
	
	
	function onScrolltolower() {
		getMore()
	}

	function goUpPage() {

		const pages = getCurrentPages();
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			// uni.redirectTo({
			// 	url: '/pages/client/ShouYe/shouye'
			// })
			history.back();
		}


	}
	// 修改身份
	function handleChangeIdentification() {

		uni.navigateTo({
			url: '/pages/client/my/myInfo?from=kaoshiList'
		})
	}

	function handleConfirmIdent(data) {
		
		saveIdentCache(activeks.value.ksId, true);
		ksxzRef.value.showDialog(activeks.value)
	}

	function handleConfirmKs(data) {
		checkKaoshi(data)
	}

	function checkKsXz(data) {
		activeks.value = data;
		if (data.status == 3) {
			// 考试中 直接进入考试
			checkKaoshi(data)
			return;
		}

		const result = getIdentCache(data.ksId);
		if (result) {
			ksxzRef.value.showDialog(data)
		} else {
			kaoshiApi.getClientUserInfo({
				ksId: data.ksId
			}).then(res => {
				shenfenRef.value.showDialog(res.data);
			})
		}
	}

	function handleSearch() {
		data.page = 0;
		refreshData();
	}

	function checkKaoshi(item) {
		// #ifdef H5
		/* history.replaceState({
			...history.state,
			newKey: 'newValue'
		}, '', window.location.href); */
		// #endif
		// 判断是否有抓拍，有抓拍需要跳转到验证页面
		if (activeks.value.zhuapai) {
			uni.navigateTo({
				url: `/pages/client/Kaoshi/examCamera?ksId=${item.ksId}&zhuapai=${activeks.value.zhuapai}&userKaozhengId=${activeks.value.userKaozhengId}&from=kaoshiList`
			})
		} else {
			uni.navigateTo({
				url: `/pages/client/Kaoshi/exam?ksId=${item.ksId}&zhuapai=${activeks.value.zhuapai}&userKaozhengId=${activeks.value.userKaozhengId}&from=kaoshiList`
			})
		}
		

	}

	function onRefresh() {
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData();
	}

	function refreshData() {
		const opt = {
			page: 1,
			size: data.size, // 固定查询10条
			zyName: data.zyName
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		kaoshiApi.getClientKaoshiList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;

			if (res.data.total > data.list.length) {
				data.state = 'more';
				data.loading = false;
			} else {
				data.state = 'no-more';
				data.loading = false;

			}
		}).catch(err => {
			data.state = 'more';
			data.loading = false;
		})
	}

	function getMore() {
		const opt = {
			page: 1,
			size: data.size, // 固定查询10条
			zyName: data.zyName
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		kaoshiApi.getClientKaoshiList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;

			if (res.data.total > data.list.length) {
				data.state = 'more';
				data.loading = false;
			} else {
				data.state = 'no-more';
				data.loading = false;
			}
		}).catch(err => {
			data.state = 'more';
			data.loading = false;
		})
	}
	onMounted(() => {
			uni.getSystemInfo({
			success: (res) => {
			statusBarHeight.value = res.statusBarHeight;
			}
			});
		});
	
	onLoad((options) => {
		data.from = options.from;
		data.imgsArr.phoneZongfenIcon = cacheManager.get('projectImg').zongfen_icon;
		data.imgsArr.phoneJigefenIcon = cacheManager.get('projectImg').jigefen_icon;
		data.imgsArr.phoneCiShuIicon = cacheManager.get('projectImg').cishu_icon;
		data.imgsArr.phoneTimeIcon = cacheManager.get('projectImg').time_icon;
	})

	onShow(() => {
		getMore()
	})
</script>