qc-signIn-yanguang/pages/index/index.vue

<template>
	<!-- 阳光签到书城 -->
	<view class="sign" >
		<image src="../../static/sign_back.png" class="back" mode="widthFix"></image>
		
		<view class="signCenter">
			<!-- 个人信息模块 -->
			<view class="signTop">
				<view class="left">
					<view class="avatarView">
						<!-- <open-data type="userAvatarUrl" class="avatar"></open-data> -->
						<image src="../../static/avatar.png" mode="widthFix"></image>
					</view>
					<view class="userInfo">
						<view class="account">{{signData.mpName || '超多书币享不停'}}</view>
						<view class="ID" v-if="mpData.mpAppId">
							<text>书币：{{balanceCount}}</text>
							<navigator :url="`../extractBookCurr/extractBookCurr?mpAppId=${mpData.mpAppId}&mpOpenId=${mpData.mpOpenId}`" class="extract" hover-class="none">提取</navigator>
						</view>
						<view class="ID" v-else>ID:{{signData.userId || 564564}}</view>
					</view>
				</view>
				<navigator v-if="mpAppIdShow" :url="'../checkInRecord/checkInRecord?openId=' + openId + '&mpAppId=' + mpData.mpAppId + '&mpOpenId=' + mpData.mpOpenId" class="right">
					<image src="../../static/signRecord.png" mode="widthFix"></image>
					<text>签到记录</text>
				</navigator>
			</view>
			
			<view class="signBottom">
				<!-- 滚动通知 -->
				<view class="notice">
					<image src="../../static/horn.png" class="horn" mode="widthFix"></image>
					<view class="txts">
						<u-notice-bar mode="vertical" :volume-icon="false" color="#FFFFFF" type="none" :list="list"></u-notice-bar>
					</view>
				</view>
				
				<!-- 签到展示模块 -->
				<view class="exhibitionContent" v-if="signData.signInDayVoList.length > 0">
					<view class="ts">已连续签到{{signData.sustainDayCount}}天，有{{signData.canSupplement}}次补签机会</view>
					<view class="signinExhibition">
						<view v-for="(item, index) in signData.signInDayVoList" :key="index" :class="item.signIn ? 'select' : item.canSupplement ? 'repairSign' : ''">
							<template v-if="index < 6">
								<view class="repair" v-if="item.canSupplement">看视频补签</view>
								<text class="day">{{item.dayDescribe}}</text>
								<image src="../../static/goldSelect.png" class="goldCoins" style="width: 68rpx;" mode="heightFix" v-if="item.signIn"></image>
								<image src="../../static/clickVideo.png" class="goldCoins" mode="heightFix" style="position: relative; z-index: 101;" @click="signatureHandle(2, item)" v-else-if="item.canSupplement"></image>
								<image src="../../static/gold.png" class="goldCoins" style="width: 68rpx;" mode="heightFix" v-else></image>
								<text class="reward">{{item.bookCoin}}书币</text>
								<image src="../../static/signSub.png" class="signSub" mode="widthFix" v-if="item.signIn"></image>
							</template>
							<template v-else>
								<view class="left">
									<text class="day">{{item.dayDescribe}}</text>
									<text class="reward">{{item.bookCoin}}书币</text>
								</view>
								<view class="right">
									<image src="../../static/giftBag.png" mode="heightFix" v-if="!item.signIn"></image>
									<image src="../../static/giftBagSelect.png" mode="heightFix" v-else></image>
								</view>
								<image src="../../static/signSub.png" class="signSub" mode="widthFix" v-if="item.signIn"></image>
							</template>
						</view>
					</view>
					<template v-if="!mpAppIdShow">
						<view class="gignBt" @click="tsAccount" v-if="isSignIn" :animation="btAnimationData">签到领书币</view>
						<view class="already" v-else>今日已签</view>
					</template>
					<template v-else>
						<!-- <navigator url="../officialAccount/officialAccount" class="gignBt" v-if="!signData.mpName" :animation="btAnimationData">签到领书币</navigator> -->
						<view class="gignBt" @click="tsAccount" v-if="!signData.mpName" :animation="btAnimationData">签到领书币</view>
						<view class="gignBt" @click="signIn" v-else-if="!isSignIn" :animation="btAnimationData">签到领书币</view>
						<!-- <view class="already" v-else>今日已签</view> -->
						<view class="gignBt" v-else @click="moreGold" :animation="btAnimationData">去抽奖获更多奖励</view>
					</template>
					
				</view>
				
				
				<!-- 签到提醒模块 -->
				<view class="signRemind">
					<text>签到提醒</text>
					<view class="remindSwitch">
						<view :class="signRemind ? 'open' : 'close'" @click="signRemindHandle(true)">
							<view class="select"></view>
							<text>开启</text>
						</view>
						<view :class="!signRemind ? 'open' : 'close'" @click="signRemindHandle(false)">
							<view class="select"></view>
							<text>关闭</text>
						</view>
					</view>
				</view>
				
				<ad-view :unitId="adConfig.bannerAd" adIntervals="200" v-if="adConfig.bannerAd"></ad-view>
				<!-- 活动规则模块 -->
				<view class="activityRules">
					<view class="top" @click="activityRulesHandle">
						<text>活动规则</text>
						<image :src="!activityRules ? '../../static/unfold.png' : '../../static/retract.png'" mode="widthFix"></image>
					</view>
					<view class="bottom" v-if="activityRules">
						<view>
							1.用户进入小程序后，点击签到按钮即可完成一次签到。
						</view>
						<view>
							2.签到获得的书币奖励，在提取之日即时生效。连续签到所得书币奖励在周期内稍有变化，非均等分布。连续7日完成签到的用户在第7日可获得更多的奖励。
						</view>
						<view>
							3.用户每个周期(7天)，至多拥有2次补签机会（连续签到2天拥有1次补签机会，一天内只允许补签一次空缺天数），可通过观看小视频获得，连续未签到2天，签到重新开始。
						</view>
						<view>
							4.连续签到：自首日完成签到开始累计，连续7天签到为一个周期。签到中断，则重新开始计算。
						</view>
						<view>
							5.每日同一注册用户仅可参与一次。
						</view>
						<view>
							6.本活动解释权由开发者所有，有任何疑问请联系公众号内客服。
						</view>
					</view>
				</view>
				
			</view>
			
			<!-- 金币飞行组 -->
			<view class="fragmentGold" :animation="animationDatas[index]" v-for="(item, index) in goldData" :key="index" :style="{top: item.top, left: item.left}">
				<image src="../../static/gold.png" mode="widthFix"></image>
			</view>
			
			<!-- 去抽奖路口 -->
			<view class="qLuckDraw" @click="moreGold" v-if="mpAppIdShow">
				<image src="../../static/1234.gif" mode="widthFix"></image>
			</view>
		</view>
		
		<!--  -->
		<view class="popup" v-if="popupShow">
			<view class="popupContent">
				<view class="content">
					<image src="../../static/popupBack.png"></image>
					<view class="textCon">
						<text class="ts">签到成功!</text> </br>
						<text class="reward">恭喜您获得{{signInDay.bookCoin}}书币</text> </br>
						<image src="../../static/doubleBt.png" class="doubleBt" mode="widthFix" :style="{transform: `scale(${scale})`}" @click="lookVideo"></image> </br>
						<view :class="['bt', { btTrue: status }]" @click="signInHandle(false)">不了，单倍领取</view>
					</view>
				</view>view
				<image src="../../static/close.png" class="close" mode="widthFix" @click="closeHandle"></image>
			</view>
		</view>
	
		<!-- 弹窗提示 -->
		<view class="receiveTs" :animation="animationDataTs">
			{{tsTitle}}
		</view>
		
		<!-- 格子广告 -->
		<!-- <view class="singleLattice">
			<ad-custom-view :unit-id="adConfig.singleLatticeAd" adIntervals="200"></ad-custom-view>
		</view> -->
	</view>
	
</template>

<script>
	let timer = null, btTimer = null, adTimer = null, powerOnTimer = null
	import { config, getHome, getOpenId, signInAjax, getTemplateIDs, setMessage, switchUpdate, getBalance, getState } from '@/api/api.js'
	import { bannerAd, urgeVideoAd, insertScreenAd, singleLatticeAd } from '@/utils/ad_config.js'
	import adView from '@/components/ad-view/ad-view.vue'
	import adCustomView from '@/components/ad-custom-view/ad-custom-view.vue'
	export default {
		components: {
			adView,
			adCustomView
		},
		data() {
			return {
				adConfig: {
					bannerAd,
					singleLatticeAd
				},
				list: [
					'恭喜用户 “0016” 成功提现 200书币',
					'恭喜用户 “1037” 成功提现 10书币',
					'恭喜用户 “9128” 成功提现 20书币',
					'恭喜用户 “1873” 成功提现 140书币',
					'恭喜用户 “9834” 成功提现 200书币',
					'恭喜用户 “5623” 成功提现 10书币',
					'恭喜用户 “0934” 成功提现 20书币',
					'恭喜用户 “7843” 成功提现 60书币',
					'恭喜用户 “1344” 成功提现 20书币',
					'恭喜用户 “5464” 成功提现 140书币',
					'恭喜用户 “0823” 成功提现 200书币',
					'恭喜用户 “8910” 成功提现 10书币',
					'恭喜用户 “0714” 成功提现 20书币',
				],
				signRemind: false,  // 是否开启签到提醒
				activityRules: false, // 是否展开活动规则
				popupShow: false, // 弹窗控制
				signData: {
					sustainDayCount: 0,
					canSupplement: 0,
					userId: null,
					mpName: null,
					signInDayVoList: [
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第一天',
							bookCoin: 10,
							isSignIn: true
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第二天',
							bookCoin: 20,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第三天',
							bookCoin: 30,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第四天',
							bookCoin: 40,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第五天',
							bookCoin: 50,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第六天',
							bookCoin: 60,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第七天',
							bookCoin: 70,
							isSignIn: false
						},
					]
				}, // 签到相关信息
				openId: '',
				mpData: {}, // 公众号相关
				isSignIn: true,  // 是否已经签到
				userId: undefined, // 用户ID
				signIdTemID: [],   // 签到提醒模板ID
				isMainSwitch: true,  // 是否关闭了通知按钮
				isAlwaysCancel: false,  // 是否点击了总是允许取消
				signInDay: {}, // 今天签到信息
				scale: 1,
				btAnimation: null, // 按钮呼吸动画实例
				btAnimationData: {},  // 按钮呼吸动画
				btScale: 1,
				tsTitle: '+100金币',  // 提示文字
				durationMath1: 20,
				durationMath2: 20,
				animationDataTs: {},  // 提示文字动画
				goldData: [
					{top: '532rpx', left: '82rpx'},
					{top: '532rpx', left: '252rpx'},
					{top: '532rpx', left: '426rpx'},
					{top: '532rpx', left: '600rpx'},
					{top: '724rpx', left: '82rpx'},
					{top: '724rpx', left: '252rpx'},
					{top: '724rpx', left: '426rpx'},
					{top: '724rpx', left: '484rpx'}
				],
				animationDatas: [null, null, null, null, null, null, null, null], // 金币动画组
				getIntoCount: 0,
				loading: false,
				powerOnTimer: new Date().getTime(), // 保存当前进入页面的时间挫
				isVideoType: null,  // 1 是否是看视频签到 2 是否是补签
				repairSignData: null, // 保存补签的信息
				powerOnCount: 0,  // 记录开机秒数
				balanceCount: 0,  // 余额
				mpAppIdShow: false,
				codeValud: '',
				codeImage: null,
				status: false
			}
		},
		watch: {
			'signData.signInDayVoList':{
				handler(val, oldVal){
					if (val.length > 0) {
						let signInDay = val.find(item => item.canSign)
						if (signInDay) {
							this.isSignIn = signInDay.signIn
						}
					}
				},
				deep: true
			},
			popupShow(newVal, oldVal) {
				if(newVal) {
					timer = setInterval(() => {
						if(this.scale === 1) {
							this.scale = 0.92
						}else {
							this.scale = 1
						}
					}, 500)
				} else {
					timer && clearInterval(timer)
				}
			}
		},
		onLoad(options) {
			this.mpData = options
			try {
				const value = uni.getStorageSync('storage_key');
				if (value) { // 内存找到有
					this.mpAppIdShow = true
					if (options.mpAppId) {
						// 链接上带有保存
						uni.setStorageSync('storage_key', options.mpAppId);
						// uni.setNavigationBarTitle({ title: '签到有礼' })
					}
				} else {
					// 内存没找到
					if (options.mpAppId) {
						// 链接上带有
						this.mpAppIdShow = true
						uni.setStorageSync('storage_key', options.mpAppId);
						// uni.setNavigationBarTitle({ title: '签到有礼' })
					} else {
						this.mpAppIdShow = false
						// uni.setNavigationBarTitle({ title: '生成二维码' })
					}
				}
				
			} catch (e) {
				// error
				console.log(2222222, e);
			}
			uni.login({
				success: async res => {
					if (res.code) {
						let openIDInfo = await getOpenId({appId: config.appid, code: res.code})
						this.openId = openIDInfo.data
						this.getList()
					}
				}
			})
			getState({appId: config.appid}).then(res => {
				this.status = res.data || false
			})
		},
		onShareAppMessage() {},
		onReady() {
			if (urgeVideoAd) {
				this.createInterstitialAd()
				this.powerOnShowAd()
			}
			this.btAnimation = uni.createAnimation({ timingFunction: 'ease' })
			this.btBreathAni()
		},
		onHide() {
			console.log('页面隐藏')
			timer && clearInterval(timer)
			btTimer && clearInterval(btTimer)
			adTimer && clearTimeout(adTimer)
			powerOnTimer && clearInterval(powerOnTimer)
		},
		onUnload() {
			console.log('onUnload---->')
			timer && clearInterval(timer)
			btTimer && clearInterval(btTimer)
			this.interstitialAd.destroy()
			adTimer && clearTimeout(adTimer)
			powerOnTimer && clearInterval(powerOnTimer)
		},
		methods: {
			onKeyInput(e) {
				this.codeValud = e.target.value
			},
			load() {
				uni.hideLoading();
			},
			error() {
				uni.hideLoading();
			},
			getCodeImg() {
				if (this.codeValud) {
					uni.showLoading({
						title: '生成中'
					});
					this.codeImage = `https://api.uomg.com/api/qrcode?url=${this.codeValud}`
				} else {
					uni.showToast({
						title: '请先输入内容~~',
						icon: 'none'
					})
				}
			},
			getBookCurr() {
				getBalance({appId: config.appid, mpAppId: this.mpData.mpAppId, mpOpenId: this.mpData.mpOpenId}).then(res => {
					this.balanceCount = res.data || 0
				})
			},
			// 提示关注公众号
			tsAccount() {
				// uni.showToast({
				// 	title: '请先关注公众号~~',
				// 	icon: 'none'
				// })
				this.signData = {
					sustainDayCount: 1,
					canSupplement: 0,
					userId: null,
					mpName: null,
					signInDayVoList: [
						{
							signIn: true,
							canSupplement: false,
							dayDescribe: '第一天',
							bookCoin: 10,
							isSignIn: true
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第二天',
							bookCoin: 20,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第三天',
							bookCoin: 30,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第四天',
							bookCoin: 40,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第五天',
							bookCoin: 50,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第六天',
							bookCoin: 60,
							isSignIn: false
						},
						{
							signIn: false,
							canSupplement: false,
							dayDescribe: '第七天',
							bookCoin: 70,
							isSignIn: false
						},
					]
				}
				this.startGold(false)
				this.isSignIn = false
				uni.showToast({
					title: '签到成功~~',
					icon: 'none'
				})
			},
			powerOnShowAd() {
				// 开机25秒调取弹窗广告 以后没5分钟调取
				powerOnTimer = setInterval(() => {
					this.powerOnCount += 1
					if(this.powerOnCount === 25 || this.powerOnCount % 325 === 0) {
						this.showInterstitialAd()
					}
				}, 1000)
			},
			// 创建插屏广告 激励视频广告
			createInterstitialAd() {
				// 创建插屏广告
				let interstitialAd = this.interstitialAd = uni.createInterstitialAd({adUnitId: insertScreenAd});
				interstitialAd.onLoad(() => {
					// 插屏 广告加载成功 
					console.log("插屏 广告加载成功");
					this.loading = false;
				});
				interstitialAd.onClose(() => {
					// 用户点击了关闭或返回键(仅Android有返回键)
					console.log("插屏 广告关闭");
				});
				interstitialAd.onError((err) => {
					// 插屏 广告加载失败
					console.log("插屏 广告加载失败", err);
					this.loading = false;
				});
				// 广告实例创建成功后默认会执行一次 load，加载广告数据
				// 如果界面有 "显示广告" 按钮，需要先禁用掉，防止用户点击，等待广告数据加载成功后在放开
				this.loading = true;
				
				// 激励视频广告
				this._isLoaded = false
				let rewardedVideoAd = this._rewardedVideoAd = uni.createRewardedVideoAd({ adUnitId: urgeVideoAd }) // 仅用于HBuilder基座调试 adpid: '1507000689'
				rewardedVideoAd.onLoad(() => {
					this._isLoaded = true
					console.log('onLoad event')
					// 加载激励视频成功
					// 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件
				})
				rewardedVideoAd.onError((err) => {
					// 加载激励视频失败
					// console.log('onError event', err)
					this._isLoaded = false
				})
				rewardedVideoAd.onClose((res) => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						// 正常播放结束
						if(this.isVideoType === 1){ // 看视频签到
							this.signInHandle(true)
						} else if (this.isVideoType === 2) { // 看视频补签
							this.repairSign(this.repairSignData) 
						} else if (this.isVideoType === 3) {
							this.getCodeImg()
						}
					} else {
						// 播放中途退出
					}
				})
			},
			// 显示插屏广告广告
			showInterstitialAd() {
				// 调用 interstitialAd.show()，如果数据正在加载中不会显示广告，加载成功后才显示
				// 在数据没有加载成功时，需要防止用户频繁点击显示广告
				if(adTimer) {
					clearTimeout(adTimer)
				}
				if (insertScreenAd) {
					let newT = new Date().getTime()
					if (((newT / 1000) - (this.powerOnTimer / 1000)) < 15) {  // 判断是否开机15秒
						adTimer = setTimeout(() => {
							if (this.loading == true) {
								return
							}
							this.loading = true;
							this.interstitialAd.show().then((res) => {
								console.log('插屏广告成功---》', res)
								this.loading = false;
							}).catch(err => {
								console.log('插屏广告错误---》', err)
							});
							clearTimeout(adTimer)
						}, newT - this.powerOnTimer + 1000)
						return
					}
					if (this.loading == true) {
						return
					}
					this.loading = true;
					this.interstitialAd.show().then((res) => {
						console.log('插屏广告成功---》', res)
						this.loading = false;
					}).catch(err => {
						console.log('插屏广告错误---》', err)
					});
				}
			},
			// 补签点击
			signatureHandle(type, data) {
				if (!urgeVideoAd) { // 判断是否有视频ID
					this.repairSign(this.repairSignData) 
					return
				} else {
					this.showVideoAd(type, data)
				}
			},
			// 显示激励视频广告
			showVideoAd(type, data) {
				if (this._isLoaded) {
					this.isVideoType = type
					this.repairSignData = data
					this._rewardedVideoAd.show().catch(() => {
						this._rewardedVideoAd && this._rewardedVideoAd.load().then(() => this._rewardedVideoAd && this._rewardedVideoAd.show()).catch(err => {
							uni.showToast({
								title: '当前无视频广告',
								icon: 'none'
							})
						})
					})
				} else {
					if(type === 1){ // 看视频签到
						this.signInHandle(true)
					} else if (type === 2) { // 看视频补签
						this.repairSign(this.repairSignData) 
					} else if (type === 3) {
						this.getCodeImg()
					}
				}
			},
			/** 看视频签到 */
			lookVideo() {
				if (urgeVideoAd) {
					this.showVideoAd(1)
				} else {
					this.signInHandle(true)
				}
			},
			// 按钮呼吸
			btBreathAni() {
				btTimer = setInterval(() => {
					if(this.btScale === 1) {
						this.btScale = 0.92
						this.btAnimation.scale(0.92).step({ duration: 600 })
						this.btAnimationData = this.btAnimation.export()
					} else {
						this.btScale = 1
						this.btAnimation.scale(1).step({ duration: 600 })
						this.btAnimationData = this.btAnimation.export()
					}
				}, 600)
			},
			// 提示动画
			startTsAni(watchVideos) {
				if (watchVideos) {
					this.tsTitle = '+' + (this.signInDay.bookCoin * 2) + '书币'
				} else {
					this.tsTitle = '+' + (this.signInDay.bookCoin || 10) + '书币'
				}
				if( this.durationMath2 >= 50 ) {
					this.durationMath2 = 20
				} else {
					this.durationMath2 = this.durationMath2 + 1
				}
				let animation = uni.createAnimation({ timingFunction: 'ease' })
				animation.opacity(1).step({ duration: this.durationMath2 })
				animation.top('150rpx').step({ duration: 1000, delay: 100 })
				animation.opacity(0).top('350rpx').step({ duration: 0 })
				this.animationDataTs = animation.export()
			},
			// 金币组动画
			startGold(watchVideos) {
				this.startTsAni(watchVideos)
				if( this.durationMath1 >= 50 ) {
					this.durationMath1 = 20
				} else {
					this.durationMath1 = this.durationMath1 + 1
				}
				this.animationDatas = this.goldData.map(item => {
					let animation = uni.createAnimation({ timingFunction: 'ease' })
					animation.opacity(1).step({ duration: this.durationMath1 })
					animation.top('76rpx').left('60rpx').step({ duration: Math.floor(Math.random() * 101) + 650, delay: 100 })  //  
					animation.opacity(0).top(item.top).left(item.left).step({ duration: 0 })
					return animation.export()
				})
			},
			// 更多书币
			moreGold() {
				let path = 'pages/index/index'
				if(Object.keys(this.mpData).length > 0) {
					path = path + this.getSerialize(this.mpData)
				}
				uni.navigateToMiniProgram({
				  appId: 'wxe1b04d1d8f6df382',
				  path,
				  success(res) {
				    // 打开成功
				  }
				})
			},
			// 对象序列化成 a=1&b=2
			getSerialize(value) {
				if(Object.prototype.toString.call(value) === "[object Object]") {
					let path = ""
					for (const key in value) {
						if (Object.prototype.hasOwnProperty.call(value, key)) {
							const element = value[key];
							if (path === "") {
								path = `?${key}=${element}`
							}else {
								path = path + `&${key}=${element}`
							}
						}
					}
					return path
				} else {
					return ""
				}
			},
			// 判断模板消息是否点击了总是允许
			getSetting() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						withSubscriptions: true,
						success: resSetting => {
							console.log('订阅消息---->', resSetting)
							let { subscriptionsSetting } = resSetting
							if (subscriptionsSetting) {
								let { mainSwitch, itemSettings, ...data } = subscriptionsSetting
								if (data && Object.keys(data).length > 0) {
									if (mainSwitch) {
										for (const key in data) {
											if (Object.prototype.hasOwnProperty.call(data, key)) {
												const element = data[key];
												if (element === 'accept') {
													resolve(200)  // 总是允许开启
												} else {
													resolve(400)  // 总是允许取消
												}
											}
										}
									} else {
										resolve(401)  // 后台关闭开关
									}
								} else {
									resolve(402)  // 没有点总是允许
								}
							} else {
								resolve(402) // 没有点总是允许
							}
						}
					})
				})
			},
			handleMessage(remindSwitch, allowSwitch = 0) {  // 设置签到消息接口
				let { mpName, ...mp } = this.mpData
				setMessage({appId: config.appid, openId: this.openId, allowSwitch, remindSwitch, ...mp}).then(res => {
					this.getList()
					this.showInterstitialAd()
				})
			},
			// 获取模板签到ID
			getTemplate() {
				getTemplateIDs({appId: config.appid, type: 1}).then(res => {
					this.signIdTemID = [res.data]
				})
			},
			// 获取首页数据
			async getList(signTime) {
				let data = {appId: config.appid, userSource: 1, openId: this.openId, ...this.mpData, ...(signTime ? {signTime} : {})}
				let res = await getHome(data)
				if (res.data) {
					this.mpData = {
						mpAppId: res.data.mpAppId,
						mpName: res.data.mpName,
						mpOpenId: res.data.mpOpenId
					}
					this.signData = res.data
					this.signRemind = res.data.loginRemindSwitch === 0 ? false : true
					this.getTemplate()
					this.getBookCurr()
				}
			},
			/** 补签*/
			repairSign(data) {
				let { dayTime, dayNum } = data
				signInAjax({watchVideo: false, supplement: true, appId: config.appid, openId: this.openId, dayNum, dayTime, ...this.mpData}).then(res => {
					this.getList(res.data)
					this.startGold(false)
					uni.showToast({
						title: '补签成功',
						icon: 'success'
					})
					setTimeout(() => {
						this.showInterstitialAd()
					}, 20000)
				})
			},
			getTimer() { // 获取年月日时分秒
				let timestamp = Date.parse(new Date())
				let date = new Date(timestamp)
				let Y = date.getFullYear()
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				return `${Y}${M}${D}`
			},
			/** 签到提醒按钮 */
			signRemindHandle(state) {
				if (!this.signData.mpName) {
					uni.navigateTo({
						url: '../officialAccount/officialAccount'
					})
					return
				}
				if(state) { // 点击开启
					if (this.signIdTemID.length > 0) {
						uni.requestSubscribeMessage({
							tmplIds: this.signIdTemID,
							success: async res => {
								let { errMsg, ...massageData } = res
								console.log('------>', res)
								let msg = await this.getSetting()
								console.log('----2222---->', msg)
								if(msg === 400) {
									uni.showToast({
										title: '签到消息微信关闭，如要开启通知，请到通知管理开启',
										icon: 'none',
										duration: 2000
									})
									return
								} else if(msg === 401) {
									uni.showToast({
										title: '通知管理按钮关闭，如要开启通知，请到通知管理开启',
										icon: 'none',
										duration: 2000
									})
								} else {
									for (const key in massageData) {
										if (Object.prototype.hasOwnProperty.call(massageData, key)) {
											const element = massageData[key];
											if (element === 'accept') { // 允许
												console.log('msg--->', msg)
												this.handleMessage(1, msg === 200 ? 1 : 0)
											} else if (element === 'reject') { // 取消
												
											}
										}
									}
								}
							}
						})
					} else {
						uni.showToast({
							title: '模板ID为空',
							icon: 'none'
						})
					}
				} else { // 点击关闭
					this.handleMessage(0, 0)
				}
			},
			/** 活动规则展开和收起  */
			activityRulesHandle() {
				this.activityRules = !this.activityRules
			},
			/** 签到 */
			signIn() {
				if(!this.signData.mpName) {
					uni.showToast({
						title: '请先关注公众号',
						icon: 'none'
					})
					return
				}
				this.signInDay = this.signData.signInDayVoList.find(item => item.canSign)
				this.popupShow = true
			},
			/** 关闭弹窗 */
			closeHandle() {
				this.popupShow = false
				this.signInHandle(false)
			},
			/** 签到 */
			signInHandle(watchVideo) {
				let signInDay = this.signData.signInDayVoList.find(item => item.canSign)
				console.log(signInDay)
				if (signInDay) {
					let { dayTime, dayNum, signIn } = signInDay
					if (!signIn) {
						signInAjax({watchVideo, supplement: false, appId: config.appid, openId: this.openId, dayNum, dayTime, ...this.mpData}).then(res => {
							this.getList()
							this.startGold(watchVideo)
							this.popupShow = false
							if(!watchVideo) {
								this.showInterstitialAd()
							} else {
								setTimeout(() => {
									this.showInterstitialAd()
								}, 20000)
							}
						})
					} else {
						uni.showToast({
							title: '今日已签！',
							icon: 'error'
						})
					}
				} else {
					uni.showToast({
						title: '数据获取失败！',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FC6E53;
	}
	.sign {
		position: relative;
		&>.back {
			width: 100%;
			margin-top: 104rpx;
		}
		.signCenter {
			position: absolute;
			top: 0;
			margin: 40rpx 0 60rpx;
			font-family: PingFangSC-Medium, PingFang SC;
		}
		.signTop {
			padding: 0 28rpx;
			height: 104rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.avatarView{
					width: 104rpx;
					height: 104rpx;
					overflow: hidden;
					border-radius: 10px;
					.avatar {
						width: 104rpx;
						height: 104rpx;
						background: #D8D8D8;
					}
					&>image {
						width: 100%;
						height: 100%;
					}
				}
				
				
				.userInfo{
					margin-left: 28rpx;
					&>view{
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						
						&.ID{
							margin-top: 4rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
						.extract {
							font-size: 30rpx;
							margin-left: 30rpx;
							background-color: rgb(213, 51, 186);
							// background-image: linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186));
							padding: 6rpx 16rpx;
							border-radius: 26rpx;
						}
					}
				}
			}
			.right{
				width: 212rpx;
				height: 68rpx;
				background-color: #FFFFFF;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				&>image {
					width: 28rpx;
					height: 32rpx;
				}
				&>text {
					font-size: 28rpx;
					font-weight: 400;
					color: #FD9C01;
					margin-left: 18rpx;
				}
			}
		}
		
		// 滚动通知
		.notice {
			width: 656rpx;
			height: 68rpx;
			background: #C7322C;
			box-shadow: 0px 4rpx 8rpx 0rpx rgba(49, 49, 49, 0.08);
			border-radius: 38rpx;
			opacity: 0.53;
			margin: 58rpx auto 0;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 30rpx;
		
			.horn {
				width: 28rpx;
				height: 28rpx;
			}
			.txts {
				// flex: 1;
				height: 68rpx;
				width: 600rpx;
			}
		}
		
		.signBottom{
			margin: 0 14rpx;
			margin-top: 160rpx;
			width: 722rpx;
		}
		.exhibitionContent{
			padding: 26rpx 26rpx 40rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 22rpx;
			box-shadow: 0px 4rpx 8rpx 0rpx rgba(230, 230, 230, 0.5);
			&>.ts {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
			&>.signinExhibition {
				margin-top: 18rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				&>view{
					width: 152rpx;
					height: 168rpx;
					background: #FFF7EF;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 173, 165, 0.26);
					border-radius: 16rpx;
					border: 2rpx solid #FFB35C;
					margin-bottom: 20rpx;
					padding: 12rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					position: relative;
					.day{
						font-size: 24rpx;
						font-weight: 500;
						color: #FF9011;
					}
					&>.goldCoins {
						height: 68rpx;
						margin: 5rpx 0;
					}
					.reward{
						font-size: 24rpx;
						font-weight: 500;
						color: #FE604F;
					}
					&:last-child{
						width: 322rpx;
						display: flex;
						justify-content: space-between;
						flex-direction: row;
						&>.left {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							margin-left: 35rpx;
							height: 100%;
							flex: 1;
							.reward{
								margin-top: 28rpx;
								font-size: 32rpx;
								font-weight: 500;
							}
						}
						&>.right {
							width: 115rpx;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							&>image{
								width: 108rpx;
								height: 128rpx;
							}
						}
					}
					// 已签到
					&.select {
						overflow: hidden;
						border: 2rpx solid #D2D2D2;
						background: #F2F2F2;
						.day, .reward{
							color: #999999;
						}
					}
					.signSub {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 72rpx;
					}
					// 看视频补签
					&.repairSign {
						position: relative;
						.repair {
							position: absolute;
							width: calc(100% + 2rpx);
							left: -1rpx;
							top: -1rpx;
							text-align: center;
							line-height: 46rpx;
							height: 46rpx;
							background: #FE604F;
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
							border-radius: 16rpx 16rpx 0 0;
						}
					}
				}
			}
		
			&>.gignBt {
				width: 456rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				// background-color: #D8D8D8;
				background: linear-gradient(180deg, #FDC606 0%, #FF8D12 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 139, 11, 0.61);
				margin: 40rpx auto 0;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
			
			&>.already{
				margin: 40rpx auto 0;
				width: 456rpx;
				height: 80rpx;
				background: #D8D8D8;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
		
		.signRemind {
			margin-top: 40rpx;
			height: 92rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 20rpx;
			line-height: 92rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			display: flex;
			font-weight: 400;
			justify-content: space-between;
			
			.remindSwitch{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				
				&>view {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					&>text {
						font-weight: 400;
						font-size: 32rpx;
						margin-left: 12rpx;
					}
					
					&.open > .select {
						width: 24rpx;
						height: 24rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
					}
					
					&.close > .select {
						width: 24rpx;
						height: 24rpx;
						border: 2rpx solid #FFFFFF;
						box-sizing: border-box;
						border-radius: 24rpx;
					}
					
					&:first-child {
						margin-right: 38rpx;
					}
				}
			}
		}
		
		.activityRules {
			margin-top: 40rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 400;
			&>.top {
				height: 92rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&>image {
					width: 40rpx;
				}
			}
			&>.bottom {
				padding: 0 28rpx 30rpx;
				box-sizing: border-box;
				
				&> view {
					margin-bottom: 12rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 46rpx;
				}
			}
		}
		
		.popup {
			position: fixed;
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.6);
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			.popupContent {
				width: 632rpx;
				
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				&>.content {
					position: relative;
					&>image {
						width: 100%;
						height: 652rpx;
					}
					&>.textCon {
						position: absolute;
						width: 100%;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						padding-top: 192rpx;
						.ts {
							font-size: 60rpx;
							font-weight: 500;
							color: #F5631D;
						}
						
						.reward {
							height: 60rpx;
							background: #FFD9A2;
							border-radius: 31rpx;
							font-size: 32rpx;
							font-weight: 400;
							display: inline-block;
							padding: 0 32rpx;
							color: #F5631E;
							line-height: 60rpx;
							margin-top: 20rpx;
						}
						
						.doubleBt {
							width: 456rpx;
							height: 104rpx;
							margin-top: 90rpx;
							transition: all linear .5s; 
						}
						
						.bt {
							margin-top: 14rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #FCE8CD;
							display: inline-block;
							text-align: center;
						}
						
						.btTrue {
							width: 300rpx;
							height: 68rpx;
							background-color: #ffd555;
							line-height: 68rpx;
							color: #831902;
							font-size: 36rpx;
							font-weight: 700;
							border-radius: 34rpx;
						}
					}
				}
				&>.close {
					width: 54rpx;
					height: 54rpx;
					margin-top: 76rpx;
				}
			}
		}
		
		.fragmentGold {
			position: absolute;
			z-index: 100;
			opacity: 0;
			&>image {
				width: 68rpx;
				height: 68rpx;
			}
		}
		
		.qLuckDraw {
			position: absolute;
			top: 240rpx;
			right: 8rpx;
			z-index: 200;
			animation: lanimation 1.3s linear infinite;
			&>image {
				width: 150rpx;
				height: 150rpx;
			}
		}
		
		.receiveTs {
			position: absolute;
			border: 2rpx solid rgb(242, 164, 39);
			top: 350rpx;
			z-index: 100;
			color: #FFFFFF;
			left: 50%;
			transform: translateX(-50%);
			padding: 10rpx 20rpx;
			background-color: rgba(195, 106, 106, 0.6);
			border-radius: 5rpx;
			opacity: 0;
		}
	
		.singleLattice {
			position: fixed;
			top: 200rpx;
			right: 4rpx;
		}
	}
	
	@-webkit-keyframes lanimation {
		0% {
			transform: rotate(0deg);
		}
		8% {
			transform: rotate(12deg);
		}
		16% {
			transform: rotate(0deg);
		}
		24% {
			transform: rotate(-12deg);
		}
		32% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(0deg);
		}
	}
	
	.code {
		padding: 0 40rpx 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.uni-input {
			margin-top: 40rpx;
			border: 1rpx solid #FFFFFF;
			padding: 10rpx;
			border-radius: 8rpx;
			color: #FFFFFF;
			width: 100%;
		}
		
		.codeBt {
			margin: 60rpx auto 0;
			width: 250rpx;
			padding: 16rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 10rpx;
		}
		
		.codeImg {
			margin-top: 80rpx;
			width: 80%;
		}
	}
	
</style>