You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
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>
|