shunfengche-sfd/my/safety/examcomplete.vue

<template>
	<view class="exam-complete">
		<u-card padding="32" full :showHead="false">
			<view slot="body" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view v-if="examData.qualified" style="width: 100%;">
					<view class="view-center">
						<image v-if="globalImages" :src="globalImages + 'imgs/tonguo.png'" style="width: 192rpx;height: 192rpx;"></image>
					</view>
					<view class="view-center" style="margin: 32rpx 0;font-size: 48rpx;line-height: 64rpx;font-weight: 500;color: #1F2937;">恭喜您通过考试</view>
					<view class="view-center" style="font-size: 72rpx;line-height: 80rpx;font-weight: 500;color: #1F2937;">{{ examData.score }}分</view>
					<view class="view-center" style="margin: 16rpx 0;color: #333333;font-size: 28rpx;line-height: 42rpx;">及格分数: 100分</view>
					<u-line-progress :percent="70" :showPercent="false" :height="16"></u-line-progress>
					<view class="view-center" style="margin: 16rpx 0;font-size: 28rpx;line-height: 40rpx;color: #999999;">您的成绩超过了{{ examData.exceeding }}%的考生</view>
				</view>
				<view v-else style="width: 100%;">
					<view>
						<view class="view-center">
							<image v-if="globalImages" :src="globalImages + 'imgs/weitongguo.png'" style="width: 192rpx;height: 192rpx;"></image>
						</view>
						<view class="view-center" style="margin: 32rpx 0;font-size: 48rpx;line-height: 64rpx;font-weight: 500;color: #1F2937;">您未通过考试</view>
						<view class="view-center" style="font-size: 72rpx;line-height: 80rpx;font-weight: 500;color: #1F2937;">{{ examData.score }}分</view>
						<view class="view-center" style="margin: 16rpx 0;color: #333333;font-size: 28rpx;line-height: 42rpx;">及格分数: 100分</view>
						<u-line-progress :percent="70" :showPercent="false" :height="16"></u-line-progress>
						<view class="view-center" style="margin: 16rpx 0;font-size: 28rpx;line-height: 40rpx;color: #999999;">您的成绩超过了{{ examData.exceeding }}%的考生</view>
					</view>
				</view>
			</view>
		</u-card>
		
		<u-card padding="32" full :showHead="false">
			<view slot="body" style="display: flex;flex-direction: column;">
				<view style="color: #1F2937;font-size: 36rpx;line-height: 56rpx;">考试建议</view>
				<view style="margin-top: 24rpx;display: flex;align-items: baseline;">
					<image v-if="globalImages" :src="globalImages + 'imgs/jianyi.png'" style="width: 17rpx;height: 24rpx;"></image>
					<view style="color: #374151;font-size: 28rpx;line-height: 42rpx;margin-left: 16rpx;text-align: left;">您在"乘客服务"部分错误较多，建议复习服务 规范章节</view>
				</view>
				<view style="margin-top: 24rpx;display: flex;align-items: baseline;">
					<image v-if="globalImages" :src="globalImages + 'imgs/jianyi.png'" style="width: 17rpx;height: 24rpx;"></image>
					<view style="color: #374151;font-size: 28rpx;line-height: 42rpx;margin-left: 16rpx;text-align: left;">您在"平台规则"部分有2题错误，请关注最新政策 更新</view>
				</view>
			</view>
		</u-card>
		
		<view class="placeholder"></view>
		<view class="tabbar_bottom">
			<view style="position: relative;width: calc(100% - 64rpx);">
				<u-button v-if="examData.qualified" type="primary" style="width: 80%;" @click="jumpTo('/pages/index/index')">开始接单</u-button>
				<u-button v-else type="error" :customStyle="{ backgroundColor: '#F56C6C' }" @click="navgo('/my/safety/video')">重新答题</u-button>
				<view style="font-size: 24rpx;line-height: 32rpx;text-align: center;color: #999999;margin-top: 16rpx;">通过考试后, 您将获得更多优质订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	
	export default {
		data() {
			return {
				globalImages: null,
				arr: [],
				token: '',
				examData: {
					score: null,
					exceeding: null,
					qualified: null,
				}
			}
		},
		onLoad(options) {
			const params = {
				score: Number(options.score),
				exceeding: Number(options.exceeding),
				qualified: options.qualified === 'true',
			}
			this.examData = params
			waitForGlobalImages().then((path) => {
				this.globalImages = path
			})
		},
		onShow() {
			this.token = this.$queue.getData('token')
		},
		methods: {
			navgo(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let that = this
				if (that.token) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			jumpTo(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let that = this
				if (that.token) {
					uni.switchTab({
						url: e
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.exam-complete {
		width: 100%;
		position: relative;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		
		.view-center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.placeholder {
		height: 128rpx;
		padding-bottom: 16rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	.tabbar_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 16rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index: 101;
	}
</style>