smart_campus_uni/pages/questions/questions.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';
import renderMath from '@/utils/mathJax/renderMath.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.map(item => {
			item.questioncontent = detailMath(item.questioncontent);
			return item;
		});
	})
})

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 || (scrollStatus.value === 'loading')) return;
	scrollStatus.value = 'loading';
	queryParams.value.pageindex++;
	console.log(queryParams.value)
	getQuestionList(queryParams.value).then(list => {
		if (!list.length) {
			scrollStatus.value = 'no-more'
			isNoMore.value = true;
			return;
		}
		list = list.map(item => {
			item.questioncontent = detailMath(item.questioncontent);
			return item;
		});
		questionList.value = [...questionList.value, ...list]
	}).finally(() => {
		scrollStatus.value = 'more';
	})
}

function detailMath(text) {
	return renderMath(text);
}

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>