smart_campus_uni/pages/subjectSelect/subjectSelect.vue

<template>
	<view class="subject-select-page">
		<ch-nav-bar title="知识点选择" :height="66" :rightWidth="140">
			<block v-slot:right>
				<button class="complete-btn" size="mini" type="warn" :disabled="!isComplete" @click="complete">完成</button>
			</block>
		</ch-nav-bar>
		<uni-row :gutter="0" @click="itemChange">
			<uni-col :span="5">
				<scroll-view class="grade-list" scroll-y="true">
					<view class="grade-item list-item" :class="{'selected': item.gradeid == selectIds[0]}" v-for="item in gradeList" :key="item.gradeid" data-type="grade" :data-item="item">
						<text>{{ item.gradename }}</text>
					</view>
				</scroll-view>
			</uni-col>
			<uni-col :span="6">
				<scroll-view class="subject-list" scroll-y="true">
					<view class="subject-item list-item" :class="{'selected': item.subjectid == selectIds[1]}" v-for="item in subjectList" :key="item.subjectid" data-type="subject" :data-item="item">
						<text>{{ item.subjectname }}</text>
					</view>
				</scroll-view>
			</uni-col>
			<uni-col :span="13">
				<scroll-view class="press-list" scroll-y="true">
					<view class="press-item list-item" v-if="selectIds[1]" :class="{'selected': item.knowledgeid == selectIds[2]}" v-for="item in knowledgeList" :key="item.knowledgeid" data-type="knowledge" :data-item="item">
						<text>{{ item.knowledgename }}</text>
					</view>
					<view class="default-text" v-else>请选择年级、科目</view>
				</scroll-view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
import { onMounted, reactive, toRefs, watch } from "vue";
import { getGradeList, getSubjectList, getKnowledgeList } from '@/api/school.js'

const selectFunDict = {
	'subject': subjectChange,
	'grade': gradeChange,
	'knowledge': knowledgeChange
}

const data = reactive({
	subjectList: [],
	gradeList: [],
	knowledgeList: [],
	selectIds: [null, null, null],
	isComplete: false
})

const { subjectList, gradeList, knowledgeList, selectIds, isComplete } = toRefs(data);

onMounted(() => {
	Promise.all([getGradeList(), getSubjectList()]).then(resArr => {
		gradeList.value = resArr[0];
		subjectList.value = resArr[1]
	})
})

watch(selectIds.value, (newV) => {
	isComplete.value = newV.every(item => !!item || item == 0)
})

function itemChange (e) {
	console.log('target', e.target)
	const target = e.target;
	const itemType = target.dataset.type || false;
	const item = target.dataset.item || {};
	
	itemType
	&&
	selectFunDict[itemType]
	&&
	selectFunDict[itemType](item)
	
	if (!itemType || itemType === 'knowledge' || selectIds.value.slice(0, 2).some(item => !item)) return;

	const params = {
		gradeid: selectIds.value[0],
		subjectid: selectIds.value[1]
	}
	
	getKnowledgeList(params).then(list => {
		selectIds.value[2] = null;
		knowledgeList.value = list;
	})
}

function complete () {
	uni.navigateTo({
		url: `/pages/questions/questions?gradeId=${selectIds.value[0]}&subjectId=${selectIds.value[1]}&knowledgeId=${selectIds.value[2]}`
	})
}

function gradeChange (grade) {
	selectIds.value[0] = grade.gradeid
	console.log('选中年级：', grade)
}

function subjectChange (subject) {
	selectIds.value[1] = subject.subjectid;
	console.log('选中科目：', subject)
}

function knowledgeChange (knowledge) {
	selectIds.value[2] = knowledge.knowledgeid
	console.log('选中出版社：', knowledge)
}
</script>

<style lang="scss" scoped>
@import './subjectSelect.scss';
</style>