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="xuanke-tab-box">
        <!-- 动画按钮 -->
        <ezyActiveVue class="ezy-btn-active tab-item" v-for="item in data.list"
                      :key="item.value"
                      :class="{active: item.value == data.chanpinActiveSelect}"
                      @aclick="handleSelectChanpin(item)">
          {{ item.name }}
        </ezyActiveVue>
      </view>
      <!-- 数学列表 -->
      <shuxueListVue v-if="data.chanpinActiveSelect == 1" :list="data.shuxueList"></shuxueListVue>
      <!-- 英语列表 -->
      <yingyuListVue v-if="data.chanpinActiveSelect == 2" :list="data.yingyuList"></yingyuListVue>
      <!-- 语文列表 -->
      <yuwenListVue v-if="data.chanpinActiveSelect == 3" :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 {getFullTimer} from "../../utils/common";

let currentTabIndex = ref(0)
const data = reactive({
  list: [
    {
      name: '数学',
      value: 1
    },
    {
      name: '英语',
      value: 2
    },
    {
      name: '语文',
      value: 3
    },
  ],
  chanpinActiveSelect: 1,

  shuxueList: [],
})


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;
  })
}

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

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

  if (getFullTimer() !== `2026-01-28`) {
    //每日刷新
    getShuxueList();
  }
})

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