shicai/pages/product/groupdetails.vue

<template>
	<view class="container">
		<view class="reds"></view>
		<view class="conter">
			<!-- <view class="tips flex_center_down_center" v-if="state == 1">
				<image src="../../static/error/missing-face.png"></image>
				<text >79 拼团成功</text>
			</view> -->
			<view class="details flex-between-center">
				<view class="left-img" @click="ToGroup(goodsList)">
					<image :src="goodsList.image"></image>
					<image class="left-img1" src="https://shicai.liuniu946.com/img/img69.png"></image>
					<!-- <image class="left-img1" v-if=" types == 2" src="https://shicaitest.liuniu946.com/img/img70.png"></image> -->
				</view>
				<view class="right-word">
					<view class="one">{{goodsList.title}}</view>
					
					<view class="two m-t10">
						<view class="three">
							<text>{{ goodsList.mark }}</text>
						</view>
						<!-- <text class="two-1">单买价￥{{goodsList.product_price}}</text> -->
						<text class="two-2" @click="ToGroup(goodsList)">商品详情></text>
					</view>
					<view class="word-3">
						<!-- <image src="https://shicaitest.liuniu946.com/img/img84.png"></image> -->
						<view class="word-3-1">
							<text class="word-text">本单邀请奖</text><!-- 本单发起人奖金 -->
							<text class="word-3-1-1">{{parseFloat(goodsList.people_prize)}}元/人</text>
						</view>
						<image class="wenhao" src="../../static/icon/wenhao.png" @click="navTo('/pages/rule/AAjiangjin')"></image>
					</view>
					
					
					<view class="four m-t5">
						<text >拼团价￥</text>
						<text class="four-1">{{goodsList.price}}</text>
					</view>
					<view class="five m-t10">
						<text >已拼{{goodsList.sales}}份</text>
					</view>
				</view>
			</view>
			
			<view class="participate" >
				<view class="rows-1">
					
					<view class="KaiTuan-1">发起拼团</view>
					<view class="KaiTuan-2">与<text style="color: #FF0A1A;">附近的人</text>一起享受优惠</view>
					
					<!-- 少于5个人时 -->
					<view class="participate-4" :class="{PinkCenter: goodsList.max_people < 5 }" v-if="goodsList.max_people < 5">
						<!-- AA团 -->
						<view class="participate-4-1" v-for="item in peopleList">
							<image src="https://shicai.liuniu946.com/img/img72.png"></image>
						</view>
					</view>
					
					<!-- 大于5个人时 -->
					<scroll-view class="pinkT-Box" scroll-x="true" v-if="goodsList.max_people >= 5">
						<view class="participate-4">
							<!-- AA团 -->
							<view class="participate-4-1" v-for="item in peopleList">
								<image src="https://shicai.liuniu946.com/img/img72.png"></image>
							</view>
												
							<!-- 达人团 -->
					<!-- 		<view class="participate-4-1" v-if="types == 2 " v-for="item in peopleNub + 1" >
								<image src="https://shicai.liuniu946.com/img/img72.png"></image>
							</view> -->
							
						</view>
					</scroll-view>
					
				</view>
				
				<!-- <view v-if="state == 1">
					<view class="participate-5" v-if="status == 1 && userBool == 1 " @click="openshare">邀请好友参团</view>
					<view class="participate-5" v-if="status != 1 && userBool == 0 " @click="goBuy" >立即参团</view>
					<view class="participate-5" v-if="status != 1 && userBool == 1 " @click="openshare" >分享给好友</view>
				</view> -->
				<view class="participate-5" @click="kaiPinkT">点击购买，开拼</view>
				<!-- <view class="participate-5" v-if="state == 2" @click="GoDingdan">查看订单及团长信息</view> -->
				
				<view class="participate-6"></view>
				<view class="participate-7 flex-between-center">
					<view class="participate-7-1">
						<text class="word">AA团</text>
						<text>玩法</text>
					</view>
					<view class="participate-7-1" @click="goRule">
						<text class="word1">详细规则</text>
						<image src="../../static/img/img74.png"></image>
					</view>
				</view>
				<view class="participate-8 flex-between-center">
					<view class="participate-8-1">
						<image class="img1" src="https://shicai.liuniu946.com/img/img76.png"></image>
						<view class="word-1">开团/参团</view>
						<view class="word-2">拼团享低价</view>
					</view>
					<image src="https://shicai.liuniu946.com/img/img75.png"></image>
					<view class="participate-8-1">
						<image class="img2" src="https://shicai.liuniu946.com/img/img77.png"></image>
						<view class="word-1">邀请邻里参团</view>
						<view class="word-2">分享优惠多</view>
					</view>
					<image src="https://shicai.liuniu946.com/img/img75.png"></image>
					<view class="participate-8-1">
						<image class="img3" src="https://shicai.liuniu946.com/img/img78.png"></image>
						<view class="word-1">人满发货</view>
						<view class="word-2">人不满退款</view>
					</view>
				</view>
			</view>
			
			<!-- 大家还在拼 -->
			<now-list :recommendedlist="recommendedlist"></now-list>
			
		</view>
		
		
		<uni-popup ref="share" type="center" >
				<view class="share-box">
					<view class="share-tit">
						<!-- 10枚洋鸡蛋低至<text>19</text>元， -->
						赶紧邀请认识的人来拼团吧
					</view>
						<view class="share-tit2">
							美天选菜平台配送范围有限，建议分享给您附近的朋友或邻居                            
						</view>
						<view class="share-footbox">
							<button class="share-icon button-share" open-type="share" @click="closeshare">
								<image src="https://shicai.liuniu946.com/img/icon-wx.png" class="icon"></image>
								<view class="share-txt" style="line-height: 1;margin-top: 4rpx;">邀请好友</view>
							</button>
							<!-- <view class="share-icon" @click="open">
								<image src="https://shicai.liuniu946.com/img/icon-wx2.png" class="icon"></image>
								<view class="share-txt">朋友圈</view>
							</view> -->
						</view>
			    </view>
			</uni-popup>
			
			<view class="mask" v-show="maskshow">
				<image @longpress="loadImg()" @tap="maskshow = false" mode="widthFix" :src="posturl"></image>
			</view>
			
		<view class="foot" @click="openshare">分享给好友</view>
		
		<!-- 返回按钮 -->
		<return-button></return-button>
	</view>
</template>

<script>
import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
// import { getCombinationLisPink, getCombinationPoster } from '@/api/groupBooking.js';
import { cartAdd, groupGoods } from '@/api/product.js';
import { timeComputed } from '@/utils/rocessor.js';
import { nowPinkLst } from '@/api/order.js';
import { mapState } from 'vuex';
// 返回按钮
import returnButton from '@/pages/return/returnButton.vue';
// 大家还在拼
import NowList from '../groupBooking/common/nowList.vue';
export default {
	computed: {
		...mapState(['baseURL', 'urlFile']),
		...mapState('user',['userInfo']),
		// 还需要报名的人数
		// peopleNub() {
		// 	return this.pinkT.max_people - 1 - this.people.length;
		// },
		//最后成团时,销售额佣金百分比
		percentage(){
			
			if((1 + this.people.length) >= this.pinkT.min_people)
			{
				let number;
				// AA团
				if( this.types == 1 ) {
					number = this.people.length + 1;	//现有人数
				}
				// 达人团
				if( this.types == 2 ) {
					number = this.people.length;	//现有人数
				}
				
				let size = number - this.pinkT.min_people;
				let percentage = (parseInt(size) / parseInt(this.upgrade_people_nums)) * parseInt(this.prize_up) + parseInt(this.min_prize);//最终的百分比
				console.log(this.min_prize,this.upgrade_people_nums,3898)
				console.log(percentage,8676)
				if( percentage > this.max_prize)
				{
					console.log(this.max_prize,8888)
					return parseFloat(this.max_prize);
				}else{
					console.log(percentage,9999)
					return parseFloat(percentage);
				}
			}
			else{
				return '?';
			}
		}
	},
	components: {
		uniCountdowns,
		uniPopup,
		returnButton,
		NowList
	},
	// #ifdef MP
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				if(i !='spread' ) { 
					path += i + '=' + page.options[i] + '&';
				}
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			console.log(path,9685)
			let data = {
				path: path,
				imageUrl: this.goodsList.image,
				title: '附近的好友邀请您加入拼团'
			};
			return data;
		} else {
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				if(i !='spread' ) { 
					path += i + '=' + page.options[i] + '&';
				}
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			console.log(path,9685)
			let data = {
				path: path,
				imageUrl: this.goodsList.image,
				title: '附近的好友邀请您加入拼团'
			};
			return data;
		}
	},
	// #endif
	data() {
		return {
			i:0,
			min_prize:0,//最低提成百分比
			max_prize:0,//最高提成百分比
			upgrade_people_nums:'',//升级人数
			prize_up: '',	// 提升百分比
			orderId:'',//订单号
			order_count:'',//已拼数量
			types:'',//1AA团 2 达人团
			state:0,//1正在拼团  2 拼团成功  3 拼团失败
			user_info: {}, //当前用户信息
			shopinfo:{},//订单信息
			goodsinfo:{},//商品信息
			image:'',//订单商品图片
			cart_info:{},
			posturl: '',
			list: '', //拼团全部信息
			gp_id: 0, //拼团商品id
			goods: {}, //商品信息
			pinkT: {}, //拼团团长信息
			people: [], //拼团成员信息
			status: 0, //判断是否为团长
			notPink: false, //是否已经参团
			gid: 0,
			// 倒计时
			stopTime: {
				stopTimeD: 0,
				stopTimeH: 0,
				stopTimeM: 0,
				stopTimeS: 0
			},
			pinkTInfo: '', //当前用户信息
			userBool: 0, //判断用户是否已经参与拼团 0未参加 1为已参加
			spread: '', //默认没有邀请人
			option: '', //option参数
			showtime: true, //倒计时天数
			maskshow: false, //弹窗
			teamid: '' ,//团长id
			erros:'',//保存商品错误信息
			unique:'',//保存传入的规格用于确认购买规格号
			recommendedlist:[],
			pinkUser: ''	,// 是否为团长
			orderShow: false,
			
			goodsList: {},	// 商品信息
			peopleList: '',	// 人数
			type: 1, //默认支付方式add为
		}
	},
	onLoad(option) {
		console.log(option)
		if (option.scene) {
			if (typeof option.scene == 'string') {
				let scene = ('{'+option.scene+"}").replace('qr%26','').replace(/%3D/g,':').replace(/%26/g,',').replace('pink_id','\"pink_id\"').replace('spread','\"spread\"');
				let opt = JSON.parse(scene);
				// 保存拼团订单id
				console.log('haha1')
				this.gp_id = opt.id;
				
				if(opt.order_id) {
					this.orderId = opt.order_id;
					this.orderShow = true
				}
				if (opt.spread) {
					// 存储邀请人
					this.spread = opt.spread;
					uni.setStorageSync('spread', opt.spread);
				}
			}
		} else {
			// 保存拼团订单id
			console.log('haha2')
			this.gp_id = option.id;
			
			this.pinkUser = option.pinkUser;
			if (option.spread) {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
			}
		}
		
		this.getData();
		
		// 大家还在拼
		nowPinkLst({}).then(({data}) => {
			this.recommendedlist = data;
		})
	},
	onShow() {
		
	},
	// onPullDownRefresh() {
	// 	let obj = this;
	// 	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// 	setTimeout(function() {
	// 		obj.getData();
	// 		uni.stopPullDownRefresh(); //停止下拉刷新动画
	// 	}, 1000);
	// },
	methods: {
		// 跳转
		navTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		// 下载图片方法
		loadImg() {
			uni.downloadFile({
				url: this.posturl,
				success: res => {
					console.log(res.tempFilePath);
					uni.saveImageToPhotosAlbum({
						//将图片保存在手机
						filePath: res.tempFilePath, //保存的位置
						success: res => {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						}
					});
				},
				fail(e) {
					console.log(e);
				}
			});
		},
		
		// 查看传值用
		openSp() {
			let obj = this;
			uni.scanCode({
				complete(e) {
					uni.showModal({
						title: '',
						content: JSON.stringify(e),
						showCancel: false,
						complete() {
							if(obj.erros){
							uni.showModal({
								title: '错误',
								content:JSON.stringify(obj.erros),
								showCancel: false
							});
							}
						}
					});
				}
			});
		},
		
		// 详细规则
		goRule() {
			uni.navigateTo({
				url: '/pages/rule/AArule'
			})
		},
		
		// 团长确认
		// tuanzhang() {
		// 	let obj  = this;
		// 	if (this.pinkUser == 1) {
		// 		this.$nextTick(function(){
		// 			obj.$refs.popPhone.open();
		// 		})
		// 	}
		// },
		// queren() {
		// 	this.$refs.popPhone.close();
		// },
		
		// 获取拼团信息
		getData() {
			let obj  = this;
			groupGoods({}, obj.gp_id).then(({data})=> {
				obj.goodsList = data.storeInfo;
				obj.peopleList = obj.goodsList.max_people
				
			})
		},
		
		// 一键开团
		kaiPinkT() {
			let obj = this;
				// 创建传值对象
				let data = {
					cartNum: 1, //商品数量
					new: 1, //商品是否新增加到购物车1为不加入0为加入
					combinationId: obj.gp_id,
					productId: obj.goodsList.product_id
				};
				cartAdd(data)
					.then(function(e) {
						let da = e.data;
						if (obj.type == 1) {
							// 跳转到支付页
							uni.navigateTo({
								url: '/pages/order/createOrderKai?id=' + da.cartId + '&num=' + obj.goodsList.num +'&goodsType=2'
							});
						}
					})
					.catch(e => {
						console.log(e);
					});
		},
		
		//跳转拼团商品详情页
		ToGroup(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/productGroup?id=' + id + '&show=true'
			});
		},
		
		// 去开团
		ToKaiTuan(item) {
			console.log(8754847)
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/productGroup?id=' + id
			});
		},
		
		// 计算倒计时时间
		timeComputed(da) {
			let obj = this;
			let stopTime = timeComputed(da);
			obj.stopTime.stopTimeD = stopTime.day;
			obj.stopTime.stopTimeH = stopTime.hours;
			obj.stopTime.stopTimeM = stopTime.minutes;
			obj.stopTime.stopTimeS = stopTime.seconds;
			if (stopTime.day < 1) {
				obj.showtime = false;
			}
		},
		
		openshare(){
			this.$refs.share.open()
		},
		closeshare() {
			this.$refs.share.close()
		},
		// open(){
		// 	this.$refs.popup2.open()
		// },
		launch(){
			uni.showModal({
				content: '您是否是团长，需要发起无购买拼团？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
}
	
</script>

<style lang="scss">
	.share-box{
		width: 710rpx;
		padding: 42rpx 85rpx;
		border-radius:15rpx;
		background-color: #FFFFFF;
		text-align: center;
		.share-tit{
			font-size:28rpx;
			font-weight:bold;
			color:rgba(0,0,0,1);
			line-height:34rpx;
			margin-bottom: 30rpx;
		}
		.share-tit2{
			font-size:22rpx;
			font-weight:bold;
			color:rgba(107,105,108,1);
			line-height:30rpx;
			margin-bottom: 30rpx;
		}
		.share-footbox{
			display: flex;
			.button-share {
				background: 0;
				flex-direction: column;
				display: flex;
				align-items: center;
				
				&::after {
					border: 0;
				}
			}
			.share-icon{
				flex: 1;
				height: 180rpx;
				.lyy-b-but {
					width: 550rpx;
					height: 80rpx;
					margin: 0 5rpx;
					background: #fc5b62;
					border-radius: 100rpx;
					text-align: center;
					color: white;
					line-height: 80rpx;
					font-size: 32rpx;
				}
				.icon{
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 20rpx;
				}
				.share-txt{
					font-size:27rpx;
					font-weight:bold;
					color:rgba(9,10,13,1);
				}
			}
		}
		
	}
	
	.pinkTuan {
		position: relative;
		.pinktuan-sym {
			border-radius: 0;
		}
	}
	
page,.container{
	line-height: 1;
	height: 100%;
	.reds{
		position: relative;
		top: 0;
		z-index: 0;
		width:100%;
		height:520rpx;
		// background:linear-gradient(14deg,#ff7425,#ff1e29);
		background: linear-gradient(14deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
	}
	.conter{
		position: absolute;
		top: 0;
		padding:0  20rpx;
		width: 100%;
		padding-bottom: 100rpx;
	}
	.tips{
		margin: 15rpx 0rpx;
		padding: 5rpx 10rpx;
		border-radius: 25rpx 0 0 25rpx;
		width:300rpx;
		height:50rpx;
		background:#ed372c;
		image{
			width: 45rpx;
			height: 45rpx;
			margin-right: 50rpx;
		}
		text{
			font-size:23rpx;
			font-weight:400;
			color:#ffffff;
		}
	}
	.details {
		margin-top: 20rpx;
		padding: 25rpx 35rpx;
		width: 100%;
		background:#ffffff;
		border-radius:20rpx;
		.m-t10{
			margin-top: 10rpx;
		}
		.m-t5{
			margin-top: 5rpx;
		}
		.left-img {
			position: relative;
			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin-right: 25rpx;
			}
			.left-img1{
				width: 83rpx;
				height: 34rpx;
				position: absolute;
				top:0;
				left:0;
			}
	}
		.right-word {
			width: 100%;
			.one {
				font-size:30rpx;
				color:#000000;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				width: 420rpx;
				line-height: 1.2;
				// margin-left: 8rpx;
			}
			.two{
				font-size:25rpx;
				color:#8e8e8e;
				// margin-left: 8rpx;
				display: flex;
				align-items: center;
				.two-1{
					padding-right: 15rpx;
					border-right: 1px solid #8e8e8e;
				}
				.two-2{
					padding-left: 15rpx;
				}
			}
			.word-3{
				margin-top: 10rpx;
				position: relative;
				font-size:20rpx;
				color:#ffffff;
				display: flex;
				align-items: center;
				// image{
				// 	width: 208rpx;
				// 	height: 45rpx;
				// }
				.wenhao {
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
				.word-3-1{
					// position: absolute;
					// top:7px;
					// left:5px;
					width: 200rpx;
					border: 1px solid #F9DCDD;
					.word-text {
						width: 65%;
						display: inline-block;
						background: linear-gradient(0deg,#ff7425,#ff1e29);
						padding: 4rpx 4rpx;
						text-align: center;
					}
					.word-3-1-1{
						width: 35%;
						background: #FFF5F4;
						color:#FD1B2A;
						display: inline-block;
						text-align: center;
						padding: 4rpx 0;
						// margin-left: 15rpx;
					}
					
				}
			}
			.three{
				font-size:25rpx;
				font-weight:400;
				color:#ff0919;
				// margin-left: 8rpx;
			}
			.six{
				margin-top: 10rpx;
				position: relative;
				font-size:22rpx;
				color:#ffffff;
				image{
					width: 255rpx;
					height: 80rpx;
				}
				.six-1{
					position: absolute;
					top:6px;
					left:7px;
					.six-red{
						color:#F9DCDD;
						margin-left: 15rpx;
					}
				}
				.six-2{
					position: absolute;
					top:24px;
					left:7px;
					color:#FF2829;
					.six-red{
						color:#F9DCDD;
						margin-left: 15rpx;
					}
				}
			}
			.four{
				font-size:25rpx;
				font-weight:500;
				color:#ff0919;
				// margin-left: 8rpx;
				.four-1{
					font-size:45rpx;
				}
			}
			.five{
				font-size:25rpx;
				font-weight:normal;
				color:#8b8e95;
				// margin-left: 8rpx;
			}
		}
	}
	.participate{
		margin-top: 25rpx;
		padding: 25rpx 25rpx;
		width: 100%;
		background:#ffffff;
		border-radius:20rpx;
		text-align: center;
		.participate-one{
			font-size: 43rpx;
		}
		.rows-1{
			.participate-1{
				font-size:29rpx;
				color:#000000;
				text-align: center;
				text{
					color: #F81726;
				}
			}
			.participate-2{
				font-size:29rpx;
				color:rgba(145,148,155,1);
				line-height:44rpx;
				//text-align: center;
				.participate-red{
					color:#FF0A1A;
				}
			}
			
			.KaiTuan-1 {
				font-size: 42rpx;
				font-weight: bold;
				color:rgba(0,0,0,1);
				line-height: 65rpx;
			}
			
			.KaiTuan-2 {
				font-size: $font-base;
				font-weight: bold;
				color:rgba(0,0,0,1);
				line-height: 40rpx;
			}
			
			.participate-3{
				font-size:22rpx;
				font-weight:bold;
				color:#99999a;
				line-height:33rpx;
			}
			.pinkT-Box {
				white-space: nowrap;
				margin: 30rpx 0;
			}
			.PinkCenter {
				justify-content: center;
				margin: 30rpx 0;
			}
			.participate-4{
				display: flex;
				&:nth-last-child(1){
					margin-right: 0rpx;
				}
				.participate-4-1{
					position: relative;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 30rpx;
					}
					.participate-4-1-1{
						width: 60rpx;
						height: 30rpx;
						border-radius: 0;
						position: absolute;
						bottom: 0;
						left: 20rpx;
					}
				}
			}
		}
		
		
		.participate-5{
			margin: 0 auto;
			height:80rpx;
			// background:linear-gradient(-14deg,#fe6b26,#ff3228);
			background: linear-gradient(-14deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
			border-radius:40rpx;
			font-size:30rpx;
			color:#ffffff;
			line-height:80rpx;
		}
		.participate-6{
			height:1px;
			background:#e9e9e9;
			margin-top: 50rpx;
		}
		.participate-7{
			color: #000000;
			font-size:29rpx;
			font-weight:500;
			margin: 45rpx 0;
			.participate-7-1{
				.word{
					color:#ff0a1a;
				}
				.word1{
					font-size:25rpx;
					color:#989aa0;
				}
				image{
					width: 10rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
		}
		.participate-8{
			image{
				width: 26rpx;
				height: 12rpx;
			}
			.participate-8-1{
				
				.img1{
					width: 43rpx;
					height: 50rpx;
				}
				.img2{
					width: 43rpx;
					height: 42rpx;
				}
				.img3{
					width: 60rpx;
					height: 46rpx;
				}
				.word-1{
					font-size:23rpx;
					color:#000000;
					line-height:34rpx;
				}
				.word-2{
					font-size:21rpx;
					color:#91949B;
					line-height:34rpx;
				}
			}
		}
	}
	.info {
		width: 714rpx;
		margin: 15rpx auto 0;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		padding: 30rpx;
	
		.info-top {
			display: flex;
			justify-content: space-between;
			.top-left {
				display: flex;
				.left-img {
					width: 137rpx;
					height: 137rpx;
					border-radius: 5rpx;
					margin-right: 10rpx;
				}
				.left-box {
					.left-tit {
						font-size: 27rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						margin-bottom: 5rpx;
					}
					.left {
						font-size: 23rpx;
						font-weight: 400;
						color: rgba(149, 149, 149, 1);
						line-height: 35rpx;
					}
				}
			}
			.top-right {
				font-size: 27rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}
		}
		.info-pic {
			display: flex;
			justify-content: space-between;
			.pic-left {
				margin-top: 30rpx;
				font-size: 27rpx;
				font-weight: 400;
				color: rgba(74, 74, 74, 1);
				width: 30%;
			}
			.pic-right {
				width: 70%;
				margin-top: 30rpx;
				font-size: 27rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				&.red {
					color: #FF0A31;
				}
			}
		}
	}
	.infos {
		width: 714rpx;
		margin: 15rpx auto 0;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		padding: 0 30rpx 30rpx 30rpx;
		.info-top {
			display: flex;
			justify-content: space-between;
			.top-left {
				display: flex;
				.left-img {
					width: 137rpx;
					height: 137rpx;
					border-radius: 5rpx;
					margin-right: 10rpx;
				}
				.left-box {
					.left-tit {
						font-size: 27rpx;
						font-weight: 400;
						color: #000000;
						margin-bottom: 5rpx;
					}
					.left {
						font-size: 23rpx;
						font-weight: 400;
						color: rgba(149, 149, 149, 1);
						line-height: 35rpx;
					}
				}
			}
			.top-right {
				font-size: 27rpx;
				font-weight: 400;
				color: #000000;
			}
		}
		.info-pic {
			display: flex;
			justify-content: space-between;
			.pic-left {
				margin-top: 30rpx;
				font-size: 27rpx;
				font-weight: 400;
				color: #000000;
			}
			.pic-right {
				margin-top: 30rpx;
				font-size: 27rpx;
				font-weight: 400;
				color: #000000;
				&.red {
					color: #000000;
				}
			}
		}
	}
	
	.foot{
		position: fixed;
		bottom: 0;
		width:100%;
		height:80rpx;
		// background:linear-gradient(90deg,#ff7425,#ff1e29);
		background: linear-gradient(90deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
		font-size:30rpx;
		font-weight:bold;
		color:#ffffff;
		line-height:80rpx;
		text-align: center;
		z-index: 99;
	}
	.popup1{
		width:510rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		.popup-1{
			height: 50%;
			padding: 50rpx;
			font-size:29rpx;
			color:rgba(51,51,51,1);
			line-height:42rpx;
			border-bottom: 1px solid #EEEEEE;
		}
		.popup-2{
			margin: 0 auto;
			margin-top: 20rpx;
			width:217rpx;
			height:55rpx;
			background:rgba(2,193,93,1);
			font-size:35rpx;
			font-weight:500;
			color:#ffffff;
			line-height:55rpx;
			text-align: center;
		}
	}
	.popup2{
		width:600rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		padding-bottom:20rpx;
		.popup2-1{
			text-align: center;
			height: 80%;
			padding: 50rpx;
			font-size:43rpx;
			color:rgba(51,51,51,1);
			border-bottom: 1px solid #EEEEEE;
		}
		.popup2-2{
			margin: 0 auto;
			margin-top: 20rpx;
			width:100%;
			height:55rpx;
			font-size:35rpx;
			font-weight:500;
			color:#000000;
			line-height:55rpx;
			text-align: center;
			.one{
				width: 50%;
				font-size:43rpx;
				color:#000000;
				line-height:65rpx;
				border-right: 1px solid #EEEEEE;
				&:nth-last-child(1){
					border-right: 0px;
				}
			}
		}
	}
}
.mask {
	z-index: 999;
	width: 750rpx;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	image {
		width: 80%;
		margin-top: 20%;
		// opacity: 0.8;
	}
}

.pop-box {
	background: #FFFFFF;
	margin: 0 40rpx;
	padding: 30rpx 30rpx;
	border-radius: 20rpx;
	.pop-tit {
		font-size: 32rpx;
		line-height: 1.5;
	}
	.pop-buttom {
		margin: 40rpx 0;
		background: #f0f0f0;
		// color: #FFFFFF;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		border: 1px solid $border-color-dark;
		font-size: $font-base;
	}
	.pop-qr {
		background: $base-color;
		width: 200rpx;
		margin: auto;
		padding: 20rpx;
		color: #FFFFFF;
		border-radius: 15rpx;
		text-align: center;
	}
}
</style>