7131/pages/zero/gg.vue

<template>
	<view class="content">
		<view class="djs">
			观看完视频后，可获得奖励
		</view>
		<video src="../../static/video/v1.mp4" class="gsjs" autoplay :muted="muted" :controls="false"
			:enable-progress-gesture="false" @play="vPlay" ref="vgg" @ended="vEnd" id="myVideo"></video>
	</view>
</template>

<script>
	import {
		ggGive
	} from '@/api/zero.js'
	export default {
		data() {
			return {
				// #ifdef APP-PLUS
				muted: false,
				// #endif
				// #ifdef H5
				muted: true,
				// #endif
				djs: 15,
				isEnd: false,
				id: 0,
				video: ''
			}
		},
		onLoad(opt) {
			this.id = opt.id
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {
			this.video = uni.createVideoContext('myVideo', this)
		},
		onHide() {
			try {
				this.video.pause()
			} catch (e) {
				//TODO handle the exception
				console.log('err', e)
			}
		},
		onBackPress(event) {
			console.log(event, 'black')
			let that = this
			if (!that.isEnd) {
				that.video.pause()
				uni.showModal({
					title: '温馨提醒',
					content: '观看完视频后，可获得奖励',
					cancelText: '跳过视频',
					confirmText: '继续观看',
					complete(e) {
						console.log(e)
						if (e.confirm) {
							// return 
							that.video.play()

						} else {
							uni.redirectTo({
								url: '/pages/zero/ren'
							})
						}
					}
				})
				return true
			}


		},
		methods: {
			vPlay(e) {
				console.log(e, '开始播放')
			},
			vEnd() {
				this.isEnd = true
				console.log(this.id)
				//发放奖励
				ggGive({
					id: this.id
				}).then(res => {
					uni.showToast({
						title: '奖励发放成功',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack({
							fail() {
								uni.redirectTo({
									url: '/pages/zero/ren'
								})
							}
						})
					}, 1500)

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #000;
		height: 100%;
	}

	.content {
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;
		width: 100%;
		height: 100%;
	}

	.gsjs {
		width: 750rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.djs {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		color: #fff;
		font-size: 28rpx;
		padding: 5rpx 10rpx;
		border: 1px solid #fff;
		border-radius: 20rpx;
	}
</style>