qc-signIn/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>
					</view>
					<view class="userInfo">
						<view class="account">{{signData.mpName}}</view>
						<view class="ID">ID:{{signData.userId}}</view>
					</view>
				</view>
				<navigator :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="showVideoAd(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>
					<!-- <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>
				</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"></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">
				<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>
						<text class="bt" @click="signInHandle(false)">不了，单倍领取</text>
					</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 } 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,  // 记录开机秒数
			}
		},
		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
			uni.login({
				success: async res => {
					if (res.code) {
						let openIDInfo = await getOpenId({appId: config.appid, code: res.code})
						this.openId = openIDInfo.data
						this.getList()
					}
				}
			})
		},
		onShareAppMessage() {},
		onReady() {
			this.createInterstitialAd()
			this.btAnimation = uni.createAnimation({ timingFunction: 'ease' })
			this.btBreathAni()
			this.powerOnShowAd()
		},
		onUnload() {
			console.log('onUnload---->')
			timer && clearInterval(timer)
			btTimer && clearInterval(btTimer)
			this.interstitialAd.destroy()
			adTimer && clearTimeout(adTimer)
			powerOnTimer && clearInterval(powerOnTimer)
		},
		methods: {
			// 提示关注公众号
			tsAccount() {
				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)
				})
				rewardedVideoAd.onClose((res) => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						// 正常播放结束
						if(this.isVideoType === 1){ // 看视频签到
							this.signInHandle(true)
						} else if (this.isVideoType === 2) { // 看视频补签
							this.repairSign(this.repairSignData) 
						}
					} else {
						// 播放中途退出
					}
				})
			},
			// 显示插屏广告广告
			showInterstitialAd() {
				// 调用 interstitialAd.show()，如果数据正在加载中不会显示广告，加载成功后才显示
				// 在数据没有加载成功时，需要防止用户频繁点击显示广告
				if(adTimer) {
					clearTimeout(adTimer)
				}
				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)
				});
			},
			// 显示激励视频广告
			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'
							})
						})
					})
				}
			},
			// 按钮呼吸
			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 + '书币'
				}
				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: 'wx021e792baf529aff',
				  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()
				}
			},
			/** 补签*/
			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'
					})
				}
			},
			/** 看视频签到 */
			lookVideo() {
				this.showVideoAd(1)
			},
		}
	}
</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;
					}
				}
				
				
				.userInfo{
					margin-left: 28rpx;
					&>view{
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						
						&.ID{
							margin-top: 4rpx;
						}
					}
				}
			}
			.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;
						}
					}
				}
				&>.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);
		}
	}
</style>