WenWuGuanJia/answer_pages/examine/answer.vue

<template>
	<view class="wrap">
		<u-navbar title="开始答题" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="main" v-if="hasLoad">
			<view class="process">
				<view class="b-state">
					<view class="b-count">
						<view class="s-tit1">答题进度</view>
						<view class="s-num">{{ state.session_seq }}</view>
						<view class="s-tit2">/{{ state.total_count }}</view>
					</view>
					<view class="b-time" v-if="state.session_expired != -1">
						<view class="s-tit">剩余时间</view>
						<view class="s-time">{{ costTime(state.session_expired, 'countdown') }}</view>
					</view>
				</view>
				<view class="b-bar">
					<view class="s-percent" :style="barPercent"></view>
				</view>
			</view>
			<view class="answer">
				<view class="b-head">
					<view class="s-type">{{ state.type_text }}</view>
					<view class="s-time"></view>
				</view>
				<view class="b-title">
					<view class="s-num">{{ state.session_seq }}.</view>
					<text class="s-title">
						{{ state.title }}
						<text class="s-score">({{ state.score }}分)</text>
					</text>
				</view>
				<view class="b-title" v-if="state.image" style="align-items: center; justify-content: center">
					<u--image :width="200" mode="scaleToFill" :src="state.image"></u--image>
				</view>
				<view class="b-options">
					<view class="b-item" v-for="(item, index) in state.optionList" :key="index" @click="onChoose(index)" :class="[optionState(index)]">
						<view class="s-num">{{ optionNum(index) }}.</view>
						<view class="s-cont">{{ item.label }}</view>
						<view class="s-state iconfont" :class="[optionIcon(index)]"></view>
					</view>
				</view>
				<view class="b-result" :class="resultIcon" v-if="state.state == 2 && activity_type == 2">
					<view class="b-right">
						<view class="s-tit">正确答案:</view>
						<view class="s-cont">{{ trueAnswer }}</view>
					</view>
					<view class="b-mine">
						<view class="s-tit">已选答案:</view>
						<view class="s-cont">{{ userAnswer }}</view>
					</view>
				</view>
				<view class="b-explain" v-if="state.state == 2 && state.explain && activity_type == 2">
					<text>解析：{{ state.explain }}</text>
				</view>
				<view class="b-action">
					<view class="b-next" @click="onFinish" v-if="state.session_status == 2">查看成绩</view>
					<view class="b-next" @click="onFinish" v-else-if="state.session_status == 3">超时结束</view>
					<view class="b-submit" :class="btnState" @click="onSubmitAnswer" v-else-if="state.state == 1">提交答案</view>
					<view class="b-next" :class="btnState" @click="onGetNew" v-else-if="state.state == 2">进入下一题</view>
					<view class="b-home" @click="onHome">稍后再答</view>
				</view>
			</view>
		</view>

		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" color="#ffffff" :top="500"></load-more>
	</view>
</template>

<script>
import { getNew, getResult, submitAnswer } from '@/service/api/examine.js';
// import mixinsCommon from '@/mixins/common.js';
// import mixinsAuth from '../../mixins/auth.js';
export default {
	// mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			hasLoad: false,
			session_id: 0,
			activity_type: 1, //默认为1比赛类型，不显示答案
			state: {
				optionList: [],
				trueAnswer: [],
				userAnswer: []
			},
			disable: {
				submit: false
			},
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		console.log('onLoad', options);
		this.session_id = options.session_id;
		this.activity_type = options.activity_type;
		this.onGetNew();

		// 倒计时
		if (this.state.session_expired != -1) {
			setInterval(() => {
				if (this.state.session_expired > 0) {
					this.state.session_expired--;
				}
			}, 1000);
		}
	},
	computed: {
		barPercent() {
			return 'width: ' + (this.state.session_seq * 100) / this.state.total_count + '%';
		},
		optionNum() {
			return (index) => {
				return String.fromCharCode(64 + (index + 1));
			};
		},
		optionState() {
			return (index) => {
				console.log('optionState', index);
				let optionRight = false;
				let optionWrong = false;
				if (this.state.state == 2 && this.activity_type == 2) {
					if (this.state.type === 'radio' || this.state.type === 'yesorno') {
						if (this.state.trueAnswer.includes(index)) {
							optionRight = true;
						} else if (this.state.userAnswer.includes(index)) {
							optionWrong = true;
						}
					} else {
						if (this.state.trueAnswer.includes(index)) {
							optionRight = true;
						} else if (
							(this.state.userAnswer.includes(index) && !this.state.trueAnswer.includes(index)) ||
							(this.state.trueAnswer.includes(index) && !this.state.userAnswer.includes(index))
						) {
							optionWrong = true;
						}
					}
				}
				let ret = '';
				ret = this.state.userAnswer.includes(index) ? 'f-select' : '';
				ret += optionRight ? ' f-right' : '';
				ret += optionWrong ? ' f-wrong' : '';
				return ret;

				// return {
				// 	'f-select': this.state.userAnswer.includes(index),
				// 	'f-right': optionRight,
				// 	'f-wrong': optionWrong
				// }
			};
		},
		optionIcon() {
			return (index) => {
				console.log('optionIcon', index);
				return {
					'icon-roundcheck': this.state.userAnswer.includes(index)
					// 'icon-roundcheckfill': this.state.trueAnswer.includes(index),
				};
			};
		},
		resultIcon() {
			let ret = '';
			ret += this.state.result == 2 ? ' f-right' : '';
			ret += this.state.result == 3 ? ' f-wrong' : '';
			ret += this.state.result == 4 ? ' f-timeout' : '';
			ret += this.state.result == 5 ? ' f-timeout-end' : '';
			return ret;

			// return {
			// 	'f-right': this.state.result == 2,
			// 	'f-wrong': this.state.result == 3,
			// 	'f-timeout': this.state.result == 4,
			// 	'f-timeout-end': this.state.result == 5,
			// }
		},
		trueAnswer() {
			console.log('1', this.state.trueAnswer);
			if (!this.state.trueAnswer) this.state.trueAnswer = [];
			let options = this.state.trueAnswer.map((item) => {
				return String.fromCharCode(64 + (parseInt(item) + 1));
			});
			return options.join('、');
		},
		userAnswer() {
			console.log('2', this.state.trueAnswer);
			if (!this.state.trueAnswer) this.state.trueAnswer = [];
			let options = this.state.userAnswer.map((item) => {
				return String.fromCharCode(64 + (parseInt(item) + 1));
			});
			return options.join('、');
		},
		btnState() {
			return this.disable.submit === true || this.state.userAnswer.length === 0 ? 'disable' : '';
			// return {
			// 	'disable': this.disable.submit === true || this.state.userAnswer.length === 0
			// }
		}
	},

	methods: {
		onChoose(index) {
			if (this.state.state != 1) {
				return;
			}
			let valueIndex = this.state.userAnswer.indexOf(index);
			if (valueIndex !== -1) {
				this.state.userAnswer.splice(valueIndex, 1);
			} else {
				if (this.state.type === 'checkbox') {
					this.state.userAnswer.push(index);
				} else {
					this.state.userAnswer = [index];
				}
			}
			if (this.state.userAnswer.length === 0) {
				this.disable.submit = true;
			} else {
				this.disable.submit = false;
			}
		},
		onGetNew() {
			getNew(this.session_id).then(([err, res]) => {
				console.log('getNew', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.state = res;
					this.state.userAnswer = []; // 初始化提交的答案
				} else {
					if (err.data.code == 502) {
						// 超时结束
						this.onFinish();
					} else {
						if (!this.hasLoad) {
							this.loadingType = 3;
							this.loadingText = err.data.msg || '加载失败';
						}
					}
				}
			});
		},
		onSubmitAnswer() {
			if (this.disable.submit) {
				return;
			}
			if (this.state.userAnswer.length === 0) {
				return this.$logic.showToast('还未选择答案');
			}
			this.disable.submit = true;
			submitAnswer(this.state.id, this.state.userAnswer.join(',')).then(([err, res]) => {
				console.log('submitAnswer', err, res);
				this.disable.submit = false;
				if (!err) {
					this.state = res;
					if (this.state.session_status == 3) {
						this.$logic.showToast('答题会话已超时结束');
					}
				}
			});
		},
		onFinish() {
			uni.navigateTo({
				url: '/answer_pages/examine/summary?session_id=' + this.session_id + '&activity_type=' + this.activity_type
			});
		},
		onHome() {
			uni.reLaunch({
				url: '/answer_pages/home/index'
			});
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: #da5650;
// }

.wrap {
	background: #da5650;
}

.main {
	padding: 40upx;
}

.process {
	display: flex;
	flex-direction: column;

	.b-state {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;

		.b-count {
			display: flex;
			align-items: center;

			.s-tit1,
			.s-tit2 {
				font-size: 24upx;
			}

			.s-num {
				margin: 0 10upx;
				font-size: 32upx;
			}
		}

		.b-time {
			display: flex;
			align-items: center;

			.s-tit {
				font-size: 24upx;
			}

			.s-time {
				margin-left: 10upx;
				font-size: 28upx;
			}
		}
	}

	.b-bar {
		margin-top: 10upx;
		background: rgba(255, 255, 255, 0.5);
		width: 100%;
		height: 24upx;
		position: relative;

		.s-percent {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 30%;
			height: 24upx;
			display: inline-block;
			background: #fff;
		}
	}
}

.answer {
	margin-top: 50upx;
	padding: 40upx;
	background: #fff;
	border-radius: 20upx;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.b-head {
		display: flex;
		align-items: center;
		// justify-content: space-around;

		.s-type {
			width: fit-content;
			background: #da5650;
			padding: 0 20upx;
			font-size: 28upx;
			color: #fff;
			height: 50upx;
			line-height: 50upx;
		}

		.s-time {
			/* 题目剩余时间 */
		}
	}

	.b-title {
		margin-top: 20upx;
		font-size: 30upx;
		display: flex;

		.s-num {
			font-weight: bold;
		}

		.s-title {
			margin-left: 10upx;
			flex: 1;
		}

		.s-score {
			margin-left: 20upx;
			color: #666;
		}
	}

	.b-options {
		margin-top: 40upx;

		.b-item {
			margin-bottom: 20upx;
			padding: 20upx;
			font-size: 28upx;
			display: flex;
			// align-items: center;
			background: #f7f7f7;

			&:last-child {
				margin-bottom: 0;
			}

			&.f-select {
				background: #ecf3fe;
				color: #338ada;
			}

			&.f-right {
				background: #ecf6f0;
				color: #1eab69;
			}

			&.f-wrong {
				background: #ffebeb;
				color: #d13b42;
			}

			.s-num {
				font-weight: bold;
			}

			.s-cont {
				margin-left: 10upx;
				flex: 1;
			}

			.s-state {
				margin-top: 2upx;
				margin-left: 10upx;
				font-size: 32upx;
			}
		}
	}

	.b-result {
		padding: 80upx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-repeat: no-repeat;
		background-size: 180upx auto;
		background-position: center center;

		&.f-right {
			background-image: url(https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/answer/imgs/result_right.png);
		}

		&.f-wrong {
			background-image: url(https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/answer/imgs/result_wrong.png);
		}

		&.f-timeout {
			background-image: url(https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/answer/imgs/result_timeout.png);
		}

		&.f-timeout-end {
			background-image: url(https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/answer/imgs/result_timeout_end.png);
		}

		.b-right,
		.b-mine {
			display: flex;
			align-items: center;

			.s-tit {
				font-size: 26upx;
				color: #333;
			}

			.s-cont {
				margin-left: 10upx;
				font-weight: bold;
				color: #da5650;
				font-size: 36upx;
			}
		}
	}

	.b-explain {
		font-size: 28upx;
		color: #808080;
	}

	.b-action {
		margin-top: 50upx;
		display: flex;
		flex-direction: column;

		.b-submit {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			background: #da5650;
			border-radius: 50upx;
			letter-spacing: 10upx;

			&.disable {
				background: rgba($color: #da5650, $alpha: 0.7);
			}
		}

		.b-next {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			background: #ff8d1a;
			border-radius: 50upx;
			letter-spacing: 10upx;

			&.disable {
				background: rgba($color: #ff8d1a, $alpha: 0.2);
			}
		}

		.b-home {
			margin-top: 40upx;
			text-align: center;
			color: #808080;
			font-size: 28upx;
		}
	}
}
</style>