7131/pages/zero/gg.vue

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

<script>
	import {
		ggGive
	} from '@/api/zero.js'
	export default {
		data() {
			return {
				djs: 15,
				isEnd: false,
				id:0
			}
		},
		onLoad(opt) {
			this.id = opt.id
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		onBackPress(event) {
			console.log(event, 'black')
			let that = this
			if (!that.isEnd) {
				that.$refs.vgg.pause()
				uni.showModal({
					title: '温馨提醒',
					content: '观看完视频后，可获得奖励',
					cancelText: '跳过视频',
					confirmText: '继续观看',
					complete(e) {
						console.log(e)
						if (e.confirm) {
							// return 
							that.$refs.vgg.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%;
	}

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