uniProject/pages/client/ShouYe/shouye.vue

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

<script setup>
	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: ''
	})

	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;
	})
	
	onShow(() => {
		initPage();
	})
</script>