uniProject/pages/index/index.vue

<template>
	<view class="lli-index-page">
		<!-- 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 {
		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>

<style lang="scss">
	.lli-index-page {
		padding: 24rpx;
		background: #FCFBFC;
		min-height: 100vh;

		// banner
		.index-imgbox {
			text-align: center;
			width: 100%;

			.index-banner-img {
				width: 702rpx;
				height: 242rpx;
				display: inline-block;
				border-radius: 4px;
			}
		}

		//meul-box
		.index-meul-box {
			.lli-grid-item {
				flex: 1;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;
			}

			.grid-item-image {
				width: 99rpx;
				height: 113rpx;
			}

			.grid-item-text {
				font-size: 24rpx;
				color: $uni-text-color;
			}

			.grid-dot {
				position: absolute;
				top: 5px;
				right: 15px;
			}
		}

		// title-box
		.lli-index-title-box {
			margin: 44rpx 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.index-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 800;
				display: inline-flex;
				align-items: center;
			}

			.index-title:before {
				content: '';
				width: 3px;
				height: 30rpx;
				background: $uni-primary;
				margin-right: 8px;
				display: block;
			}

			.index-sub-title {
				font-size: 24rpx;
				color: #9c9c9c;
				font-weight: normal;
				cursor: pointer;
			}
		}

		// card
		.lli-card-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 8px;
			cursor: pointer;
		}

		.lli-card-item {
			width: 49%;
			flex: unset;
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 12rpx 12rpx 0!important;
			box-sizing: border-box;
			margin-bottom: 20rpx!important;

			.lli-card-image {
				max-width: 100%;
				height: 180rpx;
				border-radius: 8rpx;
			}

			.custom-cover {
				max-width: 100%;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				position: relative;
			}

			.cover-content {
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 0 12rpx;
				background: rgba(0, 0, 0, 0.29);
				color: #fff;
				font-size: 22rpx;
				border-radius: 0 12rpx 0 12rpx;
			}

			.lli-card-name {
				font-size: 28rpx;
				line-height: 36rpx;
				color: #565656;
				margin: 20rpx 0;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>