gzh_chuanyuan/pages/exercises/cuowuti/cuowuti.vue

<template>
	<view class="erercises-detail">
		<view class="erercises-detail-section" v-if="info.question_info.title">
			<view class="li">
				<view class="top">
					<view class="tag">
						<text>{{teamIndex}}/{{count}}</text>
					</view>
					
					<view class="time" v-if="type != 1">
						<image src="/static/icon-clock.png"></image>
						<u-count-down :time="start_time" format="HH:mm:ss" autoStart @change="onChange" >
							<view class="time">
								<view class="time__custom">
									<text class="time__custom__item">{{timeData.hours>10?timeData.hours:'0'+(timeData.hours?timeData.hours:0)}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{timeData.minutes>10?timeData.minutes:'0'+(timeData.minutes?timeData.minutes:0)}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{timeData.seconds>10?timeData.seconds:'0'+(timeData.seconds?timeData.seconds:0)}}</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</view>
				<view class="tit" :style="{'fontSize': fontSize+'rpx', 'fontWeight': fontWeight?'normal':'bold'}">
					{{teamIndex}}、<view class="content" v-html="info.question_info.title"></view>
				</view>
				<view class="title_img" v-if="info.question_info.title_img">
					<image mode="widthFix" :src="info.question_info.title_img"></image>
				</view>
				<view class="title_video" v-if="info.question_info.title_video" >
					<video :src="info.question_info.title_video"></video>
				</view>
				<view class="con" v-for="(a,index) in info.question_info.choice" :key="index" 
					:class="a.isSelect?'right':a.isErrow?'wrong':''"  :style="{'fontSize': fontSize+'rpx'}" @click="toSelect(index)">
					{{a.name}}.{{a.value}}
					<view class="mark">
						<image v-if="a.isSelect" src="/static/icon-study-right.png"></image>
						<template v-else>
							<image v-if="a.isErrow" src="/static/icon-study-wrong.png"></image>
							<image v-if="current_question_choice && info.question_info.correct == a.name" src="/static/icon-study-right.png"></image>
						</template>
					</view> 
				</view>
			</view>
			<view class="btns">
				<view class="btn" @click="updateFont(1)">放大</view>
				<view class="btn" @click="updateFont(2)" style="margin-left: 20rpx; margin-right: 20rpx;">缩小</view>
				<view class="btn" @click="updateFont(3)">{{fontWeight?'加粗':'恢复'}}</view>
			</view>
			<view class="analysis" v-if="current_question_choice">
				<view class="answer">
					答案： <text>{{info.question_info.correct}}</text>
				</view>
				<view class="line">
					<u-divider text="答案解析" textSize="14" textColor="#3e3e3e"></u-divider>
				</view>
				<view class="msg" :style="{'fontSize': fontSize1+'rpx'}" v-html="info.question_info.prompt"></view>
			</view>
		</view>
		<view class="erercises-detail-section" v-if="info.question_info.length == 0 && count >= 0">
			<view class="empty" style="margin-top: 200rpx;" v-if="count == 0">
				<u-empty mode="data" text="暂无相关信息">
				</u-empty>
			</view>
			<template v-else>
				<view class="empty" style="margin-top: 200rpx; margin-bottom: 100rpx;">
					<u-empty mode="data" text="当前真题全部答完">
					</u-empty>
				</view>
				<u-button color="#2080F9" @click="openPage(8)">返回上一页</u-button>
			</template>
		</view>
		<view class="erercises-detail-bottom" v-if="info.question_info.title" 
            :style="{ 'padding-bottom': safeBottom + 'px' }">
			<view class="check">
				<view class="a">
					<image src="/static/icon-study-yes.png"></image>{{successNum}}
				</view>
				<view class="b">
					<image src="/static/icon-study-no.png"></image>{{errorNum}}
				</view>
			</view>
			<view class="listen" v-if="info.question_info.speech" @click="toPlayAudio(info.question_info.speech)">
				<image v-if="isPlay == false" src="/static/icon-listen.png"></image>
				<image v-else src="/static/icon-listen-on.png"></image>
				<text :class="isPlay?'on':''">听题</text>
			</view>
			<view class="btns">
				<template v-if="type != 1">
					<view class="hand" v-if="type != 1" @click="openPage(2)">
						交卷
					</view>
					<view class="btn" @click="getInfo(1)" v-if="teamIndex < count">
						下一题
					</view>
				</template>
				<template v-else>
					<view class="btn" @click="getInfo(1)" v-if="(teamIndex) <= count">
						下一题
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playType: 1,
				start_time: 100000,
				answer: "",
				category_id: "",
				teamIndex: 0,
				successNum: 0,
				errorNum: 0,
				type: 0, //0 真题 1 真题错误题 2模拟题
				count: -1,
				list: [],
				fontSize: 30,
				fontSize1: 26,
				fontWeight: true,
				info: {
					question_info: []
				},
				timeData: {},
				log_id: 0,
				page: 1,
				innerAudioContext: null,
				isPlay: false,
				current_question_id: "",//当前题目ID
				next_question_id: "",//下一题ID
				current_question_choice: "",//current_question_choice
                safeBottom: '',
			};
		},
		onLoad(o) {
            const {
                safeAreaInsets
            } = uni.getSystemInfoSync()
            this.safeBottom = safeAreaInsets?.bottom
			this.category_id = o.id?o.id:''
			this.innerAudioContext = uni.createInnerAudioContext({
				useWebAudioImplement: false // 默认关闭。对于短音频、播放频繁的音频建议开启此选项
			});
			this.type = 1;
			this.getZhengTiList()
		},
		
		methods: {
			updateFont(type){
				if(type == 1){
					this.fontSize ++
				}else if(type == 2){
					this.fontSize --
				}else if(type == 3){
					this.fontWeight = !this.fontWeight
				}
			},
			openPage(index){
				const that = this;
				if(index == 2){
					if(that.teamIndex == that.count){
						uni.showModal({
							title: "交卷确认",
							content: "你确定要交卷吗？",
							confirmText: "确认",
							cancelText: "取消",
							confirmColor: "#2080F9",
							success(res) {
								if(res.confirm){
									uni.showModal({
										title: "再次确认",
										content: "你确定要交卷吗？",
										confirmText: "确认",
										cancelText: "取消",
										confirmColor: "#2080F9",
										success(res) {
											if(res.confirm){
												that.getInfo(2)
											}
										}
									})
								}
							}
						})
					}else{
						uni.showModal({
							title: "请确认",
							content: "你确定要交卷吗？",
							confirmText: "继续答题",
							cancelText: "确认",
							confirmColor: "#2080F9",
							success(res) {
								if(res.cancel){
									uni.showModal({
										title: "再次确认",
										content: "你确定要交卷吗？",
										confirmText: "确认",
										cancelText: "取消",
										confirmColor: "#2080F9",
										success(res) {
											if(res.confirm){
												that.toSumbit();
											}
										}
									})
								}
							}
						})
					}
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
				
			},
			onChange(e) {
				this.timeData = e;
				if(this.count > 0 && e.days == 0 && e.hours == 0 && e.milliseconds == 0 && e.minutes == 0 && e.seconds == 0){
					uni.showModal({
						title: "温馨提示",
						content: "当前刷题时间已结束，请返回上一页",
						showCancel: false,
						confirmColor: "#2080F9",
						success(res) {
							if(res.confirm){
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				}
			},
			//播发试题
			toPlayAudio(src) {
				console.log(src)
				if(this.isPlay == false){
					if(this.playType == 1){
						this.innerAudioContext.src = src;
						this.innerAudioContext.play();
						this.playType = 2
					}else{
						this.innerAudioContext.play();
					}
					this.isPlay = true;
				}else{
					this.isPlay = false;
					this.innerAudioContext.pause();
				}
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.onEnded(() => {
				   this.isPlay = false
				});
			},
			//选择答案
			toSelect(index) {
				if(this.info.question_info.isDisable == true){
					return ;
				}
				this.info.question_info.isDisable = true;
				this.info.question_info.choice.map(a=>{
					a.isSelect = false
				})
				if(this.info.question_info.choice[index].name == this.info.question_info.correct){
					this.info.question_info.choice[index].isSelect = true
					this.info.question_info.choice[index].isErrow = false
					this.successNum ++
				}else{
					this.info.question_info.choice[index].isSelect = false
					this.info.question_info.choice[index].isErrow = true
					this.errorNum ++
				}
				this.info.question_info.value = this.info.question_info.choice[index]
				this.current_question_choice = this.info.question_info.choice[index].name
			},
			//交卷
			async toSumbit(){
				const that = this;
				let arr = [];
				const { code, data, msg } = await this.$api.realSubPaper({
					log_id: this.log_id
				})
				if (code == 200) {
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(()=>{
						uni.setStorageSync("shareImg1", data.img)
						uni.redirectTo({
							url: "/pages/exercises/complete?score="+data.score+"&error_num="+data.error_num+"&use_time="+data.use_time
						})
					},2000)
				}
			},
			//获取列表
			async getZhengTiList() {
				const that = this;
				const { code, data, msg } = await this.$api.simulationErrorList({
					category_id: this.category_id,
					page: this.page
				})
				if (code == 200) {
					this.list = data.list;
					this.log_id = data.log_id,
					this.count = data.count;
					this.start_time = data.start_time*1000;
					this.successNum = data.correct_num;
					this.errorNum = data.error_num;
					if(this.count>0){
						if(data.current_question_id == 0){
							that.teamIndex = 0
							this.next_question_id = data.list[0];
						}else{
							this.next_question_id = data.current_question_id;
							if(data.list && data.list.length > 0){
								data.list.map((a,idx)=>{
									if(a == data.current_question_id){
										that.teamIndex = idx
									}
								})
							}
							
						}
						this.getInfo();
					}
					
				}else{
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			
			//获取详情
			async getInfo(type) {
				if(type == 1){
					if(!this.current_question_choice){
						uni.showToast({
							icon: "none",
							title: "请选择答案！"
						})
						return ;
					}
					this.current_question_id = this.teamIndex>this.count?'':this.list[this.teamIndex-1];
					this.next_question_id = this.teamIndex>this.count?'':this.list[this.teamIndex];
					this.isPlay = false;
					this.playType = 1;
					this.innerAudioContext.pause();
				}else if(type == 2){
					this.next_question_id = 0
					this.current_question_id = this.list[this.list.length - 1]
				}
				uni.showLoading({
					title: "加载中"
				})
				const { code, data, msg } = await this.$api.realQuestionInfo({
					next_question_id: this.next_question_id,
					current_question_id: this.current_question_id,
					current_question_choice: this.current_question_choice,
					is_error: this.type == 1?1:0,
					log_id: this.log_id?this.log_id:0
				})
				if (code == 200) {
					uni.hideLoading();
					if(type == 2){
						this.toSumbit();
						return ;
					}
					let arr = data
					arr.question_info.value = {}
					arr.question_info.isDisable = false
					if(arr.question_info && arr.question_info.choice){
						arr.question_info.choice.map(a=>{
							a.isSelect = false
							a.isErrow = false
						})
					}
					this.teamIndex ++;
					this.current_question_choice =""
					this.info = arr
				}else{
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
		},
		
		onUnload() {
			this.innerAudioContext.src=""
			this.innerAudioContext.stop()
			this.innerAudioContext.destroy();
		},
		destroyed() {
			this.innerAudioContext.src=""
			this.innerAudioContext.stop()
			this.innerAudioContext.destroy();
		}
	}
</script>

<style lang="scss" scoped>
	.erercises-detail {
		padding-bottom: 140rpx;
		overflow: hidden;
		&-section {
			width: 100%;
			padding: 0 25rpx 20rpx;
			overflow: hidden;
			box-sizing: border-box;

			.li {
				width: 90%;
				margin: 20rpx auto 0;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(32, 79, 156, 0.06);
				border-radius: 20rpx;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.tag{
						height: 50rpx;
						margin-left: -30rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						background: url('../../../static/icon-tag-bg.png') no-repeat;
						background-size: 100% 100%;
						font-size: 1rpx;
						line-height: 50rpx;
						color: #ffffff;
						text{
							font-size: 30rpx;
						}
					}
					.time{
						font-size: 24rpx;
						color: #3e8ff9;
						display: flex;
						align-items: center;
						image{
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}
				}
				.tit {
					overflow: hidden;
					padding-bottom: 10rpx;
					color: #333333;
					display: flex;
					align-items: flex-start;
				}
				.title_img{
					width: 100%;
					image{
						width: 100%;
					}
				}
				.title_video{
					width: 100%;
					height: 300rpx;
					video{
						width: 100%;
						height: 100%;
					}
				}

				.con {
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					padding: 30rpx 60rpx 30rpx 30rpx;
					background: #F6F6F6;
					color: #333333;
					line-height: 50rpx;
					position: relative;
					&.right{
						color: #49c99c;
						background-color: #f3f8f6;
					}
					&.wrong{
						color: #fa6e6e;
						background-color: #fff3f3;
					}
					.mark{
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						right: 10rpx;
						top: 50%;
						margin-top: -30rpx;
						z-index: 2;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.btns{
				padding: 25rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				.btn{
					flex: 1;
					line-height: 80rpx;
					border-radius: 10rpx;
					text-align: center;
					background-color: #2080F9;
					font-size: 28rpx;
					color: #fff;
				}
			}
			.analysis{
				width: 90%;
				margin: 20rpx auto 0;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(32, 79, 156, 0.06);
				border-radius: 20rpx;
				.answer {
					overflow: hidden;
					padding: 20rpx 30rpx;
					line-height: 50rpx;
					background-color: #f3f8f6;
					text{
						color: #49c99c;
					}
				}
				.line{
					width: 70%;
					margin: 0 auto;
				}
				.msg{
					line-height: 1.5;
					letter-spacing: 1rpx;
					color:#6b6b6b;
				}
			}

		}

		&-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			z-index: 99;
			justify-content: space-between;
			.check{
				margin-left: 20rpx;
				line-height: 30rpx;
				.a{
					float: left;
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					font-size: 30rpx;
					color: #37C594;
				}
				.b{
					float: left;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #F01B1B;
				}
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
			}
			.listen{
				display: flex;
				align-items: center;
				font-size: 26rpx;
				line-height: 30rpx;
				color: #666666;
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 12rpx;
				}
			}
			.btns{
				width: 310rpx;
				margin-right: 20rpx;
				.hand{
					float: left;
					width: 140rpx;
					margin-right: 10rpx;
					font-size: 28rpx;
					line-height: 57rpx;
					color: #FFFFFF;
					text-align: center;
					background: #2080F9;
					border: 1px solid #2080F9;
					border-radius: 29rpx;
				}
				.btn {
					float: right;
					width: 140rpx;
					font-size: 28rpx;
					line-height: 57rpx;
					color: #2080F9;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #2080F9;
					border-radius: 29rpx;
				}
			}
		}
	}
</style>