uniProject/pages/chanpinZiliao/index.vue

<template>
	<view class="ezy-ziliao-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="tab-item ezy-btn-active" v-for="item in data.list" :key="item.value"
					:class="{active: item.key == data.chanpinActiveSelect}" @aclick="handleSelectChanpin(item)">
					{{item.label}}</ezyActiveVue>
			</view>

			<!-- 资源卡片列表 -->

			<!-- 数学 -->
			<ShuXueList v-if="data.chanpinActiveSelect === 'shuxue'" :list="data.shuxueList" />

			<!-- 英语 -->
			<YingYuList v-if="data.chanpinActiveSelect === 'yingyu'" :list="data.yingyuList" />

			<!-- 语文 -->
			<YuWenList v-if="data.chanpinActiveSelect === 'yuwen'" :list="data.yuwenList" />

		</view>
	</view>
	<custom-tab-bar :show="true" :current-index="currentTabIndex" />
</template>

<script setup>
import {reactive, ref} from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app"
import {ziliaoIndex} from '@/api/ziliao.js'
import CustomTabBar from "@/components/custom-tabbar/index.vue";
import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
import ShuXueList  from "./shuxue/sxList.vue"
import YingYuList  from "./yingyu/yyList.vue"
import YuWenList  from "./yuwen/ywList.vue"
import {useSelectDateForUpdate} from "@/utils/common";
let currentTabIndex = ref(2);
const {isNowDate,resetDate} = useSelectDateForUpdate('ziliaoDate')
const data = reactive({
	list:[
	  { key: 'shuxue', label: '数学' },
	  { key: 'yingyu', label: '英语' },
	  { key: 'yuwen', label: '语文' }
	],
	chanpinActiveSelect: 'shuxue',
	shuxueList: {},
	yingyuList: {},
	yuwenList: {}
})

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

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

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

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

onShow(() => {
  currentTabIndex.value = 2;
  data.chanpinActiveSelect = 'shuxue'
  if (isNowDate()) {
  	// 当天不刷新
  } else {
  	//每日刷新
  	getZiliaoList()
  }
})

onLoad(() => {
	// 隐藏默认系统导航栏显示自定义导航栏
	uni.hideTabBar()
	getZiliaoList()
})
</script>

<style>
</style>