GCLS_Page_Mobile/pages/common/AnswerReport.vue

<template>
	<view>
		<navbar :viewLogo="false" :backPath="url" />
		<view style="height:92rpx;"></view>
		<view class="topic-area"
			:style="answer_mode === answer_mode_list[0].value ? `height: ${contentRealHeight}px` : `height: ${contentRealHeight + 60}px`">
			<view class="answer-record-area">
				<text class="big-title">测试报告</text>
				<view class="answer-record">
					<view class="record-item">
						<text class="title-text">耗时</text>
						<text class="record-text">{{secondFormatConversion(answer_record.answer_duration,'chinese')}}</text>
					</view>
					<view class="record-item">
						<text class="title-text">正确</text>
						<text class="record-text">{{answer_record.right_count}}</text>
					</view>
					<view class="record-item">
						<text class="title-text">错误</text>
						<text class="record-text">{{answer_record.error_count}}</text>
					</view>
				</view>
			</view>

			<view class="topic-item-area"
				v-if="answer_mode == answer_mode_list[0].value||isEnable(answer_record.is_remarked)">
				<uni-section title="">
					<!-- {{question_item.is_objective}}{{answer_status_list[question_item.answer_status].label}} -->
					<view v-for="(question_item,index) in question_list" :key="index">
						<uni-badge class="uni-badge-left-margin"
							:style="{backgroundColor:question_item.color_mark,color:question_item.color_mark=='#F0F0F0'?'#000':'#fff'}"
							:text="isEnable(question_item.is_remarked)?'.':''" absolute="rightTop" size="small">
							<view class="topic-item-box"
								@click="viewAnswerQuestion(question_item.question_id,index+1,answer_record.is_remarked)">
								<text class="box-text">{{index+1}}</text>
							</view>
						</uni-badge>
					</view>
				</uni-section>
			</view>

		</view>
		<!-- 按钮 -->
		<template v-if="answer_mode == answer_mode_list[0].value">
			<view class="foot-btn">
				<button class="next-btn start-answer-btn" @click="enterStartAnswer()">重新答题</button>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		GetAnswerRecordReport,
		GetAnswerRecordInfo
	} from '@/api/exercise.js';
	import {
		secondFormatConversion
	} from '@/utils/transform.js';
	import {
		answer_mode_list,
		answer_status_list,
		isEnable
	} from '@/pages/answer_question/common/data/common.js';
	export default {
		data() {
			return {
				isEnable,
				secondFormatConversion,
				answer_mode_list,
				answer_status_list,
				answer_record_id: '',
				exercise_share_record_id: '',
				answer_mode: -1,
				answer_record: {},
				question_list: [],
				isTask: false,
				selectDate: '', // 用户返回

				contentRealHeight: 0, //答题内容区域高度
			}
		},
		//第一次加载时调用
		created() {},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.contentRealHeight = res.windowHeight - 160;
				}
			});

			this.answer_record_id = options.answer_record_id;
			this.exercise_share_record_id = options.exercise_share_record_id;
			this.answer_mode = options.answer_mode;
			this.isTask = this.isEnable(options.isTask);
			this.selectDate = options.date;
			this.getAnswerRecordReport();
		},
		computed: {
			url() {
				return this.isTask ? '/pages/tabbar/task/index?date=' + this.selectDate : '/pages/tabbar/exercise/index';
			}
		},
		methods: {
			getAnswerRecordReport() {
				GetAnswerRecordReport({
					'answer_record_id': this.answer_record_id
				}).then((res) => {
					if (res.status) {
						this.answer_record = res.answer_record;
						this.answer_mode = res.answer_record.answer_mode;
						this.question_list = res.question_list;
						// console.log('得到分享记录', res.question_list);
					}
				})
			},
			enterStartAnswer() {
				uni.navigateTo({
					url: '/pages/answer_question/answer/index?share_record_id=' + this.answer_record.exercise_share_record_id +
						'&isTask=' + this.isTask + '&date=' + this.selectDate
				})
			},
			viewAnswerQuestion(id, cur_number, is_remarked) {
				uni.navigateTo({
					url: '/pages/answer_question/answer/index?share_record_id=' + this.exercise_share_record_id +
						'&question_id=' + id + "&cur_number=" + cur_number + "&exercise_id=" + this.answer_record.exercise_id +
						"&is_remarked=" + is_remarked + "&answer_record_id=" + this.answer_record_id + '&date=' + this.selectDate
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topic-area {
		display: flex;
		flex-direction: column;
		width: 88%;
		margin: 16rpx auto 32rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		overflow: scroll;
		box-shadow: 0rpx 20rpx 48rpx 0rpx rgba(0, 0, 0, 0.2);

		.answer-record-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 32rpx;
			width: 100%;
			margin: 0 auto;

			.big-title {
				color: #306EFF;
				font-weight: 500;
				font-size: 64rpx;
				align-items: center;
			}

			.answer-record {
				width: 100%;
				height: 212rpx;
				background-color: #F7F7F7;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 100rpx;

				.record-item {
					display: flex;
					flex-direction: column;
					row-gap: 16rpx;

					.title-text {
						opacity: 0.4;
					}

					.record-text {
						font-weight: 500;
						font-size: 40srpx;
					}
				}
			}
		}

		/deep/ .uni-section {
			width: 100%;

			.uni-section-content {
				display: flex;
				flex-wrap: wrap;
				row-gap: 48rpx;
				column-gap: 16rpx;

				uni-view {
					width: 116rpx;
					height: 80rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.uni-badge--error {
						background-color: #fff;
					}

					.uni-badge-left-margin {
						margin-left: 10px;
					}

					.box {
						width: 40px;
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						background-color: #DCDFE6;
						color: #fff;
						font-size: 12px;
					}
				}
			}
		}
	}

	.foot-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 94%;
		margin: 0 auto;

		.next-btn {
			border-radius: 220rpx;
			font-size: 28rpx;
			font-weight: 400;
			padding: 8rpx 124rpx;
			border: none;
			background-color: #306EFF;
			color: #fff;
		}

		.start-answer-btn {
			width: 100%;
		}
	}
</style>