uniProject/pages/selectGradesTerms/index.vue

<template>
	<view class="grades-terms-page">
		<view class="grades-body">
			<view class="grades-change-title"></view>
			<text class="grades-title-desc">我们会根据您选择，为您匹配对应的学习内容</text>
			<view class="grades-terms-title terms-title-img"></view>
			<view class="grade-item-box">
				<view v-for="item in nianji_list" :key="item.id" @click="handleSelectGrade(item)"
					:class="['grade-item', {active: item.id == activeNianji}]">{{item.label}}</view>
			</view>
			<view class="grades-terms-title grades-title-img"></view>
			<view class="grade-item-box">
				<view v-for="item in xueqi_list" :key="item.id" @click="handleSelectTerm(item)"
					:class="['grade-item',{active: item.id == activeXueqi}]">{{item.label}}</view>
			</view>
			<view class="grade-line"></view>
			<button class="grade-confirm-btn" @click="handleConfirm"></button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from "vue";
	import {
		nianji_list,
		xueqi_list
	} from "@/utils/constant.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";

	function useSelectGrade() {

		const data = reactive({
			activeNianji: null, // 当前年级
			activeXueqi: null, // 当前学期
		});

		onLoad((options) => {
			const {
				nianji,
				xueqi
			} = options;
			data.activeNianji = nianji;
			data.activeXueqi = xueqi;
		});

		// 选择 年级+学期
		function handleConfirm() {
			if (!data.activeNianji) {
				uni.showToast({
					title: "请选择年级",
					duration: 2000,
				});
				return;
			}

			if (!data.activeXueqi) {
				uni.showToast({
					title: "请选择学期",
					duration: 2000,
				});
				return;
			}

			const options = {
				nianji: data.activeNianji,
				xueqi: data.activeXueqi,
			};

			goDAOToStudy(options);
		}

		// 跳转 岛 学习
		function goDAOToStudy({
			nianji,
			xueqi,
			text
		}) {
			uni.redirectTo({
				url: `/pages/study/index?xueqi=${data.activeXueqi}&nianji=${data.activeNianji}&flag=selectGrades`
			})
		}

		return {
			...toRefs(data),

			// 方法
			handleConfirm, // 选择年级+学期
		};
	}

	const {
		activeNianji,
		activeXueqi,
		handleConfirm
	} = useSelectGrade()

	function handleSelectGrade(item) {
		activeNianji.value = item.id;
	}

	function handleSelectTerm(item) {
		activeXueqi.value = item.id;
	}
</script>