xwc/pages/video-details/video-details.vue

<template>
	<view>
		<view class="video">
			<video :src="data.url" :poster="data.cover_image" @timeupdate='TimeUpdate($event,data.id)' @ended="ended"
				controls style="width: 100%;"></video>
		</view>
		<view class="wrapper">
			<view class="title">
				{{data.title}}
			</view>
			<view class="desc" v-if='data.isGift'>
				券已领取
			</view>
			<view class="desc" v-else>
				奖励券：{{data.integral}}
			</view>
			<view class="details">
				<view class="">
					视频详情：
				</view>
				<view class="content" v-html="data.content">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		seeVideoGift
	} from '@/api/shop.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				data: {},
				currentId: '',
				playTime: '',
				allTime: "",
				currentId: null
			}
		},
		onLoad(option) {

			// let data = JSON.parse(option.infos)
			// this.data = data
			// console.log(data)
			let data = uni.getStorageSync('videoData')
			this.data = data
			console.log(data)
		},
		methods: {
			// 看完视频获取券
			async getVideoGift() {
				const {
					code,
					data,
					msg
				} = await seeVideoGift({
					id: this.currentId
				})
				if (code == 1) {
					uni.showToast({
						title: msg
					})
				} else {
					uni.showToast({
						title: msg
					})
				}
			},
			TimeUpdate(e, id) {

				this.currentId = id
				this.playTime = e.detail.currentTime
				this.allTime = e.detail.duration
				// 当播放时间大于 视频总时长 即播放结束发起请求 获取券
				if (this.playTime >= this.allTime) {

				}
			},
			// 播放结束给券
			ended() {
				this.getVideoGift()
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
	}

	.wrapper {

		box-sizing: border-box;
		background-color: #fff;
		padding: 20rpx 30rpx;

		.title {
			font-weight: bold;
			line-height: 80rpx;
		}

		.desc {
			font-size: 28rpx;
			color: #F73E33;
		}

		.details {
			margin: 40rpx auto;

			.title {
				font-weight: bold;
			}

			.content {
				margin-top: 40rpx;
			}
		}
	}
</style>