WenWuGuanJia/answer_pages/examine/review.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">
						<view class="s-tit">花费时间</view>
						<view class="s-time">{{ costTime(state.cost_time) }}</view>
					</view>
				</view>
				<view class="b-bar">
					<view class="s-percent" :style="barPercent"></view>
				</view>
			</view>
			<view class="answer">
				<view class="b-type">{{ state.type_text }}</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-options">
					<view class="b-item" v-for="(item, index) in state.optionList" :key="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">
					<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.explain">
					<text>解析：{{ state.explain }}</text>
				</view>
				<view class="b-action">
					<view class="b-last" :class="{ disabled: disabled.hasLast }" @click="onLast">上一题</view>
					<view class="b-next" :class="{ disabled: disabled.hasNext }" @click="onNext">下一题</view>
				</view>
				<view class="b-home" @click="onHome">回到首页</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" color="#ffffff" :top="500"></load-more>
	</view>
</template>

<script>
import { getResult } 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,
			state: {},
			disabled: {
				hasLast: false,
				hasNext: false
			},
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		this.loadResult(options.record_id);
	},
	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) {
					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 += optionRight ? 'f-right' : '';
				ret += optionWrong ? 'f-wrong' : '';
				return ret;

				// return {
				// 	'f-right': optionRight,
				// 	'f-wrong': optionWrong
				// }
			};
		},
		optionIcon() {
			return (index) => {
				console.log('optionIcon', index);
				return this.state.userAnswer.includes(index) ? 'icon-roundcheck' : '';
				// 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() {
			let options = this.state.trueAnswer.map((item) => {
				return String.fromCharCode(64 + (parseInt(item) + 1));
			});
			return options.join('、');
		},
		userAnswer() {
			let options = this.state.userAnswer.map((item) => {
				return String.fromCharCode(64 + (parseInt(item) + 1));
			});
			return options.join('、');
		}
	},
	methods: {
		loadResult(recordId) {
			if (!recordId) {
				this.$logic.showToast('没有更多记录');
				return;
			}
			getResult(recordId).then(([err, res]) => {
				console.log('getResult', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.state = res;
					if (!res.last_id) {
						this.disabled.hasLast = true;
					} else {
						this.disabled.hasLast = false;
					}
					if (!res.next_id) {
						this.disabled.hasNext = true;
					} else {
						this.disabled.hasNext = false;
					}
				} else {
					if (!this.hasLoad) {
						this.loadingType = 3;
						this.loadingText = err.data.msg || '加载失败';
					}
				}
			});
		},
		onLast() {
			this.loadResult(this.state.last_id);
		},
		onNext() {
			this.loadResult(this.state.next_id);
		},
		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-type {
		width: fit-content;
		background: #da5650;
		padding: 0 20upx;
		font-size: 28upx;
		color: #fff;
		height: 50upx;
		line-height: 50upx;
	}

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

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

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

		.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-left: 10upx;
				font-size: 36upx;
			}
		}
	}

	.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;

		.b-last {
			flex: 1;
			height: 78upx;
			line-height: 78upx;
			text-align: center;
			color: #da5650;
			font-size: 32upx;
			border: 1upx solid #da5650;
			border-radius: 50upx;
			letter-spacing: 5upx;

			&.disabled {
				color: #da5650a3;
				border: 1upx solid #da5650a3;
			}
		}

		.b-next {
			margin-left: 50upx;
			flex: 1;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			background: #da5650;
			border-radius: 50upx;
			letter-spacing: 5upx;

			&.disabled {
				background: #da5650a3;
			}
		}
	}

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