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

<template>
	<view>
		<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="widthFix"></image>
				<view style="flex: 1;"></view>
				<text class="daynumtitle">今日奖励</text>
				<text class="daydraw">抽奖次数1次</text>
				<text class="todraw todraw1" v-if="taskStatus" @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>
					<ad-rewarded-video v-if="taskStatus == false" :adpid="adpid" :loadnext="true"
						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>
				</view>
			</view>
		</view>
		<!-- <view
			style="height:200px;background: #14a1ff;padding:10px;border-radius: 5px;display: flex;    flex-direction: column;box-shadow: rgb(204, 204, 204) 0 0 7px 5px;">
			<view style="color:#fff;font-size:14px;flex:2;">今日奖励</view>
			<view style="color:#fff;flex:2;text-align: center;font-size: 20px;">抽奖次数1次</view>
			<view style="flex:1;">
				<view style="display: flex;justify-content: normal; justify-content: space-around;color:#fff;">
					<block v-if="taskStatus == false">
						<view>今日任务次数:{{taskObj.total}}</view>
						<view>当前已完成任务次数:{{taskObj.watchCount}}</view>
					</block>
					<block v-if="taskStatus">
						<u-button style="width:200px;" @click="toChoujiang">跳转抽奖</u-button>
					</block>
				</view>
				<u-line-progress active-color="#2979ff" :percent="progress"></u-line-progress>
			</view>
		</view>
		<view>
			<view style="font-size:20px;padding-top:20px;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex; align-items: center;">
						<u-image style="width:25px;" src="@/static/icon/ad.png" mode="widthFix"></u-image>
						<view style="margin-left:5px;">视频广告</view>
					</view>

					<view v-if="taskStatus">
						<u-button type="default">已完成</u-button>
					</view>
				</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
			}
		},
		computed: {
			...mapState(['userInfo', 'userCheckInfo']),
		},
		async onLoad() {
			this.refreshData();
			this.callbackData.userId = this.userInfo.sysUser.id
		},
		onShow() {

		},
		methods: {
			onadload(e) {},
			onCreateAd() {

			},
			onadclose(e) {
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				if (detail && detail.isEnded) {
					//重新拉取数据
					setTimeout(this.refreshData(), 3000);
				} else {
					// 播放中途退出
					console.log("onadclose " + detail.isEnded);
				}
			},
			onaderror(e) {

				// 广告加载失败
				//  this.$refs.uToast.show({
				// 	title: '广告加载失败',
				// 	type: 'default',
				// })
				uni.showToast({
					icon: 'none',
					title: e.detail.errMsg
				})

				console.log("onaderror: ", e.detail);
			},
			refreshData() {
				console.log(this.userInfo)
				this.$http.post('https://marketing.baoxianzhanggui.com/api/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
				})
			},
			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: 2 //     微信小程序版本类型，可取值： 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;
	}
</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: 750rpx;
	}

	.contents {
		position: relative;
		padding: 30rpx;
		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%;
			}

			.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>