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': currentNianjiName == item.nianji}">
					{{item.nianji}}
				</view>
			</view>
		</view>
		<view>
			<view v-for="(item,index) in currentBanbenList" :key="index" :class="{'active': banbenName == item}"
				@click="selectBanben(item,index)">
				{{item}}
			</view>
		</view>
		<view class="grade-line"></view>
		<button class="grade-confirm-btn" @click="handleConfirm">确认</button>
		<banbenConfirmDialog ref="jiaocaiRef" @confirm-btn="jcConfirm" :content="jcContent"></banbenConfirmDialog>
				<CustomTabBar ></CustomTabBar>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
		import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import {
		selectTiku
	} from '@/api/my.js'
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import {
		ref
	} from "vue";
	import banbenConfirmDialog from './banbenConfirmDialog.vue';
	let jiaocaiData = ref(null)
	let currentBanbenList = ref([])

	let currentNianjiName = ref(null)
	let currentBanbenIndex = ref(null)
	const banbenName = ref(null)
	const jiaocaiRef = ref(null);
	const jcContent = ref(null);

	function selectNianji(item, index) {
		currentNianjiName.value = item.nianji

		currentBanbenList.value = item.banbenList
		banbenName.value = ''

	}

	function jcConfirm() {
		uni.navigateTo({
			url: '/pages/pdfPage/pdfPage?banben=' + banbenName.value + '&nianji=' + currentNianjiName.value
		});
	}

	function selectBanben(item, index) {

		console.log('item', item);
		if (!currentNianjiName.value) {
			toast("请选择年级")
			return false
		}

		banbenName.value = item

	}

	function handleBack() {
		uni.redirectTo({
			url: '/pages/my/index'
		});
	}

	function handleConfirm() {
		// 确认逻辑
		if (banbenName.value && currentNianjiName.value) {
			jcContent.value = "用户你好，鹅状元将为您随机生成《" + banbenName.value + "》100道试题."
			console.log('jcContent.value', jcContent.value);
			jiaocaiRef.value.handleShow();
		} else {
			toast("请选择年级和对应的教学版本")
			return false
		}
	}

	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.banben && options.nianji) {
			currentNianjiName.value = options.nianji
			banbenName.value = options.banben
		}
		getInfo()
	})
</script>

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