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

<template>
	<view>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="bg">
			<image src="/static/icon/ad/bg.png" mode="widthFix"></image>
		</view>
		<view class="contents">
			<image class="contents-text" src="/static/icon/ad/wcrw.png" mode="widthFix"></image>
			<view class="daynum">
				<image class="contents-bg" src="/static/icon/ad/cjcs.png" mode="aspectFill"></image>
				<view style="flex: 1;"></view>
				<text class="daynumtitle">今日奖励</text>
				<text class="daydraw">抽奖次数1次</text>
				<text class="todraw todraw1" v-if="taskStatus1" @click="toChoujiang">去抽奖</text>
				<text class="todraw" v-else>去抽奖</text>
			</view>
			<view class="daytask">
				<view class="daytask-title">今日任务</view>
				<view class="daytask-line">
					<image src="/static/icon/ad/ad-video.png" mode="widthFix"></image>
					<view class="line-title">
						<view class="title1">观看视频任务</view>
						<view class="title2">已观看{{ taskObj.watchCount }}/{{ taskObj.total }}</view>
					</view>
					<view style="flex: 1;"></view>
					<!-- v-if="taskStatus == false"  -->
					<ad-rewarded-video ref="adRewardedVideo" :adpid="adpid" :preload="false"
						v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror"
						:url-callback="callbackData">
						<!-- <view v-if="error">{{error}}</view> -->
						<!-- <u-button type="primary" style="width:100px;" size="mini"  :disabled="loading" :loading="loading">去完成</u-button> -->
						<!-- <button :disabled="loading" :loading="loading" class="video-button">去完成</button> -->
					</ad-rewarded-video>
					<button v-if="taskStatus == false" :disabled="isLoading" :loading="isLoading" class="video-button"
						@click="showAd">去完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"


	export default {
		data() {
			return {
				adpid: '1372912966',
				appid: '',
				activityId: '1824703218157920256',
				taskObj: {},
				progress: 0,
				callbackData: {
					userId: "",
					extra: ''
				},
				error: "",
				taskStatus: false,
				taskStatus1: false,
				isLoading: false,
				adId: '',
			}
		},
		computed: {
			...mapState(['userInfo', 'userCheckInfo']),
		},
		async onLoad() {
			// this.refreshData();
			// this.callbackData.userId = this.userInfo.sysUser.id
		},
		onShow() {
			this.refreshData();
			this.callbackData.userId = this.userInfo.sysUser.id
		},
		onReady() {
			// this.isLoading = true;
			// this.$refs.adRewardedVideo.load();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			onadload(e) {
				// this.isLoading = false;
				console.log(e, 'onadload')
			},
			// 去看广告
			async showAd() {
				if (this.isLoading) {
					return
				}
				// 获取广告id /callback/advertisingLog
				let res = await this.$http.post('https://marketing.baoxianzhanggui.com/api/callback/advertisingLog', {
					// let res = await this.$http.post('/callback/advertisingLog', {
					userId: this.userInfo.sysUser.id
				})
				console.log(res)
				if (res.code == 200) {
					this.adId = res.data
					this.isLoading = true
					// this.callbackData.extra = "{id: " + res.data + "}"
					this.callbackData.extra = this.adId
					this.$refs.adRewardedVideo.show();
				}

			},
			async onadclose(e) {
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				let that = this
				if (detail && detail.isEnded) {
					//重新拉取数据
					let times = 0
					this.timer = setInterval(async () => {
						times++
						let res = await that.$http.get(
							'https://marketing.baoxianzhanggui.com/api/callback/verifyWatch', {
								id: that.adId
							})
						if (times >= 30 || res.data) {
							clearInterval(that.timer)
							that.refreshData()
							that.isLoading = false
							times = 0
						}
					}, 1000)
					// setTimeout(this.refreshData(), 3000);
				} else {
					// 播放中途退出
					console.log("onadclose " + detail.isEnded);
				}
			},
			// 广告加载失败
			onaderror(e) {
				uni.showToast({
					icon: 'none',
					title: e.detail.errMsg
				})
				this.isLoading = false;
				console.log("onaderror: ", e.detail);
			},
			// 刷新数据
			refreshData() {
				console.log(this.userInfo)
				this.$http.post('https://marketing.baoxianzhanggui.com/api/advertising/getUserWatchCount', {
					// this.$http.post('/advertising/getUserWatchCount', {
					userId: this.userInfo.sysUser.id
				}).then(res => {
					console.log(res)
					this.taskObj = res.data;
					this.progress = this.taskObj.watchCount / this.taskObj.total * 100
					this.taskStatus = res.data.total <= res.data.watchCount
					if (this.taskObj.drawCount > 0) {
						this.taskStatus1 = true
					}
				})
			},
			getErrorInfo() {
				console.log(this.error)
			},
			toChoujiang() {
				console.log('抽奖')
				plus.share.getServices(res => {
					let sweixin = null;
					sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						// 分享跳转到微信小程序
						sweixin.launchMiniProgram({
							id: "gh_71ff3b2409d8", //微信小程序原生id
							path: "pages/index/bigWheel/bigWheel?userId=" + this.userInfo.sysUser.id +
								"&activityId=" + this.activityId, //    打开小程序的页面路径，不传默认跳转首页
							type: 0 //     微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						})
					} else {
						uni.showToast({
							title: '请安装微信',
							icon: 'none'
						})
					}
				}, err => {
					console.log("分享失败"); // 获取分享服务列表失败
				});
				uni.navigateToMiniProgram({
					appId: 'wx4014825e79c10552',
					path: 'pages/index/index?userId=' + this.userInfo.sysUser.id,
					extraData: {},
					success(res) {
						// 打开成功
						console.log(res)
					},
					error(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #ffe9c6;
		padding: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.page {
		// background-color: #fff;
		margin: 30rpx;
	}

	// .video-button {
	// 	border: 1rpx solid var(--primary);
	// 	font-size: 30rpx;
	// 	line-height: 40rpx;
	// 	padding: 10rpx 14rpx;
	// 	color: var(--primary)
	// }

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
	}

	.contents {
		position: relative;
		box-sizing: border-box;

		.contents-text {
			width: 394rpx;
			position: absolute;
			top: 60rpx;
			left: 20rpx;
		}

		.daynum {
			position: relative;
			height: 808rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: end;

			text {
				position: relative;
			}

			.contents-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 808rpx;
			}

			.daynumtitle {
				margin-bottom: 28rpx;
				font-size: 32rpx;
				color: #333;
			}

			.daydraw {
				width: 398rpx;
				height: 74rpx;
				background: linear-gradient(266deg, rgba(255, 255, 255, 0) 0%, rgba(255, 94, 39, 0.1) 100%);
				border-radius: 38rpx;
				border: 1rpx solid #FFC5B0;
				margin-bottom: 150rpx;
				text-align: center;
				line-height: 70rpx;
				color: #8F3A21;
				font-weight: 800;
			}

			.todraw {
				width: 334rpx;
				height: 72rpx;
				background: #CCCCCC;
				border-radius: 38rpx;
				border: 5rpx solid #EFEFEF;
				text-align: center;
				line-height: 64rpx;
				color: #FFF;
				font-size: 36rpx;
				margin-bottom: 54rpx;
			}

			.todraw1 {
				background: linear-gradient(180deg, #fffbf4 0%, #ffe1a1 100%);
				color: #8F3A21;
				border: 5rpx solid #ffe8ad;
			}
		}

		.daytask {
			padding: 30rpx;
			background: #FFF;
			margin-top: 40rpx;
			border-radius: 22rpx;

			.daytask-title {
				font-size: 32rpx;
				color: 333;
				margin-bottom: 20rpx;
			}

			.daytask-line {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.line-title {
					margin-left: 30rpx;

					.title1 {
						color: #333;
						font-size: 28rpx;
					}

					.title2 {
						color: #969696;
						font-size: 24rpx;
					}
				}

				.video-button {
					background: linear-gradient(359deg, #FF4A13 0%, #FF8851 100%), #D8D8D8;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFF;
					font-size: 26rpx;
					border-radius: 30rpx;
					padding: 0 30rpx;
				}
			}

			image {
				width: 48rpx;
			}
		}
	}
</style>