siyu_app/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">
									<view>
										<view class="task-title">{{item.title}}</view>
										<view v-html="item.desc"></view>
									</view>
									<view class="task-btn" :class="isBindMobile?'task-btn-finish':''" @tap="handleNewTask(index)">{{isBindMobile?"已完成":"去完成"}}</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.taskFive==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.taskFive==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.taskTwo==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.taskFive==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.taskTwo==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>
									<view class="task-btn" v-if="item.title !='填写朋友邀请码'" @tap="loginNavTo(item.pageUrl)" >{{item.btntxt}}</view>
								</block>
								
							</view>
						</view>
						
						
						<view v-if="item.title =='填写朋友邀请码'" 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 {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,
				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: '去学习',
					},{
						icon: '/static/images/integral/first_order_icon.png',
						pageUrl:"/pages/store/packageList",
						title: '首单立返',
						desc: "下单后返现<span style='color:#FF5C03'>5000</span>芳华币",
						btntxt: '去下单',
					},{
						icon: '/static/images/integral/patient_information_icon.png',
						pageUrl:"/pages/user/patient",
						title: '填写就诊人信息',
						desc: "填写即送<span style='color:#FF5C03'>+1000</span>芳华币",
						btntxt: '去填写',
					},{
						icon: '/static/images/integral/address_icon.png',
						pageUrl:"/pages/user/address",
						title: '填写收货地址',
						desc: "填写即送<span style='color:#FF5C03'>+1000</span>芳华币",
						btntxt: '去填写',
					},{
						icon: '/static/images/integral/invitation_code_icon.png',
						title: '填写朋友邀请码',
						desc: "填码即得<span style='color:#FF5C03'>+2000</span>芳华币",
						btntxt: '领奖励',
					}
				],
				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,
						},{
							icon: '/static/images/integral/kzb_icon.png',
							title: '看直播',
							desc: "每次浏览<span style='color:#FF5C03'>10秒</span>可获取1次芳华币",
							btntxt: '去观看',
							isLive:true,
						},{
							icon: '/static/images/integral/xxkc_icon.png',
							title: '学习课程',
							desc: "每集<span style='color:#FF5C03'>+200</span>芳华币",
							btntxt: '去学习',
							isCourse:true,
						},{
							icon: '/static/images/integral/xfdjf_icon.png',
							title: '消费得芳华币',
							desc: "实际消费满1元<span style='color:#FF5C03'>+1</span>芳华币",
							btntxt: '去逛逛',
							pageUrl:"/pages/store/packageList"
						},{
							icon: '/static/images/integral/txyysf_icon.png',
							title: '填写用药随访',
							desc: "填写即送<span style='color:#FF5C03'>+50芳华币/条</span>",
							btntxt: '去填写',
							pageUrl:"/pages/user/followList"
						},{
							icon: '/static/images/integral/fxjkzs_icon.png',
							title: '分享健康知识',
							desc: "分享至微信、朋友圈<span style='color:#FF5C03'>+10芳华币/条</span>",
							btntxt: '去分享',
						},{
							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();
		},
		methods: {
			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;
							console.log("qxj userBenefits:"+JSON.stringify(this.userBenefits));
							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.switchTab({url: '/pages/course/index' });
			},
			handleNewTask(index){  //新人福利任务
				
			},
			handleDayTask(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 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: user.userId,
					success:()=>{
						uni.showToast({
							title:'邀请码复制成功',
							icon:'none'
						})
					}
				});
			},
			// 邀请
			handleInvite() {
				uni.showLoading({
					title: "海报生成中"
				})
				getDownloadPoster().then(res=>{
					uni.hideLoading()
					if(res.code == 200) {
						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;
				color:#FF5C03 ;
			}
		}
	}
</style>