jpcj-xcx/pages/question/random.vue

<template>
	<view class="content">
		<view class="top-box">
			<view class="icon"></view>
			<selectSwitch class='btn' @change="changeSwitch" :switchList="['科一题目','科四题目']" checked_bj_color='#E31818' />
			<van-icon class='set' name="/static/img/答题/设置@2x.png" size='20' @click='show=true' />
		</view>
		<van-popup :show="show" @close="show=false" position="bottom">
			<van-cell title="背题模式" clickable :data-index="index" @click="answerflag=!answerflag">
				<van-switch slot="right-icon" :checked="answerflag" size="24px" active-color="#16CC16" />
				<!-- <selectSwitch slot="right-icon" @change="changeSwitch" :switchList="['答题模式','背题模式']" checked_bj_color='#E31818' /> -->
			</van-cell>
			<van-cell title="答对跳转下一题 " clickable :data-index="index" @click="answerjump=!answerjump">
				<van-switch slot="right-icon" :checked="answerjump" size="24px" active-color="#16CC16" />
			</van-cell>
			<!-- 			<van-cell title="答错展示题目解析" clickable :data-index="index" @click="checked=!checked">
				<van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
			</van-cell> -->
			<van-cell title="错误震动提醒" clickable :data-index="index" @click="checked=!checked">
				<van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
			</van-cell>
			<!-- 			<van-cell title="主题选择" clickable :data-index="index" @click="checked=!checked">
				<van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
			</van-cell>
			<van-cell title="字体选择" clickable :data-index="index" @click="checked=!checked">
				<van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
			</van-cell> -->
		</van-popup>

		<van-skeleton class='skeleton' avatar row="6" :row-width="['100%','40%','70%','70%','70%','70%']" avatar-shape='square'
		 :loading="loading">
			<swiper class="swiper-box" :current="swiperIndex" @change="swiperChange" circular>
				<swiper-item v-for="(itembox,indexbox) in questionList" :key='indexbox'>
					<view class="swiper-item">
						<view class="topic-box">
							<view class="topic-right">
								<view class="topic-top">
									<view class="topic-left">
										<text class="topic-type">{{questionType(itembox.type)}}</text>
										<van-icon name="star-o" size='20' />
									</view>
									<!-- <rich-text class="topic-tit" :nodes="itembox.id+'、'+itembox.question"></rich-text> -->
									<view class="topic-tit" v-html="itembox.id+'、'+itembox.question"></view>
								</view>
								<video v-if="itembox.videoUrl" class="topic-img" :muted='true' :loop='true' :autoplay='true' :controls='false'
								 :src="encodeURI(itembox.mediaUrl)"></video>
								<image v-if="itembox.sinaimg" class="topic-img" :src="itembox.mediaUrl" mode="aspectFit"></image>
								<view class="topic-opt" v-if='itembox.type==2'>
									<van-radio-group :value="userAnswer[itembox.id]">
										<van-cell-group>
											<van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))}'
											 v-for="(item,index) in choiceList" :key="index" :title="itembox[item]" v-show='itembox[item]' clickable
											 :data-index="index+1" @click="singleToggle($event,itembox)">
												<van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))" slot="icon"
												 name="/static/img/答题/对@2x.png" size='20' />
												<van-radio slot="right-icon" :ref="`checkboxes${itembox.id}`" checked-color="#1464cc" :name="index+1" />
											</van-cell>
										</van-cell-group>
									</van-radio-group>
									<!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button> -->
								</view>
								<view class="topic-opt" v-if='itembox.type==1'>
									<van-radio-group :value="userAnswer[itembox.id]">
										<van-cell-group>
											<van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))}'
											 v-for="(item,index) in 2" :key="index" :title="index?'错误':'正确'" clickable :data-index="index+1" @click="singleToggle($event,itembox)">
												<van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))" slot="icon"
												 name="/static/img/答题/对@2x.png" size='20' />
												<van-radio slot="right-icon" :ref="`checkboxes${itembox.id}`" checked-color="#1464cc" :name="index+1" />
											</van-cell>
										</van-cell-group>
									</van-radio-group>
									<!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button> -->
								</view>
								<view class="topic-opt" v-else-if='itembox.type==3'>
									<van-checkbox-group :value="userAnswer[itembox.id]" @change="onChange($event,itembox)">
										<van-cell-group>
											<van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))}'
											 v-for="(item,index) in choiceList" :key="index" :title="itembox[item]" v-show='itembox[item]' clickable
											 @click='toggle($event,itembox)' :data-index="index">
												<van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))" slot="icon"
												 name="/static/img/答题/对@2x.png" size='20' />
												<van-checkbox shape="square" catch:tap="noop" slot="right-icon" :ref="`checkboxes${itembox.id}`"
												 checked-color="#1464cc" :name="index+1" />
											</van-cell>
										</van-cell-group>
									</van-checkbox-group>
									<button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button>
								</view>
							</view>
						</view>
						<view v-show="answerflag || completeAnswer[itembox.id]">
							<view class="flag">
								<text v-if="itembox.type==2" class="result">正确答案: {{itembox[choiceList[itembox.answerTrue-1]]}}</text>
								<text v-else-if="itembox.type==1" class="result">正确答案: {{itembox.answerTrue==1?'正确':'错误'}}</text>
								<text v-else-if="itembox.type==3" class="result">正确答案: {{itembox.answerTrue.split('').map((key)=>{
									return itembox[choiceList[key-1]]
								})}}</text>
							</view>
							<view class="parsing">
								<view class="item-titBox">
									<text class="item-tit">题目解析</text>
								</view>
								<view class="parsing-text">
									<text class="item-tit">{{itembox.explain1 ? itembox.explain1 : "无"}}</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</van-skeleton>


	</view>
</template>

<script>
	import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
	import {
		questionListRandom
	} from "@/api/answer.js"
	export default {
		components: {
			selectSwitch
		},
		data() {
			return {
				loading: true,
				answerflag: false,
				answerjump: true,
				kemu: 1,
				completeAnswer: {},
				show: false,
				checked: true,
				radio: null,
				result: [],
				userAnswer: {},
				questionList: {},
				choiceList: ['an1', 'an2', 'an3', 'an4', 'an5', 'an6', 'an7'],
				swiperIndex: 0,
				shakeIndex: 0,
				pageNum: 1,
				shake: 0,
			}
		},
		mounted() {
			this.listInit()
		},
		methods: {
			async listInit() {
				await questionListRandom({
					num: 20,
					kemu: this.kemu
				}).then((res) => {
					this.questionList = res.rows
					this.$nextTick(() => {
						this.loading = false
					})
				})
			},
			questionType(index) {
				switch (index) {
					case 1:
						return '判断';
					case 2:
						return '单选';
					case 3:
						return '多选';
				}
			},
			swiperChange(e) {
				console.log(e)
				let aShake = e.detail.current - this.shakeIndex
				this.shake += aShake ** 2 != 1 ? -aShake / Math.abs(aShake) : aShake;
				this.swiperIndex = e.detail.current
				this.shakeIndex = e.detail.current
				if (e.detail.current % 10 == 0) {
					if (Math.abs(this.shake) < 10) {
						this.shake = 0
						return
					}
					this.pageNum += 1;
					questionListRandom({
						num: 10,
						kemu: this.kemu
					}).then((res) => {
						this.shake = 0
						if (e.detail.current == 20) {
							this.questionList = res.rows.concat(this.questionList.slice(10))
						}
						if (e.detail.current == 10) {
							this.questionList = this.questionList.slice(0, 20).concat(res.rows)
						}
						if (e.detail.current == 0) {
							this.questionList = this.questionList.slice(0, 10).concat(res.rows).concat(this.questionList.slice(20))
						}
					})
				}
			},
			onChange(event, itembox) {
				if (this.completeAnswer[itembox.id] || this.answerflag) {
					return
				}
				this.$set(this.userAnswer, itembox.id, event.detail)
			},
			singleToggle(event, itembox) {
				if (this.completeAnswer[itembox.id] || this.answerflag) {
					return
				}
				const {
					index
				} = event.currentTarget.dataset;
				this.$set(this.userAnswer, itembox.id, index)
				setTimeout(() => {
					this.submit(itembox)
				}, 0)
			},
			toggle(event, itembox) {
				const {
					index
				} = event.currentTarget.dataset;
				const checkbox = this.$refs[`checkboxes${itembox.id}`][index];
				checkbox.toggle();
			},
			noop() {},
			submit(itembox) {
				this.$set(this.completeAnswer, itembox.id, true)
				let flag = (this.userAnswer[itembox.id] + '').split(',').sort().join('') == itembox.answerTrue.split('').sort().join(
					'')
				if (flag) {
					wx.vibrateShort();
					if (this.answerjump) {
						let index = this.swiperIndex
						this.swiperIndex = ++index % 30
					}
				} else {
					wx.vibrateLong();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .answer .van-cell {
		background-color: #16CC16 !important;
		color: #ffffff;
	}

	/deep/ .van-cell {
		// background-color: #16CC16 !important;
		margin: 10rpx;
		border-radius: 20rpx;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.skeleton {
		// margin: 0rpx 20rpx;
	}

	.swiper-box {
		height: calc(100vh - 120rpx);
		margin: 0rpx 20rpx;

		swiper-item {
			overflow: auto;
		}
	}

	.top-box {
		height: 60rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icon {
			width: 60rpx;
		}

		.btn {}

		.set {
			color: red;
		}
	}

	.topic-box {
		// padding: 20rpx;
		display: flex;
		justify-content: center;

		// border: 2px solid red;
		.topic-top {
			display: flex;
			// border: 2px solid red;
			padding: 10rpx;

			.topic-left {
				display: flex;
				flex-direction: column;

				.topic-type {
					background: #E31818;
					border-radius: 10rpx;
					// border: 2px solid red;
					color: #FFFFFF;
					width: 66rpx;
					height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15px 15px 0px 15px;
					padding: 10rpx;
					margin-bottom: 18rpx;
				}
			}

			.topic-tit {
				padding: 10rpx;
			}

		}

		.topic-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 10rpx;

			.topic-img {
				padding: 10rpx;
				margin: auto;
				width: 500rpx;
				height: 250rpx;
				// border: 2px solid red;
			}

			.topic-opt {
				// border: 2px solid red;
				padding: 30rpx 5rpx;

				.submit {
					margin: auto;
					margin-top: 150rpx;

					height: 80rpx;
					background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
					border-radius: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
				}
			}
		}

	}

	.flag {
		// border: 2px solid red;
		padding: 30rpx 5rpx;
		display: flex;
		justify-content: center;

		.result {
			display: inline-block;
			background-color: #16CC16;
			// border: 2px solid red;
			width: 690rpx;
			// height: 70rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			color: #ffffff;
		}
	}

	.item-titBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #e8e8e8;

		.item-tit {
			border-left: 8rpx solid #E31818;
			font-size: 30rpx;
			// line-height: 38rpx;
			padding: 0 11rpx;
		}


	}

	.parsing-text {
		padding: 30rpx;
		// border: 2px solid red;

	}
</style>