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.

140 lines
3.5 KiB
Vue

<template>
<view class="questions-page">
<ch-nav-bar :height="66" title="试题" :rightWidth="280">
<template v-slot:right>
<uni-icons v-if="!isEdit" type="compose" color="#fff" size="56" @click="edit"></uni-icons>
<template v-else>
<ch-nav-btn icon="paperplane-filled" iconSize="28" color="#fff" @click.native="print">
打印
</ch-nav-btn>
<ch-nav-btn class="mg-l-10" icon="closeempty" iconSize="28" color="#fff" @click.native="cancel">
取消
</ch-nav-btn>
</template>
</template>
</ch-nav-bar>
<scroll-view scroll-y="true" @scrolltolower="scrollBottom">
<view class="question-list">
<checkbox-group @change="checkChange">
<ch-flex items="center" class="question-item" v-for="item in questionList" :key="item.questionid">
<checkbox v-show="isEdit" :value="item.questionid.toString()" />
<uni-card ref="questionRef" @click="checkQues(item.questionid)">
<view class="question__sort-content" v-html="item.questioncontent"></view>
<view class="question__info">
<text>{{ item.gradename }}</text>
<text>{{ item.addtime }}</text>
<text>{{ item.subjectname }}</text>
</view>
</uni-card>
</ch-flex>
</checkbox-group>
</view>
<ch-empty v-if="!questionList.length"></ch-empty>
<uni-load-more :status="scrollStatus" v-if="questionList.length > queryParams.pagesize"></uni-load-more>
</scroll-view>
</view>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref, nextTick, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { getQuestionList } from '@/api/question.js';
const defaultParams = {
gradeid: 0,
subjectid: 0,
knowledgeid: 0,
pageindex: 1,
pagesize: 10
}
const data = reactive({
questionList: [],
quesIds: [],
checkIds: [],
isEdit: false,
scrollStatus: 'more',
isNoMore: false,
queryParams: {...defaultParams}
})
const { questionList, quesIds, isEdit, checkIds, queryParams, scrollStatus, isNoMore } = toRefs(data);
onLoad((option) => {
const { gradeId, subjectId, knowledgeId } = option;
queryParams.value.gradeid = gradeId;
queryParams.value.subjectid = subjectId;
queryParams.value.knowledgeid = knowledgeId;
})
onMounted(() => {
getQuestionList(queryParams.value, { loading: true }).then(list => {
questionList.value = list;
})
})
watch(() => questionList.value, (newList) => {
quesIds.value = createQuesIdList(newList);
uni.setStorage({
key: 'quesIds',
data: JSON.stringify(quesIds.value)
})
})
function createQuesIdList (list) {
const idList = list.map(item => item.questionid);
return idList;
}
function scrollBottom () {
console.log('到底了')
if (isNoMore.value) return;
scrollStatus.value = 'loading';
queryParams.value.pageindex++;
getQuestionList(queryParams.value).then(list => {
if (!list.length) {
scrollStatus.value = 'no-more'
isNoMore.value = true;
return;
}
questionList.value = [...questionList.value, ...list]
scrollStatus.value = 'more';
})
}
function edit () {
isEdit.value = true;
}
function checkQues(id) {
uni.navigateTo({
url: `/pages/quesDetail/quesDetail?id=${id}`
})
}
function checkChange (e) {
checkIds.value = e.detail.value;
}
function print () {
const quesList = checkIds.value.map(id => questionList.value.find(item => item.questionid == id))
uni.setStorage({
key: 'questions',
data: JSON.stringify(quesList)
})
uni.navigateTo({
url: '/pages/print/print'
})
}
function cancel () {
isEdit.value = false;
checkIds.value = []
}
</script>
<style lang="scss" scoped>
@import './questions.scss';
</style>