hwnc/components/admyself/admyself.vue

<template>
	<view v-if="opshow2">
		<!-- #ifdef MP-WEIXIN -->
		<view class="content" v-if="aitem.atype=='banner'">
			<ad :unit-id="aitem.adpid"></ad>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="content" v-if="opshow2&&aitem&&aitem.atype=='banner'">
			<ad :adpid="aitem.adpids"></ad>
		</view>
		<view class="content" v-if="opshow2&&aitem&&aitem.atype=='mvideo'">
			<ad-rewarded-video :adpid="aitem.adpids" :loadnext="true" v-slot:default="{loading, error}" @load="onadload"
				@close="onadclose" @error="onaderror">
			</ad-rewarded-video>
		</view>
		<view class="content" v-else-if="opshow2&&aitem&&aitem.atype=='pscreen'">
			<ad-interstitial :adpid="aitem.adpids" :loadnext="true" v-slot:default="{loading, error}" @load="onadload"
				@close="onadclose" @error="onaderror">
			</ad-interstitial>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		name: "admyself",
		props: ['opshow'],
		data() {
			return {
				opshow2: true,
				aitem: {
					atype: 0,
					adpid: '',
					adpids: []
				},
				advlist: []
			};
		},
		created() {
			let that = this;
			// #ifdef MP-WEIXIN
			if (that.$config) {
				let ntime = Math.round(new Date() / 1000);
				// console.log('admyself-广告配置获取成功', that.$config.advlist)
				that.advlist = that.$config.advlist;
				let path = '';
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
				let page = pages[pages.length - 1];
				let adtype = page.route; // 当前的页面路由（小程序可以，H5也可以）
				console.log(path)
				if (that.advlist) {
					let item = that.advlist[adtype]
					if (item) {
						that.aitem = item
					}
				}
				// console.log('admyself-advlist', that.advlist)
				// console.log('admyself-adtype', adtype)
				// console.log('admyself-aitem', JSON.stringify(that.aitem))
				if (that.aitem) {
					if (that.aitem.atype == 'mvideo') {
						if (ntime - that.$adtime.mvideo_time > 15) {
							that.opshow2 = false;
							that.$adtime.mvideo_time = ntime;
							let videoAd = null;
							// 在页面onLoad回调事件中创建激励视频广告实例
							if (wx.createRewardedVideoAd) {
								videoAd = wx.createRewardedVideoAd({
									adUnitId: that.aitem.adpid
								})
								videoAd.onLoad(() => {})
								videoAd.onError((err) => {})
								videoAd.onClose((res) => {})
							}
							setTimeout(function() {
								// 用户触发广告后，显示激励视频广告
								if (videoAd) {
									console.log('激励视频 展示开始')
									videoAd.show().catch(() => {
										// 失败重试
										videoAd.load()
											.then(() => videoAd.show())
											.catch(err => {
												console.log('激励视频 广告显示失败')
											})
									})
								}
							}, 1000)
						} else {
							console.log('激励视频 广告显示失败-' + (ntime - that.$adtime.mvideo_time))
						}
					} else if (that.aitem.atype == 'pscreen') {
						if (ntime - that.$adtime.pscreen_time > 15) {
							that.opshow2 = false;
							that.$adtime.pscreen_time = ntime;
							// 在页面中定义插屏广告
							let interstitialAd = null
							// 在页面onLoad回调事件中创建插屏广告实例
							if (wx.createInterstitialAd) {
								interstitialAd = wx.createInterstitialAd({
									adUnitId: that.aitem.adpid
								})
								interstitialAd.onLoad(() => {})
								interstitialAd.onError((err) => {})
								interstitialAd.onClose(() => {})
							}
							setTimeout(function() {
								// 在适合的场景显示插屏广告
								if (interstitialAd) {
									// console.log('插屏广告 展示开始')
									interstitialAd.show().catch((err) => {
										console.error(err)
									})
								}
							}, 1000)

						} else {
							// console.log('插屏广告 广告显示失败-' + (ntime - that.$adtime.pscreen_time))
						}
					} else if (that.aitem.atype == 'banner') {
						if (ntime - that.$adtime.banner_time > 15) {
							// console.log('banner 展示开始' + that.aitem.adpid)
							that.opshow2 = true;
							that.$adtime.banner_time = ntime;
						} else {
							// console.log('banner广告 广告显示失败-' + (ntime - that.$adtime.banner_time))
						}
					}
				}
			} else {
				console.log('admyself', '广告配置获取失败')
			}
			// #endif
		},
		methods: {
			onadload(e) {
				// console.log('广告数据加载成功');
				if (this.opshow) {
					e.show();
				}
			},
			onadclose(e) {
				if (this.aitem.atype == 'mvideo') {
					//激励视频
					const detail = e.detail
					// 用户点击了【关闭广告】按钮
					if (detail && detail.isEnded) {
						// 正常播放结束
						console.log("onadclose " + detail.isEnded);
					} else {
						// 播放中途退出
						console.log("onadclose " + detail.isEnded);
					}
				} else if (this.aitem.atype == 'mvideo') {
					//插屏广告
					console.log("onadclose", e);
				}
			},
			onaderror(e) {
				// 广告加载失败
				console.log("onaderror: ", e.detail);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 25rpx;
	}
</style>