index页面开发

pages/index/index.vue

@@ -2,11 +2,11 @@
 	<view class="lli-index-page">
 		<!-- banner -->
 		<view class="index-imgbox">
-		    <img :src="banners||defultbanners" class="index-banner-img"/>
+		    <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="change">
+			<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" />
@@ -22,103 +22,147 @@
 		<!-- 课程list -->
 		<view class="lli-index-title-box">
 			<text class="index-title">最热课程</text>
-			<text class="index-sub-title">查看更多 ></text>
+			<text class="index-sub-title" @click="developClick">查看更多 ></text>
 		</view>
-		<!-- 考试list -->
 		<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">
-				<template v-slot:cover>
-					<view class="custom-cover">
-						<image class="lli-card-image" mode="aspectFill" :src="item.cover"></image>
-						<view class="cover-content">
-							<text class="uni-subtitle uni-white">{{item.tag}}</text>
-						</view>
+			<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 class="uni-subtitle uni-white">{{statusCodeKc[item.status]}}</text>
 					</view>
-				</template>
+				</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 class="uni-subtitle uni-white">{{statusCodeKs[item.status]}}</text>
+					</view>
+				</view>
+				<text class="lli-card-name">{{item.ksName}}</text>
+			</uni-card>
+		</view>
+		
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				banners: null,
-				defultbanners:'/static/images/index/index-banner.png',
-				menuList: [{
-						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: '99',
-					},
-				],
-				examCardList: [{
-						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc2.png',
-						name: '我的课程',
-						tag: '已学完',
-					},
-					{
-						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc1.png',
-						name: '我的考试',
-						tag: '待学习',
-					},
-					{
-						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc3.png',
-						name: '每日一练',
-						tag: '已学完',
-					},
-					{
-						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc4.png',
-						name: '北京市出租汽车驾驶员从业资格考试',
-						tag: '待学习',
-					},
-				],
-			}
-		},
-		methods: {
-			change(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;
-							}
-				console.log(index,'change')
-			},
-		}
+<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">
@@ -159,14 +203,14 @@
 		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;}
+		.index-sub-title{font-size: 24rpx;color: #9c9c9c;font-weight: normal;cursor: pointer;}
 	}
 	
 	// card
-	.lli-card-box{width: 100%;display: flex;display: -webkit-flex; /* 兼容性写法 */justify-content: space-between;flex-wrap: wrap;margin-bottom: 8px;}
+	.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;padding: 12rpx 12rpx 0;box-sizing: border-box;
-		border-radius: 20rpx;background-color: #ffffff;margin-bottom: 20rpx;
+		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 {