fanyunAi/pages/signin/signin.vue

<template>
	<view>

		<!-- <view style="color: #fff;z-index: 99999999;position: relative;">
			<tn-nav-bar :bottomShadow="false" backgroundColor="#207CF7">数智员工</tn-nav-bar>
			<view :style="{height: tobheight+'px'}"></view>
		</view> -->
		<view class="topbg u-flex align-center justify-center">
			<view v-if="appInfo.time_member && appInfo.time_member == 1" class="u-flex package">会员套餐：<view>
					{{ userData.is_validity == 1 ? (userData.vip_time == 9999?'永久':userData.countdown): 0 }}
				</view>天
			</view>
			<view class="u-flex drop">{{appInfo.number_alias?appInfo.number_alias:'点数'}}：<view>
					{{ userData.coin ? userData.coin : 0 }}
				</view>(vip内限量次数大于0不消耗)</view>
		</view>
		<view class="topbg1"></view>
		<view class="daily_view" style="margin: -38px 15px 15px;">
			<view class="daily_neck">每日{{appInfo.number_alias?appInfo.number_alias:'点数'}}领取</view>
			<view v-if="plan.sign>0" class="task-item flxe align-center justify-between"
				style="padding: 30rpx 0 0;margin: 0;">
				<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 v-if="plan.video>0" class="task-item flxe align-center justify-between"
				style="padding: 30rpx 0 0;margin: 0;">
				<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 v-if="plan.share>0" class="task-item flxe align-center justify-between"
				style="padding: 30rpx 0 0 0;margin: 0;">
				<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 -->
		</view>
		<view v-if="list.length>0" class="daily_view">
			<view class="daily_neck">购买{{appInfo.number_alias?appInfo.number_alias:'点数'}}</view>
			<view class="number">
				<view class="list">
					<view :class="num == index ? 'item real' : 'item'" v-for="(item, index) in list" :key="index"
						@click="num = index">
						<view class="card">
							<view class="top">
								<text>{{ item.coin }}</text>
								<image src="/static/images/buy.png"></image>
							</view>
							<text class="money">{{ item.price }}元</text>
						</view>
						<view v-if="item.is_preferential === 1" class="recommend">
							<text>限时特价</text>
						</view>
					</view>
				</view>
				<view @click="buy" class="sure">
					<text>立即充值</text>
				</view>

				<view @click="buyMember" class="sure1">
					<text class="buyTxt">购买会员套餐</text>
				</view>
			</view>
		</view>

		<!-- #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-tabbar2 :currTabIndex='3' v-if="appInfo.page_template == 3" :is_aipainting="appInfo.is_aipainting"
			:onTabbar="true" :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar2>
		<wike-tabbar :currTabIndex='3' v-else :onTabbar="true" :is_aipainting="appInfo.is_aipainting"
			:isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar> -->
		<wike-modal-qrcode :qrcode="gzhqrcode" :showconcern="showconcern"
			@concernclose="concernclose"></wike-modal-qrcode>

		<u-modal @cancel="handleCancel" @confirm="handleConfirm" cancelText='退出登录' showCancelButton :show="showFixInfo"
			confirmColor="#26b3a0" confirmText="完善信息" title="请完善个人手机号信息后使用本应用"
			content='您已充值,但未绑定手机号,请完善信息以方便为您提供进一步的服务'></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import ShoproPay from '@/common/pay';
	// #ifdef H5
	// import wxsdk from "@/common/wechat/sdk";
	// #endif
	let rewardedVideoAd = null;
	let interstitialAd = null,
		sharetime,
		timer,
		time2;
	export default {
		data() {
			return {
				tobheight: 45,
				plan: {},
				h5share: false,
				showshare: false,
				showconcern: false,
				gzhqrcode: '',
				show_ios_pay: false,
				device: this.$platform.device(),
				num: 0,
				list: [

				],
				showFixInfo: false,
			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'userData', 'isLogin'])
		},

		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 && that.appInfo
							.interstitial_infinite_status == 1) {
							that.showInterstitial();
						} else {
							interstitialAd.show().catch(err => {
								console.error(err);
							});
						}
					});
					interstitialAd.show().catch(err => {
						console.error(err);
					});
				}
			}, 4000);
			// #endif
		},
		onUnload() {
			clearInterval(time2);
		},
		onLoad() {
			this.getPlan();
			// #ifdef MP-WEIXIN
			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: this.appInfo.video_id
				});
				rewardedVideoAd.onLoad(() => {});
				rewardedVideoAd.onError(err => {});
				rewardedVideoAd.onClose(res => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						this.memberaddCoin('video');
					} else {
						// 播放中途退出，不下发游戏奖励
						uni.showToast({
							title: this.appInfo.number_alias ? '看完视频后才可获得' + this.appInfo.number_alias +
								'奖励' : '看完视频后才可获得点数奖励',
							icon: 'none'
						});
					}
				});
			}
			// #endif
		},
		onShow() {
			this.$http('user.info').then(res => {
				if (res.code == 0) {
					console.log('用户是否是首次支付成功，但未填写手机号', res.data.is_new);
					this.showFixInfo = res.data.is_new;
					// this.showFixInfo = true;
				}
			})

			this.systemwechat()
			this.getUserData();
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				this.memberaddCoin('share');
			}
			return {
				title: this.appInfo.site_name,
				imageUrl: this.appInfo.share_img_path
			};
		},

		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'logout']),
			handleCancel() {
				this.showFixInfo = false
				this.logout()
				// uni.clearStorage()

				uni.reLaunch({
					url: '/pages/user/signin'
				})
			},
			handleConfirm() {
				uni.navigateTo({
					url: '/pages/user/userinfo?isNewUser=true'
				})
			},



			buyMember() {
				uni.navigateTo({
					url: '/pages/user/member/member?id=2'
				})
			},

			getPlan() {
				let that = this;
				this.$http('conf.getGroupConf', {
					group: 'system.plan'
				}).then(res => {
					if (res.code == 0) {
						this.plan = res.data;
						this.memberlist()
						if (res.data.is_ios_pay == 1 && that.checkTimeLimit()) {
							// ios可以付钱
							that.show_ios_pay = true
						}
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
					}
				});
			},
			buy() {
				let that = this;
				if (!that.isLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/signin/signin');
					return;
				}
				that.$http('order.create', {
					pay_type: 'wechat',
					link_id: that.list[that.num].id
				}).then(res => {
					if (res.code === 0) {
						if (that.userInfo.openid_miniapp || that.userInfo.openid_wechat) {
							let pay = new ShoproPay('wechat', res.data, 2);
							console.log('发起微信支付的参数：', res.data);
						} else {
							// console.log(res.data);
							that.paytest(res.data.order_number, res.data.id)
						}

					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			paytest(e, id) {
				uni.showLoading({
					title: '支付跳转中...'
				})
				let uniacid = uni.getStorageSync("uniacid") || "";
				this.$http('pay.hupijiaopay', {
					order_number: e,
					is_commission: 0,
					return_url: window.location.href.split('/h5')[0] +
						'/h5/pages/user/public/paymentdetail?uniacid=' + uniacid + '&orderType=2&orderId=' + id,
					callback_url: window.location.href,
				}).then(res => {
					// console.log(res);
					if (res.code === 0) {
						// console.log(res.data);

						window.location.href = res.data.url
						// uni.navigateTo({
						// 	url:'pages/user/public/webview?url='+res.data.url
						// })

					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			memberlist() {
				// console.log(i);
				var that = this;
				this.$http('member.list').then(res => {
					if (res.code == 0) {
						// #ifdef MP-WEIXIN
						if (this.device != 'ios') {
							this.list = res.data
						} else if (this.device == 'ios' && this.show_ios_pay) {
							this.list = res.data
						} else {
							this.list = []
						}
						// #endif
						// #ifdef H5
						this.list = res.data
						// #endif
					}
				});
			},
			checkTimeLimit() {
				if (this.plan.open_period == 1) {
					return true;
				} else {
					if (this.time_range('8:00', '20:00')) {
						return false;
					} else {
						return true;
					}
				}
			},
			systemwechat() {
				this.$http('conf.getGroupConf', {
					group: 'system.wechat'
				}).then(res => {
					if (res.code == 0) {
						this.gzhqrcode = res.data.qrcode_path
						const focuson = uni.getStorageSync('focuson');
						// console.log(focuson);
						if (!focuson) {
							if (this.gzhqrcode) {
								if (this.isLogin && this.appInfo.is_show_logged_qrcode == 1) {
									this.showconcern = true
								}
							}
						}
					}
				})
			},
			concernclose() {
				this.showconcern = false
			},
			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 => {
								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" scoped>
	@import './signin.scss';
</style>