JP-ChargeTeam51/pages/record/details.vue

<template>
	<view class="time-head">
		<ujp-navbar title="充电详情">
			<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">

				<view class="iconfont qr-code">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>
		<view class="slogan-4 " v-for="(item,i) in bannerListYXJ" :key="i" v-if="i==0">
			<u-icon name="close-circle-fill" color="#989898" @click="bannerListYXJ=[]"></u-icon>
			<img :src="item.picUrl" @click="gotoUrl2(item.linkUrl)" >
		
		</view>
		<u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>

		<view class="details-time">
			<view class="time">
				<view class="time1">
					<view class="time13" v-if="chargeDetail.deviceType==1&&chargeDetail.endSoc">
					启动: {{chargeDetail.startSoc}}%
					</view>
					<view class="time12">{{geth1(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}
					</view>
					<view class="time11">
						{{getday(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
					
				</view>

				<view class="time2">
					 <view class="time21">
						 {{ getPercent(chargeDetail)}}
					 </view> 
					<view class="time22"></view>
					<view class="time21" style="color: #fff;">-</view>
				</view>
				<view class="time1" style="    text-align: end;">
					<view class="time13"  v-if="chargeDetail.deviceType==1&&chargeDetail.endSoc">
					停止: {{chargeDetail.endSoc}}%
					</view>
					<view class="time12">{{geth1(chargeDetail.endTime)}}</view>
					<view class="time11">{{getday(chargeDetail.endTime)}}</view>
				</view>
			</view>
			<view class="oldTextjp18px" v-if="false">
				<view class="details-row">
					<p>充电时长</p>
					<span>{{chargeDetail.chargingMinute != null ? getPercent(chargeDetail.chargingMinute) : '0秒'}}</span>
				</view>
				<view class="details-row" >
					<p>实付款</p>
					<span>{{chargeDetail.actualFee != null ? chargeDetail.actualFee.toFixed(2) : '0.00'}}元</span>
				</view>
				<view class="details-row"  v-if="chargeDetail.deviceType==1" >
					<p>充电SOC</p>
					<span>
					{{chargeDetail.startSoc}}%>{{chargeDetail.endSoc}}%
					</span>
				</view>
				<view class="details-row" v-if="false">
					<p>充电度数</p>
					<span>{{chargeDetail.electricQuantity != null ? chargeDetail.electricQuantity/10000 : '0.000'}}度</span>
				</view>
			</view>
		</view>
		
		<view class="details">
			<view class="details-title">
				<h4 class="oldTextjp20px" oldstyle="font-size: 20px;">费用信息</h4>
			</view>
			<view class="oldTextjp18px" oldstyle="font-size: 18px;">
				<view class="details-row">
					<p>订单总额</p><span>{{chargeDetail.dueFee != null ? chargeDetail.dueFee.toFixed(2) : '0.00'}}元</span>
				</view>


				<view class="details-row">
					<p>电费</p>
					<span>{{chargeDetail.totalElecMoney != null ? chargeDetail.totalElecMoney.toFixed(2) : '0.00'}}元</span>
				</view>

				<view class="details-row">
					<p>服务费</p>
					<span>{{chargeDetail.totalServiceMoney != null ? chargeDetail.totalServiceMoney.toFixed(2) : '0.00'}}元</span>
				</view>

				<view class="details-row"
					v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100">
					<p>折前服务费</p>
					<span>{{(chargeDetail.dueServiceMoney?chargeDetail.dueServiceMoney:0).toFixed(2)}}元</span>
				</view>
				<view class="details-row"
					v-if="chargeDetail.realityServiceDiscountRatio&&chargeDetail.realityServiceDiscountRatio!=100">
					<p>服务费折扣</p><span style="color:#ef7041">{{discountRatio10(chargeDetail.realityServiceDiscountRatio)}}折</span>
				</view>
				<view class="details-row"
					v-else-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100">
					<p>服务费折扣</p><span style="color:#ef7041">{{discountRatio10(chargeDetail.serviceDiscountRatio)}}折</span>
				</view>


				<view class="details-row">
					<p>优惠券抵扣</p><span style="color:#ef7041">
					{{userCouponObj&&userCouponObj.useText?(userCouponObj.useText=='服务费0折'?'免服务费':userCouponObj.useText):'未使用'}}
					
					 </span>
				</view>
				

				<view class="details-row" v-if="chargeDetail.userCardId">
					<p>会员活动</p><span style="color:#ef7041">折扣卡</span>
				</view>
				
				<view class="details-row" v-if="chargeDetail.discountAmount">
					<p>实际减免</p><span style="color:#ef7041">-{{chargeDetail.discountAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>实付款</p>
					<span style="color:#ef7041;font-size: 20px;" ><b>{{chargeDetail.actualFee != null ? chargeDetail.actualFee.toFixed(2) : '0.00'}}元</b></span>
				</view>
				
				<view class="details-row">
					<p>支付方式</p>
					<span   ><b>{{chargeDetail.payTypeText}}</b></span>
				</view>
				<view class="details-row" v-if="chargeDetail.payType==1">
					<p>预付款</p>
					<span   ><b>{{chargeDetail.estimateFee != null ? chargeDetail. estimateFee.toFixed(2) : '0.00'}}元</b></span>
				</view>
				<view class="details-row" v-if="chargeDetail.payType==1">
					<p>预付款自动退款</p>
					<span   ><b>{{chargeDetail.estimateFee != null ? (chargeDetail.estimateFee -chargeDetail. actualFee).toFixed(2) : '0.00'}}元</b></span>
				</view>
				
				<view class="details-row" v-if="chargeDetail.payType==2||chargeDetail.payType==3">
					<p>余额</p>
					<span   ><b>{{chargeDetail. balance != null ? chargeDetail. balance.toFixed(2) : '0.00'}}元</b></span>
				</view>
				
				
				
		
			</view>
		</view>
		
		<!-- 优惠券2 -->
		<view v-if="0&&chargeDetail.carNumber"  class="details" >
			<view class="details-title">
				<h4 class="oldTextjp20px" oldstyle="font-size: 20px;">充电免费停车优惠券</h4>
			</view>
			<view class="oldTextjp18px" oldstyle="font-size: 18px;">
				<view class="details-row">
					<view>1.优惠券时长为：充电时间+30分钟
						<view style="margin-top: 8rpx;">2.充电时填写车牌号生效</view>
					</view>
					
					
				</view>
			</view>
		</view>
		
		
		<view class="piccBanner"
		v-for="(itemJNT,index ) in bannerListJNT" v-show="index==0"
		@click="gotoUrl2(itemJNT.linkUrl)" :key="index" 
		  style="
			text-align: center;
			padding: 0px 16px;">
							
			<image :src="itemJNT.picUrl" style="height: 204rpx;width: 100%;border-radius: 10px;" ></image>
		</view>
		
		
		<view class="details" :style="(!electricRecordListBl?'margin-bottom: 60px;':'')+(!remarkBl?'padding: 40rpx 40rpx 0 40rpx;':'')">
			<view class="details-title">
				<h4 class="oldTextjp20px"  @click="remarkBl=!remarkBl" >充电信息
					<span style="float: right;">
						<u-icon name="arrow-up" v-show="remarkBl"  ></u-icon>
						<u-icon name="arrow-down" v-show="!remarkBl"  ></u-icon>
					</span>
				</h4>
			</view>
			<view class="oldTextjp18px" v-show="remarkBl">
				<view class="details-row">
					<p>结束原因</p><span>{{chargeDetail.remark}}</span>
				</view>
				<view class="details-row">
					<p>订单状态</p><span>{{chargeDetail.statusText}}</span>
				</view>
				<view class="details-row" v-if="false">
					<p>更新时间</p><span>{{chargeDetail.updateTime}}</span>
				</view>
				<view class="details-row">
					<p>充电站点</p><span>{{chargeDetail.stationName}}</span>
				</view>
				<view class="details-row">
					<p>充电桩编号</p><span>{{chargeDetail.deviceName}}</span>
				</view>
				<view class="details-row">
					<p>充电车辆</p><span>{{chargeDetail.carNumber}}</span>
				</view>

			</view>
			<view  v-show="remarkBl" style=" border-top: dashed  1px #777;    margin-top: 10px;">
				<view class="details-row"><p>开始时间</p><span style="color:#777777">{{chargeDetail.startTime}}</span></view>
				<view class="details-row"><p>结束时间</p><span  style="color:#777777">{{chargeDetail.endTime}}</span></view>
				
			</view>		
			<view class="chargeDetailsClass" v-show="remarkBl" style=" border-top: dashed  1px #777;    margin-top: 10px;" v-if="chargeDetails.length">
				<view v-for="(item,i) in chargeDetails" :key="i"  >
					<view class="details-row" style=" margin-top: 18px;" >
						<p>区间充电量({{item.startTime}}-{{item.endTime}})</p>
						<span v-if="item.fixKwh&&item.kwh" >{{(item.kwh+item.fixKwh).toFixed(2) }}度</span>
						<span v-else >{{item.kwh }}度</span>
					</view>
					
					<view class="details-row" style="display: block;" >
						<p>
							<span style="    color: #37393c;">区间定价</span>
							<span style="float: right; color: #333;font-weight: normal;" v-if="item.discountServicePrice||item.discountServicePrice==0" >{{((item.electricityPrice*100+item.discountServicePrice*100)/100).toFixed(2)}}元/度 <span style="text-decoration:line-through;margin-left: 3px;">{{((item.electricityPrice*100+item.servicePrice*100)/100).toFixed(2)}}元/度</span></span>
							
							<span style="float: right; color: #333;font-weight: normal;" v-else >{{((item.electricityPrice*100+item.servicePrice*100)/100).toFixed(2)}}元/度</span>
							
						</p>
						
						<view  class="details-row-grey">
								<view class="details-row-grey-row">
									<span>电费</span>
									<span class="details-row-grey-span" >{{item.electricityPrice.toFixed(2)}}元/度</span>
								</view>
								<template  v-if="item.discountServicePrice||item.discountServicePrice==0" >
									<view class="details-row-grey-row">
										<span>充电服务费</span>
										<span class="details-row-grey-span" >{{item.discountServicePrice.toFixed(2)}}元/度</span>
									</view>
									<view class="details-row-grey-row">
										<span>折前服务费</span>
										<span class="details-row-grey-span details-row-grey-span2" >{{item.servicePrice.toFixed(2)}}元/度</span>
									</view>
								</template>
								<template  v-else >
									<view class="details-row-grey-row">
										<span>充电服务费</span>
										<span class="details-row-grey-span" >{{item.servicePrice.toFixed(2)}}元/度</span>
									</view>
									
								</template>
								
						</view>
						
						<!-- <span class="details-row-sum" style="float:none" v-if="item.discountServicePrice||item.discountServicePrice==0"  >电费{{item.electricityPrice.toFixed(2)}}元/度|服务费{{item.discountServicePrice.toFixed(2)}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度) </span>
						
							<span class="details-row-sum"  v-else >{{item.electricityPrice.toFixed(2)}}元/度(电费)+{{item.servicePrice.toFixed(2)}}元/度(服务费) </span>
							 -->
					</view>
				</view>
				
			</view>	
		</view>
		
		<view class="details" style="padding: 20rpx;margin-bottom: 60px;"  v-show="electricRecordListBl">
			<view id="pieEcharts" style="min-height:180px;">
		
			</view>
			<view style="color:#9e9e9e;margin-top: 4px;">注：充电时间每5分钟获取一次数据</view>
		</view>
		
		<view class="buttonClass" >
			<u-button  size="medium" class="detailsBtn-btn  " :customStyle="customStyle" type="info" shape="circle"
				@click="openModalBl=true">
				<view class="iconfont ">
					&#xe60d;
				</view>
				联系客服</u-button>
			<u-button class="detailsBtn-btn " size="medium"  type="success" shape="circle"
				@click="gotoUrl('pages/user/message')">填写反馈意见</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as echarts from "echarts";
	import * as newsApi from '@/apis/news.js'
	import {
		newDate,
		currentTimeStamp,
		parseUnixTime,
		secondsDistance,
		
	} from '@/utils'
	
	export default {
		data() {
			return {
				id: '',
				remarkBl:false,
				myChart: null,
				electricRecordList: [],
				chargeDetail: {},
				chargeDetails:[],
				bannerListJNT:[],
				bannerListYXJ:[],
				userCouponObj: {},
				electricRecordListBl: true,
				elderStatus: false,
				consumerPhone: "",
				openModalBl: false,
				customStyle:{
					color: '#00B962'
				},
				payList: [{},
				{
					name: "先付后退",
					tips: "游客不享受平台优惠活动",
					value: "1",
					select: false,
				}, {
					name: "个人账户支付",
					tips: "可使用折扣卡、优惠券、折扣卷等",
					value: "2",
					select: false,
				}, {
					name: "单位账户支付",
					tips: "账户余额：99999元",
					value: "3",
					select: false,
				}, {
					name: "充电金",
					tips: "账户余额：99999元",
					value: "4",
					select: false,
				}, {
					name: "充电金",
					tips: "账户余额：99999元",
					value: "4",
					select: false,
				}],
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				this.getchargingDetail();
			}

			if (this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}

			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
			this.getBannerInfo("JNT-list-end","bannerListJNT");
			this.getBannerInfo("YXJ-list-end","bannerListYXJ");
			
		},
		methods: {
			getBannerInfo(code,list) {
				
				newsApi.getBannerInfo(code).then((res) => {
					if(list){
						this[list] = res.data;
					}else{
						this.bannerList = res.data;
					}
					
					
					//uni.hideLoading()
					//document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
				}).catch(error => {
					uni.showToast({
			
						title: error,
						icon: "none"
					})
				})
			},
			confirmPhoneBl() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});

			},
			getday(time) {
				if(time){
					return time.substring(0, 10);
				}else {
					return ''
				}
					
				
			},
			geth1(time) {
				if (time) {
			
					return time.substring(11)
				} else
					return ''
			},
			geth(time) {
				if (time) {

					return time.substring(11, 16)
				} else
					return ''
			},
			getPercent(chargingRecord) {
				if (!chargingRecord.startTime) {
					return '00:00:00'
				}
				var Hour = 0;
				var Fen = 0;
				var S = 0;
				
 					var now = newDate(chargingRecord.startTime).getTime();
					var date = newDate(chargingRecord.endTime).getTime();
					var seconds = parseInt(( date-now ) / 1000);
					
					var ms = seconds;
							
					Hour = parseInt(Math.floor(ms / (60 * 60)));
					Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
					S = parseInt(Math.floor(ms % (60)));
							
				
				var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen + ":" + (S > 9 ? "" : "0") + S
							
							
				return obj;
			},
			toHome() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			getPie(data) {

				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));
					// this.myChart.on("dataZoom", (res) => {
					// 	showkey = "";
					// 	this.headitemby = "";
					// });
				}
				var timeList = []
				var seriesList1 = []
				var seriesList2 = []
				var seriesList3 = []
				//var sz2 = ['soc', 'power', 'ampere', 'voltage','temperature'];
				console.log(data)
				var dataInterval = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
				for (var i in data) {
					var item = data[i]
					timeList.push(this.geth(item.recordTime));
					seriesList1.push(item.soc ? item.soc : '')
					seriesList2.push(item.power ? (item.power / 1000).toFixed(1) : '')
					//seriesList3.push(item.temperature?item.temperature:0)
					seriesList3.push(item.temperature ? item.temperature : '')
				}

				var spaceNum = 5
				let maxA = Math.max(...seriesList2); // 最大值A
				let maxint = Math.ceil(maxA / spaceNum); //最大平均值（向上取整）= 最大值A / 间隔数
				let maxB = maxint * spaceNum; // 最大值B = 最大平均值 * 间隔数  （注：最大值B>最大值A）
				var max = Math.max(maxB, 10); // 为了防止maxB数据为0时，Y轴不显示，给个默认最大值10
				var interval = max / spaceNum;



				const colors = ['#ea9832', '#429fc8', '#b13331'];

				var option = {
					color: colors,
					tooltip: {
						formatter: (value) => {
							console.log(value)
							var name = value[0].axisValue;
							var style = "float: right;margin-left: 3px;"
							var text1 = ""
							var ulist = ['%', 'kW', '℃', '', '', '']
							for (var i in value) {
								var u = ulist[i];
								if (value[i].data == '') {
									continue
								}
								text1 += "<p>" + value[i].marker + value[i].seriesName + '<span style="' + style +
									'">' + value[i].data + u + '</span></p>';
							}
							return `<p>${name}</p>` + text1
						},
						trigger: 'axis',
					},
					grid: {

						top:'24%',
						left: '8%',
						right: '10%',
						bottom: '10%',
						//  containLabel: true
					},

					legend: {
						data: ['SOC', '功率', '温度']
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},

						splitNumber: 2,
						// prettier-ignore
						data: timeList
					}],
					yAxis: [{
							type: 'value',

							name: '℃/SOC',
							//data: [0,10,20,30,40,50,60,70,80,90,100],
							max: 100,
							min: 0,
							minInterval: 10,
							position: 'right',
							alignTicks: true,
							axisLine: {
								show: true,
								lineStyle: {
									color: colors[0]
								}
							},
							axisLabel: {

								formatter: '{value}'

							}
						},
						{

							type: 'value',
							name: 'kW',
							position: 'left',
							alignTicks: true,
							interval: interval,
							max: max,
							min: 0,
							axisLine: {
								show: true,
								lineStyle: {
									color: colors[1]
								}
							},
							axisLabel: {
								formatter: '{value}'
							}
						}

					],
					series: [{
							name: 'SOC',
							type: 'line',
							symbolSize: 3,
							data: seriesList1
						},
						{
							name: '功率',
							type: 'line',
							symbolSize: 3,
							yAxisIndex: 1,
							data: seriesList2
						},
						{
							name: '温度',
							type: 'line',
							symbolSize: 3,
							yAxisIndex: 0,
							data: seriesList3
						}
					]
				};
				console.log(option)

				this.myChart.setOption(option);

			},
			getchargingDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.chargingDetail(this.id).then((res) => {
					uni.hideLoading();
					
					this.chargeDetail = res.data.chargingRecord;
					if(this.chargeDetail.chargeDetails){
							this.chargeDetails=JSON.parse(this.chargeDetail.chargeDetails)
					}
				
					this.userCouponObj = res.data.userCoupon;
					this.electricRecordList = res.data.electricRecordList

					if (res.data.electricRecordList && res.data.electricRecordList.length) {

						this.getPie(res.data.electricRecordList);

					} else {
						this.electricRecordListBl = false
					}

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	
	.details-row-grey{
		background-color: rgba(245, 245, 245, 1);
		border-radius: 8px;

		padding: 20rpx 36rpx;
		margin-top:16rpx ;
		.details-row-grey-row{
			margin-top:4rpx ;
			.details-row-grey-span{
				float: right;
			}
			.details-row-grey-span2{
				text-decoration: line-through;
			}
			
		}
	}
	.slogan-4 {
		margin-top: 10px;
		display: flex;
		
		/* text-decoration: underline; */
			z-index: 999;
	
		text-align: center;
		position: fixed;
		/* top: 40px; */
		bottom: 180px;
		right: 20px;
	
		line-height: 20px;
		font-size: 16px;
		//background: linear-gradient(95deg, #FF9800, #FF5722);
		//box-shadow: 0 4rpx 24rpx 0 #FF5722;
		//padding-top: 8px;
		color: #fff;
		border-radius: 25px;
		
		    flex-direction: column;
		    align-items: flex-end;
			
		img{
			//height: 160rpx;
			width: 144rpx;
		}
	
	}
	.time-head {
		background: linear-gradient(180deg, rgba(0, 185, 98, 1) 0%, rgba(246, 248, 248, 1) 240px);
		padding-bottom: 20px;
	}

	.details-time {
		background: linear-gradient(180deg, #b7ebcf 0%, rgba(255, 255, 255, 1) 33%);

		.time {
			display: flex;
			justify-content: space-between;
			//border-bottom: 1px solid #E8E8E8;
			    white-space: pre;

			.time1 {
				.time13 {
					font-size: 28rpx;
					font-weight: bold;
					
				}
				.time11 {
					font-size: 24rpx;
				
				}

				.time12 {
					font-size: 36rpx;
					
					color: rgba(0, 185, 98, 1);
					    margin: 4rpx 0;
					font-weight: bold;
					text-align: center;
				}
			}

			.time2 {
				color: #B8B8B8;
				width: 90%;
				// align-items: center;
				// display: flex;
				// justify-content: space-between;
				display: flex;
				    flex-direction: column;
				    justify-content: center;
					align-items: center;
				.time21 {
					//border: 1px solid #B8B8B8;
					//border-radius: 100rpx;
					// line-height: 46rpx;
					// height: 48rpx;
					// width: 48rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					text-align: center;
				}

				.time22 {
					width: 80%;
					border-top: 1px solid #CFCFCF;

				}
			}
		}
	}

	.oldTextClassF {
		.oldTextjp18px {
			font-size: 36rpx !important;
		}

		.oldTextjp20px {
			font-size: 40rpx !important;
		}
	}

	.detailsBtn {
		margin: 16px;
		
		.detailsBtn-btn {
			border-color: #00B962 !important;
			border-radius: 8px !important;
			background: none !important;
			color: #00B962 !important;
		}
	}

	.details-title {
		margin-bottom: 16px;

		h4 {
			font-weight: bold;
			font-size: 16px;
			position: relative;
			padding-left: 10px;

			&::after {
				content: '';
				position: absolute;
				height: 12px;
				width: 4px;
				background-color: #27B148;
				left: 0;
				top: 5px;
			}
		}
	}
	
	.details-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;

		p {
			color: #333;
			//width: 180rpx;
			min-width: 80px;
		}

		span {
			color: #101010;
			font-weight: bold;
		}
		
	
	}
	.chargeDetailsClass{
		span {
			    color: rgb(51, 51, 51);
			    font-weight: normal;
		}
		.details-row-sum{
			float: right;
			color: #888;
			font-size: 24rpx;
		
		}
	}
	.details,
	.details-time {
		margin: 32rpx;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0px 2px 6px 0px #00b96226;
		border: 1px solid rgba(255, 255, 255, 1);

		.details-head {
			display: flex;
			align-items: center;
			justify-content: center;

			h4 {
				font-size: 18px;
				font-weight: normal;
				margin-left: 4px;
			}
		}

		.details-price {
			margin-top: 28px;
			display: flex;
			align-items: flex-end;
			justify-content: center;

			h3 {
				font-size: 36px;
				color: #FF6200;
				line-height: 36px;
				margin: 0 4px;
				font-weight: normal;
			}

			span {
				font-size: 20px;
				color: #FF6200;
			}
		}

		.details-main {
			text-align: center;
			margin-bottom: 20px;

			p {
				color: #777;
				margin-top: 4px;
			}
		}
	}

	.qr-code {
		font-size: 24px;
		color: #666666;
		// position: absolute;
		right: 16px;
	}
	.buttonClass{
		    display: flex;
		    text-align: center;
			position: fixed;
			bottom: 0px;
			    width: 100%;
				    background: #fff;
				    padding: 10px 0;
		.detailsBtn-btn{
				//	margin:0 32rpx;
		}
	}
	
	
</style>