shunfengche-sfd/my/safety/video.vue

<template>
	<view class="safety-video">
		<view class="video-title">安全驾驶培训视频</view>
		<video
			class="video-content"
			id="myVideo" 
			src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" 
			@error="videoErrorCallback"
			controls
		>
		</video>
		<view>
			<view v-if="!videoUnlocked" class="video-status">
				<view>
					<!-- todo 图标不对 -->
					<image v-if="globalImages" :src="globalImages + 'imgs/jianyi.png'" style="width: 24rpx;height: 28rpx;"></image>
					<text style="margin-left: 16rpx;">视频未完成</text>
				</view>
				<view>禁止快进</view>
			</view>
			<view v-else class="video-status">
				<view>
					<image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 24rpx;height: 28rpx;"></image>
					<text style="margin-left: 16rpx;">视频已完成</text>
				</view>
				<view>禁止快进</view>
			</view>
		</view>
		
		<u-card padding="32" full :showHead="false">
			<view slot="body">
				<view style="display: flex;justify-content: space-between;align-items: center;color: #1F2937;">
					<view>安全考核</view>
					<view><u-button type="error" plain size="mini" disabled>未开始</u-button></view>
				</view>
				
				<view style="display: flex;justify-content: space-between;align-items: center;margin: 24rpx 0;color: #333333;">
					<view>
						<view style="color: #6B7280">及格分数</view>
						<view>100分</view>
					</view>
					<view>
						<view style="color: #6B7280">题目数量</view>
						<view>10题</view>
					</view>
					<view>
						<view style="color: #6B7280">考试时长</view>
						<view>15分钟</view>
					</view>
				</view>
				
				<view style="margin: 8rpx 0;">
					<u-button type="primary" @click="navgo('/my/safety/exam')">
						{{ videoUnlocked ? '开始考试' : '完成视频后解锁考试' }}
					</u-button>
				</view>
			</view>
		</u-card>
		
		<u-card padding="32" full :showHead="false">
			<view slot="body">
				<view style="color: #1F2937;margin-bottom: 8rpx;">
					考试须知
				</view>
				<view>
					<view style="display: flex;align-items: center;margin: 16rpx 0;">
						<image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 28rpx;height: 28rpx;"></image>
						<text style="margin-left: 16rpx;color: #4B5563;">观看完整培训视频后方可参加考试</text>
					</view>
					<view style="display: flex;align-items: center;margin: 16rpx 0;">
						<image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 28rpx;height: 28rpx;"></image>
						<text style="margin-left: 16rpx;color: #4B5563;">考试共10题，答对10题为通过</text>
					</view>
					<view style="display: flex;align-items: center;margin: 16rpx 0;">
						<image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 28rpx;height: 28rpx;"></image>
						<text style="margin-left: 16rpx;color: #4B5563;">答错题目需重新作答，直至全部正确</text>
					</view>
					<view style="display: flex;align-items: center;margin: 16rpx 0;">
						<image v-if="globalImages" :src="globalImages + 'imgs/dui.png'" style="width: 28rpx;height: 28rpx;"></image>
						<text style="margin-left: 16rpx;color: #4B5563;">考试期间不可退出，否则视为放弃</text>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				globalImages: null,
				videoUnlocked: true,
				
				arr: [],
				token: '',
			}
		},
		onLoad(e) {
			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'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.safety-video {
		width: 100%;
		position: relative;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		
		.video-title {
			font-size: 32rpx;
			line-height: 56rpx;
			font-weight: 400;
		}
		
		.video-content {
			width: 100%;
			margin: 20rpx 0;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
		}
		
		.video-status {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}
	
</style>