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="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 examCardList" :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 || 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>
		
	</view>
</template>

<script setup>
	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);
	
	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'
			    });
			    break;
			case 1:
			    uni.switchTab({
			    	url: '/pages/exam/index'
			    });
			    break;
			case 2:
			    uni.showToast({
					icon: 'none',
			    	title: '开发中，敬请期侍！',
			    });
			    break;
			case 3:
			    uni.showToast({
					icon: 'none',
			    	title: '开发中，敬请期侍！',
			    });
			    break;
				}
	}
	function developClick(){
		uni.showToast({
			icon: 'none',
			title: '开发中，敬请期侍！',
		});
	}
	
	
</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;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;box-sizing: border-box;margin-bottom: 20rpx;
		.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: 4rpx 12rpx;background: rgba(0, 0, 0, 0.29);
			color: #fff;font-size: 22rpx;border-radius: 0 10rpx 0 10rpx;
		}
		.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>