uniProject/pages/my/sxtkPage.vue

<template>
	<view>
		<view class="icon-title-navBar-box">
			<view class="nav-bar-icon" @click="handleBack"></view>
		</view>
		<view style="display: flex;justify-content: space-around">
			<view v-for="(item,index) in jiaocaiData" :key="index">
				<view @click="selectNianji(item,index)"
				:class="{'active': currentIndex === index}"
				>{{item.nianji}}</view>
			</view>
		</view>
		<view>
			<view v-for="(item,index) in currentBanbenList" :key="index"
				:class="{'active': currentBanbenIndex === index}"
					@click="selectBanben(index)"
			>
				{{item}}
			</view>
		</view>
		<view class="grade-line"></view>
		<button class="grade-confirm-btn" @click="handleConfirm"></button>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { selectTiku } from '@/api/my.js'
	import { ref } from "vue";
	
	let jiaocaiData = ref(null)
	let currentBanbenList = ref([])
		let currentIndex = ref(0)
		let currentBanbenIndex = ref(0)
	function selectNianji(item,index){
			currentIndex.value = index
			currentBanbenList.value = item.banbenList
			currentBanbenIndex.value = 0
	}
		function selectBanben(index) {
			currentBanbenIndex.value = index
		}
	function handleBack() {
		uni.redirectTo({
			url: '/pages/my/index'
		});
	}
	
	function handleConfirm(){
		// 确认逻辑
	}
	
	function getInfo(){
		selectTiku({}).then(res=>{
			jiaocaiData.value = [
				{
					"nianji": "L1",
					"banbenList": ["人教版"]
				},
				{
					"nianji": "L2",
					"banbenList": ["人教版222","人教版222333"]
				}
			]
			//jiaocaiData.value = res.data
			// 默认显示第一个年级的版本列表
			if(jiaocaiData.value && jiaocaiData.value.length > 0){
				currentBanbenList.value = jiaocaiData.value[0].banbenList
			}
		})
	}
	
	onLoad((options) => {
		if(options.nianjiIndex && options.banbenIndex){
					currentIndex.value = Number(options.nianjiIndex)
					currentBanbenIndex.value = Number(options.banbenIndex)
				}
		getInfo()
	})
</script>

<style>
.active {
	background-color: #42b983;
	color: #fff;
}
</style>