rtim/pages/user/wallet/index.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>
		</view>
		
		<image class="integral_top_bg" src="@/static/images/wallet/my_wallet_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<view style="padding:24rpx;">
				<!-- 可提现佣金 -->
				<view class="money">
					<view class="box-top x-bc">
						    <view class="y-bc">
								<view class="title x-c">可提现佣金(元)
								<image src="@/static/images/wallet/eye_open.png" mode="aspectFill"></image>
								</view>
								<view class="price">
									{{info.mayWithdraw||'0.00'}}
								</view>
							</view>
							
						<view class="wbtn"   @click="navTo('/pages/user/wallet/addApply')">去提现</view>
					</view>
					<view class="fanghua x-f">
						您有{{info.withdrawIntegral||0}}芳华币可兑换
						<view v-if="info.withdrawIntegral!==0" class="duihuan" @click="openBox">【去兑换】</view>
					</view>
					<view class="box-bottom x-ac">
						<view class="y-bc">
							<view class="title">累计佣金(元)</view>
							<view class="num">{{info.totalCommission||'0.00'}}</view>
						</view>
						<!-- <view class="y-bc">
							<view class="title">冻结佣金(元)</view>
							<view class="num">200.00</view>
						</view> -->
						<view class="y-bc">
							<view class="title">已提现佣金(元)</view>
							<view class="num">{{info.withdrawFinish||'0.00'}}</view>
						</view>
					</view>
				</view>
				<view class="benefit box">
					<view class="benefit-box">
						<view class="benefit-item" @click="show=true">
							<image src="@/static/images/wallet/withdrawal_methodpng.png" mode="aspectFill"></image>
							<view>提现方式</view>
						</view>
						<view class="benefit-item" @click="navTo('/pages/user/wallet/recordList')">
							<image src="@/static/images/wallet/withdrawal_record.png" mode="aspectFill"></image>
							<view>提现记录</view>
						</view>
					</view>
				</view>
			
				<!-- 佣金明细 -->
				<view class="task box">
					<view class="x-bc">
						<text class="box-title">兑换明细</text>
						<view class="more x-c" @click="navTo('/pages/user/wallet/commissionLogsList')">查看全部
						<image src="@/static/image/hall/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="taskloglist">
						<view class="item y-bc" v-for="(item,index) in dataList" :key="index">
							<view class="share x-bc">
								<view class="type">芳华币兑换</view>
								<view class="total">
									兑换<text class="num">+{{item.commission}}</text>
								</view>
							</view>
							<view class="amount x-bc">
								<view>芳华币：{{item.integral}}</view>
								<view>{{item.createTime}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<u-popup :show="isShow" mode="center" :safeAreaInsetBottom="false" @close="closeBox" :round="16" style="width: 80%;">
			<view class="tips-box">
              <view class="tips-title">
				  温馨提示
			  </view>
			  <view class="desc">
				  您有{{info.withdrawIntegral}}芳华币可兑换现金<text style="color:#FF5C03;">{{info.withdrawCash}}元，</text>是否兑换？
			  </view>
			  <view class="tips x-f">
			  	<image src="@/static/images/integral/stunning_degree.png"></image>
			   <view class="text">注意：一旦兑换不可撤销。</view>
			  </view>
			  <view class="btn-box x-ac">
				  <view class="okbtn cancel" @click="closeBox">取消</view>
				  <view class="okbtn" @click="integralExchange">确定</view>
			  </view>
			</view>
		</u-popup>
	<!-- 弹窗 -->
		<u-popup :show="show"  mode="center" @close="close" :round="16">
			<view class="pay-list">
				<view class="title x-bc">
					<view style="width: 48rpx;"></view>
					提现方式
					<image class="close" @click="close" src="@/static/image/hall/close_icon.png"></image>
				</view>
		
				<view class="pay-box">
					<radio-group @change="payTypeChange">
						<view class="item-box x-bc">
							<image src="@/static/images/wallet/order_wechat.png" mode=""></image>
							<view class="right x-bc">
								<text class="text">微信支付</text>
							<!-- 	<label>
									<radio :value="1" :checked="payType=='1'" activeBackgroundColor="#FF5C03" />
								</label> -->
							</view>
		
						</view>
					</radio-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getDictByKey} from '@/api/common.js'
	import {getUserSign,getUserIntegralLogsList,doSign,getNewcomerBenefits,getDownloadPoster,invited} from '@/api/integral';
	import {getUserInfo,getWallet,integralExchange,exchangDetail} from '@/api/user'
	import Loading from "@/components/Loading";
	export default {
		data() {
			return {
				info:{},
				dataList:[],
				isShow:false,
				show:false,
				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,
				downUrlImg: "",
				bindLoading: false,
				user:{},
				payType: 1,
			}
		},
		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.getWalletList(this.user.userId);
			this.isBindMobile=!this.$isEmpty(this.user.phone);
			this.getNewcomerBenefits();
			//this.getUserIntegralLogsList()
		},
		onShow() {
			this.getWallet(this.user.userId);
			//this.getUserSign();
		},
		methods: {
			getWallet(id){
				getWallet({userId:id}).then(
					res => {
						if(res.code==200){
							this.info=res.data
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					err => {
					}
				);
			},
			payTypeChange(e) {
				this.payType = e.detail.value
			},
			integralExchange(){
				if(this.info.withdrawIntegral==0){
					uni.showToast({
						icon:'none',
						title:"您没有可兑换的芳华币",
					});
					return;
				}
				integralExchange({userId:this.user.userId}).then(
					res => {
						if(res.code==200){
							uni.showToast({
								icon:'none',
								title: "兑换成功",
							});
							this.isShow=false
							this.getWallet(this.user.userId);
							this.getWalletList(this.user.userId);
							
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					err => {
					}
				);
			},
			getWalletList(id){
				var data={
					userId:id,
					page:1,
					limit:10
				}
				exchangDetail(data).then(
					res => {
						if(res.code==200){
							this.dataList=res.data.rows
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					err => {
					}
				);
			},
			handleDetail() {
				uni.navigateTo({
					url: '/pages/user/integral/integralLogsList'
				})
			},
			navTo(url){
				if(url){
					uni.navigateTo({
						url: url
					})
				}else{
					uni.showToast({
						icon:'none',
						title: "正在紧急开发中...",
					});
				}
				
			},
			openWay() {
				this.show = true
			},
			openBox(){
				this.isShow=true
			},
			closeBox() {
				this.isShow = false
			},
			close() {
				this.show = false
			},
			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){
							that.isDaySign = true
							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");
							console.log("this.expireTime==",this.expireTime)
							this.isNewUser=res.isNewUser;
							if(!this.timer){
								this.timer=setInterval(() => {
									this.calculateCountdown();			
								}, 1000);
							} else {
								this.calculateCountdown();
							}
						}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 targetTime = new Date(this.expireTime.replace(/-/g, '/'));
				targetTime.setDate(targetTime.getDate() + 7); // ➕7天
				const timeDiff = targetTime - new Date(); // 剩余毫秒
			
				if (timeDiff <= 0) {
					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) {
						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;
	}
	::v-deep .u-popup__content{
		width: 80% !important;
		overflow: hidden;
	}
	.tips-box{
		//padding: 36rpx;
		padding-bottom: 40rpx;
		.tips-title{
			background: linear-gradient( 0deg, rgba(255, 92, 3, 0) 0%,rgba(255, 92, 3, 0.30) 100%,);
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #222222;
			line-height: 128rpx;
			text-align: center;
		}
		.desc{
			padding:0 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #222222;
			margin-bottom: 36rpx;
		}
		.tips{
			padding:0 36rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
			.text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #FF5C03;
				line-height: 24rpx;
			}
		}
		.btn-box{
			margin-top: 40rpx;
			.okbtn{
				padding:20rpx 100rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				background: #FF5C03;
				border-radius: 42rpx ;
				&.cancel{
					background: #F5F7FA;
					color: #757575
				}
			}
		}
	}
	.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: 500;
		font-size: 34rpx;
		color: #222222;
	}
	.more{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.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;
				}
			}
		}
	}
	.pay-list {
		background-color: #F5F7FA;
		padding: 24rpx;
		min-height: 400rpx;
	
		.title {
			height: 96rpx;
			line-height: 96rpx;
			padding-bottom: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
	
			.close {
				width: 48rpx;
				height: 48rpx;
			}
		}
	
		.pay-box {
			padding: 0 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
	
			.item-box {
				image {
					margin-right: 24rpx;
					width: 48rpx;
					height: 48rpx;
				}
	
				.right {
					flex: 1;
					padding: 36rpx 0;
					border-bottom: 1px solid #ECECEC;
	
					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
					}
				}
	
				&:last-child {
					.right {
						border-bottom: none;
					}
				}
			}
		}
	}
	
	.money{
		   margin-bottom: 20rpx;
		   padding:32rpx;
		   box-sizing: border-box;
		   background: #FFFFFF;
		   border-radius: 16rpx 16rpx 16rpx 16rpx;
		   .box-top{
			   image{
				   margin-left: 12rpx;
				   width:32rpx;
				   height: 32rpx;
			   }
			   padding-bottom: 10rpx;
			   .price{
				   font-family: DIN, DIN;
				   font-weight: 500;
				   font-size: 72rpx;
				   color: #222222;
			   }
			   .wbtn{
				    font-family: PingFang SC, PingFang SC;
				    font-weight: 500;
				    font-size: 32rpx;
				    color: #FFFFFF;
					text-align: center;
				    width: 224rpx;
				   height: 88rpx;
				   line-height: 88rpx;
				   background: #FF5C03;
				   border-radius: 44rpx 44rpx 44rpx 44rpx;
			   }
			   
		   }
		   .fanghua{
		   				   font-family: PingFang SC, PingFang SC;
		   				   font-weight: 500;
		   				   font-size: 28rpx;
						   color: #757575;
						   .duihuan{
							   color: #FF5C03;
							   margin-left: 10rpx;
						   }
						   padding-bottom: 40rpx
		   }
		   .box-bottom{
			   .num{
				   font-family: DIN, DIN;
				   font-weight: 500;
				   font-size: 40rpx;
				   color: #313131;
				   line-height: 32rpx;
				   text-align: center;
			   }
		   }
		   .title{
			   font-family: PingFang SC, PingFang SC;
			   font-weight: 400;
			   font-size: 24rpx;
			   color: #757575;
			   line-height: 56rpx;
		   }
	}
	.taskloglist{
		width: 100%;
		.item{
			width: 100%;
			margin-top: 24rpx;
			.share{
                 flex:1;
				 width: 100%;
				 padding-bottom: 10rpx;
				 .type{
					 font-family: PingFang SC, PingFang SC;
					 font-weight: 400;
					 font-size: 30rpx;
					 color: #222222;
				 }
				 .total{
					 font-family: PingFang SC, PingFang SC;
					 font-weight: 400;
					 font-size: 24rpx;
					 color: #FF5C03;
					 .num{
						 font-family: DIN, DIN;
						 font-weight: 500;
						 font-size: 32rpx;
						 color: #FF5C03;
					 }
				 }
			}
			.amount{
				flex:1;
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
			}
		}
	}
	.benefit {
		height: 176rpx;
		display: flex;
		align-items: center;
		
		&-box {
			flex:1;
			// margin-top: 38rpx;
			@include u-flex(row, center, space-around);
		}
		&-item {
			flex:1;
			width: 104rpx;
			height: 104rpx;
			text-align: center;
			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 6rpx;
			}
			&:first-child{
				border-right:2rpx solid #ECECEC; ;
			}
		}
	}
	.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{
		padding: 32rpx;
		&-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>