partnerApp/pages/ad/ad.vue

<template>
	<view class="page" :style="{height:windowHeight}">
		<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 -->
				<text @click="showAlert">关闭</text>
				<!-- #endif -->
				<text @click="showAlert1">关闭</text>
			</view>
		</view>
		<view class="" :style="{width:'100%',height:'calc(100% - 45px)',position: 'relative'}">
			<video id="myVideo" src="../../ad.mp4" autoplay controls :style="{width:'100%',height:'100%'}"
				:controls="true" @play="startCountdown">
			</video>
		</view>
		<u-modal v-model="show" content="暂未获得奖励,是否继续观看视频"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdownTime: 30,
				windowHeight: "",
				isMuted: true,
				show: false,
			}
		},
		onShow() {
			// 确保视频元素存在
			this.$nextTick(() => {
				this.video = document.getElementById('myVideo');
			});
		},
		onLoad() {
			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight + 'px';
		},
		methods: {
			isMuteds() {
				this.isMuted = !this.isMuted;
				this.video.muted = this.isMuted;
			},
			startCountdown() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
				this.intervalId = setInterval(() => {
					if (this.countdownTime > 0) {
						this.countdownTime--;
					} else {
						clearInterval(this.intervalId);
					}
				}, 1000);
			},
			showAlert1() {
				this.show = true;
			},
			showAlert() {
				// 判断plus对象是否存在
				if (plus) {
					// 创建一个提示窗
					plus.nativeUI.alert('这是一个弹窗', function() {});
				} else {
					// 非App环境的处理逻辑
					alert('这是一个浏览器的弹窗');
				}
			}
		},
		beforeDestroy() {
			if (this.intervalId) {
				clearInterval(this.intervalId);
			}
		}
	}
</script>
<style>
	page {
		background-color: #000;

	}
</style>
<style lang="scss" scoped>
	.page {
		padding-top: 20px;
		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>