uniProject/pages/client/ShouYe/shouye.vue

<template>
	<view className="client-shouye-page">
		<customNavbarVue title="首页"></customNavbarVue>
		<!-- <view class="icon-title-bjcolor-navBar-box">
			<text class="nav-bar-title">{{data.realName}}</text>
		</view> -->
	
		<template v-if="data.kaoshiList.length||data.lianxiList.length||data.kechengList.length">
			<!-- 考试 -->
			<kaoshiCardVue v-if="data.kaoshiList.length" :data="{ count: data.kaoshiCount, ...data.kaoshiList[0],iconsArr:data.iconsArr}"></kaoshiCardVue>
			<!-- 练习 -->
			<lianxiCardVue v-if="data.lianxiList.length"  :data="{ count: data.lianxiCount,...data.lianxiList[0],iconsArr:data.iconsArr}"></lianxiCardVue>
			<!-- 课程 -->
			<kechengCardVue v-if="data.kechengList.length"   :data="{ count: data.kechengCount,...data.kechengList[0],iconsArr:data.iconsArr}"></kechengCardVue>
		</template>
		<view class="default-img-box" v-else>
			<icon :style="{ backgroundImage: 'url(' + data.defaultIndexImg + ')' }"></icon>
			<text>没有可培训的内容...</text>
		</view>
		<!-- 底部区域 -->
		<customTabbarClient :currentTab="0"></customTabbarClient>
	</view>
</template>

<script setup>
	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
	import kaoshiCardVue from '@/components/listCard/kaoshiCard.vue';
	import kechengCardVue from '@/components/listCard/kechengCard.vue';
	import lianxiCardVue from '@/components/listCard/lianxiCard.vue';
	import customTabbarClient from "@/components/custom-tabbar/custom-tabbar-client.vue"

	import * as httpApi from "@/api/shouye.js"
	import {
		onLoad, onShow
	} from "@dcloudio/uni-app"
	import {
		reactive
	} from "vue"
	import cacheManager from '@/utils/cacheManager.js'

	const data = reactive({
		kaoshiCount: 0,
		kaoshiList: [],
		kechengCount: 0,
		kechengList: [],
		lianxiCount: 0,
		lianxiList: [],
		realName: '',
		defaultIndexImg: '',
		iconsArr: {
			timeIcon: '',
			numIcon: '',
			sumIcon: '',
			jgIcon: '',
		},
	})

	function initPage() {
		httpApi.getAppIndexInfo().then(res => {
			const {
				kaoshiCount,
				kaoshiList,
				kechengCount,
				kechengList,
				lianxiCount,
				lianxiList
			} = res.data;
			
			data.kaoshiCount = kaoshiCount;
			data.kaoshiList = kaoshiList || [];
			data.kechengCount = kechengCount;
			data.kechengList = kechengList || [];
			data.lianxiCount = lianxiCount;
			data.lianxiList = lianxiList || [];
		})
	}


	onLoad(() => {
		const auth = cacheManager.get('auth');
		data.realName = auth.realName;
		data.defaultIndexImg = cacheManager.get('projectImg').index_default_img;
		data.iconsArr.timeIcon = cacheManager.get('projectImg').index_content_icon1;
		data.iconsArr.numIcon = cacheManager.get('projectImg').index_content_icon2;
		data.iconsArr.sumIcon = cacheManager.get('projectImg').index_content_icon3;
		data.iconsArr.jgIcon = cacheManager.get('projectImg').index_content_icon4;
	})
	
	onShow(() => {
		initPage();
	})
</script>