shuquAi/pages/signin/signin.vue

<template>
	<view>
		<view class="bg">
			<view class="view_order tn-flex align-center justify-between">
				<view class="tn-flex">
					<view class="mytimes tn-flex tn-flex-direction-column">
						<view>{{appInfo.number_alias?appInfo.number_alias:'点数'}}</view>
						<view class="view_mytimes">{{ userData.coin ? userData.coin : 0 }}</view>
					</view>
					<view v-if="appInfo.time_member && appInfo.time_member == 1" style="margin-left: 60rpx;"
						class="mytimes tn-flex tn-flex-direction-column">
						<view>会员时长</view>
						<view class="view_mytimes">{{ userData.is_validity == 1 ? userData.countdown : 0 }}</view>
					</view>
				</view>
				<navigator :url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'" @click="getroute"
					class="shoppingmall">去充值</navigator>
			</view>
		</view>

		<view class="neck">每日{{appInfo.number_alias?appInfo.number_alias:'点数'}}领取</view>

		<view class="task-item flxe align-center justify-between">
			<view class="task-title">
				<view class="task-content">
					签到领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{ userData.sign_count_today ? userData.sign_count_today : 0 }}/1)
				</view>
				<view class="task-frequency">
					{{ plan.sign ? plan.sign : 0 }}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次
				</view>
			</view>
			<view v-if="userData.sign_count_today == 1" class="task-buttons">立即签到</view>
			<view v-else class="task-button" @click="memberaddCoin('sign')">立即签到</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="task-item flxe align-center justify-between">
			<view class="task-title">
				<view class="task-content">
					观看视频领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{ userData.video_count_today ? userData.video_count_today : 0 }}/{{ plan.video_limit ? plan.video_limit : 0 }})
				</view>
				<view class="task-frequency">
					{{ plan.video ? plan.video : 0 }}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次
				</view>
			</view>
			<view v-if="userData.video_count_today == plan.video_limit" class="task-buttons">立即观看</view>
			<view v-else class="task-button" @click="showInterstitialAd">立即观看</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="task-item flxe align-center justify-between">
			<view class="task-title">
				<view class="task-content">
					分享给好友领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{ userData.share_count_today ? userData.share_count_today : 0 }}/{{ plan.share_limit ? plan.share_limit : 0 }})
				</view>
				<view class="task-frequency">
					{{ plan.share ? plan.share : 0 }}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次
				</view>
			</view>
			<block>
				<view v-if="userData.share_count_today == plan.share_limit" class="task-buttons">立即分享</view>
				<view v-else class="task-button">立即分享</view>
			</block>
			<button v-if="userData.share_count_today < plan.share_limit" class="share-button"
				open-type="share"></button>
		</view>
		<!-- #endif -->

		<!-- <block v-if="$platform.get() === 'wxOfficialAccount'">
		<view class="task-item flxe align-center justify-between">
			<view class="task-title">
				<view class="task-content">
					分享给好友领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{ userData.share_count_today ? userData.share_count_today : 0 }}/{{ plan.share_limit ? plan.share_limit : 0 }})
				</view>
				<view class="task-frequency">{{ plan.share ? plan.share : 0 }}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次</view>
			</view>
			<block>
				<view  v-if="userData.share_count_today == plan.share_limit" class="task-buttons">立即分享</view>
				<view v-else @click="tabh5share" class="task-button">立即分享</view>
			</block>
		</view>
		</block> -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="wxad" v-if="appInfo.wxad_index && appInfo.wxad_index >= 1">
			<view style="width: 100%;">
				<wike-flow-main :flowtype="appInfo.wxad_index" :banner_id="appInfo.banner_id"
					:video_banner_id="appInfo.video_banner_id" :native_id="appInfo.native_id"></wike-flow-main>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<u-popup :show="h5share" mode="center" @close="offh5share">
			<view class="cu-dialog">
				<image class="guide-img" src="http://shopro.7wpp.com/imgs/modal/share_guide.png" mode=""></image>
			</view>
		</u-popup>
		<!-- #endif -->
		<view class="wike_ad"><wike-ad></wike-ad></view>
		<u-gap height="100" bgColor="#f2f2f2"></u-gap>
		<wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	// #ifdef H5
	// import wxsdk from "@/common/wechat/sdk";
	// #endif
	let rewardedVideoAd = null;
	let interstitialAd = null,
		sharetime,
		timer,
		time2;
	export default {
		data() {
			return {
				plan: {},
				h5share: false,
				showshare: false
			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'userData', 'isLogin'])
		},
		watch: {
			appInfo: function(e) {
				if (this.isLogin) {
					this.getUserData();
				}
			}
		},
		onReady() {
			let that = this;
			// #ifdef MP-WEIXIN
			clearTimeout(timer);
			// 在适合的场景显示插屏广告
			timer = setTimeout(function() {
				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd && that.appInfo.interstitial_status == 1) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: that.appInfo.interstitial_id
					});
					interstitialAd.onLoad(() => {});
					interstitialAd.onError(err => {});
					interstitialAd.onClose(() => {
						if (that.appInfo.interstitial_infinite_status == 1) {
							that.showInterstitial();
						}
					});
					interstitialAd.show().catch(err => {
						console.error(err);
					});
				}
			}, 4000);
			// #endif
		},
		onUnload() {
			clearInterval(time2);
		},
		onLoad() {
			console.log('123---111111111111111111111111111111111');
			// http("wechat.test", {

			// }).then(res => {

			// 	console.log('利用原请求封装轮播图返回值', res);
			// })

			this.getPlan();
			// #ifdef MP-WEIXIN
			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: this.appInfo.video_id
				});
				rewardedVideoAd.onLoad(() => {
					// console.log('onLoad event emit')
				});
				rewardedVideoAd.onError(err => {
					// console.log('onError event emit', err)
				});
				rewardedVideoAd.onClose(res => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						// uni.showToast({
						// 	title: '次数 +' + this.plan.video
						// })
						this.memberaddCoin('video');
					} else {
						// 播放中途退出，不下发游戏奖励
						uni.showToast({
							title: this.appInfo.number_alias ? '看完视频后才可获得' + this.appInfo
								.number_alias + '奖励' : '看完视频后才可获得点数奖励',
							icon: 'none'
						});
					}
				});
			}
			// #endif
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// console.log('s');
				this.memberaddCoin('share');
			}
			return {
				title: this.appInfo.site_name,
				imageUrl: this.appInfo.share_img_path
			};
		},

		methods: {
			...mapActions(['getUserData']),
			getPlan() {
				let that = this;
				this.$http('conf.getGroupConf', {
					group: 'system.plan'
				}).then(res => {
					if (res.code == 0) {
						this.plan = res.data;
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
					}
				});
			},
			tabh5share() {
				this.h5share = true
				sharetime = setTimeout(() => {
					this.showshare = true
					// console.log(this.showshare,1);
				}, 3000);
			},
			offh5share() {
				this.h5share = false
				// console.log(this.showshare,2);
				if (this.showshare) {
					this.memberaddCoin('share');
					this.showshare = false
				} else {
					clearTimeout(sharetime)
				}
			},
			showInterstitialAd() {
				// rewardedVideoAd.show();
				if (rewardedVideoAd && this.appInfo.video_status == 1) {
					uni.showToast({
						title: '广告拉取中',
						icon: 'loading'
					});
					rewardedVideoAd.show().catch(() => {
						// 失败重试
						rewardedVideoAd
							.load()
							.then(() => rewardedVideoAd.show())
							.catch(err => {
								// console.log('激励视频 广告显示失败')
								uni.showToast({
									title: '广告显示失败',
									icon: 'none'
								});
							});
					});
				} else {
					uni.showToast({
						title: '广告显示错误',
						icon: 'none'
					});
				}
			},
			getroute() {
				if (!this.isLogin) {
					uni.setStorageSync('route', '/pages/signin/signin');
				}
			},

			memberaddCoin(e) {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/signin/signin');
					return;
				}
				this.$http('member.addCoin', {
					type: e
				}).then(res => {
					if (res.code === 0) {
						if (e == 'video') {

							uni.showToast({
								title: (this.appInfo.number_alias ? this.appInfo.number_alias +
									' +' : '点数 +') + this.plan.video
							})
						}
						if (e == 'sign') {

							uni.showToast({
								title: (this.appInfo.number_alias ? this.appInfo.number_alias +
									' +' : '点数 +') + this.plan.sign
							})
						}
						if (e == 'share') {
							setTimeout(() => {
								uni.showToast({
									title: (this.appInfo.number_alias ? this.appInfo
											.number_alias + ' +' : '点数 +') + this.plan
										.share
								})
							}, 1000)
						}
						this.getUserData();
					}
				});
			},
			showInterstitial() {
				time2 = setInterval(
					function() {
						interstitialAd.show().catch(err => {
							console.error(err);
						});
					},
					this.appInfo.gap ? this.appInfo.gap * 1000 : 12000
				);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	view {
		box-sizing: border-box;
	}

	.bg {
		width: 100%;
		height: 200rpx;
		background: #26b3a0;
		// border-radius: 0 0 38rpx 38rpx;
	}

	.view_order {
		position: relative;
		top: 90rpx;
		padding: 30rpx;
		margin: 0 30rpx;
		// width: 100%;
		background: #fff;
		height: 200rpx;
		border-radius: 20rpx;

		.mytimes {
			color: #9e9e9e;
			font-size: 32rpx;

			.view_mytimes {
				color: #ffc107;
				font-size: 55rpx;
				font-weight: bold;
				// margin-top: 10rpx;
			}
		}

		.shoppingmall {
			background: #ffc107;
			color: #fff;
			border-radius: 50rpx;
			padding: 8rpx 28rpx;
		}
	}

	.neck {
		// margin: 30rpx;
		margin-left: 42rpx;
		font-size: 38rpx;
		font-weight: bold;
		margin-top: 150rpx;
	}

	.task-item {
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;

		// background-color: #F5FFFD;
		// box-shadow: 0px 0px 10px 5px #fff;
		.task-content {
			font-size: 16px;
			// font-weight: bold;
			margin-bottom: 12rpx;
		}

		.task-frequency {
			color: #f9ae3d;
		}

		.task-button {
			background: #26b3a0;
			color: #fff;
			padding: 12rpx 22rpx;
			font-size: 25rpx;
			border-radius: 30rpx;
		}

		.task-buttons {
			background: #9e9e9e;
			color: #fff;
			padding: 12rpx 22rpx;
			font-size: 25rpx;
			border-radius: 30rpx;
		}
	}

	.share-button {
		position: absolute;
		width: 70px;
		height: 28px;
		border-radius: 30rpx;
		right: 60rpx;
		opacity: 0;
	}

	.wike_ad {
		margin: 0 30rpx;
	}

	.wxad {
		border-radius: 20rpx;
		overflow: hidden;
		margin: 30rpx;
	}

	.cu-dialog {
		position: fixed;

		top: 60rpx;
		left: 100rpx;
		// background: #000000;
	}

	.guide-img {
		width: 580rpx;
		height: 430rpx;
	}
</style>