uniProject/pages/selectGradesTerms/index.vue

<template>
	<view class="grades-terms-container">
		<view class="content-container">
			<view class="content-title">请选择年级和学期</view>
			<text class="content-desc">我们会根据您选择，为您匹配对应的学习内容</text>
			<view class="grade-label">
				年级
			</view>
			<view class="grade-container">
				<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="term-label">
				学期
			</view>
			<view class="term-container">
				<view v-for="item in xueqi_list" :key="item.id" @click="handleSelectTerm(item)"
					:class="['term-item',{active: item.id == activeXueqi}]">{{item.label}}</view>
			</view>
			<view class="under-line"></view>
			<button class="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>

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

	.grade-container {
		display: flex;
		flex-wrap: wrap;
	}

	.grade-item {
		flex: 1;
		min-width: 50%;
		text-align: center;
		padding: 10px;
	}

	.grade-label {
		text-align: center;
		padding: 10px;
	}

	.term-container {
		display: flex;
		flex-wrap: wrap;
	}

	.term-item {
		flex: 1;
		min-width: 50%;
		text-align: center;
		padding: 10px;
	}

	.term-label {
		text-align: center;
		padding: 10px;
	}
</style>