uniProject/pages/index/index.vue

<template>
	<view class="lli-index-page">
		<customNavbarVue title="首页"></customNavbarVue>
		<!-- banner -->
		<view class="index-imgbox">
			<img :src="banners||defaultbanners" class="index-banner-img" />
		</view>
		<!-- meul-box -->
		<view class="index-meul-box">
			<uni-grid :column="4" :show-border="false" :square="false" @change="gridClick">
				<uni-grid-item v-for="(item ,index) in menuList" :index="index" :key="index">
					<view class="lli-grid-item">
						<image class="grid-item-image" :src="item.url" mode="aspectFill" />
						<text class="grid-item-text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" :customStyle="{background: '#FF5551'}" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<!-- 课程list -->
		<view class="lli-index-title-box">
			<text class="index-title">最热课程</text>
			<text class="index-sub-title" @click="developClick">查看更多 ></text>
		</view>
		<view class="lli-card-box">
			<uni-card padding="0" margin="0" spacing="0" :is-shadow="false" :border="false"
				v-for="(item ,index) in courseCardList" :index="index" :key="index" class="lli-card-item"
				@click="developClick(index)">
				<view class="custom-cover">
					<image class="lli-card-image" mode="aspectFill" :src="item.pic || defultKcImg"></image>
					<view class="cover-content" v-if="item.status">
						<text>{{statusCodeKc[item.status]}}</text>
					</view>
				</view>
				<text class="lli-card-name">{{item.name}}</text>
			</uni-card>
		</view>
		<!-- 考试list -->
		<view class="lli-index-title-box">
			<text class="index-title">最热考试</text>
			<text class="index-sub-title" @click="handleCheckMoreKs">查看更多 ></text>
		</view>
		<view class="lli-card-box">
			<uni-card padding="0" margin="0" spacing="0" :is-shadow="false" :border="false"
				v-for="(item ,index) in examCardList" :index="index" :key="index" class="lli-card-item"
				@click="handleClickKs(item)">
				<view class="custom-cover">
					<image class="lli-card-image" mode="aspectFill" :src="item.pic || defultKsImg"></image>
					<view class="cover-content" v-if="item.status">
						<text>{{statusCodeKs[item.status]}}</text>
					</view>
				</view>
				<text class="lli-card-name">{{item.ksName}}</text>
			</uni-card>
		</view>



		<!-- 考试须知 -->
		<kaoshixuzhi ref="ksxzRef" @confirm="handleConfirm"></kaoshixuzhi>
	</view>
</template>

<script setup>
	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
	import {
		kaoShiApply,
		getClientKaoshiInfo
	} from "@/api/exam.js";
	import kaoshixuzhi from "@/components/kaoshixuzhi/kaoshixuzhi.vue"
	import {
		ref,
		reactive
	} from "vue";
	import {
		getCourseList,
		getNoticeCount,
		getExamList
	} from '@/api/index.js';
	import { 
		onLoad
	} from "@dcloudio/uni-app"
	const banners = ref('');
	const defaultbanners = ref('/static/images/index/index-banner.png');
	const defultKsImg = ref('/static/images/index/index-ks-default.png');
	const defultKcImg = ref('/static/images/index/index-kc-default.png');
	const statusCodeKc = ref(['未开始', '可以学习', '已学完', '学习中', '已结束']);
	const statusCodeKs = ref(['未开始', '可以考试', '再次考试', '考试中', '已结束', '未报名', '报名审核中', '审核未通过', '等待人工评分']);
	let menuList = ref([{
			url: '/static/images/index/index-kc-img.png',
			text: '我的课程',
		},
		{
			url: '/static/images/index/index-ks-img.png',
			text: '我的考试',
		},
		{
			url: '/static/images/index/index-lx-img.png',
			text: '每日一练',
		},
		{
			url: '/static/images/index/index-gg-img.png',
			text: '公告',
			badge: 0,
		},
	]);
	let courseCardList = ref([]);
	let examCardList = ref([]);
	let noticeCount = ref(0);
	const examNoticeInfo = ref(null); // 考试须知数据
	const ksxzRef = ref(null);
	const activeKs = ref(null);

	onLoad(() => {
		getNoticeCountData();
		getCourseListData();
		getExamListData();
	});



	function getNoticeCountData() {
		let req = {
			'page': 1,
			'size': 4,
			'status': 1,
		};
		getNoticeCount(req).then(res => {
			menuList.value[3].badge = res.data.noticeCount || 0;
		});
	};

	function getCourseListData() {
		let req = {
			'page': 1,
			'size': 4,
			'status': 1,
		};
		getCourseList(req).then(res => {
			courseCardList.value = res.data.data || [];
		});
	};

	function getExamListData() {
		let req = {
			'page': 1,
			'size': 4,
			'status': 1,
		};
		getExamList(req).then(res => {
			examCardList.value = res.data.data || [];
		});
	};

	function gridClick(e) {
		let {
			index
		} = e.detail;
		switch (index) {
			case 0:
				/* uni.switchTab({
					url: '/pages/course/index'
				}); */
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期侍！',
				})
				return false
				break;
			case 1:
				uni.switchTab({
					url: '/pages/exam/index'
				});
				break;
			case 2:
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期侍！',
				})
				return false
				/* uni.navigateTo({
					url: '/pages/lianxi/index'
				}) */
				break;
			case 3:
				/* uni.navigateTo({
					url: '/pages/my/mesList?from=indexPeixun'
				}) */
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期侍！',
				})
				return false
				break;
		}
	}

	function developClick() {
		uni.showToast({
			icon: 'none',
			title: '开发中，敬请期侍！',
		});
	}

	function goKaoshiPage(data) {
		/* uni.redirectTo({
			url: `/pages/exam/exam?ksId=${data.ksId}&zhuapai=${data.zhuapai}`
		}) */
		uni.navigateTo({
			url: `/pages/exam/exam?ksId=${data.ksId}&zhuapai=${data.zhuapai}`
		})
	}

	function handleConfirm() {
		goKaoshiPage(activeKs.value)
	}

	function showKaoshiXuzhi() {
		const option = {
			ksId: activeKs.value.ksId
		}
		getClientKaoshiInfo(option).then(res => {
			examNoticeInfo.value = res.data;
			// 校验抓拍
			doCheckZhuapai()
		})

	}

	function doCheckZhuapai() {
		if (examNoticeInfo.value.zhuapai) {
			// 存在抓拍
		} else {
			// 不存在抓拍
			ksxzRef.value.showDialog(examNoticeInfo.value)
		}
	}

	function handleClickKs(data) {
		activeKs.value = data;
		console.log('ddddd', data)
		if (data.status == 0) {
			// 未开始
			showKaoshiXuzhi()
		}
		if (data.status == 1) {
			// 可以考试
			showKaoshiXuzhi()
		}
		if (data.status == 2) {
			// 再次考试
			showKaoshiXuzhi()
		}
		if (data.status == 3) {
			// 考试中
			showKaoshiXuzhi()
		}
		if (data.status == 4) {
			// 已结束
			uni.showToast({
				title: '考试已结束',
				icon: 'none'
			})
		}
		if (data.status == 5) {
			// 未报名
			kaoShiApply({
				ksId: data.ksId
			}).then(res => {
				uni.showToast({
					title: '报名成功',
					icon: 'none'
				})
				scrollRef.value.onRefresh()
			})
		}

	}

	function handleCheckMoreKs() {
		uni.switchTab({
			url: '/pages/exam/index'
		})
	}
</script>