jwl-applet/src/pages/questionBank/exclusiveExercise.vue

<template>
	<view>
		<u-loading-page :loading="getLoading" loading-text="题库更新中..."></u-loading-page>
		<view class="p14" v-if="!getLoading">
			<view class="flex jc-sb">
				<view class="relative mr5" @tap="toIconSkill">
					<image style="width: 336rpx;height: 152rpx;" src="../../static/image/practice/errorprone_bg.png">
					</image>
					<view style="position: absolute;left: 0;top: 0;" class="p10">
						<view style="color: #04B13B;font-size: 18px;">图标技巧</view>
						<text style="color: #04B13B;font-size: 14px;">快速记忆</text>
					</view>
				</view>
				<view class="relative ml5" @tap="toChapterSkill">
					<image style="width: 363rpx;height: 170rpx;" src="../../static/image/practice/chapter_bg.png"></image>
					<view style="position: absolute;left: 0;top: 0;" class="p10">
						<view style="color: #FF6E02;font-size: 18px;">章节练习</view>
						<text style="color: #FF6E02;font-size: 14px;">共{{chapterNum}}章</text>
					</view>
				</view>
			</view>
			<view class="bc-fff pt14" style="border-radius: 20rpx;">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex"
						@click="toAnswer(listItem.title,listItem.isError,listItem.isNew)">
						<view class="mb5" style="width: 84rpx;height: 84rpx;">
							<image style="width: 84rpx;height:84rpx;" mode="heightFix" :src="listItem.image"></image>
						</view>
						<text class="grid-text fs14 cor-000">{{listItem.title}}</text>
						<text class="grid-text mb10 fs12 cor-999">{{listItem.subTitle}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="mt14 p14 bc-fff" style="border-radius: 20rpx;">
				<text class="fs18 cor-000 fw600">常见考点</text>
				<view class="flex ai-c wp100 mt10" style="flex-wrap: wrap;">
					<view class="wp50 flex ai-c p15tb" style="border-bottom: 1rpx solid #DDDCDC;"
						v-for="(item,index) of testCenterList" :key="index" @tap="toQuestionBank(item)">
						<view class="dot_item">{{index+1}}</view>
						<text class="ml5 topic_cont_text" style="width: calc(100% - 65rpx);">{{item.configItemName}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import errorIcon from "../../static/image/practice/error_icon.png"
	import newRulesIcon from "../../static/image/practice/newRules_icon.png"
	import neverWriteIcon from "../../static/image/practice/neverWrite_icon.png"
	import danxuanIcon from "../../static/image/index/danxuan.png"
	import panduanIcon from "../../static/image/index/panduan.png"
	import tupianIcon from "../../static/image/index/tupian.png"
	import {
		querySysConfigList,
		querySpecialNum,
		queryQuestionId
	} from '@/jtools/api/question';
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import useQuestionStore from '@/jtools/store/question' //引入store
	import storage from '@/jtools/storage';
	export default {
		data() {
			return {
				chapterNum:0,
				errorIcon,
				newRulesIcon,
				neverWriteIcon,
				list: [{
					title: '新规题',
					subTitle: '392题',
					isNew: 1,
					isError: 0,
					image: newRulesIcon
				}, {
					title: '易错题',
					isNew: 0,
					isError: 1,
					subTitle: '392题',
					image: errorIcon
				}, {
					title: '单选题',
					subTitle: '392题',
					isNew: 0,
					isError: 0,
					image: danxuanIcon
				}, {
					title: '判断题',
					subTitle: '392题',
					isNew: 0,
					isError: 0,
					image: panduanIcon
				}, {
					title: '图片题',
					subTitle: '392题',
					isNew: 0,
					isError: 0,
					image: tupianIcon
				}],
				testCenterList: [],
				subject: '1'
			}
		},
		onLoad(op) {
			if (op.subject) {
				this.subject = op.subject
			}
			this.getExamPoint()
			this.getQuestionNum()
			this.getChapterList()
		},
		computed: {
			...mapState(useQuestionStore, ["loading_subject4", "loading_subject1", "version"]), //映射函数，取出tagslist
			getLoading() {
				return this.loading_subject4 && this.loading_subject1
			}
		},
		methods: {
			...mapActions(useQuestionStore, ['getAllQuestion']),
			getChapterList(){
				const carTypeId=storage.get('carType') || '1001'
				const key=this.subject=='1'?'ChapterOfSubjectOne':'ChapterOfSubjectFour'
				querySysConfigList(carTypeId,'ChapterOfSubjectOne').then(resp=>{
					if(resp.code==='0000'&&resp.data){
						this.chapterNum=resp.data.length
					}
				})
			},
			getQuestionNum() {
				querySpecialNum({
					carTypeId: storage.get('carType') || '1001',
					subject: this.subject
				}).then(resp => {
					if (resp.code === '0000') {
						if (this.subject == '1') {
							this.list = [{
								title: '新规题',
								subTitle: resp.data.newQuestionNum + '题',
								isNew: 1,
								isError: 0,
								image: newRulesIcon,
							}, {
								title: '易错题',
								isNew: 0,
								isError: 1,
								subTitle: resp.data.errorQuestionNum + '题',
								image: errorIcon,
							}, {
								title: '单选题',
								subTitle: resp.data.radioQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: danxuanIcon,
							}, {
								title: '判断题',
								subTitle: resp.data.judgeQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: panduanIcon,
							}, {
								title: '图片题',
								subTitle: resp.data.imageQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: tupianIcon,
							}]
						} else {
							this.list = [{
								title: '新规题',
								subTitle: resp.data.newQuestionNum + '题',
								isNew: 1,
								isError: 0,
								image: newRulesIcon
							}, {
								title: '易错题',
								isNew: 0,
								isError: 1,
								subTitle: resp.data.errorQuestionNum + '题',
								image: errorIcon,
							}, {
								title: '单选题',
								subTitle: resp.data.radioQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: danxuanIcon,
							}, {
								title: '多选题',
								subTitle: resp.data.multipleChoiceQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: neverWriteIcon
							}, {
								title: '判断题',
								subTitle: resp.data.judgeQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: panduanIcon,
							}, {
								title: '图片题',
								subTitle: resp.data.imageQuestionNum + '题',
								isNew: 0,
								isError: 0,
								image: tupianIcon,
							}]
						}

					}
				})
			},
			getExamPoint() {
				const carTypeId = storage.get('carType') || '1001'
				const examKey = this.subject == '1' ? 'ExamKeysOfSubjectOne' : 'ExamKeysOfSubjectFour'
				querySysConfigList(carTypeId, examKey).then(resp => {
					if (resp.code === '0000') {
						this.testCenterList = resp.data
					}
				})
			},
			getQuestion(param,title) {
				queryQuestionId({
					versionId: this.version,
					carTypeId: storage.get('carType') || '1001',
					subject: this.subject,
					...param,
				}).then(async (resp) => {
						if (resp.code === '0000') {
							if(resp.data&&resp.data.length){
								const arr = resp.data
								const listJson = JSON.stringify(arr)
								uni.navigateTo({
									url: "/pages/questionBank/questionBank?navTitle=" + title + "&subject=" + this.subject + "&questionIdList=" + listJson
								})
							}else{
								uni.showToast({
									title: '暂无题目',
									icon: 'none'
								})
							}
						}else if (resp.code === '4001') {
					uni.showToast({
						title: '当前题库非最新版，请更新~',
						icon: 'none'
					})
					this.getAllQuestion()
				}
			})
	},
	toAnswer(title, isError, isNew) {
			if (title == '单选题') {
				this.getQuestion({type:'2'},title)
			} else if (title == '多选题') {
				this.getQuestion({type:'3'},title)
			} else if (title == '判断题') {
				this.getQuestion({type:'1'},title)
			} else if (title == '图片题') {
				this.getQuestion({isImage:'1'},title)
			} else {
				this.getQuestion({isNew:isNew,isError:isError},title)
			}
		},
		toQuestionBank(val) {
			this.getQuestion({examKey:val.configItemCode},val.configItemName)
		},
		toIconSkill() {
			uni.navigateTo({
				url: "/pages/index/iconSkill"
			})
		},
		toChapterSkill() {
			uni.navigateTo({
				url: "/pages/questionBank/chapterExercise?subject="+this.subject
			})
		}
	}
	}
</script>

<style scoped>
	.dot_item {
		width: 40rpx;
		height: 40rpx;
		line-height: 41rpx;
		color: #fff;
		text-align: center;
		background: #0BD032;
		border-radius: 50%;
	}

	.topic_cont_text {
		height: 45rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}
</style>