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

<template>
	<view>
		<u-modal v-model="showlottery" class="showlottery"
		 :show-title="false" 
		 :show-confirm-button="false" >
			<lottery class="lottery"
			:width="lwidth"
			 :height="lheight"
			  :isUseDefaultOptions="false" 
			  :data="dataLottery" 
			    @beforePlay="beforePlay"
			  @afterPlay="afterPlay"
				@end="showlottery=false"
			 :setWinnerFn="getWinnerFn">
			</lottery>
		</u-modal>

		
		<view v-if="chargingRecord.status==2" style="background-color: #fff; ">
			<ujp-navbar title="充电结束">
			</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>

			<view class="progress-bar2" v-if="chargingGun.gunType==2">
				<u-circle-progress width="300" active-color="#53b56b" duration='20' percent="100" border-width="20">
					<view class="u-progress-content">

						<text class='u-progress-info'>
							<p style="text-align: center;">
								<!-- {{chargingRecord.electricQuantity?(chargingRecord.electricQuantity/10000).toFixed(2):0}} -->
								{{chargingRecord.actualFee?chargingRecord.actualFee.toFixed(2):0}}
							</p>
							<p class="progress-text">充电金额(元)</p>
						</text>

					</view>


				</u-circle-progress>
			</view>
			<view class="progress-bar3" id="pieEcharts" v-show="chargingGun.gunType==1">
				<ujp-circle-progress  width="500" active-color="#53b56b" duration='20' :percent="chargingRecord.startSoc" :percentEnd="chargingRecord.endSoc" border-width="20">
				
					<view class="u-progress-content">
					
						<text class='u-progress-info'>
							<p style="text-align: center;">
								{{chargingRecord.actualFee?chargingRecord.actualFee.toFixed(2):0}}
							</p>
							<p class="progress-text">充电金额(元)</p>
						</text>
					
					</view>
				</ujp-circle-progress>
			<!-- <ujp-circle-progress  width="500" active-color="#53b56b" duration='20'
			 :percent="42" :percentEnd="56" border-width="20">
			</ujp-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" v-if="chargingGun.gunType==1&&chargingRecord.startSoc!=null&&chargingRecord.endSoc!=null">
				<view class="info-name">
					充电SOC
				</view>
				<view class="info-text">
					{{chargingRecord.startSoc}}%>{{chargingRecord.endSoc}}%
				</view>
			</view>
			
			<view class="info" v-if="chargingRecord.discountAmount">
				<view class="info-name">
					实际减免(优惠券)
				</view>
				<view class="info-text" style="color:red">
					{{chargingRecord.discountAmount.toFixed(2)}}元
				</view>
			</view>
			<view class="info" v-if="chargingRecord.dueServiceMoney&&chargingRecord.totalServiceMoney&&chargingRecord.dueServiceMoney!=chargingRecord.totalServiceMoney">
				<view class="info-name">
					优惠金额
				</view>
				<view class="info-text" style="color:red">
					{{(chargingRecord.dueServiceMoney-chargingRecord.totalServiceMoney).toFixed(2)}}元
				</view>
			</view>
			
			
			<p style="color: rgba(119, 119, 119, 1);font-size: 24rpx;    text-align: end;    margin: 0 80rpx;"
			 v-if="chargingRecord.quickChargeReduce">快充订单满{{chargingRecord.quickChargeDegree}}度服务费
			 
			
			 
			 <span v-if="chargingRecord.serviceDiscountRatio==0" >免单</span>
			  <span v-else >{{discountRatio10(chargingRecord.serviceDiscountRatio)}}折</span>
			 
			 </p>
			 
			 <p style="color: rgba(119, 119, 119, 1);font-size: 24rpx;    text-align: end;    margin: 0 80rpx;"
			  v-if="chargingRecord.quickChargeContentId">系统自动选择最低折扣结算</p>
			  
			<view class="info">
				<view class="info-name">
					充电金额
				</view>
				<view class="info-text">
					{{chargingRecord.actualFee?chargingRecord.actualFee.toFixed(2):0}}元
				</view>
			</view>

			<view class="info" v-if="chargingRecord.remark">
				<view class="info-name" style="width: 80px;    white-space: pre;">
					结束原因
				</view>
				<view class="info-text" style="color: red;"  @click="uMessageShow">
					{{chargingRecord.remark}}
					<br/><span v-if="chargingRecord.updateBy=='cfyxz'" style="color: #00b962;">点击查看小优推荐</span>
				</view>
			</view>

			<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-min" v-if="userCardBool">
				<view class="info-name">
					会员活动
				</view>
				<view class="info-text" v-if="userCard.classify==1">
					折扣卡
				</view>
				<view class="info-text" v-if="userCard.classify==2">
					<template v-if="userCard.monthlyRentCard.type==4">
						{{userCard.monthlyRentCard.name}}
					</template>
					<template v-else>
						充电服务费{{userCard.monthlyRentCard.serviceFeeDiscountRate/10}}折卡
					</template>
					<!-- 充电服务费{{userCard.monthlyRentCard.serviceFeeDiscountRate/10}}折卡 -->
				</view>
			</view>
			<view class="info-min" v-if="userCardBool&&userCard.classify==2">
				<view class="info-name">

				</view>

				<view class="info-text-min">
					剩余时长{{setValidity(thisdaysDistance(userCard.endTime))}} |
					剩余优惠电量{{userCard.chargedDegree>userCard.chargeDegreeLimit?0:(userCard.chargeDegreeLimit-userCard.chargedDegree).toFixed(0)}}度
				</view>
			</view>

			<view class="bottom-ww">
				<u-button size="default" shape="circle" @click="gotoMain(0)">返回首页</u-button>
				<u-button size="default" shape="circle" @click="gotoMain(1)">查看订单详情</u-button>
			</view>
			
			<view class="useFreeCoupon" v-if="userParkingCoupon">
				<view  class="title " >温馨提示：车辆出场时可出示该券</view>
				<view class="details showCoupon"  @click="gotoUrl('pages/record/coupon?id='+id)"  >
					<view class="showCoupon1 ">
						<view  class="showCoupon11">
							<span class="showCoupon111" >免费停车优惠卷</span>
						</view>
						<view  class="showCoupon12 padding1"   >{{ minuteConversion(userParkingCoupon.freeMinute,true)}}</view>
						
						<view  class="showCoupon13 padding1">充电时间 {{ getPercentshowCoupon(chargingRecord)}}</view>
					</view>
					<view class="showCoupon2 padding2">
						<u-icon name="coupon-fill" size="48" color="#FF3D00"></u-icon>
						<view  class="showCoupon22">
							出示
						</view>
					</view>
				</view>
			</view>
			
			<view class="piccBanner" v-for="(itemJNT,index ) in bannerListJNTend" @click="gotoUrl2(itemJNT.linkUrl)"
				v-show="index==0" :key="index" style="
				text-align: center;
				padding: 0px 16px;">

				<image :src="itemJNT.picUrl" style="height: 204rpx;width: 100%;border-radius: 10px;"></image>
			</view>
			<u-line color="#E6E6E6 100%" v-if="bannerListJNTend.length==0" 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"/>
			 -->

			<u-divider color="#B6BDC3" style="margin-bottom:20px;" bg-color="#ffffff">已经到底了</u-divider>


			<view>
				<u-toast ref="uToast" />
			</view>
		</view>

		<view style="background-color: #f7f8f8; padding-bottom: 0px;" class="progress-bar-main"
			v-else>

			<u-modal v-model="descriptionShow2do" confirm-text="知道了" title="【充电SOC限制】">
				<view style="padding: 10px;font-size: 14px;">
					为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为{{chargingStation.maxSoc}}%，即充电量达到满充电量{{chargingStation.maxSoc}}%时，充电设施将自动结束充电。
				</view>
			</u-modal>


			<u-modal v-model="showVin" class="showOss" @cancel="confirm()" confirm-text="继续充电" cancel-text="结束充电"
				:show-title="false" :show-cancel-button="true">
				<view class="slot-content">

					<u-image width="120px" style="margin: auto;" mode="widthFix"
						src="@/assets/static/img/充电中-缺省页.png"></u-image>
					<view style="padding:0 40px;font-size: 36rpx;">
						系统检测出当前充电车辆与折扣卡所绑定的车辆不一致，该车辆可以正常充电，但无法享受折扣卡免服务费优惠。

					</view>
				</view>
			</u-modal>

			<view>
				<ujp-navbar :title="navbartitle">

					<view class="to-recharge" v-if="chargingRecord.payType==2"
						@click="gotoUrl('pages/user/finance/recharge')">
						去充值
					</view>
				</ujp-navbar>

				<u-alert-tips type="warning"
					v-if="chargingGun.gunType==1&&chargingStation.maxSoc&&chargingStation.maxSoc!=100" :descStyle="{
					     fontSize: '28rpx',
					     color: '#ef7a30',
				 }" @click="alerttipsCk2" :show-icon="true"
					:description="'【充电SOC限制】充电量达到满充电量'+chargingStation.maxSoc+'%时，充电设施将自动结束充电。点击查看详情>'"></u-alert-tips>

				<!-- 充电状态 -->
				<view class="charge-state" v-if="chargingGun.gunType==1">
					<view class="progress-bar">
						<u-circle-progress width="400" :active-color="percentColor" duration='20'
							: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 style="
											font-size: 60rpx;
											font-weight: bold;
											color: #009B52 ;
										">{{chargingRecord.statusText}}</view>

									<view v-if="chargingGun.gunType==1" style="
													font-size: 32rpx;
													font-weight: bold;
												">SOC {{percent}}%</view>

									<view v-else style="
											font-size: 32rpx;
											font-weight: bold;
										"></view>
								</text>


							</view>

							<view class="bot"></view>
						</u-circle-progress>
					</view>


				</view>
				<view class="charge-state-2024-04-01" v-if="chargingGun.gunType==2">
					<view class="charge-state-img">
						<img src="@/assets/img/docharging/2.png">
					</view>
					<view class="charge-state-img2">
						<img src="@/assets/img/docharging/1.png">
					</view>
					<view class="charge-state-img3">
						{{chargingRecord.statusText}}
					</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">
							{{chargingRecord.dueFee?chargingRecord.dueFee.toFixed(2):'0.00'}}
						</view>
						<view class="name">
							预计费用(元)
						</view>
					</view>
					<view class="info-item" v-if="chargingRecord.payType==1">
						<view class="content" v-if="chargingRecord.estimateFee">

							{{chargingRecord.estimateFee.toFixed(2)}}

						</view>
						<view class="name">
							预充金额(元)
						</view>
					</view>
					<view class="info-item" v-if="chargingRecord.payType==4">
						<view class="content" v-if="detail.chargingFunds>0||detail.chargingFunds==0">

							{{detail.chargingFunds>0&&chargingRecord.dueFee?((detail.chargingFunds*1000-chargingRecord.dueFee*1000)/1000).toFixed(2):detail.chargingFunds.toFixed(2)}}

						</view>
						<view class="name">
							充电金(元)
						</view>
					</view>
					<view class="info-item" v-else>
						<view class="content" v-if="detail.balance>0||detail.balance==0">

							{{detail.balance>0&&chargingRecord.dueFee?((detail.balance*1000-chargingRecord.dueFee*1000)/1000).toFixed(2):detail.balance.toFixed(2)}}

						</view>
						<view class="name">
							{{chargingRecord.payType==3?'企业':'账户'}}余额(元)
						</view>
					</view>

					<view class="info-item" v-if="infoShow">
						<view class="content">
							{{chargingRecord.chargeVoltage?chargingRecord.chargeVoltage:0}}V

						</view>
						<view class="name">
							电压
							<u-icon name="error-circle" v-if="chargingGun.gunType==1" @click="voltageShow=true"
								size="28"></u-icon>

						</view>
					</view>
					<view class="info-item" v-if="infoShow">
						<view class="content">

							{{chargingRecord.chargingPower?(chargingRecord.chargingPower/1000).toFixed(2):0}}kW

						</view>
						<view class="name">
							功率
						</view>
					</view>
					<view class="info-item" v-if="infoShow">
						<view class="content">
							{{chargingRecord.chargeAmpere?chargingRecord.chargeAmpere:0}}A
						</view>
						<view class="name">
							电流
						</view>
					</view>
					<template v-if="NODE_ENV!=='production'">


						<!-- <view class="info-item" v-if="infoShow">
						<view class="content">
							{{chargingGun.beforeMeter?chargingGun.beforeMeter:0}}度
						</view>
						<view class="name">
							充电前电表
						</view>
					</view> -->
						<!-- <view class="info-item" v-if="infoShow">
						<view class="content">
							{{chargingGun.nowMeter?chargingGun.nowMeter:0}}度
						</view>
						<view class="name">
							当前电表
						</view>
					</view> -->
					</template>

					<view class="spread" @tap="spreadInfo">
						<view class="" v-if="this.infoShow==false">
							全部信息<text class="iconfont">&#xe62b;</text>
						</view>
						<view class="pack-up" v-if="this.infoShow==true">
							收起<text class="iconfont">&#xe605;</text>
						</view>
					</view>


				</view>
				<!-- 其他信息 -->
				<view class="else-infos">

					<u-modal v-model="voltageShow" :titleStyle="{
						'font-size': '22px'

					}" title="更多充电信息" confirm-text="关闭">
						<view style="padding: 15px;" class="voltageShow">
							<view>最高允许单体电压<span>{{voltageShowNum(chargingGun.maxAllowSingleVoltage)}}V</span>

							</view>
							<view>最高单体电压<span>{{voltageShowNum(chargingGun.singleMaxVoltage)}}V</span>

							</view>
							<view>最低单体电压<span>{{voltageShowNum(chargingGun.singleMinVoltage)}}V</span>

							</view>
							<view>最高允许单体温度<span>{{voltageShowNum(chargingGun.maxAllowTemperature)}}℃</span>

							</view>
							<view>最高单体温度<span>{{voltageShowNum(chargingGun.singleMaxTemperature)}}℃</span>

							</view>
							<view>充电枪温度<span>{{voltageShowNum(chargingGun.gunTemperature)}}℃</span>

							</view>
						</view>
					</u-modal>
					<u-modal v-model="parkingTips" title="新能源汽车停车费说明" confirm-text="知道了" confirm-color="#53b56b">
						<view style="padding: 15px;" v-html="chargingStation.parkingSimpleDescription"></view>
					</u-modal>
					<view class="item" v-if="chargingStation.parkingSimpleDescription">

						<view class="title" style="
						width: 100%;    display: flex;
    justify-content: space-between;
					" @click="parkingTips=true">
							<view>停车费说明 </view>
							<view style="    font-size: 32rpx;
    font-weight: 400;">
								{{chargingStation.parkingDescription}}
								<u-icon name="arrow-right" style="margin-top: 6px;" size="28"></u-icon>
							</view>
							
						</view>


					</view>
					<view class="item" v-if="false">
						<view class="title">
							充电车辆
						</view>
						<view class="detail">
							{{chargingRecord.carNumber?chargingRecord.carNumber:'未绑定'}}
						</view>

					</view>
					<view class="item" v-if="price.costPrice">
						<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"
									v-if="userCard&&userCard.classify==1&&chargingRecord.userCardId">{{price.electricityPrice.toFixed(2)}}</text>
								<text class="num" v-else>

									<template
										v-if="(personInfo&&personInfo.userType==2)&&(chargingStation.giveDiscount||price.discountServicePrice)">
										<span>{{(price.electricityPrice+price.discountServicePrice).toFixed(2)}}</span>
									</template>
									<template v-else>
										{{(price.electricityPrice+price.servicePrice).toFixed(2)}}

									</template>

								</text>
								元/度
							</p>
							<p class="electrovalence-monthlyCard">电价:{{price.electricityPrice}} | 服务费:

								<template v-if="userCard&&userCard.classify==1&&chargingRecord.userCardId">
									0(月卡)
								</template>
								<template v-else>
									<template
										v-if="(personInfo&&personInfo.userType==2)&&(chargingStation.giveDiscount||price.discountServicePrice||price.discountServicePrice==0)">
										<span
											style="    text-decoration: line-through;">{{price.servicePrice}}</span>折后{{price.discountServicePrice}}
									</template>
									<template v-else>
										{{price.servicePrice}}
									</template>

								</template>

							</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.toFixed(2)+'元':''}}

						</view>

					</view>

					<view class="itemTips" v-show="showChargingTag">
						<view class="itemTips1">
							<img src="@/assets/img/riFill-lightbulb-flash-fill.svg">
							充电小贴士：
						</view>
						<view class="itemTips2" v-html="chargingTag">

						</view>
						<view class="itemTips3">
							<u-button type="success" @click="gotoBtn()" class="itemTips3Btn"
								shape="circle">{{chargingTagUrl=='/pages/login/login'?'前往登录':'前往了解'}}</u-button>
						</view>

					</view>

					<view class="item">
						<view class="title">
							优惠券
						</view>
						<view class="detail">

							{{couponObj&&couponObj.useText?(couponObj.useText=='服务费0折'?'免服务费':couponObj.useText):'未使用优惠券'}}

						</view>

					</view>
					<view class="item" v-if="userCardBool">
						<view class="title">
							会员活动
						</view>
						<view class="detail" v-if="userCard.classify==1">
							折扣卡
						</view>
						<view class="detail" v-if="userCard.classify==2">

							<template v-if="userCard.monthlyRentCard.type==4">
								{{userCard.monthlyRentCard.name}}
							</template>
							<template v-else>
								充电服务费{{userCard.monthlyRentCard.serviceFeeDiscountRate/10}}折卡
							</template>


						</view>

					</view>
					<view class="item" style="    border-bottom: 0;"
						v-if="(personInfo.memberLevel==3||personInfo.memberLevel==4)">
						<view class="title">
							快捷充电
						</view>
						<view class="detail" style="display: flex;">
							<span style="   color: #959595;">{{checked2?'已开启':'已关闭'}}</span><u-switch size="40"
								v-model="checked2" active-color="#00E266" @change="checkedChange2"></u-switch>

						</view>

					</view>
					<view class="item" style="    border-bottom: 0;">
						<view class="title">
							充电站点
						</view>
						<view class="detail">
							{{chargingRecord.stationName}}
							<br />{{chargingRecord.deviceName}}
						</view>

					</view>



				</view>



				<view class="piccBanner" v-for="(itemJNT,index ) in bannerListJNT" @click="gotoUrl2(itemJNT.linkUrl)"
					v-show="index==0" :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="common-problem ">
					<view class="title">
						常见问题
					</view>
					<view class="tabs">
						<u-tabs active-color="#333333" inactive-color="#999999" :list="tabList" :is-scroll="false"
							:current="current" @change="change"></u-tabs>
					</view>
					<view class="collapse" v-for="(itemList,i) in newsList" :key="i" v-show="current==i">
						<!-- -->

						<u-collapse v-if="itemList.length">
							<u-collapse-item v-for="(item, index) in itemList" :title="(index+1)+'.'+item.title"
								:key="index">
								<!-- 					<textarea maxlength="-1" :auto-height="true" v-model="item.content" readonly ></textarea>
					 -->
								<view v-html="item.content"></view>
							</u-collapse-item>
						</u-collapse>

					</view>
				</view>

				<view class="bottom-qq">
					<view class="img-box" @click="gotoUrl('pages/service/service')">
						<img src="../../../assets/img/customer-service-2-line.svg" alt="">
						<view>联系客服</view>
					</view>
					<view class="button-box">


						<button
							:style="(chargingRecord.status=='0'||chargingRecord.status=='1'||chargingRecord.status=='4')?'':'background-color: #b3abab;'"
							@click="submit">
							<img src="../../../assets/img/9-4/riLine-shut-down-line.svg" alt="">
							结束充电</button>
					</view>
					<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">
			</view>
		</view>
		<uMessage ref="uMessage" :stationId="chargingGun.stationId" :deviceNo="chargingGun.deviceNo" :channelNo="chargingGun.channelNo"   ></uMessage>
		<view class="slogan-5 " v-show="bannerListTop.length"
			@click="showTop=true,getBannerInfoTopBl=true">
		
			<u-icon :class="{
							imageshake :true
						 }" size="45" name="gift"></u-icon>
		
		</view>
		<u-modal v-model="showTop" v-if="getBannerInfoTopBl" class="showOss showOssK" :show-title="false"
			:show-confirm-button="false">
			<view class="slot-content">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2500"
					:duration="500">
		
					
		
					<swiper-item class="swiperitem" v-for="(item,i) in bannerListTop" :key="i">
		
		
		
						<u-image width="500" height="500" bgColor="#ff000000"
							style="margin: auto;min-height: 250px;" mode="widthFix" @click="clickBannerTopI(i)"
							:src="item.picUrl">
							<view slot="loading" style="height: 200px;">
								<u-loading mode="flower" size="186">
		
								</u-loading>
		
							</view>
		
						</u-image>
		
					</swiper-item>
				</swiper>
		
		
				<u-image width="36px" style="margin: auto; margin-top: 10px;" mode="widthFix" @click="showTop=false"
					src="@/assets/img/if-close-line-circled.png"></u-image>
		
			</view>
		</u-modal>
		
		
		
	</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_index from '@/apis/index.js'
	import * as API from '@/apis/chargeProcess.js'
	import * as API_weixin from '@/apis/weixin.js'
	import * as userAPI from '@/apis/user.js'
	import * as newsApi from '@/apis/news.js'
	import * as echarts from "echarts";
	import uMessage from '@/components/UMessage.vue'

	import lottery from '@/components/lottery/index.vue';


	import {
		newDate,
		secondsDistance,
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime,
		daysDistance,minuteConversion
	} from '@/utils'
	export default {
		components:{
			lottery,uMessage
		},
		data() {
			return {
				showlottery:false,
				
				barstyle: {
					backgroundColor: "#19be6b"
				},
				checked2: false,
				bannerListJNT: [],
				bannerListJNTend: [],
				bannerListYXJ: [],
				bannerListTop:[],
				tabList: [
					{
						name: '软件使用',
						type: 'CJWT-RJSY'
					},{
						name: '故障',
						type: 'CJWT-GZ'
					},
					
					{
						name: '活动优惠',
						type: 'CJWT-YHHD'
					},
				],
				current: 0,
				newsList: [
					[],
					[],
					[]
				],
				newsType: 'CJWT-RJSY',
				pageIndex: 1,
				recordsTotal: 0,
				list: [

				],
				NODE_ENV: process.car.NODE_ENV,
				message: '',
				elderMode: false,
				timer: '',
				title: '联系客服',
				content: '0716-8123456',
				confirmText: '拨打电话',
				detail: {},
				navbartitle: "充电中",
				percent: 0,
				percentValue: 0,
				show3: false,
				consumerPhone: "",
				id: "",
				chargingGun: {},
				chargingRecord: {},
				couponObj: {},
				show: false,
				show2: false,
				isReady: true,
				waitNum: '',
				projectName: "",
				userCard: null,
				price: {},
				prices: [],
				userParkingCoupon:null,
				chargingStation: {},
				parkingTips: false,
				showVin: false,
				showVinBl: false,
				descriptionShow2do: false,
				infoShow: false,
				voltageShow: false,
				showChargingTag: false,
				chargingTagUrl: false,
				chargingTag: false,
				personInfo: null,
				myChart: null,
				
				lwidth: 600,
				lheight: 600,
				
				lotteryIndex:-1,
				dataLottery: [
					{
						id: 2,
						name: '服务费5折',
						num:50,
						img: '',
						color: "#f7e2c3"
					},
					{
						id: 3,
							name: '服务费6折',
							num:60,
						img: '',
						color: "#fbf0df"
					},
					{
						id: 4,
							name: '服务费7折',
							num:70,
						img: '',
						color: "#f7e2c3"
					},
					{
						id: 5,
						name: '服务费8折',
						num:80,
						img: '',
						color: "#fbf0df"
					},
					{
							id: 1, // 唯一id
							num:0,
							name: '服务费免单', // 名称
							img: '', // 展示图片
							color: "#fff" ,// 轮盘区域底色
							
						},
						
				],
			
				getBannerInfoTopBl:true,
				showTop:false,
				showTopImg:"",
				showTopIndex: 0,
			}
		},
		onLoad(op) {
			if (this.NODE_ENV !== 'production') {
				this.infoShow = true
			}
			this.projectName = process.car.ProjectName;

			var plus = this.carhelp.getPersonInfoPlus()
			this.personInfo = this.carhelp.getPersonInfo()

			if (this.personInfo.quickCharging) {
				this.checked2 = true;
			}
			// if (plus) {
			// 	  this.userCard = plus.userCard;
			// }
			if (op.id) {
				this.id = op.id;
				this.init()
				this.getInfo()
			}
			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
			
			
			
			this.getBannerInfo("JNT-charging", "bannerListJNT");
			this.getBannerInfo("JNT-charging-end", "bannerListJNTend");
			this.getBannerInfo("YXJ-charging-end", "bannerListYXJ");


		},
		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()
			this.getNewsList();
		},
		computed: {
			percentColor() {
				if (this.percent == 0 || this.percent > 80) {
					return '#53b56b'
				} else if (this.percent > 50) {
					return '#85e43e'
				} else if (this.percent > 40) {
					return '#a8ac0d'
				} else if (this.percent > 20) {
					return '#c5c90c'
				} else if (this.percent > 0) {
					return '#f26747'
				} else {
					return '#53b56b'
				}
			},
			userCardBool() {
				if (this.chargingRecord && this.chargingRecord.userCardId && !this.showVinBl && this.userCard) {

					return true;
				}
				return false
			}
		},
		methods: {
			getBannerInfoTop(code) {
				if(!this.carhelp.getOpenId()){
					return
				}
				var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
				
				var time = this.carhelp.get("bannerListTop");
				if ((time && nowtime == time)) {
					this.getBannerInfoTopBl = false;
				}
				//特殊活动不考虑
				//this.getBannerInfoTopBl = true;
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				
				newsApi.getBannerInfo(code).then((res) => {
				
				
					this.bannerListTop = res.data;
				
				
					if (this.bannerListTop.length) {
						this.showTop = true;
						this.showTopImg = this.bannerListTop[0].picUrl;
						this.showTopIndex = 0;
				
					}
					this.carhelp.set("bannerListTop", nowtime);
					//this.test()
					var userInfo = this.carhelp.getPersonInfo();
				
					if (userInfo && userInfo.id) {
						//this.getf5surprised()
					} else {}
				
				
				
					//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"
					})
				})
			},
			uMessageShow(){
				if(this.chargingRecord.updateBy=='cfyxz'){
					this.$refs.uMessage.bShow()
				}
				
				this.getBannerInfoTop("charge-end-top");
				
			},
			getWinnerFn() {
				// 自定义抽奖结果 ，返回值为 options 奖品列表下标，若返回 -1，则会进行随机抽奖
				return this.lotteryIndex
			},
			beforePlay(){
				console.log("beforePlay....",this.lwidth)
			},
			afterPlay(result){
				// uni.showModal({
				// 	confirmText: "确定",
				// 	showCancel: false,
				// 	content: result.name,
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 		}
				// 	}
				// })
			
			},
			minuteConversion(a,b){
				return minuteConversion(a,b)
			},
			getPercentshowCoupon(chargingRecord,time,str) {
				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();
					if(time){
						date=date+time*1000*60
					}
					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)));
							
				if(str){
					var obj = "";
					if(Hour){
						obj+=Hour+"小时"
					}
					if(Fen){
						obj+=Fen+"分"
					}
					if(S){
						obj+=S+"秒"
					}
								
					return obj;
				}else{
					var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen + ":" + (S > 9 ? "" : "0") + S
								
								
					return obj;
				}
				
			},
			getPie() {
				
				
			},
			getPie2() {
				
				console.log("getPie")
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'), null, {
						width: uni.upx2px(450),
						height: uni.upx2px(450)
					});
				}
				var num0 = this.chargingRecord.startSoc;
				var num1 = this.chargingRecord.endSoc - this.chargingRecord.startSoc;
				var num2 = 100 - this.chargingRecord.endSoc;
				this.myChart.clear();
				var option = {


					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['65%', '70%'],
						labelLayout: {
							align: 'left'
						},

						labelLine: {
							show: true,
							smooth: 0,
						},
						data: [{
								value: num0,
								name: 'Search Engine'
							},
							{
								value: num1,
								name: 'Direct'
							},
							{
								value: num2,
								name: 'Email'
							}

						]
					}]
				};
				console.log(option)

				this.myChart.setOption(option);

			},
			clickBannerTopI(i) {
				var mod = this.bannerListTop[i];
				//this.showTop = false;
				this.clickBanner(0, true, mod)
			},
			clickBannerTop() {
				var mod = this.bannerListTop[this.showTopIndex];
				this.showTop = false;
				this.clickBanner(0, true, mod)
			},
			clickBanner(index, bl, modout) {
				var uurl = "";
				var mod = {}
				if (modout) {
					mod = modout;
				}else{
					mod =this.bannerList[index]
				}
				mod.clickUrl = mod.linkUrl
				
				if (mod.linkPicUrl && !bl) {
				
					this.showOss = true;
					this.showOssImg = mod.linkPicUrl;
					this.showOssIndex = index;
				
				} else if (mod.clickUrl == null) {
				
				} else if (mod.clickUrl.indexOf('http') == 0) {
				
					window.location = mod.clickUrl + uurl;
				} else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {
				
				} else if (mod.clickUrl.indexOf('#/') == 0) {
					if (mod.clickUrl.indexOf("?") == -1) {
						mod.clickUrl += '?';
					}
					var url = mod.clickUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url + uurl
					})
				} else if (mod.clickUrl == '#' || mod.clickUrl == '') {
				
				} else {
					uni.navigateTo({
						url: mod.clickUrl + uurl
					})
				}
			
			},
			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"
					})
				})
			},
			checkedChange2() {


				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API_index.changeQuickCharging({
					qucikStatus: this.checked2 ? 1 : 0
				}).then((res) => {
					var userInfo = this.carhelp.getPersonInfo();
					userInfo.quickCharging = checked2;
					this.carhelp.setPersonInfo(userInfo);
					uni.hideLoading();

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			thisdaysDistance(endTime) {

				var date = new Date()
				var date2 = newDate(endTime);
				return daysDistance(date, date2)

			},
			change(index) {
				this.current = index;
				this.newsType = this.tabList[index].type;
				if (this.newsList[this.current].length == 0) {
					this.getNewsList(true)
				}

			},
			getNewsList(bl) {
			
				if(bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}

				newsApi.newsInfoContentList({
					pageIndex: 1,
					pageSize: 100,
					shortName: this.newsType
				}).then((res) => {

					var newsList = res.data.data;
					this.newsList[this.current] = newsList.reverse()
					
					if(bl){
						uni.hideLoading();
						this.$forceUpdate()
					}
					//this.recordsTotal = res.data.recordsTotal		
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			gotoBtn() {
				uni.navigateTo({
					url: this.chargingTagUrl
				})
			},
			voltageShowNum(num) {
				if (num) {
					if (num < 0) {
						return 0
					}
					return num
				} else {
					return 0
				}
			},
			spreadInfo() {
				this.infoShow = !this.infoShow
			},
			alerttipsCk2() {
				this.descriptionShow2do = true;
			},
			vinCk() {

				if (this.userCard && this.userCard.vin && this.chargingGun && this.chargingGun.vin) {

					if (this.userCard.vin == this.chargingGun.vin) {
						return true
					} else {

						return false
					}
				} else {
					return true
				}
			},
			forPrice() {
				if (this.prices && this.prices.length) {
					let date = new Date();
					let hours = date.getHours();
					let minutes = date.getMinutes();
					let seconds = date.getSeconds();
					let date_str = formatNum(hours) + ':' + formatNum(minutes); //+ ' ' +formatWeek;

					for (var i in this.prices[0].priceList) {
						var item = this.prices[0].priceList[i];
						if (date_str >= item.startTime && date_str <= item.endTime) {
							this.price = item
						}
					}

				}
			},
			getChargingStationPrice(id) {
				if (this.prices && this.prices.length) {
					this.forPrice()
					return
				}
				if (!id || id == undefined) {
					return
				}
				//id='e012f9fe-90a8-4a47-bb64-26ea139c3c05'
				api.getChargingStationPrice2({
					stationId: id,
					payType: this.chargingRecord.payType,
					recordId: this.chargingRecord.id
				}).then((res) => {
					this.prices = res.data.prices
					this.chargingStation = res.data.chargingStation;
					this.userCard = res.data.regUserCard;
					
					this.forPrice()
					
					


				}).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 = process.car.gzUrl;
				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(() => {
						if (this.chargingGun.gunType == 2 || this.percent == 0) {
							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
					if (this.chargingRecord.payType == 3 && this.chargingRecord.entAccountId) {
						for (var i in this.detail.entRegList) {
							var item = this.detail.entRegList[i];
							if (item.enterpriseAccount.id == this.chargingRecord.entAccountId) {
								this.detail.balance = item.enterpriseAccount.totalAmount
							}
						}
					}
				}).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,
				// })
				var electricQuantity = 0;
				var obj = this.carhelp.get("carhelp_getChargeList")
				if (obj) {
					electricQuantity = parseInt(obj.electricQuantity / 10000)
				}

				API.chargingDetail({
					id: this.id,
					chargingKwh: electricQuantity
				}).then((res) => {
					this.showChargingTag = res.data.showChargingTag
					this.chargingTagUrl = res.data.chargingTagUrl
					this.chargingTag = res.data.chargingTag
					if(this.chargingRecord&&this.chargingRecord.status==1&&res.data.chargingRecord.status==2){
						this.lotteryApi(true)
					}
					this.chargingRecord = res.data.chargingRecord
					if (this.chargingRecord.carNumber) {
						this.navbartitle = this.chargingRecord.carNumber;
					}
					//(this.chargingRecord)
					this.couponObj = res.data.coupon
					this.chargingGun = res.data.chargingGun
					this.waitNum = res.data.chargingRecord.waitNum;
					this.userParkingCoupon=res.data.userParkingCoupon;
					this.getChargingStationPrice(this.chargingGun.stationId)
					//this.isReady = true;
					//直流
					if (this.chargingGun.gunType == 1) {

						if (this.chargingRecord.status == 1) {
							this.percent = this.chargingGun.soc
							//zkx
							//this.percent =12
							if (this.userCardBool && !this.showVinBl && !this.vinCk()) {
								this.showVin = true;
								this.showVinBl = true; //只提示1次
							}

						}
						if (this.chargingRecord.status == 2) {
							//this.getPie()
							
						}
					} else if (this.chargingGun.gunType == 2) {
						//交流
						if (this.chargingRecord.status == 2) {
							//this.percent=100;
						}

					}
					if (this.chargingRecord.status == 2) {
						//this.getPie()
						console.log(this.chargingGun.stationId,this.chargingGun.deviceNo,this.chargingGun.channelNo)
						setTimeout(() => {
							this.uMessageShow()
						}, 200)
						
					}
					//zkx
					//this.percent=42;
					if (this.chargingRecord.status == 1) {
						if (this.carhelp.getGzDate() && !this.show2) {
							//this.checkSubscribe()
						}
					}

					if (this.isReady && this.chargingRecord.status != 2) {
						var time = 1000;
						if (this.chargingRecord.status == 0) {

						} else {
							time = 3000;
							this.init();
						}
						console.log(time)
						setTimeout(() => {
							this.getInfo();
						}, time)
					}

					// if (this.chargingRecord.status == 2 && this.userCardBool) {
					// 	this.getHomePage()
					// }

					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getHomePage() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})



				API.userCard({
					stationId: this.chargingGun.stationId
				}).then((res) => {

					uni.hideLoading()
					this.userCard = res.data.regUserCard
					//this.canUse=res.data.canUse
					//this.user = res.data

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			
			lotteryApi(bl){
				
				if(this.chargingStation.quickChargeJoinActivity
				&&this.chargingStation.quickChargeReduceResult){
					//this.lotteryApi()
				}else{
					return
				}
				
				API.getRateByRecordId({
					recordId: this.chargingRecord.id
				}).then((res) => {
					
					if(res.data.serviceDiscountRatio!=null){
						
						this.lotteryIndex=this.dataLottery.findIndex(item=>{
							
							//console.log(res.data.serviceDiscountRatio,item.num,res.data.serviceDiscountRatio==item.num)
							return res.data.serviceDiscountRatio==item.num
						})
						console.log(this.lotteryIndex)
						if(this.lotteryIndex!=-1){
							this.dataLottery[this.lotteryIndex].weight=100
							
							this.showlottery=true
						}
						
					}else{
					
					}
					if(!bl){
						this.confirm()
					}
						
					
				}).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) {
							//付钱  改为组件
							
							if(this.chargingStation.quickChargeJoinActivity
							&&this.chargingStation.quickChargeReduceResult){
								this.lotteryApi()
							}else{
								//this.submitApi()
								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>
	.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;
		}

	}

	.common-problem {
		//margin: -125px 32rpx 0;
		box-shadow: 0px 2px 8px 0px #1A095A34;

		border-radius: 8px;
		background-color: #fff;
		padding: 20rpx 24rpx 48rpx 24rpx;
		margin: 32rpx 40rpx 40rpx 40rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(246, 246, 246, 1);
			padding-left: 32rpx;
		}

		.tabs {
			width: 400rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(246, 246, 246, 1);

			::v-deep .u-tab-bar {
				background-color: #00B962 !important;
			}
		}

		.collapse {
			padding: 0 32rpx;
		}
	}

	.voltageShow {
		color: rgba(119, 119, 119, 100);
		font-size: 18px;

		span {
			float: right;
			color: rgba(51, 51, 51, 100);
			font-size: 18px;
			// font-family: AlibabaPuHui-bold;
			font-weight: 550;
		}
	}

	.spread {
		width: 100%;
		background-color: rgba(244, 249, 247, 100);
		text-align: center;
		border: 1px solid rgba(206, 226, 217, 100);
		color: rgba(153, 153, 153, 100);
		line-height: 20px;
		border-radius: 0px 0px 12px 12px;
		padding: 4px 0;

		.iconfont {
			// font-size: 16px !important
		}
	}

	.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 {
		margin-bottom: 40rpx;
		text-align: center;

		// margin-top: 20px;
		::v-deep .u-circle-progress {
			background-color: #f7f8f8 !important;
			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);
		}

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

		::v-deep .u-circle-progress[data-v-cab6fc66] {
			margin: 40rpx;
		}

	}

	.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 80rpx;
		// height: 48px;
		line-height: 68rpx;
		background-color: rgba(255, 255, 255, 100);
		color: rgba(16, 16, 16, 100);
		//border-bottom: 1px solid #ededed;
		align-items: center;
		.info-name{
			    white-space: pre;
		}
		.info-text {

			line-height: 48rpx;
			padding: 4rpx 0 4rpx;
			//width: 200px;
			text-align: right;
		}
	}

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

		.info-text {

			line-height: 48rpx;
			padding: 4rpx 0 4rpx;
			//width: 200px;
			text-align: right;
		}

		.info-text-min {
			color: rgba(119, 119, 119, 1);
			font-size: 24rpx;

			//line-height: 48rpx;
			padding: 4rpx 0 4rpx;
			//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-bar3 {
		margin-top: 16rpx;
		display: flex;

		justify-content: center;
		.u-progress-content{
			color: rgba(16, 16, 16, 1);
			font-size: 72rpx;
			font-weight: bold;
			.progress-text{
				font-size: 36rpx;

				font-weight: bold;
			}
		}
		
	}

	.progress-bar2 {
		text-align: center;


		::v-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;
			}
		}

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

		::v-deep .u-circle-progress[data-v-cab6fc66] {
			margin: 40rpx;
		}

	}

	.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: 40rpx 72rpx;

		.title-1 {
			color: rgba(16, 16, 16, 100);
			font-size: 36rpx;
		}

		.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: 80rpx;
			line-height: 26px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 36rpx;
			margin-top: 16px;
		}
	}
</style>



<style lang="scss" scoped>
	.oldTextClassF {
		.electrovalence-monthlyCard {}
	}

	page {
		background-color: #f6f8f8;
		padding-bottom: 60px;
	}

	.to-recharge {
		position: absolute;
		right: 22px;
		color: #333333
	}

	// 充电状态
	.charge-state {

		width: 100%;

	}

	.charge-state-2024-04-01 {
		width: 100%;
		background: linear-gradient(180deg, rgba(161, 206, 250, 1) 0%, rgba(161, 206, 250, 0) 100%);

		.charge-state-img {
			text-align: center;

			img {
				animation: rotate 5s linear infinite;
				width: 520rpx;
				height: 520rpx;
			}

		}

		.charge-state-img2 {
			text-align: center;
			position: relative;
			top: -392rpx;
			height: 0;

			img {

				width: 250rpx;
				height: 250rpx;
			}
		}

		.charge-state-img3 {
			text-align: center;
			position: relative;
			top: -310rpx;
			height: 0;
			font-size: 56rpx;
			color: rgba(16, 16, 16, 1);
			font-weight: bold;

		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
	}

	// 充电信息
	.charge-info {
		background-color: #ffffff;

		padding: 40rpx 0px 0px 0px;
		margin: 0rpx 40rpx 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: 22px;
				font-weight: 550;
			}

			.name {
				line-height: 44rpx;
				color: rgba(119, 119, 119, 100);
				font-size: 32rpx;

			}
		}
	}

	//其他信息
	.else-infos {
		// ::v-deep .u-tab-item{
		// 	padding: 0px 60rpx  0px  0px !important;

		// }
		// ::v-deep .u-tab-bar{
		// 	transform: translate(2rpx, -100%)!important;

		// }

		padding: 0 24rpx 48rpx 24rpx;
		background-color: #ffffff;
		// width: 88.2%;
		box-shadow: 0px 2px 8px 0px #1A095A34;
		margin: 32rpx 40rpx 40rpx 40rpx;
		border-radius: 12px;

		.itemTips {
			border: 1px solid rgba(0, 185, 98, 1);
			background-color: rgba(235, 255, 246, 1);
			color: rgba(16, 16, 16, 1);
			padding: 24rpx 10rpx;

			::v-deep .chargingTag {
				color: #ff3d00;
				font-weight: bold;
				margin: 0 6rpx;
			}

			::v-deep .chargingTag2 {
				color: #00b962
			}

			.itemTips1 {
				font-weight: bold;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				color: rgba(0, 185, 98, 1);
				font-size: 32rpx;

				img {
					height: 32rpx;
					width: 32rpx;
				}
			}

			.itemTips2 {
				line-height: 40rpx;
				margin: 10rpx 0 20rpx 0;
				padding: 0 40rpx;
			}

			.itemTips3 {
				padding: 0 40rpx;
				margin-bottom: 10rpx;

				.itemTips3Btn {
					height: 62rpx;
				}
			}
		}

		.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: 28rpx;
					color: #959595;
				}
			}

		}

	}

	// 底部按钮
	.bottom-qq {
		border: 1px solid rgba(242, 242, 242, 1);
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 16rpx 40rpx  32rpx 40rpx;
		
		z-index: 999;

		.button-box {
			min-width: 80%;
		}

		.img-box {
			// width: 48rpx;
			// height: 48rpx;
			//padding: 24rpx 0;

			text-align: center;

			font-size: 24rpx;

			img {
				width: 48rpx;
				height: 48rpx;
			}
		}

		button {

			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			//width: 45.8%;
			background-color: black;
			color: #fff;
			// background-color: rgba(255, 255, 255, 1);
			// color: rgba(0, 185, 98, 1);

			height: 96rpx;
			border-radius: 50px;
			font-size: 32rpx;
		}
	}

	// 底部按钮
	.bottom-ww {
		background: white;
		//position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 12px 24px;
		padding-bottom: 12px;
		z-index: 999;

		.img-box {
			width: 96rpx;
			height: 96rpx;
			padding: 24rpx 0;
			background-color: rgba(210, 215, 213, 100);
			text-align: center;
			border-radius: 999px;

			img {}
		}

		button {

			width: 45.8%;
			// background-color: black;
			// color: #fff;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(0, 185, 98, 1);

			height: 80rpx;
			border-radius: 50px;
			font-size: 32rpx;
		}
	}
	
	.showCoupon{
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		padding: 0 ;
		.padding1{
			padding-left: 32rpx;
		}
		.padding2{
			padding-right: 32rpx;
		}
		.showCoupon1{
			.showCoupon111{
				padding: 2rpx 24rpx;
				border-radius: 8px 0px 8px 0px;
				background-color: rgba(255, 61, 0, 1);
				color: rgba(255, 255, 255, 1);
			}
			.showCoupon13{
				padding-bottom: 32rpx;
				font-weight: bold;
			}
			.showCoupon12{
				color: red;
				font-size: 48rpx;
				font-weight: bold;
				margin: 16rpx 0 4rpx 0;
			}
		}
		.showCoupon2{
			border-left: 1px solid #CFCFCF;
			padding-left: 32rpx;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
		}
	}
	.useFreeCoupon{
		 padding: 40rpx 72rpx;
		 .title{
			 color: rgba(255, 61, 0, 1);
			text-align: center;
			margin-bottom: 10rpx;
		 }
		 .showCoupon{
			 background-color: #e4e4e4;
			 border-radius: 8px;

		 }
		 
	}
	.showlottery{
		::v-deep .u-mode-center-box{
			width: 700rpx !important;
			background-color:unset;
		}
		::v-deep .u-model{
			background-color:unset;
		}
	}
	
	.slogan-5 {
		z-index: 2;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		/* text-decoration: underline; */
	
	
		text-align: center;
		position: fixed;
		/* top: 40px; */
		bottom: 180px;
		right: 20px;
		height: 80rpx;
		width: 80rpx;
		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;
	
	}
	
	.swiper {
		height: 700rpx;
	
		.swiperitem {
			height: 700rpx;
		}
	}
	.showOssK {
	
		::v-deep .u-model,
		::v-deep .u-mode-center-box {
			background-color: transparent;
		}
	}
	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}
	
		25% {
			transform: rotate(8deg);
		}
	
		50% {
			transform: rotate(0deg);
		}
	
		75% {
			transform: rotate(-8deg);
		}
	
		100% {
			transform: rotate(0deg);
		}
	}
</style>