JP-ChargeTeam51/pages/searchPile/chargeProcess/dcCharging.vue

<template>
	<view>
		<view v-if="chargingRecord.status==2" style="background-color: #fff; " >
			<ujp-navbar title="充电结束">
			</ujp-navbar>
			<view class="progress-bar2">
				<u-circle-progress width="300" active-color="green" duration='20'  :percent="100" border-width="20">
					<view class="u-progress-content">
						 
						<text class='u-progress-info' v-if="chargingGun.gunType==1">
							<p style="text-align: center;">{{chargingRecord.endSoc}}%</p>
							<p class="progress-text">当前电量</p>
						</text>
						
						<text class='u-progress-info' v-if="chargingGun.gunType==2">
							<p style="text-align: center;">{{chargingRecord.electricQuantity/10000}}</p>
							<p class="progress-text">已充电量(度)</p>
						</text>
						
					</view>

					
				</u-circle-progress>
			</view>
<!-- 充电信息 -->
			
				<!-- <view class="charge-infos">
					<view class="item">
						<view class="title">
							充电金额
						</view>
						<view class="content">
							50.00
						</view>
					</view>
					<view class="item">
						<view class="title">
							充电时长
						</view>
						<view class="content">
							00.00.00
						</view>
					</view>
					<view class="item">
						<view class="title">
							优惠金额
						</view>
						<view class="content discounts">
							-6.00元
						</view>
					</view>
					<view class="item">
						<view class="title">
							会员活动
						</view>
						<view class="content">
							充电服务费包月卡
						</view>
					</view>
				</view> -->
				 <view class="info" >
					<view class="info-name">
						充电时长
					</view>
					<view class="info-text">
						{{getPercent2()}}
					</view>
				</view>
				<view class="info" >
					<view class="info-name">
						充电金额
					</view>
					<view class="info-text">
						{{chargingRecord.actualFee}}元
					</view>
				</view>
				<view class="info" v-if="chargingRecord.discountAmount">
					<view class="info-name">
						优惠金额
					</view>
					<view class="info-text" style="color:red">
						{{chargingRecord.discountAmount}}元
					</view>
				</view>
				
				<view class="info" v-if="chargingRecord.remark">
					<view class="info-name">
						结束原因
					</view>
					<view class="info-text" style="color: red;"  >
						{{chargingRecord.remark}}
					</view>
				</view>
				
				
				
				
		
			
		<!-- 	
			<view
			
			style="
				margin-top: 20px;
				text-align: center;
				padding: 0 45px;
				padding-bottom: 40px;
				color:#9e9e9e;
			">
				<span style="color: red;">*</span>实际充电金额与所选金额会略有出入，最终结算金额将以实际充入电量为准。
			</view> -->
			
			<view class="bottom">
				<u-button size="default"  style="background-color:#53b56b"
				 shape="circle" @click="gotoMain(0)"  >返回首页</u-button>
				<u-button  style="background-color:#53b56b"
				size="default" shape="circle" @click="gotoMain(1)">查看订单详情</u-button>
			</view>
				<u-line color="#E6E6E6 100%" length="81%" margin="auto"/>
			<!-- 反馈 -->
			<view class="feedback">
				<view class="title-1">
					您对本次充电服务还满意吗？
				</view>
				<view class="title-2">
					请在下方描述您所遇到的问题，或填写您的反馈意见。我们将对优质内容的反馈者发放奖励！
				</view>
				<textarea value="" v-model="message" placeholder="请填写反馈内容" />
				<u-button class="submit" type="success" @click="submitMessage()">提交</u-button>
			</view>
			<u-line color="#E6E6E6 100%" length="81%" margin="auto"/>
			
			<view class="info"  >
				<view class="info-name">
					优惠券
				</view>
				<view class="info-text" style="color:red">
					{{couponObj&&couponObj.status=='1'?couponObj.text:'未使用'}}
				</view>
			</view>
			<view class="info" v-if="userCardBool" >
				<view class="info-name">
					会员活动
				</view>
				<view class="info-text">
					充电服务费包月卡
				</view>
			</view>
			<u-divider  color="#B6BDC3" style="margin-bottom:20px;" bg-color="#ffffff">已经到底了</u-divider>
			
			
			<view>
				<u-toast ref="uToast" />
			</view>
		</view>

		<view style="background-color: #fff; padding-bottom: 0px;" 
		 class="progress-bar-main" v-else>
			<view>
				<ujp-navbar title="充电中">
					<view class="to-recharge" @click="gotoUrl('pages/user/finance/recharge')">
						去充值
					</view>
				</ujp-navbar>
				<!-- 充电状态 -->
				<view class="charge-state">
					<view class="progress-bar">
						<u-circle-progress width="440" active-color="#53b56b" :percent="percent?percent:percentValue" border-width="35">
					
							
							<view class="u-progress-content" v-if="chargingRecord.status==4">
								<text class='u-progress-info' v-if="waitNum==1">排队中</text>
								<text class='u-progress-info' v-else >前方等待{{waitNum-1}}位</text>
							</view>
							
							<view class="u-progress-content" v-else>
								
								<text class='u-progress-info'  >
									<view v-if="chargingGun.gunType==1" style="
											font-size: 40px;
											font-weight: bold;
											color: #009B52 ;
										" >{{percent}}<span style="font-size: 16px;">%</span></view>
									<view v-if="chargingGun.gunType==2"
									style="
											font-size: 30px;
											font-weight: bold;
											color: #009B52 ;
										"
									
									>{{chargingRecord.statusText}}</view>
									<view style="
											font-size: 16px;
											font-weight: bold;
										" 	>已充费用{{chargingRecord.dueFee?chargingRecord.dueFee:0}}元</view>
								</text>
 								
								
							</view>
							
							<view class="bot"></view>
						</u-circle-progress>
					</view>
				<!-- 	<view class="img">
						<img src="../../../assets/img/Group (2).png" alt="">
					</view>
					<view class="state-infos">
						<view class="state">
							<text><img src="../../../assets/img/if-flash.svg" alt=""></text>充电中...
						</view>
						<view class="electric-quantity">
							<p>当前电量</p>
							<view class="percent">
								60<text>%</text>
							</view>
						</view>
						<view class="charge-time">
							<p>充电时长</p>
							<view class="time">
								00:24:01
							</view>
						</view>
			
					</view> -->
			
				</view>
				<!-- 充电信息 -->
				<view class="charge-info">
					<view class="info-item">
						<view class="content">
							{{timer}}
						</view>
						<view class="name">
							充电时长
						</view>
					</view>
					<view class="info-item">
						<view class="content">
							{{chargingGun.kwh}}
						</view>
						<view class="name">
							已充电量(度)
						</view>
					</view>
					<view class="info-item">
						<view class="content">
							{{detail.balance>0&&chargingRecord.dueFee?(detail.balance*1000-chargingRecord.dueFee*1000)/1000:'0'}}
						</view>
						<view class="name">
							账户余额(元)
						</view>
					</view>
					
					
				</view>
				<!-- 其他信息 -->
				<view class="else-infos">
					<view class="item">
						<view class="title">
							充电车辆
						</view>
						<view class="detail">
							{{chargingRecord.carNumber}}
						</view>
			
					</view>
					<view class="item">
						<view class="title">
							<p class="price">当前价格</p>
							<p class="time">{{price.startTime}}-{{price.endTime}}</p>
						</view>
						<view class="detail">
							<p class="electrovalence"><text class="num">{{chargingRecord.userCardId?price.electricityPrice:price.costPrice}}</text> 元/度</p>
							<p class="electrovalence-monthlyCard">电价:{{price.electricityPrice}} | 服务费:{{chargingRecord.userCardId?0+'(包月卡)':price.servicePrice}}</p>
						</view>
					
					</view>
					<view class="item">
						<view class="title">
							{{chargingRecord.chargeStrategy==0?'充电模式':''}}
							{{chargingRecord.chargeStrategy==2?'充电金额':''}}
						</view>
						<view class="detail">
							{{chargingRecord.chargeStrategy==0?'充满自停':''}}
								{{chargingRecord.chargeStrategy==2?chargingRecord.estimateFee+'元':''}}
							
						</view>
					
					</view>
					<view class="item">
						<view class="title">
							优惠券
						</view>
						<view class="detail">
							
							{{couponObj&&couponObj.useText?couponObj.useText:'未使用优惠券'}}
							
						</view>
					
					</view>
					<view class="item"  v-if="userCardBool" >
						<view class="title">
							会员活动
						</view>
						<view class="detail">
							充电免服务费包月卡
						</view>
					
					</view>
					<view class="item">
						<view class="title">
							站点
						</view>
						<view class="detail">
							 {{chargingRecord.stationName}}/{{chargingRecord.deviceName}}
						</view>
					
					</view>
					
					<view class="item" v-if="false">
						<view class="title">
							占位费说明
						</view>
						<view class="detail">
							停止充电后30分钟即开始收取占位费用，1元/分钟
						</view>			
					</view>
			
				</view>
			
			 <view class="bottom">
				 <view class="img-box" @click="show = true">
					 <img src="../../../assets/img/customer-service-2-line.svg" alt="">
				 	
				 </view>
				 <button  
				 :style="(chargingRecord.status=='0'||chargingRecord.status=='1'||chargingRecord.status=='4')?'':'background-color: #b3abab;'"
				 style="width: 80%;"
				 @click="submit" >结束充电</button>
				
				<view class="img-box" v-if="false">
				 	<img src="../../../assets/img/tools-fill.svg" alt="">
				 </view>
			 	
			 </view>
			<u-modal v-model="show" @confirm="confirmPhone"
			:confirm-text="confirmText"  confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone">
			</u-modal>
			
			<u-modal v-model="show2" @confirm="gotoGz" 
			cancel-text="暂不关注"  @cancel="cancelGz"
			confirm-text="前往关注"
			
			 confirm-color="#53b56b"
				:show-cancel-button="true" 
				ref="uModal2" :asyncClose="true" 
				 >
				<view style="padding: 15px;"
				
				>请关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，以便第一时间收到充电结束消息提醒</view>
			</u-modal>
			
			</view>
			
			<view v-if="false">
				
			
			<ujp-navbar title="充电详情">
			</ujp-navbar>
			
			<view class="iconfont tittle-font" @click="show = true">
				&#xe616;
			</view>
			


			<view class="progress-bar">
				<u-circle-progress width="440" active-color="green" :percent="percent?percent:percentValue" border-width="50">

					
					<view class="u-progress-content" v-if="chargingRecord.status==4">
						<text class='u-progress-info' v-if="waitNum==1">排队中</text>
						<text class='u-progress-info' v-else >前方等待{{waitNum-1}}位</text>
					</view>
					<view class="u-progress-content" v-else-if="chargingGun.gunType==1">
						
						<text class='u-progress-info'>{{percent}}%</text>
					</view>
					<view class="u-progress-content" v-else-if="chargingGun.gunType==2">
						
						<text class='u-progress-info'>{{chargingRecord.statusText}}...</text>
					</view>
					<view class="bot"></view>
				</u-circle-progress>
			</view>
			<view class="starting"  v-if="chargingGun.gunType==1">
				
				<span  v-if="chargingRecord.status==4">
					可用功率不足，您可以换桩或继续排队等待...
				</span>
				<span v-else>
					{{chargingRecord.statusText}}...
				</span>
			</view>


			<view class="timer">
				{{timer}}
			</view>
			<view class="charged">
				已充电{{chargingGun.kwh}}度
			</view>
			<view class="cost">
				<view class="">
					<view class="cost-top">
						{{chargingRecord.dueFee?chargingRecord.dueFee:0}}元
					</view>
					<view class="cost-bottom "  >
						实时费用
					</view>
				</view>
				<view class="line"></view>
				<view class="">
					<view class="cost-top">
						{{detail.balance>0?detail.balance:0}}元
						<view class="iconfont cost-font" @click="gotoUrl('pages/user/finance/recharge')" >&#xe633;</view>
					</view>
					<view class="cost-bottom">
						账户余额
					</view>
				</view>
			</view>
			<view class="power">
				<view>
					<view class="power-num">
						{{chargingRecord.chargeVoltage?chargingRecord.chargeVoltage:0}}v
					</view>
					<view class="power-text">
						电压
					</view>
				</view>
				<view class="line"></view>
				<view>
					<view class="power-num">
						{{chargingRecord.chargingPower?chargingRecord.chargingPower/1000:0}}kW
					</view>
					<view class="power-text">
						功率
					</view>
				</view>
				<view class="line"></view>
				<view>
					<view class="power-num">
						{{chargingRecord.chargeAmpere?chargingRecord.chargeAmpere:0}}A
					</view>
					<view class="power-text">
						电流
					</view>
				</view>
			</view>
			<view class="info" >
				<view class="info-name">
					{{chargingRecord.chargeStrategy==0?'充电模式':''}}
					{{chargingRecord.chargeStrategy==2?'充电金额':''}}
				</view>
				<view class="info-text" >
					{{chargingRecord.chargeStrategy==0?'充满自停':''}}
					{{chargingRecord.chargeStrategy==2?chargingRecord.estimateFee+'元':''}}
				</view>
			</view>
			
			<view class="info" >
				<view class="info-name">
					优惠券
				</view>
				<view class="info-text" style="color:red">
					{{couponObj&&couponObj.useText?couponObj.useText:'未使用'}}
				</view>
			</view>
			<view class="info" v-if="chargingRecord.carNumber">
				<view class="info-name">
					充电车辆
				</view>
				<view class="info-text">
					{{chargingRecord.carNumber}}
				</view>
			</view>
			<view class="info">
				<view class="info-name">
					站点
				</view>
				<view class="info-text">
					 {{chargingRecord.stationName}}
				</view>
			</view>
			<view class="info">
				<view class="info-name">
					充电桩
				</view>
				<view class="info-text">
					 {{chargingRecord.deviceName}}枪{{chargingRecord.channelNo}} 
					
				</view>
			</view>
			
			<view class="info" v-if="price" style="line-height: 23px;">
				<view class="info-text" style="text-align: left;"  >
					<view style="font-weight: bold;font-size: 20px;">当前价格</view>
					<view class="info-name2" >
						{{price.startTime}}-{{price.endTime}}
					</view>
				</view>
				<view class="info-text"  style="line-height: 23px;">
					<view><span style="color: #FF3D00;font-size: 20px;"><b>{{price.costPrice}}</b></span>元/度</view>
					
					<view class="info-name2">
						电价:{{price.electricityPrice}}元 | 服务费:{{price.servicePrice}}元
					</view>
				</view>
				
				
				
			</view>
			
			
		 
			<view class="bottom2" >
				<u-button type="primary"  @click="submit"
				 :style="(chargingRecord.status==0||chargingRecord.status==1||chargingRecord.status==4)?'background-color: #00b962':'background-color: #9be6c2;'"
				 shape="circle" >结束充电</u-button>
			</view>

			<u-modal v-model="show" @confirm="confirmPhone" 
			:confirm-text="confirmText"  confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone">
			</u-modal>
			
			<u-modal v-model="show2" @confirm="gotoGz" 
			cancel-text="暂不关注"  @cancel="cancelGz"
			confirm-text="前往关注"
			
			 confirm-color="#53b56b"
				:show-cancel-button="true" 
				ref="uModal2" :asyncClose="true" 
				 >
				<view style="padding: 15px;"
				
				>请关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，以便第一时间收到充电结束消息提醒</view>
			</u-modal>
 			</view>
		</view>
	</view>
</template>


<script>
	var formatNum=function(num) {
		let res = Number(num);
		return res < 10 ? '0' + res : res;
	};
	import * as api from "@/apis/site.js"
	
	import * as API from '@/apis/chargeProcess.js'
	import * as API_weixin from '@/apis/weixin.js'
	import * as userAPI from '@/apis/user.js'
	
	import {
		newDate,
		secondsDistance,
		hourDistanceArr
	} from '@/utils'
	export default {
		data() {
			return {
				message: '',
				elderMode:false,
				timer:'',
				title: '联系客服',
				content: '0716-8123456',
				confirmText: '拨打电话',
				detail:{},
				percent: 0,
				percentValue: 0,
				show3:false,
				consumerPhone: "",
				id: "",
				chargingGun: {},
				chargingRecord: {},
				couponObj:{},
				show: false,
				show2: false,
				isReady:true,
				waitNum:'',
				projectName:"",
				userCard:null,
				price:null,
			}
		},
		onLoad(op) {
			this.projectName=process.car.ProjectName;
			
			var plus=this.carhelp.getPersonInfoPlus()
			if(plus){
				this.userCard=plus.userCard;
			}
			if (op.id) {
				this.id = op.id;
				this.init()
				this.getInfo()
			}
			var consumerPhone = this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
			

		},
		onShow() {
		
			if(!this.isReady){
				this.isReady=true;
				this.addpercent();
				this.getInfo()
			}
			
		},
		onHide() {
			this.isReady=false;
			console.log("onHide")
			},
		onUnload() {
				console.log("onUnload")
			this.isReady=false;
		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			this.addpercent()
		},
		computed:{
			userCardBool(){
				if(this.chargingRecord&&this.chargingRecord.userCardId){
					
					return true;
				}
				return false
			}
		},
		methods: {
			getChargingStationPrice(id){
				 
				if(!id||id==undefined){
					return 
				}
				//id='e012f9fe-90a8-4a47-bb64-26ea139c3c05'
				api.getChargingStationPrice({
					stationId:id
				}).then((res)=>{
					let date = new Date();
					let hours = date.getHours();
					let minutes = date.getMinutes();
					let seconds = date.getSeconds();
					let date_str =  formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
					if(res.data.prices&&res.data.prices.length){
						
						for(var i in  res.data.prices[0].priceList){
							var item=res.data.prices[0].priceList[i];
							if(date_str>=item.startTime &&  date_str<= item.endTime)
							{
								this.price=	item								
							}
						}
						
					}
					
					
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			showToast() {
				this.$refs.uToast.show({
					title: '提交成功',
					type: 'success'
				})
			},
			submitMessage() {
				if(!this.message) {
					uni.showToast({
						title: "请填写反馈内容",
						icon: "none"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userAPI.feedback({content: this.message}).then(response => {
					uni.hideLoading()
					this.message = '';
					this.showToast();
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
				  
			  } 
			},
			cancelGz(){
				this.carhelp.setGzDate()
			},
			gotoGz(){
				this.carhelp.setGzDate()
				var url="https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href=url
				
			},
			gotoMain(i){
				if(i==0){
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}
				if(i==1){
					uni.navigateTo({
					
						url:"/pages/record/details?id="+this.id
					})
				}
			},
			addpercent(){
				this.timer=this.getPercent()
				if(this.isReady){
					setTimeout(()=>{	
						this.percentValue++;
						if(this.percentValue>=100){
							this.percentValue=0;
						}
						this.addpercent()
					},100)
				}
			},
			getPercent2() {
				var ms=this.chargingRecord.chargingMinute*60;
				
				var Hour = parseInt(Math.floor(ms / (60 * 60)));
				var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
				var S = parseInt(Math.floor(ms % (60) ));
				
				var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+ ":" + (S > 9 ? "" : "0") + S
				 
			
				return obj;
			},
			getPercent() {
				if(!this.chargingRecord.startTime){
					return '00:00:00'
				}
				var Hour=0;
				var Fen=0;
				var S=0;
				if (this.chargingRecord.status == 1) {
					var second = secondsDistance(newDate(this.chargingRecord.startTime));
				
				var ms=second;
				
				 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;
			},
			init() {
				 
			
				API.personalCenter().then((res) => {
					this.detail = res.data
					 
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			checkSubscribe(){
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId() 
				}).then((res) => {
					
					if(res.data=="0"){
						
						this.show2=true;
					}else{
						this.carhelp.setGzDate() 
					}
					
					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			getInfo() {
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				API.chargingDetail({
					id: this.id
				}).then((res) => {
					
					this.chargingRecord = res.data.chargingRecord
					//(this.chargingRecord)
					this.couponObj= res.data.coupon
					this.chargingGun = res.data.chargingGun
					this.waitNum=res.data.chargingRecord.waitNum;
					this.getChargingStationPrice(this.chargingGun.stationId )
					//this.isReady = true;
					//直流
					if(this.chargingGun.gunType==1){
						
						if (this.chargingRecord.status == 1) {
							this.percent=this.chargingGun.soc
							
							
						}
					}else if(this.chargingGun.gunType==2){
						//交流
					}
					if (this.chargingRecord.status == 1) {
						if(this.carhelp.getGzDate()&&!this.show2){
							
							this.checkSubscribe()
							
						}
					}
					
					if(this.isReady&&this.chargingRecord.status!=2){
						var time=500;
						if(this.chargingRecord.status==0){
							
						}else{
							time=3000;
							this.init();
						}
						
						setTimeout(()=>{
							this.getInfo();
						},time)
					}
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submit() {
				if(this.chargingRecord.status==0||this.chargingRecord.status==1||this.chargingRecord.status==4){
					
				}else{
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认结束充电？',
					success: res => {
						if (res.confirm) {
							//付钱  改为组件
							this.confirm()
				
						} else if (res.cancel) {
							//('用户点击取消');
						}
					}
				});
			},
			confirm() {
			
				////(JSON.stringify(this.submitForm))
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			
				//this.submitForm.deviceNo = this.detail.deviceNo;
				API.stopCarCharging({
					chargingRecordId:this.chargingRecord.id
				}).then((res) => {
					this.getInfo()
				}).catch(error => {
					
					uni.showToast({
						title: error
					})
			
				})
			},

		}

	}
</script>
<style>
	page {
		background: #fff;
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	.progress-bar-main{
		.info-name2{
			color: #777777 ;
			font-size:14px;
		}
		.info-name{
			font-weight:bold;
			font-size: 20px;
			
		}
	}

	@import "@/_theme.scss";
	.tittle-font {
		@include themeify{
			font-size: themed('font-size7');
		}
/*		font-size: 24px;*/
		position: fixed;
		top: 12px;
		right: 16px;
		z-index: 99999;

	}

	.bot {
		width:100%;
		height:0;
		padding-top: 100%;
		border: 2px #00b962 dotted;
		border-radius:100%;
		box-sizing: border-box;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
	}

	.progress-bar {

		text-align: center;
		    margin-top: 20px;
		/deep/.u-circle-progress {
			
			position: relative;
			// min-width:220px;
			// min-height: 220px;
		}

		.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}

		.u-progress-info {
			@include themeify{
				font-size: themed('font-size6');
			}
/*			font-size: 22px;*/
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: rgba(51, 51, 51, 100);
		}

		/deep/.u-progress-dot[data-v-05b104e0] {
			display: none;
		}

		/deep/.u-circle-progress[data-v-cab6fc66] {
			margin: 30px;
		}

	}

	.starting {
/*		height: 22px;*/
		color: rgba(0, 185, 98, 100);
		@include themeify{
			font-size: themed('font-size3');
			height:themed('font-size6');
		}
/*		font-size: 16px;*/
		text-align: center;
		margin-top: 10px;
	}

	.timer {
		height: 43px;
		color: rgba(51, 51, 51, 100);
		@include themeify{
			font-size: themed('font-size13'); 
		}
/*		font-size: 36px;*/
		text-align: center;
		margin-top: 40px;
	}

	.charged {
/*		height: 20px;*/
		color: rgba(153, 153, 153, 100);
		@include themeify{
			font-size: themed('font-size2'); 
			height:themed('font-size5')
		}
/*		font-size: 14px;*/
		text-align: center;
		margin-top: 4px;
	}

	.cost {
		// width: 50%;
		padding: 0 50px;
		margin-top: 16px;
		    margin: auto;
		    width: 280px;
		display: flex;
		justify-content: space-between;

		.cost-top {
			line-height: 33px;
			text-align: center;
			@include themeify{
				font-size: themed('font-size7');  
			}
/*			font-size: 24px;*/
			position: relative;

			.cost-font {
				position: absolute;
				top: 0;
				right: -25px;
				color: #ff6200;
				@include themeify{
					font-size: themed('font-size7');  
				}
/*				font-size: 24px*/
			}
		}

		.cost-bottom {
			@include themeify{
				line-height: themed('font-size5');  
			}
/*			line-height: 20px;*/
			color: #999999;
			text-align: center;
		}
	}

	.line {
		width: 0;
		height: 36px;
		border: 1px solid rgba(237, 237, 237, 100);
		margin-top: 10px;
		background-color: #ededed;
	}

	.power {
		display: flex;
		justify-content: space-around;
		padding: 0 55px;
		margin-top: 40px;

		.power-num {
/*			height: 27px;*/
			color: rgba(51, 51, 51, 100);
			@include themeify{
				font-size: themed('font-size5');  
				height: themed('font-size9');  	
			}
/*			font-size: 20px;*/
			text-align: center;
		}

		.power-text {
/*			height: 20px;*/
			color: rgba(153, 153, 153, 100);
			@include themeify{
				font-size: themed('font-size2');  
				height: themed('font-size5');  	
			}
/*			font-size: 14px;*/
			text-align: center;
		}
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin: 0 40px;
		// height: 48px;
		line-height: 48px;
		background-color: rgba(255, 255, 255, 100);
		color: rgba(16, 16, 16, 100);
		border-bottom: 1px solid #ededed;

		.info-text {
			@include themeify{
				line-height: themed('font-size7');   
			}
/*			line-height: 23px;*/
			padding: 13px 0 12px;
			//width: 200px;
			text-align: right;
		}
	}
	.charge-infos{
		padding: 20px 36px;
		margin: 0 auto;
		.item{
			display: flex;
			justify-content: space-between;
			color: rgba(102, 102, 102, 100);
			font-size: 18px;
			margin-bottom: 12px;
			.discounts{
				color:red
			}
		}
	}

	.bottom2 {
	
		padding: 12px 20px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;

		 
	}


	.progress-bar2 {
			text-align: center;
			margin-top: 20px;

		/deep/.u-circle-progress {
		//	margin-left: 23.3% !important;
			position: relative;

		}

		.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}

		.u-progress-info {
			display: block;
			@include themeify{
				font-size: themed('font-size11');   
			}
/*			font-size: 32px;*/
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: rgba(51, 51, 51, 100);

			.progress-text {
				@include themeify{
					font-size: themed('font-size2');   
				}
/*				font-size: 14px;*/
				text-align: center;
				color: #666666;
			}
		}

		/deep/.u-progress-dot[data-v-05b104e0] {
			display: none;
		}

		/deep/.u-circle-progress[data-v-cab6fc66] {
			margin: 30px;
		}

	}

	.time-price {
		display: flex;
		justify-content: space-between;
		padding: 0 65px;

		.item-num {
/*			height: 33px;*/
			color: rgba(51, 51, 51, 100);
			@include themeify{
				font-size: themed('font-size7');   
				height:themed('font-size12')
			}
/*			font-size: 24px;*/
			text-align: center;
		}

		.item-text {
			eight: 20px;
			color: rgba(153, 153, 153, 100);
			@include themeify{
				font-size: themed('font-size2');   
			}
/*			font-size: 14px;*/
			text-align: center;
		}
	}

	// .bottom {
	// 	background-color: #fff;
	// 	display: flex;
	// 	width: 91.4%;
	// 	padding: 0 16px;
	// 	margin:0 auto 40px;

	// 	.u-size-default {
	// 		border: 1px solid rgba(0, 185, 98, 100);
	// 		color: #00b962;	
	// 		width: 44%;
	// 	}
	// }

// 反馈
.feedback{
	padding: 20px 36px ;
	.title-1{
		color: rgba(16, 16, 16, 100);
		font-size: 18px;
	}
	.title-2{
		color: rgba(102, 102, 102, 100);
		margin-top: 8px;
		line-height: 20px;
	}
	textarea{
		margin-top: 16px;
		width: 93.5%;
		height: 100px;
		background-color: rgba(228, 228, 228, 100);
		color: rgba(153, 153, 153, 100);
		font-size: 16px;
		border-radius: 12px;
		padding: 12px;
		line-height: 23px;
		
	}
	.submit{
		height: 44px;
		line-height: 26px;
		border-radius: 50px;
		background-color: rgba(0, 185, 98, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 18px;
		margin-top: 16px;
	}
}


</style>



<style lang="scss" scoped>
	page {
		background-color: #f6f8f8;
		padding-bottom: 60px;
	}
.to-recharge{
	position: absolute;
	right: 22px;
	color: #333333
}
	// 充电状态
	.charge-state {
		
		width: 100%;
		


	}

	// 充电信息
	.charge-info {
		background-color: #ffffff;
		width: 88.2%;
		padding: 20px 10px 4px 7px;
		margin: 24px auto 0;
		box-shadow: 0px 2px 8px 0px #1A095A34;
		border-radius: 12px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.info-item {
			width: 33%;
			text-align: center;
			margin-bottom: 14px;

			.content {
				line-height: 33px;
				color: rgba(51, 51, 51, 100);
				font-size: 24px;
                font-weight: 550;
			}

			.name {
				line-height: 22px;
				color: rgba(119, 119, 119, 100);
				font-size: 16px;

			}
		}
	}

	//其他信息
	.else-infos {
		padding: 0 12px;
		background-color: #ffffff;
		width: 88.2%;
		margin: 16px auto 0;
		border-radius: 12px;
		.item{
			display: flex;
			justify-content: space-between;
			line-height: 23px;
			padding: 10px 0 10px 0;
			border-bottom: 1px solid #E9EBEE;
			.title{
				// width: 100px;
				width: 26.6vw;
				color: rgba(16, 16, 16, 100);
				font-size: 18px;
				font-weight: 550;
				.time{
					font-size: 13px;
					color: #666666 100%;
					font-weight: normal;
				}
			}
			.detail{
				// width: 197px;
				width: 52.5vw;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: right;
				.electrovalence{
					.num{
						color: rgba(255, 61, 0, 100);
						margin-right: 4px;
					}
				}
				
				.electrovalence-monthlyCard{
					font-size: 14px;
					color: #959595;
				}
			}
			
		}

	}
	// 底部按钮
	.bottom{
		background:white ;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 12px 24px;
		padding-bottom: 12px;
		    z-index: 999;
		.img-box{
			width: 48px;
			height: 48px;
			padding: 12px 0;
			background-color: rgba(210, 215, 213, 100);
			text-align: center;
			border-radius: 999px;
			
			img{
				
			}
		}
		button{
			width: 60.8%;
			background-color: black;
			color: #fff;
			height: 48px;
			border-radius: 50px;
			font-size: 18px;
		}
	}
</style>