jwl-applet/src/pages/questionBank/components/Question.vue

<template>
	<view>
		<view class="content" v-if="questionList&&questionList.length>0">
			<view class="flex ai-c jc-c">
				<view class="flex type_box jc-sb ai-c" v-if="navTitle!=='考前密卷'">
					<view class="type_item" v-for="(item,index) of tabsList" :key="index"
						:class="tCurrent==item.value?'checked':'unchecked'" @tap="sectionChange(item.value)">{{item.label}}</view>
				</view>
			</view>
			<swiper class="swiper mt20" :current="swiperIndex" :duration="duration" :autoplay="false"
				 @change="onChange" @animationfinish="onAnimationfinish"
				@touchend="touchEnd">
				<swiper-item v-for="(quesItem,quesIndex) in swiperList" :key="quesIndex.questionId">
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view>
							<view class="m14lr">
								<text class="tag_box">{{getQuestType(quesItem.type)}}</text>
								<text class="fs18" style="line-height: 42rpx;vertical-align: middle;">{{quesItem.question}}</text>
							</view>
							<view class="p14" v-if="quesItem.imageUrl">
								<image v-show="quesItem.imageUrl" style="width: 100%;height: auto;" mode="widthFix" :lazy-load="true" @load="onoff='1'" :src="quesItem.imageUrl"></image>
							</view>
							<template v-if="quesItem.type!='3'">
								<view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList" :key="item.op"
									@tap="answerQues(item.opValue,index)">
									<template v-if="item.opDesc">
										<template v-if="quesItem.clickAnswer&&quesItem.trueAnswer.includes(item.opValue)">
											<u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="32"></u-icon>
										</template>
										<template
											v-else-if="quesItem.clickAnswer&&quesItem.clickAnswer?.includes(item.opValue)&&!quesItem.trueAnswer.includes(item.opValue)">
											<u-icon class="mr15" name="close-circle-fill" color="red" size="32"></u-icon>
										</template>
										<template v-else-if="!item.chooseOption">
											<view class="option_item">{{item.op}}</view>
										</template>
										<text style="width: calc(100% - 100rpx);display: inline-block;" class="fs18">{{item.opDesc}}</text>
									</template>
								</view>
								<view class="m14lr mt30"
									v-if="quesItem.clickAnswer&&!quesItem.trueAnswer.includes(quesItem.clickAnswer) || showBestAnswer">
									<view class="answer_box">
										<text class="fs18 fw600 cor-000">答案:{{getRightOp(quesItem.trueAnswer)}}</text>
										<view v-if="showSkillInfo==='show'&&quesItem.skillInfo" class="fs18 cor-000 mt5">答题技巧：{{quesItem.skillInfo}}</view>
									</view>
									<view class="flex ai-c jc-c mt10">
										<view style="height: 6rpx;width: 120rpx;background-color: rgb(232, 232, 232);"></view>
										<view class="fs18 fw600 cor-000 p15lr">试题详解</view>
										<view style="height: 6rpx;width: 120rpx;background-color: rgb(232, 232, 232);"></view>
									</view>
									<view class="mt10">
										<view class="fw600 cor-000 mb10 flex ai-c">
											<view style="background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%);height: 36rpx;width: 8rpx;" class="mr5"></view>题目解析</view>
										<view style="text-indent:2em;">{{quesItem.bestAnswer}}</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList" :key="item.op"
									@tap="answerQues(item.opValue,index)">
									<template v-if="item.opDesc">
										<template
											v-if="quesItem.isChoose&&quesItem.trueAnswer.includes(item.opValue)&&quesItem.clickAnswer&&quesItem.clickAnswer.includes(item.opValue)">
											<u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="32"></u-icon>
										</template>
										<template
											v-else-if="quesItem.isChoose&&quesItem.clickAnswer&&quesItem.clickAnswer.includes(item.opValue)&&!quesItem.trueAnswer.includes(item.opValue)">
											<u-icon class="mr15" name="close-circle-fill" color="red" size="32"></u-icon>
										</template>
										<template
											v-else-if="!quesItem.isChoose||quesItem.clickAnswer&&!quesItem.clickAnswer.includes(item.opValue)&&quesItem.isChoose">
											<template v-if="quesItem.isChoose">
												<view class="option_item"
													:class="quesItem.trueAnswer.includes(item.opValue)&&quesItem.clickAnswer&&!quesItem.clickAnswer.includes(item.opValue)?'right_option':''">
													{{item.op}}
												</view>
											</template>
											<template v-else>
												<view class="option_item"
													:class="quesItem.clickAnswer&&quesItem.clickAnswer.includes(item.opValue)&&!quesItem.isChoose?'checked_option':''">
													{{item.op}}
												</view>
											</template>
										</template>
										<text style="width: calc(100% - 100rpx);display: inline-block;" class="fs18">{{item.opDesc}}</text>
									</template>
								</view>
								<view class="p14" v-if="tCurrent!=1">
									<button :class="quesItem.clickAnswer&&quesItem.clickAnswer.length>1?'dx_checked':'dx_btn'"
										@click="duoxuan(quesItem.clickAnswer)">确认</button>
								</view>
								<view class="m14lr mt30" v-if="isShowAnswer">
									<view class="answer_box">
										<text class="fs18 fw600 cor-000">答案:{{getRightOp(quesItem.trueAnswer)}}</text>
										<view v-if="showSkillInfo==='show'&&quesItem.skillInfo" class="fs18 cor-000"> 答题技巧：{{quesItem.skillInfo}}</view>
										</view>
										<view class="flex ai-c jc-c mt10">
											<view style="height: 6rpx;width: 120rpx;background-color: rgb(232, 232, 232);"></view>
											<view class="fs18 fw600 cor-000 p15lr">试题详解</view>
											<view style="height: 6rpx;width: 120rpx;background-color: rgb(232, 232, 232);"></view>
										</view>
										<view class="mt10">
											<view class="fw600 cor-000 mb10 flex ai-c">
												<view style="background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%);height: 36rpx;width: 8rpx;" class="mr5"></view>题目解析</view>
											<view style="text-indent:2em;">{{quesItem.bestAnswer}}</view>
										</view>
								</view>
							</template>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="wp100 flex jc-sb ai-c p14 bc-fff" v-if="isShowAll" style="position: fixed;bottom: 0;left: 0;">
				<view style="width: 220rpx;">
					<view v-if="type==='practice'" style="width: 220rpx;height: 80rpx;"></view>
					<view v-else-if="type=='exam'" class="btn" style="text-align: center;" @tap="submitPaper">
						<u-count-down ref="countDown_1" :time=" timeCount" format="HH:mm:ss" @change="timeChange"></u-count-down>
						<text>交卷</text>
					</view>
				</view>
				<view class="text-center flex jc-c ai-c" style="flex-direction: column;" @tap="toCollect">
					<u-icon name="star-fill" v-if="collectList.includes(questionList[topicIndex].questionId)"
						color="rgb(249,236,141)" size="24"></u-icon>
					<u-icon name="star" v-else size="24"></u-icon>
					<text class="cor-666">{{collectList.includes(questionList[topicIndex].questionId)?'已收藏':'收藏'}}</text>
				</view>
				<view class="text-center">
					<view style="color: #00B74F;">{{rightList.length}}</view>
					<text class="cor-666">答对</text>
				</view>
				<view class="text-center">
					<view style="color: #FF6E02;">{{wrongList.length}}</view>
					<text class="cor-666">答错</text>
				</view>
				<view class="text-center" @tap="popupShow=!popupShow">
					<view><text class="cor-333">{{topicIndex+1}}</text><text style="color:#999;">/{{questionList.length}}</text>
					</view>
					<text class="cor-666">题板</text>
				</view>
			</view>
			<view v-else class="wp100 p14" style="position: fixed;bottom: 30rpx;left: 0;">
				<button class="vip_btn" @click="toVip">立即查看全部题目</button>
			</view>
			<u-modal :show="tipShow">
				<view class="relative wp100">
					<view class="text-center">
						<text>{{title}}</text>
						<view class="mt20">{{content}}</view>
					</view>
					<view style="position: absolute;right:0px;top:0" @tap="cancel">
						<u-icon name="close-circle-fill" color="rgb(204,204,204)" size="24"></u-icon>
					</view>
				</view>
				<template #confirmButton>
					<view class="p10">
						<u-button
							:customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx',color:'#fff',backgroundColor:'#05C341'}"
							@click="toResult">查看练题结果</u-button>
					</view>
				</template>
			</u-modal>
			<u-modal :show="isSubmit">
				<view class="wp100">
					<view class="text-center">
						<text>确认交卷</text>
						<view class="mt20 flex ai-c jc-sb">
							<view class="text-center">
								<text style="color:#FF6E02">{{questionList.length-rightList.length-wrongList.length}}</text>
								<view class="cor-333">未答题数</view>
							</view>
							<view class="text-center">
								<u-count-down ref="countDown_3" class="balckColor" :time="timeCount" format="HH:mm:ss"></u-count-down>
								<view>剩余时间</view>
							</view>
							<view class="text-center">
								<text style="color:#333">{{(rightList.length/questionList.length * 100).toFixed(0)}}</text>
								<view class="cor-333">考试得分</view>
							</view>
						</view>
					</view>
				</view>
				<template #confirmButton>
					<view class="p10">
						<template v-if="isShowAll">
							<u-button
								:customStyle="{width:'45%',marginRight:'10px',height:'68rpx',lineHeight:'68rpx',borderRadius:'34rpx',color:'#666',border:'1px solid #666',display:'inline-block'}"
								@click="continueExam">继续考试</u-button>
							<u-button
								:customStyle="{width:'45%',marginLeft:'10px',height:'68rpx',lineHeight:'68rpx',borderRadius:'34rpx',color:'#fff',backgroundColor:'#05C341',display:'inline-block'}"
								@click="toSubmit">现在交卷</u-button>
						</template>
						<template v-else>
							<u-button
								:customStyle="{width:'45%',marginRight:'10px',height:'68rpx',lineHeight:'68rpx',borderRadius:'34rpx',color:'#666',border:'1px solid #666',display:'inline-block'}"
								@click="toLeave">确定离开</u-button>
							<u-button
								:customStyle="{width:'45%',marginLeft:'10px',height:'68rpx',lineHeight:'68rpx',borderRadius:'34rpx',color:'#fff',backgroundColor:'#05C341',display:'inline-block'}"
								@click="continueExam">继续考试</u-button>
						</template>
					</view>
				</template>
			</u-modal>
			<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
				<view>
					<view class="wp100 flex jc-sb p14 bc-fff">
						<view style="width: 220rpx;">
							<view v-if="type==='practice'" style="width: 220rpx;height: 80rpx;"></view>
							<view v-else-if="type=='exam'" class="btn" style="text-align: center;" @tap="submitPaper">
								<u-count-down ref="countDown_2" :time="timeCount" format="HH:mm:ss"></u-count-down>
								<text>交卷</text>
							</view>
						</view>
						<view class="text-center flex jc-c ai-c" style="flex-direction: column;" @tap="toCollect">
							<u-icon name="star-fill" v-if="collectList.includes(questionList[topicIndex].questionId)"
								color="rgb(249,236,141)" size="24"></u-icon>
							<u-icon name="star" v-else size="24"></u-icon>
							<text class="cor-666">{{collectList.includes(questionList[topicIndex].questionId)?'已收藏':'收藏'}}</text>
						</view>
						<view class="text-center">
							<view style="color: #00B74F;">{{rightList.length}}</view>
							<text class="cor-666">答对</text>
						</view>
						<view class="text-center">
							<view style="color: #FF6E02;">{{wrongList.length}}</view>
							<text class="cor-666">答错</text>
						</view>
						<view class="text-center" @tap="popupShow=!popupShow">
							<view><text class="cor-333">{{topicIndex+1}}</text><text
									style="color:#999;">/{{questionList.length}}</text>
							</view>
							<text class="cor-666">题板</text>
						</view>
					</view>
					<view class="flex ai-c jc-fs p14" style="flex-wrap: wrap;max-height: 400px;overflow-y: scroll;">
						<view v-for="(item,index) of questionList" :key="item.questionId" style="width:20%;" class="flex ai-c jc-c"
							@tap="chooseQueston(index)">
							<view class="tCircle mb10" :class="{
											'active':index == topicIndex,
											'success':rightList.includes(item.questionId),
											'error':wrongList.includes(item.questionId)
										}">
								{{index+1}}
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<!--  <u-popup :show="showVip" mode="bottom" :closeOnClickOverlay="true" :round="16" @close="showVip=false">
		  			<view class="p14" style="z-index: 9;">
		  				<view class="wp100 flex ai-c jc-sb">
		  					<text class="fs30 fw600 cor-000">VIP题库</text>
		  					<u-icon name="close" color="#c2c2c2" size="20" @tap="showVip=false"></u-icon>
		  				</view>
		  				<text class="fs16 cor-666">精准刷题，更高效</text>
		  				<view style="width:100%;height: 110rpx;background-image: url(../../static/image/practice/vip_question.png);background-size: 100% 100%;" class="mt15 relative">
		  					<view style="position: absolute;left:0,top:0;height: 110rpx;" class="wp100 flex jc-c ai-c">
		  						<text class="fs16" style="color: #994800;">科一+科四精简500题</text>
		  					</view>
		  					<image style="width: 65rpx;height: 65rpx; position: absolute;right: 20px;top: -5px;" src="../../static/image/practice/vip_include.png"></image>
		  				</view>
		  				<view style="width:100%;height: 110rpx;background-image: url(../../static/image/practice/vip_test.png);background-size: 100% 100%;z-index: 9;" class="mt15 relative">
		  					<view style="position: absolute;left:0,top:0;height: 110rpx;" class="wp100 flex jc-c ai-c">
		  						<text class="fs16" style="color: #994800;">科一+科四考前密卷2套</text>
		  					</view>
		  					<image style="width: 65rpx;height: 65rpx; position: absolute;right: 20px;top: -5px;" src="../../static/image/practice/vip_include.png"></image>
		  				</view>
		  			</view>
		  			<view style="height: 528rpx;width: 100%;background-image: url(../../static/image/practice/vip_bg.jpg);background-size: 100% 100%;margin-top: -65px;position: relative;">
		  				<text style="position: absolute;top: 151px;left:117px;rotate: 16deg;" class="fs25 cor-fff">VIP题库</text>
		  			</view>
		  			<view class="wp100 p14" style="position: absolute;left: 0;bottom:20px">
		  				<view class="sub_btn flex ai-c jc-sb">
		  					<text class="cor-fff fs14">¥<text class="fs24 cor-fff">{{nowPrice}}</text></text>
		  					<image style="width: 276rpx;height: 88rpx;margin-top: -5px;" src="../../static/image/index/buy.png"></image>
		  				</view>
		  			</view>
		  			</u-popup> -->
		</view>
		<view v-else>
			<view class="mt20">
				<u-loading-icon text="题目加载中..."></u-loading-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import storage from '@/jtools/storage';
	import useQuestionStore from '@/jtools/store/question' //引入store
	import {
		querySysConfig,
		submitTest
	} from '@/jtools/api/question';
	export default {
		props: {
			tabsList: {
				type: Array
			},
			type: {
				type: String,
				default: 'practice'
			},
			isSubmit: {
				type: Boolean,
				default: false
			},
			isShowAll: {
				type: Boolean,
				default: true
			},
			subject: {
				type: [String, Number],
				default: 1,
			},
		},
		data() {
			return {
				showSkillInfo:'hidden',
				currentType:storage.get('carType') || '1001',
				onoff:'0',
				navTitle: '',
				originArray: '',
				showBestAnswer: false,
				nowPrice: 68,
				showVip: false,
				popupShow: false,
				content: '太棒啦，已答完最后一题~',
				tipShow: false,
				title: '提示',
				tCurrent: 0,
				index: 0,
				qIndex: 0,
				rightList: [],
				wrongList: [],
				collectList: storage.get(`collectList_subject${this.subject}`) || [],
				questionList: [], //数据源
				swiperList: [], // 轮播图数据列表
				swiperIndex: 0, // 轮播图当前位置
				isChange: false, // 是否切换
				topicIndex: 0, // 题目位置
				duration: 200, // 动画过渡时长
				time: 0,
			}
		},
		created() {
			const carType=storage.get('carType') || '1001'
			querySysConfig(carType, 'NeedSkillInfo').then(resp=>{
				if(resp.code === '0000'){
					this.showSkillInfo = resp.data.configValue
				}
			})
		},
		computed: {
			...mapState(useQuestionStore, ["currentIndex_subject1", "currentIndex_subject4"]), //映射函数，取出tagslist
			isShowAnswer() {
				// quesItem.isChoose&&quesItem.clickAnswer&&!quesItem.trueAnswer.includes(quesItem.clickAnswer)
				if (this.tCurrent == 0) {
					if (this.questionList[this.topicIndex].isChoose) {
						const arr1 = this.questionList[this.topicIndex].clickAnswer.split('')
						const arr2 = this.questionList[this.topicIndex].trueAnswer.split('')
						if (!this.isArrEqual(arr1, arr2)) {
							return true
						} else {
							return false
						}
					} else {
						return false
					}
				} else {
					return true
				}

			},
			timeCount() {
				const time =  45 * 60 * 1000
				return time
			}
		},
		methods: {
			...mapActions(useQuestionStore, ['getCurrentIndex']),
			getOriginArr(val) {
				const arr = JSON.parse(val)
				let arr1 = []
				arr.forEach(item => {
					arr1.push({
						isChoose: false,
						...item
					})
				})
				this.originArray = JSON.stringify(arr1)
			},
			toLeave() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			isShowBest(val) {
				this.showBestAnswer = val
			},
			duoxuan(val) {
				if (val && val.length > 1) {
					this.questionList[this.topicIndex].isChoose = true
					if (this.tCurrent != 1) {
						this.originArray = JSON.stringify(this.questionList)
					}
					const falseList = storage.get(`wrongList_subject${this.subject}`) || []
					const trueList = storage.get(`rightList_subject${this.subject}`) || []
					if (this.tCurrent !== 1) {
						const arr1 = this.questionList[this.topicIndex].clickAnswer.split('')
						const arr2 = this.questionList[this.topicIndex].trueAnswer.split('')
						if (this.isArrEqual(arr1, arr2)) {
							//判断选择的答案和实际的答案是否相同，如果相同，判断如果该题的ID在不在正确的数组中，不在则Push(存储的的同理)
							//如果这道题在错误的数组中则把这道题在错误数组中删掉
							if (!this.rightList.includes(this.questionList[this.topicIndex].questionId)) {
								this.rightList.push(this.questionList[this.topicIndex].questionId)
							}
							if (!trueList.includes(this.questionList[this.topicIndex].questionId)) {
								trueList.push(this.questionList[this.topicIndex].questionId)
								storage.set(`rightList_subject${this.subject}`, trueList)
							}
							if (this.wrongList.includes(this.questionList[this.topicIndex].questionId)) {
								const wIndex = this.wrongList.indexOf(this.questionList[this.topicIndex].questionId)
								this.wrongList.splice(wIndex, 1)
							}
							if (falseList.includes(this.questionList[this.topicIndex].questionId)) {
								const wIndex = falseList.indexOf(this.questionList[this.topicIndex].questionId)
								falseList.splice(wIndex, 1)
								storage.set(`wrongList_subject${this.subject}`, falseList)
							}
							//答对题目 如果不是最后一题，跳下一题
							if (this.topicIndex < this.questionList.length - 1) {
								this.topicIndex++;
								this.qIndex = this.topicIndex
								if (this.navTitle === '顺序答题') {
									this.getCurrentIndex(this.topicIndex, this.subject)
								}
								setTimeout(() => {
									this.renderSwiper(this.topicIndex);
								}, 1000)
							} else {
								this.qIndex = this.topicIndex + 1
							}
							if (this.qIndex > this.questionList.length - 1) {
								setTimeout(() => {
									this.tipShow = true
								}, 1000)
							} else {
								this.tipShow = false
							}
						} else {
							if (!this.wrongList.includes(this.questionList[this.topicIndex].questionId)) {
								this.wrongList.push(this.questionList[this.topicIndex].questionId)
							}
							if (!falseList.includes(this.questionList[this.topicIndex].questionId)) {
								falseList.push(this.questionList[this.topicIndex].questionId)
								storage.set(`wrongList_subject${this.subject}`, falseList)
							}
							if (trueList.includes(this.questionList[this.topicIndex].questionId)) {
								const rIndex = trueList.indexOf(this.questionList[this.topicIndex].questionId)
								trueList.splice(rIndex, 1)
								storage.set(`rightList_subject${this.subject}`, trueList)
							}
						}
					}
				}

			},
			timeChange(e) {
				this.time = e
				if (e.hours == 0 && e.minutes == 0 && e.seconds == 0 && e.milliseconds == 0) {
					uni.showToast({
						title: "考试结束，将为您自动交卷~",
						icon: 'none'
					})
					setTimeout(() => {
						this.toSubmit()
					}, 1000)
				}
			},
			//获取正确选项
			getRightOp(val) {
				let rightOp = ''
				this.questionList[this.topicIndex].optionList.forEach(item => {
					if (this.questionList[this.topicIndex].trueAnswer.includes(item.opValue)) {
						if (rightOp) {
							rightOp = rightOp + '、' + item.op
						} else {
							rightOp = item.op
						}
					}
				})
				return rightOp
			},
			//获取题类型
			getQuestType(val) {
				if (val == '1') {
					return '判断'
				} else if (val == '2') {
					return '单选'
				} else if (val == '3') {
					return '多选'
				}
			},
			//开通VIP
			toVip() {
				uni.navigateTo({
					url: "/pages/index/videoVip?subject=" + this.subject
				})
			},
			submitPaper() {
				if (this.isShowAll) {
					this.$refs.countDown_1.pause();
					this.$refs.countDown_2.pause();
				}
				this.$refs.countDown_3.pause();
				this.$emit('update:isSubmit', true)
			},
			continueExam() {
				this.$refs.countDown_1.start();
				this.$refs.countDown_2.start();
				this.$refs.countDown_3.start();
				this.$emit('update:isSubmit', false)
			},
			//切换题目
			chooseQueston(index) {
				this.popupShow = false
				this.pickerTopic(index)
			},
			//交卷
			toSubmit() {
				const restTime = this.time.hours * 60 * 60 + this.time.minutes * 60 + this.time.seconds
				const score = (this.rightList.length / this.questionList.length * 100).toFixed(0)
				if(this.rightList.length+this.wrongList.length==0){
					uni.navigateBack({
						delta:1
					})
				}else{
					submitTest({
						"carTypeId": storage.get('carType') || '1001',
						"score": score,
						"testTime": 45 * 60 - restTime,
						subject: this.subject
					}).then(resp => {
						const doNotNum = this.questionList.length - this.rightList.length - this.wrongList.length
						const list = JSON.stringify(this.wrongList)
						if (resp.code === '0000') {
							uni.navigateTo({
								url: "/pages/questionBank/examResult?doNotNum=" + doNotNum + "&wrongList=" + list + "&score=" +
									score + "&subject=" + this.subject + "&navTitle=" + this.navTitle
							})
						}
					})
				}
			},
			//查看考试结果
			toResult() {
				const allDoNum = this.wrongList.length + this.rightList.length
				const list = JSON.stringify(this.wrongList)
				uni.navigateTo({
					url: "/pages/questionBank/practiceResult?allDoNum=" + allDoNum + "&wrongList=" + list + "&subject=" + this
						.subject + "&navTitle=" + this.navTitle
				})
			},
			toCollect() {
				if (this.collectList.includes(this.questionList[this.topicIndex].questionId)) {
					const idx = this.collectList.indexOf(this.questionList[this.topicIndex].questionId)
					this.collectList.splice(idx, 1)
					uni.showToast({
						title: "取消收藏",
						icon: 'none'
					})
				} else {
					this.collectList.push(this.questionList[this.topicIndex].questionId)
					this.questionList[this.topicIndex].isCollect = true
					uni.showToast({
						title: "已收藏",
						icon: 'none'
					})
				}
				storage.set(`collectList_subject${this.subject}`, this.collectList)
			},
			cancel() {
				this.tipShow = false
			},
			touchEnd(e) {
				if (this.topicIndex < this.questionList.length - 1) {
					this.index = this.topicIndex
				} else {
					this.index++
				}
			},
			// 渲染 swiper
			renderSwiper(index) {
				let list = [];
				let current = 1;
				if (this.questionList[index - 1]) {
					list.push(this.questionList[index - 1]);
				} else {
					current = 0;
				}

				list.push(this.questionList[index])

				if (this.questionList[index + 1]) {
					list.push(this.questionList[index + 1]);
				}

				this.duration = 0;

				setTimeout(() => {
					this.swiperList = list;
					this.swiperIndex = current;
					setTimeout(() => {
						this.duration = 200;
					}, 100)
				}, 50)
			},

			// 轮播图切换
			onChange(e) {
				// this.onoff='0'
				// 非触摸事件不做轮播图状态更新
				if (e.detail.source != "touch") return;

				// 标识已切换
				this.isChange = true;
				// 轮播图当前位置大于原来时则表示为下一题
				if (e.detail.current > this.swiperIndex) {
					this.topicIndex++;
				} else {
					// 轮播图当前位置小于原来时则表示为上一题
					this.topicIndex--;
				}
				if (this.navTitle === '顺序答题') {
					this.getCurrentIndex(this.topicIndex, this.subject)
				}
				// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
				this.swiperIndex = e.detail.current;
			},
			// 轮播图动画结束
			onAnimationfinish(e) {
				if (this.index >= this.questionList.length) {
					if (this.isShowAll) {
						this.tipShow = true
					} else {
						this.showVip = true
					}
				} else {
					this.showVip = false
					this.tipShow = false
				}
				if (!this.isChange) return;

				this.isChange = false;
				setTimeout(() => {
					this.renderSwiper(this.topicIndex);
				}, 10);
			},
			// 选择题目
			pickerTopic(index) {
				this.topicIndex = index;
				this.index = this.topicIndex
				if (this.navTitle === '顺序答题') {
					this.getCurrentIndex(this.topicIndex, this.subject)
				}
				this.renderSwiper(index);
			},
			isArrEqual(arr1, arr2) {
				return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
			},
			//答题
			answerQues(op, index) {
				const falseList = storage.get(`wrongList_subject${this.subject}`) || []
				const trueList = storage.get(`rightList_subject${this.subject}`) || []
				if (!this.questionList[this.topicIndex].clickAnswer) {
					this.questionList[this.topicIndex].optionList[index].chooseOption =
						`${this.questionList[this.topicIndex].optionList[index].chooseOption?this.questionList[this.topicIndex].optionList[index].chooseOption:''}${op}`
					this.questionList[this.topicIndex].clickAnswer =
						`${this.questionList[this.topicIndex].optionList[index].clickAnswer?this.questionList[this.topicIndex].optionList[index].clickAnswer:''}${op}`
				} else {
					//如果是多选 点击的选项中不包含该选项则拼接进去，如果包含则能删除
					if (this.questionList[this.topicIndex].type == '3' && !this.questionList[this.topicIndex].clickAnswer.includes(
							op) && !this.questionList[this.topicIndex].isChoose) {
						this.questionList[this.topicIndex].optionList[index].chooseOption =
							`${this.questionList[this.topicIndex].optionList[index].chooseOption?this.questionList[this.topicIndex].optionList[index].chooseOption:''}${op}`
						this.questionList[this.topicIndex].clickAnswer = `${this.questionList[this.topicIndex].clickAnswer}${op}`
					} else if (this.questionList[this.topicIndex].type == '3' && this.questionList[this.topicIndex].clickAnswer
						.includes(op) && !this.questionList[this.topicIndex].isChoose) {
						this.questionList[this.topicIndex].optionList[index].chooseOption = ''
						let reg2 = new RegExp(op); // 不加'g'，仅删除字符串里第一个"a"
						this.questionList[this.topicIndex].clickAnswer = this.questionList[this.topicIndex].clickAnswer.replace(reg2,
							"");
					}
				}
				if (this.tCurrent != 1) {
					this.originArray = JSON.stringify(this.questionList)
				}
				if (this.tCurrent !== 1 && this.questionList[this.topicIndex].type != '3') {
					const arr1 = this.questionList[this.topicIndex].clickAnswer.split('')
					const arr2 = this.questionList[this.topicIndex].trueAnswer.split('')
					if (this.isArrEqual(arr1, arr2)) {
						//判断选择的答案和实际的答案是否相同，如果相同，判断如果该题的ID在不在正确的数组中，不在则Push(存储的的同理)
						//如果这道题在错误的数组中则把这道题在错误数组中删掉
						if (!this.rightList.includes(this.questionList[this.topicIndex].questionId)) {
							this.rightList.push(this.questionList[this.topicIndex].questionId)
						}
						if (!trueList.includes(this.questionList[this.topicIndex].questionId)) {
							trueList.push(this.questionList[this.topicIndex].questionId)
							storage.set(`rightList_subject${this.subject}`, trueList)
						}
						if (this.wrongList.includes(this.questionList[this.topicIndex].questionId)) {
							const wIndex = this.wrongList.indexOf(this.questionList[this.topicIndex].questionId)
							this.wrongList.splice(wIndex, 1)
						}
						if (falseList.includes(this.questionList[this.topicIndex].questionId)) {
							const wIndex = falseList.indexOf(this.questionList[this.topicIndex].questionId)
							falseList.splice(wIndex, 1)
							storage.set(`wrongList_subject${this.subject}`, falseList)
						}
						//答对题目 如果不是最后一题，跳下一题
						if (this.topicIndex < this.questionList.length - 1) {
							this.topicIndex++;
							this.qIndex = this.topicIndex
							if (this.navTitle === '顺序答题') {
								this.getCurrentIndex(this.topicIndex, this.subject)
							}
							setTimeout(() => {
								this.renderSwiper(this.topicIndex);
							}, 1000)
						} else {
							this.qIndex = this.topicIndex + 1
						}
						if (this.qIndex > this.questionList.length - 1) {
							setTimeout(() => {
								this.tipShow = true
							}, 1000)
						} else {
							this.tipShow = false
						}
					} else {
						if (!this.wrongList.includes(this.questionList[this.topicIndex].questionId)) {
							this.wrongList.push(this.questionList[this.topicIndex].questionId)
						}
						if (!falseList.includes(this.questionList[this.topicIndex].questionId)) {
							falseList.push(this.questionList[this.topicIndex].questionId)
							storage.set(`wrongList_subject${this.subject}`, falseList)
						}
						if (trueList.includes(this.questionList[this.topicIndex].questionId)) {
							const rIndex = trueList.indexOf(this.questionList[this.topicIndex].questionId)
							trueList.splice(rIndex, 1)
							storage.set(`rightList_subject${this.subject}`, trueList)
						}
					}
				}
			},
			sectionChange(index) {
				this.tCurrent = index
				// this.getQuestionList()
				// this.renderSwiper(0)
				this.$emit('changeTab', index)
			},
			getQuestionList(val, title) {
				if (title) {
					this.navTitle = title
				}
				if (val && val.length) {
					this.questionList = JSON.parse(val)
				} else {
					this.questionList = JSON.parse(this.originArray)
				}
				console.log(this.questionList);
				if (this.navTitle === '顺序答题') {
					this.pickerTopic(this[`currentIndex_subject${this.subject}`])
				} else {
					this.pickerTopic(this.topicIndex)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.checked_option {
		background-color: #000;
		border: 1px solid #000;
		color: #fff
	}

	.type_box {
		width: 350rpx;
		height: 72rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}

	.type_item {
		text-align: center;
		line-height: 64rpx;
		width: 160rpx;
		height: 64rpx;
		border-radius: 8rpx;
	}

	.checked {
		color: #fff;
		background-color: #05C341;
	}

	.unchecked {
		color: #666;
	}

	.tag_box {
		vertical-align: middle;
		display: inline-block;
		width: 78rpx;
		height: 42rpx;
		background: #05C341;
		border-radius: 8rpx;
		text-align: center;
		line-height: 42rpx;
		color: #fff;
		font-size: 12px;
		margin-right: 5px;
	}

	.option_item {
		width: 60rpx;
		height: 60rpx;
		border: 1px solid #666;
		border-radius: 50%;
		text-align: center;
		line-height: 60rpx;
		margin-right: 30rpx;
	}

	.swiper {
		height: 100vh;
	}

	.answer_box {
		width: 100%;
		padding: 30rpx;
		background: #EEEEEE;
		border-radius: 20rpx;
	}

	.btn {
		width: 220rpx;
		height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
		background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%);
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.tCircle {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border: #ddd solid 1px;
		border-radius: 50%;
		line-height: 80rpx;
		text-align: center;

		&.active {
			border: #05C341 solid 1px;
		}

		&.success {
			background-color: rgb(236, 247, 241);
			color: #05C341;
			border: none;

			&.active {
				border: #05C341 solid 1px;
			}
		}

		&.error {
			background-color: #ffeceb;
			color: #f84d27;
			border: none;

			&.active {
				border: #f84d27 solid 1px;
			}
		}
	}

	.content {
		padding-top: calc(var(--window-top) + 10px);
	}

	.vip_btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background: linear-gradient(90deg, #FF9804 0%, #E95B0E 100%);
		border-radius: 50rpx;
	}

	.sub_btn {
		width: 100%;
		height: 110rpx;
		border: 4px solid #F59B26;
		background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
		box-shadow: 0rpx 16rpx 20rpx 1rpx rgba(245, 155, 38, 0.78);
		border-radius: 55rpx;
		padding: 14rpx;
	}

	.dx_btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background: rgb(204, 204, 204);
		border-radius: 100rpx;
	}

	.dx_checked {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background: #05C341;
		border-radius: 100rpx;
	}

	.right_option {
		border-color: #05C341;
		background-color: #fff;
		color: #05C341
	}
</style>