xiangyuan-app/src/pages/third/yunexamine/pages/examine/summary.vue

<template>
	<view class="wrap">
		<view class="main" v-if="hasLoad">
			<view class="result" v-if="state.state && state.state != 1">
				<view class="b-summary">
					<view class="b-title" v-if="state.state == 2">获得成绩</view>
					<view class="b-title" v-else-if="state.state == 3">超时结束</view>
					<view class="b-score">
						<view class="s-num">{{state.total_score || 0}}</view>
						<view class="s-tit">分</view>
					</view>
					<text class="break-score" v-if="state.break_sid > 0">上次{{breakTips}}，恭喜打破记录！</text>
				</view>
				<view class="b-detail">
					<view class="b-item" v-if="state.scenario">
						<view class="s-tit">答题模式</view>
						<view class="s-cont">{{state.scenario_text}}</view>
					</view>
					<view class="b-item">
						<view class="s-tit">总答题数</view>
						<view class="s-cont">{{state.answer_count}}道</view>
					</view>
					<view class="b-item">
						<view class="s-tit">答对数</view>
						<view class="s-cont">{{state.right_count}}道</view>
					</view>
					<view class="b-item">
						<view class="s-tit">答错数</view>
						<view class="s-cont">{{state.wrong_count}}道</view>
					</view>
					<view class="b-item" v-if="state.state == 3">
						<view class="s-tit">超时题数</view>
						<view class="s-cont f-focus">{{state.timeout_count}}道</view>
					</view>
					<view class="b-item">
						<view class="s-tit">答题耗时</view>
						<view class="s-cont f-focus">{{costTime(state.cost_time)}}</view>
					</view>
					<view class="b-item">
						<view class="s-tit">答题时间</view>
						<view class="s-cont">{{startTime}}</view>
					</view>
				</view>
				<view class="b-action">
					<view class="b-history" @click="onHistory">查看历史</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 {
		getSummary
	} from '../../service/api/examine.js'
	import mixinsCommon from '../../mixins/common.js'
	import mixinsAuth from '../../mixins/auth.js'
	import {
		formatDate
	} from '../../common/util.js'
  import { showToast } from '../../common/util.js'
  import LoadMore from '../../components/load-more/load-more.vue'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
    components: {
      LoadMore
    },
		data() {
			return {
				hasLoad: false,
				session_id: 0,
				state: {},
				loadingType: 1,
				loadingText: '',
			}
		},
		onLoad(options) {
			switch (options.from) {
				case 'last':
					uni.setNavigationBarTitle({
						title: '上次答题'
					})
					break
				case 'max':
					uni.setNavigationBarTitle({
						title: '最好成绩'
					})
					break
				case 'exercise':
					uni.setNavigationBarTitle({
						title: '练习结果'
					})
					break
				case 'review':
					uni.setNavigationBarTitle({
						title: '复习结果'
					})
					break
			}
			this.session_id = options.session_id
			getSummary(options.session_id).then(([err, res]) => {
				console.log('getSummary', err, res)
				if (!err) {
					this.hasLoad = true
					this.loadingType = -1
					this.state = res
				} else {
					if (!this.hasLoad) {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
					showToast('答题未完成').then(([err, res]) => {
						uni.reLaunch({
							url: '/pages/third/yunexamine/pages/home/index'
						})
					})
				}
			})
		},
		computed: {
			breakTips() {
				if (this.state.total_score > this.state.break_score) {
					return this.state.break_score + '分'
				} else {
					return this.costTime(this.state.break_time)
				}
			},
			startTime() {
				return formatDate(this.state.created_at, 'yyyy-MM-dd hh:mm:ss')
			}
		},
		methods: {
			onHistory() {
				uni.navigateTo({
					url: '/pages/third/yunexamine/pages/examine/history?session_id=' + this.session_id
				})
			},
			onHome() {
				uni.reLaunch({
					url: '/pages/third/yunexamine/pages/home/index'
				})
			}
		}
	}
</script>

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

	.wrap {}

	.main {
		padding: 40upx;
	}

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

		.b-summary {
			margin-top: 20upx;
			font-size: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.b-title {
				font-size: 36upx;
			}

			.b-score {
				margin-top: 20upx;
				display: flex;
				align-items: baseline;

				.s-num {
					color: #FF8D1A;
					font-weight: bold;
					font-size: 80upx;
				}

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

			.break-score {
				margin-top: 20upx;
				color: #DA5650;
				font-size: 32upx;
				font-weight: bold;
			}
		}

		.b-detail {
			margin-top: 40upx;
			padding: 20upx;
			background: #F7F7F7;
			border-radius: 10upx;

			.b-item {
				font-size: 28upx;
				height: 60upx;
				line-height: 60upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s-tit {
					color: #808080;
				}

				.s-cont {
					color: #383838;
				}

				.f-focus {
					color: #FF8D1A;
				}
			}
		}

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

			.b-history {
				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;
			}

			.b-home {
				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;
			}
		}
	}
</style>