vue-insagent-app/pages/ad/ad.vue

<template>
	<view class="page" :style="{height:windowHeight}">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="dis j-s a-c" style="padding: 0 10px;">
			<view class="maskTool">
				<text>广告</text>
				<text>丨</text>
				<text v-if="countdownTime>0">观看{{countdownTime}}秒后获得奖励</text>
				<text v-else>已获得奖励</text>
			</view>
			<view class="maskTool1 dis j-s a-c">
				<image :src="isMuted?'../../static/img/volume1.png':'../../static/img/volume2.png'" mode=""
					style="width: 15px;height: 15px;" @click="isMuteds"></image>

				<text>丨</text>
				<!-- #ifdef APP-PLUS -->
				<text @click="showAlert">关闭</text>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<text @click="showAlert1">关闭</text>
				<!-- #endif -->
			</view>
		</view>
		<view class="" :style="{width:'100%',height:'calc(100% - 45px)',position: 'relative'}">
			<video id="myVideo" :src="videoUrl" autoplay controls :style="{width:'100%',height:'100%'}"
				:controls="false" @play="startCountdown" :muted="muted" :enable-progress-gesture="false">
			</video>
		</view>
		<u-modal v-model="show" content="暂未获得奖励，是否继续观看视频" show-cancel-button confirm-text="继续" :show-title="false"
			:content-style="{fontWeight:'bold'}" :cancel-style="{fontWeight:'bold'}"
			:confirm-style="{fontWeight:'bold'}" cancel-text="放弃" @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdownTime: 0,
				videoTimeLength: 0,
				windowHeight: "",
				isMuted: true,
				show: false,
				videoContext: "",
				muted: false,
				videoUrl: "",
				videoId: "",
				userId: "",
			}
		},
		onShow() {
			// 确保视频元素存在
			this.$nextTick(() => {
				this.videoContext = uni.createVideoContext('myVideo', this);
			});
		},
		async onLoad(params) {
			if (params) {
				this.userId = params.userId;
			}
			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight + 'px';
			this.marketQuery();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			confirm() {
				this.videoContext.play();
				// 继续倒计时
				this.startCountdown();
			},
			cancel() {
				this.marketCallback();
				uni.navigateBack(-1)
			},
			isMuteds() {
				this.isMuted = !this.isMuted;
				this.muted = !this.muted;
			},
			startCountdown() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
				this.intervalId = setInterval(() => {
					if (this.countdownTime > 0) {
						this.countdownTime--;
					} else {
						clearInterval(this.intervalId);
					}
				}, 1000);
			},
			showAlert1() {
				if (this.countdownTime > 0) {
					this.videoContext.pause();
					if (this.intervalId) {
						clearInterval(this.intervalId);
					}
					this.show = true;
					// 暂停倒计时
				} else {
					uni.navigateBack(-1)
					this.marketCallback();
				}
			},
			showAlert() {
				if (this.countdownTime > 0) {
					this.videoContext.pause();
					if (this.intervalId) {
						clearInterval(this.intervalId);
					}
					plus.nativeUI.confirm(
						"暂未获得奖励，是否继续观看视频。",
						(e) => {
							if (e.index === 0) {
								this.videoContext.play();
								// 继续倒计时
								this.startCountdown();
							} else if (e.index === 1) {
								uni.navigateBack(-1)
							}
						}, {
							buttons: ["继续", "放弃"]
						}
					);
				} else {
					uni.navigateBack(-1)
				}

			},
			marketQuery() {
				uni.request({
					url: 'http://192.168.0.106:8082/api/advertising/getCompany',
					method: "POST",
					data: {
						userId: this.userId
					},
					success: (res) => {
						this.videoUrl = 'http://192.168.0.106:8082/api/' + res.data.videoUrl;
						this.countdownTime = res.data.videoTimeLength;
						this.videoTimeLength = res.data.videoTimeLength;
						this.videoId = res.data.id;
					}
				})
			},
			marketCallback() {
				uni.request({
					url: 'http://192.168.0.106:8082/api/callback/advertisingCallback',
					method: "POST",
					data: {
						isCatOver: this.countdownTime > 0 ? '0' : '1',
						catVideoTime: this.videoTimeLength - this.countdownTime,
						videoId: this.videoId,
						userId: this.userId,
					},
					success: (res) => {

					}
				})
			},
		},
		beforeDestroy() {
			if (this.intervalId) {
				clearInterval(this.intervalId);
			}
		}
	}
</script>
<style>
	page {
		background-color: #000;

	}
</style>
<style lang="scss" scoped>
	.page {
		padding-top: 40px;
		background-color: #000;
	}

	.maskTool {

		border: 1px solid #999;
		height: auto;
		color: #fff;
		border-radius: 20px;
		padding: 5px 10px;
	}

	.maskTool1 {
		border: 1px solid #999;
		height: auto;
		color: #fff;
		border-radius: 20px;
		padding: 5px 10px;
	}
</style>