uniProject/pages/admin/Kaoshi/list.vue

<template>
	<view class="phone-kaoshi-page">
		<!-- 查询职业 -->
		<view style="padding: 10px">
			<view class="phone-search-content">
				<input class="search-input" placeholder="请输入职业" v-model="data.zyName" />
				<view class="search-icon" @click="handleSearch">
					<uni-icons type="search" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 考试列表 -->
		<view class="kaoshi-content-box">
			<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
				:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh"
				class="kaoshi-scroll-view">
				<uni-list>
					<uni-list-item v-for="item in data.list" class="list-item-box">
						<template v-slot:body>
							<!-- 考试项 -->
							<view class="item-kaoshi-row">
								<!-- 考试名 + 等级 -->
								<view class="ks-item-top row-item">
									<view class="ks-name">{{item.ksName}}</view>
									<view class="ks-zyLevelName">{{item.zyLevelName}}</view>
								</view>
								<!-- 时间 -->
								<view class="ks-totalTm row-item">时间：{{item.totalTm}} 分钟</view>
								<view class="ks-totalTm row-item">次数：{{item.maxTimes}}次</view>
								<!-- 分数 -->
								<view class="ks-score-content row-item">
									<text class="ks-score">总分： {{item.ksScore}}</text>
									<text class="ks-okScore">及格分： {{item.okScore}}</text>
								</view>
								<button type="primary" size="mini" @click="checkKsXz(item)" class="kaoshi-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>
		</view>
		<!-- 页面底端 -->
		<customTabbarAdminVue></customTabbarAdminVue>
		<!-- 考试须知 -->
		<kaoshixuzhiVue ref="ksxzRef" @confirm="handleConfirmKs"></kaoshixuzhiVue>
	</view>
</template>

<script setup>
	import customTabbarAdminVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
	import kaoshixuzhiVue from "@/components/kaoshixuzhi/kaoshixuzhi.vue";
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getKaoshiList
	} from "@/api/kaoshi.js";
	
	const ksxzRef = ref(null);

	const data = reactive({
		zyName: '', // 职业名称
		list: [], // 考试列表
		loading: false,
		page: 0,
		size: 8,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	})
	
	function handleConfirmKs(ksId) {
		checkKaoshi({ksId})
	}
	
	function checkKsXz(data) {
		ksxzRef.value.showDialog(data)
	}

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

	function checkKaoshi(item) {
		uni.navigateTo({
			url: `/pages/admin/Kaoshi/exam?ksId=${item.ksId}`
		})
	}

	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;

		getKaoshiList(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;
		getKaoshiList(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;
			}
		})
	}

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

<style lang="scss" scoped>
	.phone-kaoshi-page {
		background-color: #ccc;
		box-sizing: border-box;

		// 查询区域
		.phone-search-content {
			position: relative;
			background-color: #fff;
			height: 42px;

			.search-input {
				height: 42px;
				line-height: 40px;
				border-radius: 20px;
				border: 1px solid #ccc;
				padding: 0 70px 0 20px;
			}

			.search-icon {
				position: absolute;
				right: 5px;
				top: 4px;
				padding: 6px;
				background-color: #ccc;
				border-radius: 20px;
				width: 50px;
				text-align: center;
			}
		}

		// 列表区域
		.item-kaoshi-row {
			width: 100%;

			.ks-item-top {
				display: flex;
				justify-content: space-between;

				.ks-name {
					font-weight: bold;
					font-size: 18px;
				}

				.ks-zyLevelName {
					padding: 2px 20px;
					background-color: #ccc;
					border-radius: 4px;
				}
			}

			.ks-totalTm {}

			.ks-score-content {
				background-color: #ccc;
				width: calc(100vw - 140px);

				.ks-score {
					padding-right: 10px
				}

				.ks-okScore {}
			}

			.row-item {
				margin-bottom: 10px;
			}

			.kaoshi-btn {
				width: 120px;
				font-size: 16px;
				margin-left: 0;
			}

		}
	}
	
	.kaoshi-scroll-view {
		height: calc(100vh - 166px);
	}
</style>