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>
			<!-- 英语列表 -->
			<template v-if="data.chanpinActiveSelect == 1">
				<view class="ezy-no-sj" v-if="data.list.length">
					<icon></icon>
					<text>暂无数据</text>
				</view>
			</template>
			<!-- 数学列表 -->
			<shuxueListVue v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
			<!-- 语文列表 -->
			<template v-if="data.chanpinActiveSelect == 3">
				<view class="ezy-no-sj" v-if="data.list.length">
					<icon></icon>
					<text>暂无数据</text>
				</view>
			</template>
		</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 {
		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";
	
	let currentTabIndex = ref(0)
	const data = reactive({
		list: [{
				name: '英语',
				value: 1
			},
			{
				name: '数学',
				value: 2
			},
			{
				name: '语文',
				value: 3
			},
		],
		chanpinActiveSelect: 2,

		shuxueList: [],
	})

	function getShuxueList() {
		shuxueHttp.getShuxueChanpinList().then(res => {
			data.shuxueList = res.data;
		})
	}

	function handleSelectChanpin(item) {
		data.chanpinActiveSelect = item.value
	}
	onShow(() => {
			currentTabIndex.value = 0;
	})
	onLoad(() => {
		uni.hideTabBar()
		getShuxueList()
	})
</script>