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">
					<!-- <image :src="avatarUrl || '../../static/avatar.jpg'" class="avatar" mode="widthFix"></image> -->
					<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="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" mode="heightFix" v-if="item.signIn"></image>
								<image src="../../static/clickVideo.png" class="goldCoins" mode="heightFix" @click="repairSign(item)" v-else-if="item.canSupplement"></image>
								<image src="../../static/gold.png" class="goldCoins" 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">签到领书币</navigator>
					<view class="gignBt" @click="signIn" v-else-if="!isSignIn">签到领书币</view>
					<!-- <view class="already" v-else>今日已签</view> -->
					<view class="gignBt" v-else @click="moreGold">更多书币</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>
				
				<!-- 活动规则模块 -->
				<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>
				</view>
				
			</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" @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>
</template>

<script>
	import { config, getHome, getOpenId, signInAjax, getTemplateIDs, setMessage, switchUpdate } from '@/api/api.js'
	export default {
		data() {
			return {
				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: {}, // 今天签到信息
			}
		},
		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
			}
		},
		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() {},
		methods: {
			// 更多书币
			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()
				})
			},
			// 获取模板签到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)
					uni.showToast({
						title: '补签成功',
						icon: 'success'
					})
				})
			},
			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.popupShow = false
						})
					} else {
						uni.showToast({
							title: '今日已签！',
							icon: 'error'
						})
					}
				} else {
					uni.showToast({
						title: '数据获取失败！',
						icon: 'error'
					})
				}
			},
			/** 看视频签到 */
			lookVideo() {
				this.signInHandle(true)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FC6E53;
	}
	.sign {
		position: relative;
		&>.back {
			width: 100%;
			margin-top: 104rpx;
		}
		.signCenter {
			position: absolute;
			top: 0;
			padding: 40rpx 0;
			margin-bottom: 20rpx;
			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;
				}
			}
		}
		
		.signBottom{
			margin: 0 14rpx;
			margin-top: 216rpx;
			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: 424rpx;
							height: 84rpx;
							margin-top: 114rpx;
						}
						
						.bt {
							margin-top: 14rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #FCE8CD;
						}
					}
				}
				&>.close {
					width: 54rpx;
					height: 54rpx;
					margin-top: 76rpx;
				}
			}
		}
	}
</style>