baiyuApp/pages/user/integral/points.vue

<template>
	<view class="container">
		<view class="uni-nav-bar">
			<view :style="{height: statusBarHeight,width: '100%'}"></view>
			<view class="uni-nav-barbox">
				<view class="uni-nav-back" @click="$navBack()">
					<image src="@/static/images/back_white_icon.png" mode="aspectFill"></image>
				</view>
				<view class="uni-nav-title" style="flex: 1;text-align: center;">我的福币</view>
			</view>
			<image class="uni-nav-bar_bg" src="@/static/images/integral/integral_top_bg.png" mode="widthFix"></image>
		</view>

		<image class="integral_top_bg" src="@/static/images/integral/integral_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<view class="pointsbox">
				<view class="pointsbox-left">
					<view>我的福币</view>
					<view class="pointsbox-num">
						<text>{{integral}}</text>
						<text class="pointsbox-detail" @click="handleDetail">明细</text>
					</view>
					<view class="pointsbox-desc">可抵现金{{money}}元，最高可100%抵扣</view>
				</view>
				<image class="pointsbox-right" src="@/static/images/integral/integral_img.png" mode="aspectFill">
				</image>
			</view>
			<view style="padding: 0 24rpx;">
				<!-- 签到 -->
				<view class="signbox box">
					<view class="signbox-head">
						<text class="box-title">连续签到领福币</text>
						<view class="signbox-head-r">已签到<text>{{signNum}}</text>天</view>
					</view>

					<view class="signbox-con">
						<view class="signbox-item" v-for="(item,index) in sign" :key="index">
							<block v-if="index<6">
								<view class="imgbox">
									<view v-if="index + 1 <= signNum" class="signdaybox">
										<view class="signday">+{{item.signNum}}</view>
										<image src="@/static/images/integral/sign_in_on_icon.png" mode="aspectFill">
										</image>
									</view>
									<view v-else class="integral-box">
										<view class="integral-box-line">
											<view class="integral-box-con">
												+{{item.signNum}}
											</view>
										</view>
									</view>
								</view>
								<view :style="{color: index + 1 <= signNum ? '#FF5C03':''}">第{{index + 1}}天</view>
							</block>
							<block v-else>
								<view class="imgbox">
									<image class="imgbox" src="@/static/images/integral/gift_img.png" mode="aspectFill">
									</image>
								</view>
								<view :style="{color: 7 <= signNum ? '#FF5C03':''}">福利礼包</view>
							</block>
						</view>
					</view>

					<view class="signbox-footer">
						<button class="signbox-footer-btn" :loading="signLoading" :disabled="signLoading"
							@click="doSign()">立即签到</button>
					</view>
				</view>
				<!-- 福利兑换 -->
				<!-- <view class="benefit box">
					<text class="box-title">福利兑换</text>
					<view class="benefit-box">
						<view class="benefit-item" v-for="(item,index) in benefitList" @click="handleMenu(item)" :key="index">
							<image :src="item.icon" mode="aspectFill"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view> -->

				<!-- 新人福利 -->
				<view class="task box">
					<text class="box-title">新人福利</text>
					<view class="newusertask-box task-box" v-for="(item,index) in newUserTask" :key="index">
						<view class="newusertask-list task-list">
							<image class="task-list-icon" :src="item.icon" mode="aspectFill"></image>
							<view class="task-list-r">

								<!-- 	<block v-if="index<newUserTask.length-1">
									<view v-if="index==0" class="task-btn" :class="isBindMobile?'task-btn-disable':''" @tap="handleNewTask(index)">{{isBindMobile?"已完成":"去完成"}}</view>
									<view v-if="index==1" class="task-btn" :class="isBindMobile?'task-btn-disable':''" @tap="handleNewTask(index)">{{isBindMobile?"已完成":"去完成"}}</view>
									<view v-else class="task-btn" >{{item.btntxt}}</view>
								</block> -->
								<block v-if="index==0 || item.field == 'downloadAppIntegral'">
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
									</view>
									<view class="task-btn" :class="isBindMobile?'task-btn-finish':''" v-if="index==0"
										@tap="handleNewTask(index)">{{isBindMobile?"已完成":"去完成"}}</view>
									<view class="task-btn" :class="isBindMobile?'task-btn-finish':''" v-else
										@tap="handleDayTask(item)">
										{{userBenefits.isFinishDownloadAppIntegral ?"已领取":"去领取"}}
									</view>
								</block>

								<!--专家免费咨询-->
								<!-- <block v-else-if="index==1">
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
										<view v-if="isNewUser && userBenefits.taskTwo==0" class="es-mt-5">截止时间：{{ countdownText }}</view>
									</view>
									<view v-if="isNewUser && userBenefits.taskTwo==0" class="task-btn" @tap="goToCourse()" >{{ "去完成" }}</view>
									<view v-else-if="userBenefits.taskTwo==1" class="task-btn task-btn-finish">{{ "已完成" }}</view>
									<view v-else-if="!isNewUser&& userBenefits.taskTwo==0" class="task-btn task-btn-disable">{{ "已过期" }}</view>
								</block> -->

								<!--首单返利-->
								<block v-else-if="index==2">
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
										<view v-if="isNewUser && userBenefits.taskThree==0" class="es-mt-5">
											截止时间：{{countdownText}}</view>
									</view>
									<view v-if="isNewUser && userBenefits.taskThree==0" class="task-btn"
										@tap="loginNavTo(item.pageUrl)">{{ "去完成" }}</view>
									<view v-else-if="userBenefits.taskThree==1" class="task-btn task-btn-finish">
										{{ "已完成" }}
									</view>
									<view v-else-if="!isNewUser&& userBenefits.taskThree==0"
										class="task-btn task-btn-disable">{{ "已过期" }}</view>
								</block>

								<!--填写就诊人信息-->
								<block v-else-if="index==3">
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
										<view v-if="isNewUser && userBenefits.taskFour==0" class="es-mt-5">
											截止时间：{{ countdownText }}</view>
									</view>
									<view v-if="isNewUser && userBenefits.taskFour==0" class="task-btn"
										@tap="loginNavTo(item.pageUrl)">{{ "去完成" }}</view>
									<view v-else-if="userBenefits.taskFour==1" class="task-btn task-btn-finish">
										{{ "已完成" }}
									</view>
									<view v-else-if="!isNewUser&& userBenefits.taskFour==0"
										class="task-btn task-btn-disable">{{ "已过期" }}</view>
								</block>


								<block v-else-if="index==4">
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
										<view v-if="isNewUser && userBenefits.taskFive==0" class="es-mt-5">
											截止时间：{{ countdownText }}</view>
									</view>
									<view v-if="isNewUser && userBenefits.taskFive==0" class="task-btn"
										@tap="loginNavTo(item.pageUrl)">{{ "去完成" }}</view>
									<view v-else-if="userBenefits.taskFive==1" class="task-btn task-btn-finish">
										{{ "已完成" }}
									</view>
									<view v-else-if="!isNewUser&& userBenefits.taskFive==0"
										class="task-btn task-btn-disable">{{ "已过期" }}</view>
								</block>

								<block v-else>
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
									</view>
									<template v-if="item.title =='填写朋友邀请码'">
										<view v-if="userBenefits.taskSix==1" class="task-btn task-btn-finish">已领取</view>
									</template>
									<view class="task-btn" v-else @tap="loginNavTo(item.pageUrl)">{{item.btntxt}}</view>
								</block>

							</view>
						</view>


						<view v-if="item.title =='填写朋友邀请码'&&userBenefits.taskSix!=1" class="invitation-code">
							<view>
								<input class="input" v-model.trim="invitationCode" maxlength="50"
									:placeholder-style="placeholderStyle" placeholder="填码得福币" />
							</view>
							<button :class="!invitationCode ? 'task-btn task-btn-disable':'task-btn'"
								:disabled="bindLoading" :loading="bindLoading"
								@click="bindCode">{{item.btntxt}}</button>
						</view>
					</view>
				</view>

				<!-- 每日任务 -->
				<view class="task box">
					<text class="box-title">每日任务</text>
					<view class="task-box" v-for="(item,index) in taskList" :key="index">
						<view class="task-list">
							<image class="task-list-icon" :src="item.icon" mode="aspectFill"></image>
							<view class="task-list-r">
								<view>
									<view class="task-title">
										<text>{{item.title}}</text>
										<text class="title-tip" v-if="item.title =='邀请好友享福利'">最高一万元</text>
									</view>
									<view v-html="item.desc"></view>
								</view>
								<view class="task-btn" @tap="handleDayTask(item)">{{item.btntxt}}</view>
							</view>
						</view>

						<view v-if="item.title =='邀请好友享福利'" class="task-footer">
							<button class="task-footer-btn" @click="copyCode">
								<image src="@/static/images/integral/copy_icon.png" mode="aspectFill"></image>
								<text>复制邀请码</text>
							</button>
							<button class="task-footer-btn" style="margin-left: 22rpx;" @click="handleInvite">
								<image src="@/static/images/integral/weixin_icon.png" mode="aspectFill"></image>
								<text>邀请好友</text>
							</button>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 邀请海报 -->
		<uni-popup ref="invitePopup" type="center" style="z-index: 9999;">
			<view class="invite" @click="closepop">
				<image :src="downUrlImg" mode="aspectFit" show-menu-by-longpress="true" @click.stop
					@longpress="longpressImg"></image>
				<button class="downtbn" @click.stop="downImg">保存图片</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getDictByKey
	} from '@/api/common.js'
	import {
		getConfigByKey,
		addDownIntegral,
		getUserSign,
		getUserIntegralLogsList,
		doSign,
		getNewcomerBenefits,
		getDownloadPoster,
		invited
	} from '@/api/integral';
	import {
		getUserInfo
	} from '@/api/user'
	import Loading from "@/components/Loading";
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				signLoading: false,
				signList: [10, 10, 10, 50, 50, 60],
				typeOptions: [],
				isDaySign: false,
				signNum: 0,
				integral: 0,
				sign: [],
				timer: null,
				user: {
					"phone": ""
				},
				isBindMobile: false,
				FinishDownloadAppIntegral: false,
				expireTime: "",
				countdownText: '',
				userBenefits: {},
				isNewUser: 0,
				benefitList: [
					// {
					// 	icon: '/static/images/integral/go_consultation_icon.png',
					// 	name: '去问诊',
					// 	pageUrl:"/pages/doctor/doctorList"
					// },
					{
						icon: '/static/images/integral/go_exchange_icon.png',
						name: '去兑换',
						pageUrl: "/pages/user/integral/integralGoodsList"
					},
					// {
					// 	icon: '/static/images/integral/go_buy_medicine_icon.png',
					// 	name: '去购药',
					// 	pageUrl:"/pages/store/packageList"
					// },
					{
						icon: '/static/images/integral/go_change_course_icon.png',
						isCourse: true,
						name: '去换课'
					}
				],
				newUserTask: [{
						icon: '/static/images/integral/member_icon.png',
						title: '10天会员限时领',
						desc: "首次注册，完成<span style='color:#FF5C03'>手机号绑定</span>领取",
						btntxt: '去完成',
					}
					// ,{
					// 	icon: '/static/images/integral/consult_icon.png',
					// 	title: '专家免费咨询',
					// 	desc: "观看<span style='color:#FF5C03'>10分钟</span>课程领取",
					// 	btntxt: '去学习',
					// field: 'expertFreeConsultation'
					// }
					// ,{
					// 	icon: '/static/images/integral/first_order_icon.png',
					// 	pageUrl:"/pages/store/packageList",
					// 	title: '首单立返',
					// 	desc: "下单后返现<span style='color:#FF5C03'>5000</span>福币",
					// 	btntxt: '去下单',
					// field: 'firstOrderReturn'
					// }
					// ,{
					// 	icon: '/static/images/integral/patient_information_icon.png',
					// 	pageUrl:"/pages/user/patient",
					// 	title: '填写就诊人信息',
					// 	desc: "填写即送<span style='color:#FF5C03'>+1000</span>福币",
					// 	btntxt: '去填写',
					// field: 'fillInfomation'
					// }
					// ,{
					// 	icon: '/static/images/integral/address_icon.png',
					// 	pageUrl:"/pages/user/address",
					// 	title: '填写收货地址',
					// 	desc: "填写即送<span style='color:#FF5C03'>+1000</span>福币",
					// 	btntxt: '去填写',
					// field: 'fillAddress'
					// }
					, {
						icon: '/static/images/integral/invitation_code_icon.png',
						title: '填写朋友邀请码',
						desc: "填码即得<span style='color:#FF5C03'>+2000</span>福币",
						btntxt: '领奖励',
						field: 'integralInvited'
					}, {
						icon: '/static/images/integral/first_order_icon.png',
						title: '下载领取',
						desc: "下载即得<span style='color:#FF5C03'>+5000</span>福币",
						btntxt: '领取',
						field: 'downloadAppIntegral'
					}
				],
				invitationCode: "",
				placeholderStyle: 'font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 26rpx;color: #999999;',
				taskList: [
					// 	{
					// 	icon: '/static/images/integral/ssp_icon.png',
					// 	title: '刷视频',
					// 	desc: "每次浏览<span style='color:#FF5C03'>10秒</span>可获取1次福币",
					// 	btntxt: '去逛逛',
					// 	isVideo:true,
					//  field: 'watchVideo'
					// },

					// {
					// 	icon: '/static/images/integral/kzb_icon.png',
					// 	title: '看直播',
					// 	desc: "每次浏览<span style='color:#FF5C03'>10秒</span>可获取1次福币",
					// 	btntxt: '去观看',
					// 	isLive:true,
					// field: 'watchLiveStream'
					// },
					// {
					// 	icon: '/static/images/integral/xxkc_icon.png',
					// 	title: '学习课程',
					// 	desc: "每集<span style='color:#FF5C03'>+200</span>福币",
					// 	btntxt: '去学习',
					// 	isCourse:true,
					// field: 'integralCourse'
					// },
					// {
					// 	icon: '/static/images/integral/xfdjf_icon.png',
					// 	title: '消费得福币',
					// 	desc: "实际消费满1元<span style='color:#FF5C03'>+1</span>福币",
					// 	btntxt: '去逛逛',
					// 	pageUrl:"/pages/store/packageList",
					// field: 'integralRatio'
					// },
					// {
					// 	icon: '/static/images/integral/txyysf_icon.png',
					// 	title: '填写用药随访',
					// 	desc: "填写即送<span style='color:#FF5C03'>+50福币/条</span>",
					// 	btntxt: '去填写',
					// 	pageUrl:"/pages/user/followList",
					// field: 'integralFollow'
					// },
					{
						icon: '/static/images/integral/fxjkzs_icon.png',
						title: '分享健康知识',
						desc: "分享至微信、朋友圈<span style='color:#FF5C03'>+10福币/条</span>",
						btntxt: '去分享',
						field: 'integralShare'
					},
					{
						icon: '/static/images/integral/yqhyxfl_icon.png',
						title: '邀请好友享福利',
						desc: "先复制邀请码，再邀请好友",
						btntxt: '去邀请',
					}
				],
				downUrlImg: "",
				bindLoading: false,
			}
		},
		computed: {
			money() {
				const num = Number(this.integral || 0) / 1000
				return num.toFixed(2)
			}
		},
		onLoad(option) {
			this.getDictByKey("sys_integral_log_type");
			this.user = this.$getUserInfo();
			this.isBindMobile = !this.$isEmpty(this.user.phone);
			this.getNewcomerBenefits();
			//this.getUserIntegralLogsList()
		},
		onShow() {
			this.getUserSign();
			this.getConfigByKeyFun()
		},
		methods: {
			getDescText(type, score) {
				switch (type) {
					case 'expertFreeConsultation':
						return `观看<span style='color:#FF5C03'>${score}分钟</span>课程领取`
					case 'firstOrderReturn':
						return `下单后返现<span style='color:#FF5C03'>${score}</span>福币`
					case 'fillInfomation':
						return `填写即送<span style='color:#FF5C03'>+${score}</span>福币`
					case 'fillAddress':
						return `填写即送<span style='color:#FF5C03'>+${score}</span>福币`
					case 'integralInvited':
						return `填码即得<span style='color:#FF5C03'>+${score}</span>福币`
					case 'downloadAppIntegral':
						return `下载即得<span style='color:#FF5C03'>+${score}</span>福币`


					case 'watchVideo':
						return `每次浏览<span style='color:#FF5C03'>${score}秒</span>可获取1次福币`
					case 'watchLiveStream':
						return `每次浏览<span style='color:#FF5C03'>${score}秒</span>可获取1次福币`
					case 'integralCourse':
						return `每集<span style='color:#FF5C03'>+${score}</span>福币`
					case 'integralRatio':
						return `实际消费满1元<span style='color:#FF5C03'>+${score}</span>福币`
					case 'integralFollow':
						return `填写即送<span style='color:#FF5C03'>+${score}福币/条</span>`
					case 'integralShare':
						return `分享至微信、朋友圈<span style='color:#FF5C03'>+${score}福币/条</span>`

				}
			},
			async getConfigByKeyFun() {
				const res = await getConfigByKey({
					key: 'his.integral'
				})
				if (res.code == 200) {
					const data = JSON.parse((res.data))
					this.taskList.map(item => {
						if (data[item.field]) {
							item.desc = this.getDescText(item.field, data[item.field])
						}
					})
					this.newUserTask.map(item => {
						if (data[item.field]) {
							item.desc = this.getDescText(item.field, data[item.field])
						}
					})
				}
			},
			handleDetail() {
				uni.navigateTo({
					url: '/pages/user/integral/integralLogsList'
				})
			},
			getDictByKey(key) {
				var data = {
					key: key
				}
				getDictByKey(data).then(
					res => {
						if (res.code == 200) {
							this.typeOptions = res.data;
						}
					},
					err => {}
				);
			},
			doSign() {
				// if(this.isDaySign){
				// 	uni.showToast({
				// 		title:"今日已签到",
				// 		icon:"none",
				// 		duration:2000
				// 	})
				// 	return;
				// }

				uni.showLoading({
					title: "正在加载中..."
				});
				var data = {};
				let that = this;
				doSign(data).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: res.msg
							});
							setTimeout(e => {
								that.getUserInfo();
								that.getUserSign();
								uni.$emit('refreshUserSign', {});
							}, 1000);

						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getUserSign() {
				getUserSign().then(res => {
						if (res.code == 200) {
							this.data = res.member;
							this.signNum = res.signNum;
							this.isDaySign = res.isDaySign;
							this.integral = res.integral;
							this.sign = JSON.parse(res.sign);
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getNewcomerBenefits() {
				getNewcomerBenefits().then(res => {
						if (res.code == 200) {
							this.userBenefits = res.data;

							this.expireTime = this.$timeFormat(res.createTime, "yyyy-mm-dd hh:MM:ss");
							this.isNewUser = res.isNewUser;
							this.calculateCountdown();
							if (!this.timer) {
								this.timer = setInterval(() => {
									this.calculateCountdown();
								}, 1000);
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getUserIntegralLogsList() {
				let that = this;
				if (that.loaded == true || that.loading == true) return;
				that.loading = true;
				uni.showLoading({
					title: "加载中..."
				});
				getUserIntegralLogsList(that.page).then(res => {
						that.loading = false;
						that.loaded = res.data.list.length < that.page.pageSize;
						that.page.page = that.page.page + 1;
						that.list.push.apply(that.list, res.data.list);
						uni.hideLoading()
					},
					err => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			getUserInfo() {
				let that = this;
				getUserInfo().then(res => {
						if (res.code == 200) {
							if (res.user != null) {
								uni.setStorageSync('userInfo', JSON.stringify(res.user));
								this.user = res.user;
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg,
								});
							}
						}
					},
					rej => {}
				);
			},
			handleMenu(item) {
				console.log("qxj handleMenu:" + JSON.stringify(item));
				if (item.isCourse != undefined && item.isCourse) {
					this.goToCourse();
				} else if (item.isVideo != undefined && item.isVideo) {
					uni.switchTab({
						url: '/pages/course/video/living-app'
					});
				} else if (item.isLive != undefined && item.isLive) {
					this.goToCourse();
				} else {
					this.loginNavTo(item.pageUrl);
				}
			},
			goToCourse() {
				uni.navigateTo({
					url: '/pages/course/index'
				});
			},
			handleNewTask(index) { //新人福利任务

			},
			async addIntegralFun() {
				const res = await addDownIntegral({
					logType: 28
				})
				if (res.code == 200) {
					this.getNewcomerBenefits();
					uni.showToast({
						icon: 'none',
						title: '领取成功！'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			handleDayTask(item) { //每日任务
				if (item.isCourse != undefined && item.isCourse) {
					this.goToCourse();
				} else if (item.field == 'downloadAppIntegral') {
					if (this.userBenefits.isFinishDownloadAppIntegral) return
					this.addIntegralFun()
				} else if (item.isVideo != undefined && item.isVideo) {
					uni.switchTab({
						url: '/pages/course/video/living-app'
					});
				} else if (item.isLive != undefined && item.isLive) {
					this.goToCourse();
				} else if (item.title == '分享健康知识') {
					const list = [{
							name: "药膳食疗",
							pageUrl: "/pages/article/medicatedFoodList"
						},
						{
							name: "经络穴位",
							pageUrl: "/pages/article/vesselList"
						}, {
							name: "问答专区",
							pageUrl: "/pages/article/questionsList"
						}, {
							name: "疾病",
							pageUrl: "/pages/article/diseaseList"
						}, {
							name: "中医图解",
							pageUrl: "/pages/article/chineseMedicineList"
						},
						{
							name: "名方今用",
							pageUrl: "/pages/article/famousPrescribeList"
						}, {
							name: "养生讲堂",
							pageUrl: "/pages/doctor/doctorArticleList"
						}, {
							name: "养生干货",
							pageUrl: "/pages/article/articleList"
						}
					]
					const num = Math.floor(Math.random() * list.length);
					this.loginNavTo(list[num].pageUrl);
				} else if (item.title == '邀请好友享福利') {
					this.handleInvite()
				} else {
					this.loginNavTo(item.pageUrl);
				}
			},
			calculateCountdown() {
				const currentTime = new Date();
				const expireDate = new Date(this.expireTime.replace(/-/g, '/'));
				const timeDiff = currentTime - expireDate; // 时间差（毫秒）
				if (timeDiff > 7 * 24 * 60 * 60 * 1000) { // 如果时间差超过7天
					this.countdownText = '已过期';
					clearInterval(this.timer);
				} else {
					const days = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
					const hours = Math.floor((timeDiff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
					const minutes = Math.floor((timeDiff % (60 * 60 * 1000)) / (60 * 1000));
					const seconds = Math.floor((timeDiff % (60 * 1000)) / 1000);
					this.countdownText =
						`${days}天${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
				}
			},
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			loginNavTo(url) {
				if (!this.$isLogin()) {
					this.$showLoginPage();
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			// 绑定邀请码领奖励
			bindCode() {
				if (!uni.$u.test.digits(this.invitationCode)) {
					uni.showToast({
						title: '请输入正确的邀请码',
						icon: 'none'
					})
					return
				}
				this.bindLoading = true
				invited({
					userId: this.invitationCode
				}).then(res => {
					this.bindLoading = false
					if (res.code == 200) {
						this.invitationCode = ""
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						})
						this.getUserSign();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {
					this.bindLoading = false
				})
			},
			copyCode() {
				let user = JSON.parse(uni.getStorageSync('userInfo'));
				uni.setClipboardData({
					data: String(user.userId),
					success: () => {
						uni.showToast({
							title: '邀请码复制成功',
							icon: 'none'
						})
					},
					complete: (err) => {
						console.log(err)
					}
				});
			},
			// 邀请
			handleInvite() {
				uni.showLoading({
					title: "海报生成中"
				});
				getDownloadPoster().then(res => {
					uni.hideLoading()
					if (res.code == 200 && !!res.msg) {

						this.downUrlImg = res.msg
						this.$refs.invitePopup.open()
					} else {
						uni.showToast({
							title: '暂未配置海报',
							icon: 'none'
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showToast({
						title: '生成海报失败',
						icon: 'none'
					})
				})
			},
			closepop() {
				this.$refs.invitePopup.close()
			},
			longpressImg() {
				// #ifndef MP-WEIXIN
				uni.showActionSheet({
					title: "",
					itemList: ["保存图片"],
					success: (res) => {
						console.log("保存图片")
						this.downImg()
					}
				});
				// #endif
			},
			downImg() {
				uni.showLoading({
					title: "图片保存中..."
				})
				uni.downloadFile({
					url: this.downUrlImg,
					fail: function(res) {
						uni.showModal({
							title: '提示',
							content: '保存失败',
						})
						uni.hideLoading();
					},
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功",
									duration: 2000
								})
							},
							fail: () => {
								console.log("保存失败");
								uni.showToast({
									title: "保存失败",
									duration: 2000,
									icon: "error"
								})
								uni.hideLoading();
							},
							complete: function() {
								uni.hideLoading();
							}
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.invite {
		width: 100vw;
		height: calc(100vh - var(--status-bar-height) - 88rpx);
		@include u-flex(column, center, center);

		image {
			width: 100%;
			flex: 1;
		}

		.downtbn {
			margin-top: 24rpx;
			min-width: 254rpx;
			min-height: 88rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			border: 2rpx solid #FF5C03;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FF5C03;
			@include u-flex(column, center, center);

			&::after {
				border: none;
			}
		}
	}

	.container {
		position: relative;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;

		&-body {
			position: relative;
			padding-top: calc(var(--status-bar-height) + 88rpx);
			padding-bottom: calc(var(--window-bottom) + 50rpx);
		}
	}

	.integral_top_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		.uni-nav-bar_bg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.uni-nav-barbox {
			width: 100%;
			height: 88rpx;
			@include u-flex(row, center, center);
			position: relative;
			font-size: 24rpx;
		}

		.uni-nav-title {
			/* #ifdef APP-PLUS */
			font-size: 34rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 16px;
			/* #endif */
		}

		.uni-nav-back {
			position: absolute;
			bottom: 0;
			left: 20rpx;
			height: 88rpx;
			@include u-flex(row, center, flex-start);

			image {
				height: 58rpx;
				width: 58rpx;
			}
		}
	}

	.box {
		margin-bottom: 20rpx;
		padding: 28rpx 24rpx 40rpx 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.box-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #222222;
	}

	.pointsbox {
		width: 100%;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
		@include u-flex(row, center, space-between);

		&-left {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		&-num {
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 80rpx;
			line-height: 60rpx;
			margin-top: 34rpx;
			margin-bottom: 34rpx;
		}

		&-detail {
			font-weight: 400;
			font-size: 24rpx;
			margin-left: 20rpx;
			text-decoration: underline;
		}

		&-desc {
			font-weight: 400;
			font-size: 24rpx;
		}

		&-right {
			flex-shrink: 0;
			width: 302rpx;
			height: 304rpx;
			margin-right: -18rpx;
		}
	}

	.signbox {
		&-head {
			@include u-flex(row, center, space-between);
			font-weight: 600;
			font-size: 36rpx;

			&-r {
				font-weight: 400;
				font-size: 26rpx;
				color: #757575;

				text {
					color: #FF5C03;
					padding: 0 10rpx;
				}
			}
		}

		&-con {
			margin: 38rpx 0 38rpx 0;
			@include u-flex(row, center, space-between);
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
		}

		&-item {
			text-align: center;

			.imgbox {
				flex-shrink: 0;
				height: 92rpx;
				width: 92rpx;
				margin-bottom: 4rpx;
				@include u-flex(row, center, center);
			}

			.signdaybox {
				position: relative;

				image {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.signday {
				flex-shrink: 0;
				width: 72rpx;
				height: 72rpx;
				@include u-flex(row, center, center);
				box-sizing: border-box;
				background: #FCF0E7;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx dashed rgba(255, 92, 3, 0.5);
				border-radius: 50%;
				font-weight: 500;
				font-size: 22rpx;
				color: #FF5C03;
			}

			.integral-box {
				width: 72rpx;
				height: 72rpx;
				background: linear-gradient(180deg, #FBE69B 0%, #F2A54E 100%);
				border-radius: 50%;
				@include u-flex(row, center, center);

				&-line {
					width: 64rpx;
					height: 64rpx;
					@include u-flex(row, center, center);
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					border-radius: 50%;
					position: relative;
					background: linear-gradient(180deg, rgba(241, 161, 75, 1), rgba(249, 225, 137, 1));
				}

				&-con {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					@include u-flex(row, center, center);
					background: linear-gradient(180deg, #FFCD88 0%, #F4B55C 47%, #F49C49 100%);
				}
			}
		}

		&-footer {
			&-btn {
				width: 598rpx;
				height: 72rpx;
				@include u-flex(row, center, center);
				background: linear-gradient(90deg, #FF5701 0%, #FFB501 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238, 124, 80, 0.2);
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;

				&::after {
					border: none;
				}
			}
		}
	}

	.benefit {
		&-box {
			margin-top: 38rpx;
			@include u-flex(row, center, space-around);
		}

		&-item {
			width: 104rpx;
			height: 104rpx;
			text-align: center;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 6rpx;
			}
		}
	}

	.newusertask-box {
		background: #FAFAFA !important;
		border: none !important;

		.task-list-icon {
			width: 88rpx !important;
			height: 88rpx !important;
			margin-right: 22rpx !important;
		}
	}

	.title-tip {
		min-width: 134rpx;
		height: 38rpx;
		margin-left: 8rpx;
		padding: 8rpx 12rpx;
		box-sizing: border-box;
		background: #FCF0E7;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #FF5C03;
	}

	.task-footer {
		margin-top: 32rpx;
		margin-left: 80rpx;
		@include u-flex(row, center, flex-start);

		&-btn {
			width: 252rpx;
			height: 80rpx;
			margin: 0;
			@include u-flex(row, center, center);
			background: #F5F7FA;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
			position: relative;

			&::after {
				border: none;
			}

			image {
				flex-shrink: 0;
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}
		}
	}

	.task {
		&-box {
			padding: 24rpx;
			margin-top: 20rpx;
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F5F7FA;

			&:first-of-type {
				margin-top: 36rpx;
			}

			.invitation-code {
				margin-left: 100rpx;
				margin-top: 22rpx;
				margin-bottom: 16rpx;
				width: 496rpx;
				height: 80rpx;
				padding: 8rpx 8rpx 8rpx 24rpx;
				box-sizing: border-box;
				background: #ECECEC;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				@include u-flex(row, center, space-between);
			}

			.input {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #222;
			}
		}

		&-list {
			@include u-flex(row, center, space-between);

			&-icon {
				width: 54rpx;
				height: 54rpx;
				margin-right: 24rpx;
			}

			&-r {
				flex: 1;
				@include u-flex(row, center, space-between);
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		&-title {
			margin-bottom: 8rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			line-height: 38rpx;
		}

		&-btn {
			flex-shrink: 0;
			min-width: 132rpx;
			height: 64rpx;
			margin: 0 0 0 12rpx;
			padding: 0 14rpx;
			background: #FF5C03 !important;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			text-align: center;
			@include u-flex(row, center, center);
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF !important;

			&::after {
				border: none;
			}

			&-disable {
				background-color: #FDAB8D !important;
			}

			&-finish {
				background: #FAFAFA !important;
				color: #FF5C03 !important;
			}
		}
	}
</style>