|
@@ -1,227 +0,0 @@
|
|
|
-<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>
|