uniProject/pages/chanpinXuanze/index.vue

<template>
	<!-- 返回区域 -->
		<view>
			<!-- <view @click="handleBack"></view> -->
			<view>选课</view>
		</view>
		<!-- 头部区域 -->
		<view>
			<view v-for="item in data.list" :key="item.value" :class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
		</view>
		<!-- 英语列表 -->
		<view class="list yingyu" v-if="data.chanpinActiveSelect == 1">
			
		</view>
		<!-- 数学列表 -->
		<shuxueListVue class="list shuxue" v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
		<!-- 语文列表 -->
		<view class="list yuwen" v-if="data.chanpinActiveSelect == 3">
			
		</view>
		
		<CustomTabBar :currentTabNumber="0"></CustomTabBar>
		<CustomTabBar :levelId="levelId" :currentTabNumber="3" :typeId="typeId" :subjectId="subjectId"
			:tipFlag="tipFlag">
		</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 handleBack() {}
	
	function getShuxueList() {
		shuxueHttp.getShuxueChanpinList().then(res => {
			data.shuxueList = res.data;
		})
	}
	
	function handleSelectChanpin(item) {
		data.chanpinActiveSelect = item.value
	}
	
	onLoad(() => {
		getShuxueList()
	})
</script>

<style scoped lang="scss">
.active {
	color: red
}
</style>