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">
				<view v-for="item in data.list" :key="item.value" class="tab-item"
				:class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin(item)">{{item.name}}</view>
			</view>
			<!-- 英语列表 -->
			<view v-if="data.chanpinActiveSelect == 1"> </view>
			<!-- 数学列表 -->
			<shuxueListVue v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
			<!-- 语文列表 -->
			<view class="no-kc-list" v-if="data.chanpinActiveSelect == 3">
				<icon></icon>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
		<CustomTabBar :currentTabNumber="0"></CustomTabBar>
</template>

<script setup>
	import {reactive} from "vue";
	import shuxueListVue from "./components/shuxueList.vue";
	import {onLoad} from "@dcloudio/uni-app"
	import * as shuxueHttp from "@/api/chanpinShuxue.js"
	import CustomTabBar from "@/components/custom-tabbar/custom-tabbar.vue";
	
	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
	}
	
	onLoad(() => {
		getShuxueList()
	})
</script>