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 {
		useSelectGrade
	} from './useSelectGrade';

	// 页面路由参数需要 年级Id+学期Id


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

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

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