uniProject/pages/selectGradesTerms/index.vue

<template>
	<view>
		<view>请选择年级和学期</view>
		<text>我们会根据您选择，为您匹配对应的学习内容</text>
		<view class="grade-label">
			年级
		</view>
		<view class="grade-container">
			<view v-for="item in data.nianji_list" :key="item.id" @click="handleSelectGrade(item)" :class="['grade-item', {active: item.id === data.activeGrade}]">{{item.label}}</view>
		</view>
		<view class="term-label">
			学期
		</view>
		<view class="term-container">
			<view v-for="item in data.xueqi_list" :key="item.id" @click="handleSelectTerm(item)"  :class="['term-item',{active: item.id === data.activeTerm}]">{{item.label}}</view>
		</view>
		
		<button @click="handleSelect">确定</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	
	
	const data = reactive({
		nianji_list: [{
				label: '一年级',
				id: 1
			},
			{
				label: '二年级',
				id: 2
			},
			{
				label: '三年级',
				id: 3
			},
			{
				label: '四年级',
				id: 4
			},
			{
				label: '五年级',
				id: 5
			},
			{
				label: '六年级',
				id: 6
			},
		],
		xueqi_list: [{
				label: '上册',
				id: 1
			},
			{
				label: '下册',
				id: 2
			}
		],
		activeGrade: null,
		activeTerm: null
	})

	function handleSelectGrade(item) {
		data.activeGrade = item.id;
	}
	function handleSelectTerm(item) {
			data.activeTerm= item.id;
	}
	
	function handleSelect() {
		if (!data.activeGrade) {
			uni.showToast({
					title: '请选择年级',
					duration: 2000
			})
			return;
		}
		if (!data.activeTerm) {
			uni.showToast({
					title: '请选择学期',
					duration: 2000
			})
			return;
		}
		
		const text1 = data.nianji_list.find(item => item.id == data.activeGrade).label;
		const text2 = data.xueqi_list.find(item => item.id == data.activeTerm).label;
		const options = {
			grade: data.activeGrade,
			term: data.activeTerm,
		}
		uni.navigateTo({
			url: `/pages/study/index?gradeId=${options.grade}&termId=${options.term}&text=${text1}${text2}`
		})
	}
</script>

<style lang="scss">
	.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>