WenWuGuanJia/answer_pages/examine/summary.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="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">
						<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" v-if="activity_type == 2" @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';
export default {
	// mixins: [mixinsCommon],
	data() {
		return {
			hasLoad: false,
			session_id: 0,
			state: {},
			loadingType: 1,
			loadingText: '',
			activity_type: 1 //默认为1比赛类型，不显示查看历史
		};
	},

	onLoad(options) {
		switch (options.from) {
			case 'last':
				uni.setNavigationBarTitle({
					title: '上次答题'
				});
				break;
			case 'max':
				uni.setNavigationBarTitle({
					title: '最好成绩'
				});
				break;
		}
		this.session_id = options.session_id;
		this.activity_type = options.activity_type;
		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 || '加载失败';
				}
				this.$logic.showToast('答题未完成').then(([err, res]) => {
					uni.reLaunch({
						url: '/answer_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: '/answer_pages/examine/history?session_id=' + this.session_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;
}

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