uniProject/pages/chanpinXuanze/index.vue

<template>
	<view class="ezy-xuanke-page">
		<!-- 返回区域 -->
		<view class="icon-title-navBar-box">
			<text class="nav-bar-title">选课</text>
		</view>
		<view class="ezy-page-body">
			<!-- 头部区域 -->

			<view class="ezy-xueke-tab-box">
				<!-- 动画按钮 -->
				<ezyActiveVue class="ezy-btn-active tab-item" v-for="item in data.list" :key="item.key"
					:class="{active: item.key == data.chanpinActiveSelect}" @aclick="handleSelectChanpin(item)">
					{{ item.label }}
				</ezyActiveVue>
			</view>
			<!-- 数学列表 -->
			<shuxueListVue v-if="data.chanpinActiveSelect == 'shuxue'" :list="data.shuxueList"></shuxueListVue>
			<!-- 英语列表 -->
			<yingyuListVue v-if="data.chanpinActiveSelect == 'yingyu'" :list="data.yingyuList"></yingyuListVue>
			<!-- 语文列表 -->
			<yuwenListVue v-if="data.chanpinActiveSelect == 'yuwen'" :list="data.yuwenList"></yuwenListVue>
		</view>
	</view>
	<custom-tab-bar :show="true" :current-index="currentTabIndex" />
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import shuxueListVue from "./components/shuxueList.vue";
	import yingyuListVue from "./components/yingyuList.vue";
	import yuwenListVue from "./components/yuwenList.vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import * as shuxueHttp from "@/api/chanpinShuxue.js"
	import CustomTabBar from "@/components/custom-tabbar/index.vue";
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	import {
		getChanpinTongyongIndex
	} from "@/api/chanpinShuxue";
	import {
		useSelectDateForUpdate
	} from "@/utils/common";

	let currentTabIndex = ref(0)
	const data = reactive({
		list: [{
				key: 'shuxue',
				label: '数学'
			},
			{
				key: 'yingyu',
				label: '英语'
			},
			{
				key: 'yuwen',
				label: '语文'
			}
		],
		chanpinActiveSelect: 'shuxue',

		shuxueList: [],
		yingyuList: [],
		yuwenList: [],
	})
	const {isNowDate,resetDate} = useSelectDateForUpdate('xuankeDate')

	function getFormatData(data) {
		const shuxue = data.shuxue || {};
		const yingyu = data.yingyu || {};
		const yuwen = data.yuwen || {};

		return {
			shuxue: Object.entries(shuxue).map(([chanpin, value]) => {
				return {
					chanpin,
					value
				};
			}),
			yingyu: Object.entries(yingyu).map(([chanpin, value]) => {
				return {
					chanpin,
					value
				};
			}),
			yuwen: Object.entries(yuwen).map(([chanpin, value]) => {
				return {
					chanpin,
					value
				};
			}),
		}
	}

	function getShuxueList() {
		shuxueHttp.getChanpinTongyongIndex().then(res => {
			const result = getFormatData(res.data);
			data.shuxueList = result.shuxue;
			data.yingyuList = result.yingyu;
			data.yuwenList = result.yuwen;
			
			if (!data.shuxueList.length && !data.yingyuList.length && !data.yuwenList.length) {
				// 并无学习数据时，清理时间缓存
				resetDate()
			}
			
		}).catch(err => {
			// 请求异常时，清理时间缓存
			resetDate()
		})
	}

	function handleSelectChanpin(item) {
		data.chanpinActiveSelect = item.key
	}

	onShow(() => {
		currentTabIndex.value = 0;
		data.chanpinActiveSelect = 'shuxue';

		if (isNowDate()) {
			// 当天不刷新
		} else {
			//每日刷新
			getShuxueList()
		}
	})

	onLoad(() => {
		uni.hideTabBar()
	})
</script>