ChuangHengWx/pagesPublish/rechargeCenter.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='PERILL倍力团队六维评估' bgColor="transparent"></cus-header>
		<view class="info adfac">
			<view class="info-left">
				<image :src="userInfo.headUrl||avatar"></image>
			</view>
			<view class="info-right">
				<view class="info-right-name adfac">
					<view class="text">{{userInfo.realName||'游客'}}</view>
					<view class="version">{{headData.userBriefText||'普通用户'}}</view>
				</view>
				<view class="info-right-tip">可用次数：个人版{{headData.basicCount||0}}次，团队版{{headData.proCount||0}}次</view>
			</view>
		</view>
		<view class="box adffc">
			<view class="box-tab adfacjb">
				<view class="box-tab-pre" :class="{'active':tindex===index}" 
					v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{item}}</view>
			</view>
			<template v-if="tindex===0">
				<template v-if="priceData">
					<view style="flex: 1;overflow-y: auto;margin-top: 20rpx;">
						<view class="box-yhj">
							<view class="box-yhj-top">
								<view class="box-yhj-top-xs">限时优惠价</view>
								<view class="box-yhj-top-nr adffcac">
									<view class="box-yhj-top-nr-title">PERILL倍力团队六维评估(个人版)</view>
									<view class="box-yhj-top-nr-price">￥{{priceData.discountPrice===null?priceData.price:priceData.discountPrice}}</view>
										<view class="box-yhj-top-nr-yj" v-if="priceData.discountPrice!==null">原价 ￥{{priceData.price}}/次，推广价 ￥168/次</view>
										<view class="box-yhj-top-nr-yj" style="margin-top: 50rpx;" v-else></view>
									</view>
									<view class="box-yhj-top-tip" v-if="priceData.discountPrice!==null">活动有效期：{{priceData.startDate||''}} ~ {{priceData.endDate||''}}</view>
									<view class="box-yhj-top-tip" v-else></view>
							</view>
							<view class="box-yhj-title">内容配置对比</view>
							<view class="box-yhj-table">
								<view class="box-yhj-table-pre adf">
									<view class="box-yhj-table-pre-qy qy1"></view>
									<view class="box-yhj-table-pre-qy qy2 title adfacjc" style="border-right: none;">个人版</view>
									<view class="box-yhj-table-pre-qy qy3 title adfacjc">团队版</view>
								</view>
								<view class="box-yhj-table-fwnr adfac">
									<view class="box-yhj-table-fwnr-left adffcacjc">服务内容</view>
									<view class="box-yhj-table-fwnr-right">
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active">仅从本人角度对团队进行评估</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">团队整体评估，参与评估的成员可以为团队成员、团队领导者、赞助者、利益相关者等角色。</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active">36道评估问题专业陈述</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">36道评估问题专业陈述</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active">评估团队当前状态同意度、重要性与影响力</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">评估团队当前状态同意度、重要性与影响力</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active">6个维度整体评估结果报告</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">评估团队未来提升领域</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active">团队发展建议</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">6个维度整体评估分析结果报告</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active" style="align-items: center;">- -</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">每个维度独立评估结果</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active" style="align-items: center;">- -</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">提供团队发展计划指导与教练建议</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy active" style="align-items: center;">- -</view>
											<view class="box-yhj-table-fwnr-right-pre-qy">送1节小鹅通《团队跃迁之路系列课》-30分钟掌握PERILL模型</view>
										</view>
									</view>
								</view>
							</view>
							<view class="box-yhj-title" style="margin-top: 27rpx;">服务购买说明</view>
							<view class="box-yhj-tip">
								尊敬的用户：<br>
								鉴于数字产品服务特性，当您成功完成付款购买本评估工具，该笔费用即被视为最终交易，无法提供任何形式的退款或撤销服务。建议您在支付前，充分利用小程序提供的PERILL团队发展动态评估系统介绍及说明、常见问题与支持或联系我们的客服，确保本产品完全符合您的需求。如果您有任何疑问，请务必在付款前联系我们的客服进行确认。一旦付款完成，即视为您同意上述所有内容。
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="box-empty adffcacjc">
						<image :src="imgBase+'recharge_empty.png'"></image>
						<p>暂无定价，请等待相关人员配置~</p>
					</view>
				</template>
			</template>
			<template v-if="tindex===1">
				<template v-if="priceData">
					<view style="flex: 1;overflow-y: auto;margin-top: 20rpx;">
						<view class="box-yhj">
							<view class="box-yhj-top">
								<view class="box-yhj-top-xs">限时体验</view>
								<view class="box-yhj-top-nr adffcac">
									<view class="box-yhj-top-nr-title">PERILL倍力团队六维评估(团队版)</view>
									<view class="box-yhj-top-nr-nt">￥5,999 起 <!-- ￥{{priceData.discountPrice===null?priceData.price:priceData.discountPrice}} --></view>
										<!-- <view class="box-yhj-top-nr-yj" v-if="priceData.discountPrice!==null">原价 ￥{{priceData.price}}/次，推广价 ￥1680/次</view> -->
										<view class="box-yhj-top-nr-sub">团队人数11-20人：¥6,999；21-30人：¥7,999</view>
									</view>									
									<view class="box-yhj-top-tip" >超员需求请点击首页“专业支持”联系大衡同学</view>
							</view>
							<view class="box-yhj-title">内容配置对比</view>
							<view class="box-yhj-table">
								<view class="box-yhj-table-pre adf">
									<view class="box-yhj-table-pre-qy qy1"></view>
									<view class="box-yhj-table-pre-qy qy2 title adfacjc">个人版</view>
									<view class="box-yhj-table-pre-qy qy3 title adfacjc" style="border-right: none;">团队版</view>
								</view>
								<view class="box-yhj-table-fwnr adfac">
									<view class="box-yhj-table-fwnr-left adffcacjc">服务内容</view>
									<view class="box-yhj-table-fwnr-right">
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy">仅从本人角度对团队进行评估</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">团队整体评估，参与评估的成员可以为团队成员、团队领导者、赞助者、利益相关者等角色。</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy">36道评估问题专业陈述</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">36道评估问题专业陈述</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy">评估团队当前状态同意度、重要性与影响力</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">评估团队当前状态同意度、重要性与影响力</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy">6个维度整体评估结果报告</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">评估团队未来提升领域</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy">团队发展建议</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">6个维度整体评估分析结果报告</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy" style="align-items: center;">- -</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">每个维度独立评估结果</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy" style="align-items: center;">- -</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">提供团队发展计划指导与教练建议</view>
										</view>
										<view class="box-yhj-table-fwnr-right-pre adf">
											<view class="box-yhj-table-fwnr-right-pre-qy" style="align-items: center;">- -</view>
											<view class="box-yhj-table-fwnr-right-pre-qy active">送1节小鹅通《团队跃迁之路系列课》-30分钟掌握PERILL模型</view>
										</view>
									</view>
								</view>
							</view>
							<view class="box-yhj-title" style="margin-top: 27rpx;">服务购买说明</view>
							<view class="box-yhj-tip">
								尊敬的用户：<br>
								鉴于数字产品服务特性，当您成功完成付款购买本评估工具，该笔费用即被视为最终交易，无法提供任何形式的退款或撤销服务。建议您在支付前，充分利用小程序提供的PERILL团队发展动态评估系统介绍及说明、常见问题与支持或联系我们的客服，确保本产品完全符合您的需求。如果您有任何疑问，请务必在付款前联系我们的客服进行确认。一旦付款完成，即视为您同意上述所有内容。
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="box-empty adffcacjc">
						<image :src="imgBase+'recharge_empty.png'"></image>
						<p>暂无定价，请等待相关人员配置~</p>
					</view>
				</template>
			</template>
			<template v-if="tindex===0" >
				<view class="box-btn adfacjb">
					<view class="box-btn-left adfac">
						<view class="box-btn-left-text">实付</view>
						<view class="box-btn-left-money adfac"><span>￥</span>{{sumPrice}}</view>
					</view>
					<view class="box-btn-right" @click="confirmBuy()">确认购买</view>
				</view>
			</template>
			<template v-else-if="tindex===1 && priceData" >
				<view class="box-btn adfacjb">
					<view class="box-btn-left adfac">
						<view class="box-btn-left-text">实付</view>
						<view class="box-btn-left-money adfac"><span>￥</span>{{sumPrice}}</view>
					</view>
					<view class="box-btn-right" @click="confirmBuy()">确认购买</view>
				</view>
			</template>			
			<template v-else-if="tindex===2">
				<view class="box-empty adffcacjc">
					<image :src="imgBase+'recharge_empty.png'"></image>
					<p>团队专业版正在开发中</p>
					<text>敬请期待</text>
				</view>
			</template>
		</view>
		<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>
	</view>
</template>

<script>
	//import CusNumberBox from '@/components/CusNumberBox/index.vue'
	import WechatPay from '@/components/wechatPay/index.vue'
	export default {
		components:{  WechatPay },
		data(){
			return {
				userInfo:null,
				headData:null,
				avatar:this.$imgBase+'my_avatar.png',
				tabList:['个人版','团队版','团队专业版'],
				typeCfg:{
					1:'个人版',
					2:'团队版',
					0:'团队专业版',
				},
				tindex:0,
				pindex:'',
				frequency:0,
				priceList:[],
				priceList2:[],
				min:11,
				otherTimes:11,
				price:0,
				times:0,
				sumPrice:0,
				productId:'',
				orderNo:'',
				priceData:null,
			}
		},
		onLoad(options) {
			if(uni.getStorageSync('userInfo')){
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				this.getMyInfo(this.userInfo.id);
				
				if(options.type) this.tindex = Number(options.type)||0
				this.getList(this.tindex+1)
			}
		},
		methods:{
			getTeamScaleData(){
				return new Promise(resolve=>{
					this.$api.get('/getListByType/user_brief').then(({data:res})=>{
						if(res.code!==0) return this.$showToast(res.msg)
						resolve(res.data.map(d=>({name:d.dictLabel,id:d.dictValue})))
					})
				})
			},
			async getMyInfo(userId){
				const userBrief = await this.getTeamScaleData()
				this.$api.get(`/wx/myCount/${userId}`,this.params).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.headData = res.data;
					this.$set(this.headData,'userBriefText',userBrief.find(u=>u.id==this.headData.userBrief).name||'普通用户')
					if(this.headData&&this.headData.userBriefText&&this.headData.userBriefText=='校友') this.headData.userBriefText = '创衡校友'
				})
			},
			changeTab(index){
				this.tindex = index;
				this.pindex = '';
				this.otherTimes = 11;
				this.price = 0;
				this.times = 0;
				this.sumPrice = 0;
				this.getList(this.tindex+1)
			},
			getList(type){
				this.$api.get(`/core/v2/queproduct/listByType/${type}`).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.priceData = res.data[0]||null
					if(this.priceData){
						this.productId = this.priceData.id;
						this.priceData.startDate = this.priceData.beginAt?new Date(this.priceData.beginAt).Format('yyyy年MM月dd日'):'';
						this.priceData.endDate = this.priceData.endAt?new Date(this.priceData.endAt).Format('yyyy年MM月dd日'):'';
						this.sumPrice = this.priceData.discountPrice===null?this.priceData.price:this.priceData.discountPrice;
					}
				})
			},
			confirmBuy(){
				let url = '/que/order/createOrder';
				if(this.sumPrice===0) url = '/que/order/addOrder';
				this.$api.post(url,{
					payAmount:this.sumPrice,
					productId:this.productId,
					totalAmount:this.sumPrice,
					totalFrequency:1,
					type:this.tindex+1,
					userId:this.userInfo.id
				}).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg||'购买失败，请稍微重试')
					this.orderNo = res.data;
					if(this.sumPrice===0){
						uni.navigateTo({
							url:'/pagesPublish/payResult'
						})
						return
					}
					this.$refs.wxPay.payShow = true;
				})
			},
			toPay(){
				this.$api.post('/pay/createOrder',{
					orderNo:this.orderNo,
					openId:this.userInfo.openId
				}).then(({data:res})=>{
					if(!res.hasOwnProperty('paySign')) return this.$showToast('支付失败')
					this.$refs.wxPay.payShow = false;
					this.$wxPay(res).then(result => {
						uni.navigateTo({
							url:'/pagesPublish/payResult'
						})
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
		@import '../static/_asset-config';
.default_page{
		padding: 0;
		background: #F9F6EE;
		box-sizing: border-box;
		
		.info{
			padding: 40rpx 36rpx 37rpx;
			&-left{
				width: 98rpx;
				height: 98rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			&-right{
				width: calc(100% - 98rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				&-name{
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #795021;
						line-height: 32rpx;
					}
					.version{
						width: 160rpx;
						height: 40rpx;
						background: asset-image('my_version_bg2.png') no-repeat;
						background-size: 100% 100%;
						padding-left: 45rpx;
						box-sizing: border-box;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 22rpx;
						color: #795021;
						line-height: 40rpx;
						margin-left: 12rpx;
					}
				}
				&-tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #667E90;
					line-height: 24rpx;
					margin-top: 22rpx;
				}
			}
		}
		
		.box{
			flex: 1;
			overflow-y: auto;
			background: #FFFFFF;
			border-radius: 36rpx 36rpx 3rpx 3rpx;
			padding: 32rpx 30rpx 60rpx;
			
			&-tab{
				&-pre{
					width: calc(100% / 3);
					position: relative;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #667E90;
					line-height: 45rpx;
					text-align: center;
					//解决部分机型上切换tab时其他tab不可见问题
					transform: translateZ(0);
					&.active{
						font-weight: bold;
						color: #002846;
						&::after{
							content: '';
							width: 48rpx;
							height: 6rpx;
							background: #002846;
							border-radius: 3rpx;
							position: absolute;
							left: 50%;
							margin-left: -24rpx;
							bottom: -15rpx;
						}
					}
				}
			}
		
			&-yhj{
				margin-top: 29rpx;
				&-top{
					width: 100%;
					background: asset-image('bug_yhj_box_bg.png') no-repeat;
					background-size: 100% 100%;
					position: relative;
					border-radius: 16rpx;
					&-xs{
						width: 144rpx;
						height: 40rpx;
						background: asset-image('buy_yhj_bg.png') no-repeat;
						background-size: 100% 100%;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						position: absolute;
						left: 0;
						top: -6rpx;
					}
					&-xss{
						width: 170rpx;
						height: 40rpx;
						background: asset-image('buy_yhj_bg.png') no-repeat;
						background-size: 100% 100%;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						position: absolute;
						left: 0;
						top: -6rpx;
					}
					&-nr{
						padding: 34rpx 0 26rpx;
						&-title{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #955A1D;
							line-height: 30rpx;
							text-align: center;
						}
						&-price{
							font-family: D-DINCondensed, D-DINCondensed;
							font-weight: bold;
							font-size: 54rpx;
							color: #795021;
							line-height: 59rpx;
							text-align: center;
							margin-top: 10rpx;
						}
						&-nt{
							font-family: D-DINCondensed, D-DINCondensed;
							font-size: 50rpx;
							color: #795021;
							line-height: 59rpx;
							text-align: center;
							margin-top: 10rpx;
						}
						&-yj{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #955A1D;
							line-height: 30rpx;
							text-align: center;
							margin-top: 15rpx;
							text-decoration: line-through;
						}
						&-sub{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #955A1D;
							line-height: 30rpx;
							text-align: center;
							margin-top: 15rpx;
						}						
						
					}
					&-tip{
						width: 100%;
						padding: 11rpx 16rpx;
						min-height: 50rpx;
						background: asset-image('buy_yhj_tip_bg.png') no-repeat;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #795021;
						line-height: 33rpx;
						border-radius: 0 0 16rpx 16rpx;
						box-sizing: border-box;
					}
				}
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
					line-height: 40rpx;
					margin-top: 49rpx;
				}
				&-table{
					width: 100%;
					margin-top: 39rpx;
					border-radius: 24rpx 24rpx 0 0;
					border: 1rpx solid #E2E2E2;
					box-sizing: border-box;
					&-pre{
						border-bottom: 1rpx solid #E2E2E2;
						&:last-child{
							border: none;
						}
						&-qy{
							padding: 0 16rpx;
							min-height: 120rpx;
							box-sizing: border-box;
							border-right:  1rpx solid #E2E2E2;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #002846;
							line-height: 36rpx;
							&:last-child{
								border: none;
							}
							&.title{
								font-weight: 400;
								font-size: 28rpx;
								color: #002846;
							}
							&.nr{
								font-weight: bold;
								font-size: 24rpx;
								color: #002846;
								text-align: center;
							}
							&.active{
								background: #FFFBEE;
							}
						}
					}
					.qy1{
						width: 64rpx;
					}
					.qy2,.qy3{
						width: calc((100% - 64rpx) / 2);
					}
					&-fwnr{
						&-left{
							width: 63rpx;
							padding: 0 16rpx;
							box-sizing: border-box;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #002846;
							line-height: 36rpx;
						}
						&-right{
							width: calc(100% - 63rpx);
							border-left: 1rpx solid #E2E2E2;
							position: relative;
							&::after{
								content: '';
								width: 1rpx;
								height: 100%;
								background: #E2E2E2;
								position: absolute;
								left: 50%;
								top: 0;
							}
							&-pre{
								border-bottom: 1rpx solid #E2E2E2;
								align-items: stretch;
								&:last-child{
									border: none;
								}
								&-qy{
									width: 50%;
									min-height: 90rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #002846;
									line-height: 36rpx;
									text-align: left;
									padding: 20rpx 11rpx;
									box-sizing: border-box;
									display: flex;
									flex-direction: column;
									justify-content: center;
									&:last-child{
										border: none;
									}
									&.active{
										background: #FFFBEE;
									}
								}
							}
						}
					}
				}
				&-tip{
					margin-top: 15rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #667E90;
					line-height: 40rpx;
				}
			}
		
			&-price{
				margin-top: 34rpx;
				justify-content: space-between;
				flex-wrap: wrap;
				flex: 1;
				overflow-y: auto;
				&-pre{
					width: calc(50% - 10rpx);
					margin-top: 16rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 2rpx solid #FBEBCB;
					position: relative;
					&-once{
						width: 121rpx;
						height: 35rpx;
						background: linear-gradient( 270deg, #EF923B 0%, #EA4F27 100%);
						border-radius: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 35rpx;
						text-align: center;
						position: absolute;
						left: 0;
						top: 0;
					}
					&-times{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #002846;
						line-height: 30rpx;
						text-align: center;
						margin-top: 36rpx;
					}
					&-money{
						font-family: D-DINCondensed, D-DINCondensed;
						font-weight: bold;
						font-size: 53rpx;
						color: #002846;
						line-height: 87rpx;
						margin-top: 20rpx;
						span{
							font-size: 54rpx;
							line-height: 59rpx;
						}
					}
					&-bottom{
						width: 100%;
						height: 56rpx;
						background: #FFF3CB;
						border-radius: 0rpx 0rpx 24rpx 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #95581C;
						line-height: 56rpx;
						text-align: center;
						margin-top: 31rpx;
					}
					
					&.active{
						background: asset-image('price_bg.png') no-repeat;
						background-size: 100% 100%;
						.box-price-pre-times,.box-price-pre-money{
							color: #955A1D;
						}
						.box-price-pre-bottom{
							background: asset-image('price_bottom2.png') no-repeat;
							color: #795021;
						}
					}
				}
			}
		
			&-other{
				margin-top: 51rpx;
				&-left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
				}
			}
		
			&-memo{
				margin-top: 48rpx;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #667E90;
					line-height: 40rpx;
				}
				&-p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #95A5B1;
					line-height: 40rpx;
					margin-top: 16rpx;
				}
			}
		
			&-btn{
				margin-top: 40rpx;
				width: 100%;
				height: 100rpx;
				background: linear-gradient(to right, #242424 0%, #575757 50%);
				border-radius: 24rpx;
				&-left{
					padding-left: 30rpx;
					align-items: baseline;
					&-text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 33rpx;
					}
					&-money{
						font-family: D-DINCondensed, D-DINCondensed;
						font-weight: bold;
						font-size: 36rpx;
						color: #FCEED2;
						line-height: 52rpx;
						margin-left: 9rpx;
						align-items: baseline;
						span{
							font-family: D-DINCondensed, D-DINCondensed;
							font-weight: bold;
							font-size: 24rpx;
							color: #FCEED2;
							line-height: 26rpx;
						}
					}
				}
				&-right{
					width: 365rpx;
					height: 100rpx;
					background: #11120F;
					border-radius: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FCEED2;
					line-height: 100rpx;
					text-align: center;
					letter-spacing: 2rpx;
					&.disabled{
						background: #C0C0C0;
						color: #FFFFFF;
					}
				}
			}
		
			&-empty{
				flex: 1;
				image{
					width: 370rpx;
					height: 284rpx;
				}
				p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #667E90;
					line-height: 40rpx;
					text-align: center;
					margin-top: 21rpx;
				}
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #667E90;
					line-height: 40rpx;
					text-align: center;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>