cat-power/pages/ad/index.vue

<template>
	<div class="container">
		<button @click="fetch">拉取激励广告</button>
	</div>
</template>

<script setup>
	import { ref, nextTick } from "vue"
	
	const visible = ref(true)
	const openId = ref('')
	
	
	uni.login({
		provider: 'weixin',
		success(res){
			uni.request({
				url: 'https://browse.test.caixiao365.com/userinfo',
				method: 'POST',
				data: { code: res.code },
				header: { 'content-type': 'application/json' },
				success(res){
					openId.value = res.data.data.openid
				}
			})
			
		}
	})
	
	
	let videoAd = null
	if (process.env.UNI_PLATFORM.toUpperCase() === 'MP-WEIXIN') {
		if (wx.createRewardedVideoAd) {
			videoAd = wx.createRewardedVideoAd({
				adUnitId: 'adunit-c90f984d29d8d175'
			})
			
			videoAd.onLoad(() => {
				console.log('自动激励视频家加载中....')
			})
			
			videoAd.onError(() => {
				console.log('自动激励视频家加载失败....')
			})
		}
	}
	
	
	function fetch(){
		uni.request({
			url: 'https://browse.test.caixiao365.com/browse',
			method: 'POST',
			data: { openId: openId.value, nickname: 'null' ,isClicks: '1' },
			header: { 'content-type': 'application/json' },
			fail(err){ console.log('记录失败', err) }
		})
		
		if(videoAd){
			videoAd.onClose((res) => {
				uni.request({
					url: 'https://browse.test.caixiao365.com/browse',
					method: 'POST',
					data: { openId: openId.value, nickname: 'null' ,isClicks: '0' },
					header: { 'content-type': 'application/json' },
					fail(err){ console.log('记录失败', err) }
				})
			})
		}
		
		if (videoAd) {
			videoAd.show().catch((res) => {
				videoAd.load().then(() => {	videoAd.show() })
			})
		}
	}
	
</script>

<style lang="scss">
	.ad-container {
		min-height: 130px;
		height: 130px;
		width: 100%;
		margin-bottom: 10px;
		position: relative;
	}
	
	.ad-side-container {
		position: absolute;
		top:300px;
		z-index:999;
		height:200px;
		width:50px;
		
		
		&.left { left:0px; }
		&.right { right:0px; }
	}
	
	.container {
		position: relative;
	}
	
	.ad-overlay {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: transparent; /* 透明背景 */
	}
</style>