JP-ChargeTeam51/pages/searchPile/stationAndPile/charging/chargingPileDetails.vue

<template>
	<view>
		<!-- chargingPileDetails -->
		<u-popup v-model="carTempBl" @open="carTempBlInit" :closeable="true" mode="bottom">
			<view style="margin-top: 18px;">
				<view style="font-size: 48rpx;">临时车牌：{{form.carNum}}</view>
				<ucarkeyboard style="position: inherit !important;" ref="uKeyboard" mode="car"
					@confirm="car.carNum=form.carNum,carTempBl=false" @cancel="carTempBl=false" :showTips="true"
					:mask-close-able="false" @change="valChange" @backspace="backspace"></ucarkeyboard>

			</view>
		</u-popup>

		<view v-show="step==1">
			<ujp-navbar title="费用说明页" :startGz="false"
			 
			 :custom-back="customback2" ref="ujpnavbar">

			</ujp-navbar>
			<view class="main2">
				<view class="item">
					<view class="title">
						充电枪编号
					</view>
					<view class="content">
						{{gun.gunNo}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						充电枪名称-充电枪类型
					</view>
					<view class="content">
						{{detail.name}}-{{detail.interfaceType}}{{detail.chargingType}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						充电枪功率
					</view>
					<view class="content">
						{{detail.chargingPower}}kW
					</view>
				</view>
				<view class="item" v-if="price">
					<view class="title">
						电费+服务费

					</view>
					<view class="content" v-if="personInfo&&personInfo.userType==2">
						当前时段：{{price.startTime}}~{{price.endTime}} 费用为

						<span style="color: #00b962;">{{price.costPrice.toFixed(2)}} </span>元/度
						<span v-if="station.giveDiscount">(含电费{{price.electricityPrice.toFixed(2)}}元/度 +
							服务费{{price.discountServicePrice.toFixed(2)}}元/度(折前价{{price.servicePrice.toFixed(2)}}元/度))</span>

						<span v-if="!station.giveDiscount">(含电费{{price.electricityPrice.toFixed(2)}}元/度 +
							服务费{{price.servicePrice.toFixed(2)}}元/度)</span>

					</view>
					<view class="content" v-else>
						当前时段：{{price.startTime}}~{{price.endTime}} 费用为

						<span style="color: #00b962;">{{(price.electricityPrice+price.servicePrice).toFixed(2)}}
						</span>元/度

						<span>(含电费{{price.electricityPrice.toFixed(2)}}元/度 +
							服务费{{price.servicePrice.toFixed(2)}}元/度)</span>

					</view>
				</view>
				<view class="item" v-if="station.parkingDescription">
					<view class="title">
						停车费用
					</view>
					<view class="content"
						v-html="station.parkingSimpleDescription?station.parkingSimpleDescription:station.parkingDescription">

					</view>
				</view>

			</view>
		</view>
		<view v-show="step==0">
			<ujp-navbar :title="pageTitle" :startGz="false" :custom-back="customback">
				<view class="iconfont service" @click="openModal">
					&#xe60d;
				</view>
			</ujp-navbar>
			<!-- 未插枪提示 -->
			<!-- <u-alert-tips type="warning"  v-if="!isInsert" :description="description" :show-icon="true"></u-alert-tips>
		 -->
			<view class="main">
				<view class="main-head">


					<view class="text" v-if="haveLock&&lockStatus==1">
						<view class="text-1">
							请下降地锁
						</view>
						<view class="text-2">
							请在<span style="color:red">{{lockSafeStopTime}}秒</span>内停车入位，以免地锁抬升对您的爱车造成损伤。
						</view>
					</view>

					<view class="text" v-else>
						<view class="text-1" v-if="gun&&gun.workStatus==2">
							充电中
						</view>
						<view class="text-1" v-else >
							{{isInsert?'可充电':'未插枪'}}
						</view>
						<view class="text-2" v-if="station.stationType==50">
							可进行充电
						</view>
						<view class="text-2" v-else>
							<template  v-if="gun&&gun.workStatus==2">
								
							</template>
							<template v-else>
								{{isInsert?'充电枪已连接，可进行充电':'未检测到充电枪，若已插枪，请拔出重插'}}
								
							</template>

						</view>
					</view>

					<view class="charge-img">
						<img src="@/assets/img/charge.png" alt="">
					</view>
				</view>



				<view class="charging-info">
					<view class="address">
						{{station.name}}
						<!-- <text class="explain" @click="step=1">费用说明</text> -->
					</view>
					
				
					
					<view class="name">
						<span style="font-weight: bold;color: #000;"
							v-if="station.stationType!=50&&gun.sortNo">{{gun.sortNo}}号/</span><span
							style="font-weight: bold;color: #000;">{{detail.name}}</span><span
							style="font-weight: bold;color: #000;"
							v-if="station.stationType!=50">枪{{channelNoShow(gun.channelNo,detail.manufacturer,gun.customNo)}}</span>

						<text class="free" v-if="gunDetail.chargingAppointment&&gunDetail.isMeAppoint">您已预约</text>
						<text class="free" v-else-if="gunDetail.chargingAppointment&&!gunDetail.isMeAppoint">已被预约</text>
						<text class="free " :class="'workStatusText'+gun.workStatus" v-else    >{{gun.workStatusText}}</text>
					</view>
					
					<view v-if="gun.workStatus==6" @click="operating=true"
					style="margin-top: 10rpx;color: rgba(255, 56, 56, 1);font-size: 28rpx;    display: flex; align-items: center;" >
					
						<span  style="color: #fff;background: linear-gradient(93.02deg, rgba(255,56,56,1) 39.4%,rgba(255,124,112,1) 92.42%);
						   border-radius: 4px;
						    padding: 0rpx 10rpx;
						    margin-right: 8rpx;
						    font-size: 24rpx;
						   line-height:40rpx;
						" >提醒</span>
						点击查看恢复供电操作指示图
						<u-icon name="arrow-right"></u-icon>
					</view>
					
					<view v-if="quickChargeReduceMethod1(station)&&personInfo&&personInfo.userType==2"
					style="margin-top: 10rpx;color: rgba(255, 121, 0, 1);font-size: 28rpx;    display: flex; align-items: center;" >
					
						<span  style="color: #fff;background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
						   border-radius: 4px;
						    padding: 0rpx 10rpx;
						    margin-right: 8rpx;
						    font-size: 24rpx;
						   line-height:40rpx;
						" >活动</span>
						快充订单满{{station.quickChargeDegree}}度服务费{{discountRatio10(station.quickChargeDiscountRatio)}}折
					</view>
					<view v-if="quickChargeReduceMethod2(station)&&personInfo&&personInfo.userType==2"
					style="margin-top: 10rpx;color: rgba(255, 121, 0, 1);font-size: 28rpx;    display: flex; align-items: center;" >
					
						<span  style="color: #fff;background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
						   border-radius: 4px;
						    padding: 0rpx 10rpx;
						    margin-right: 8rpx;
						    font-size: 24rpx;
						   line-height:40rpx;
						" >活动</span>
						喜迎国庆，充电有奖
					</view>
					
					<!-- <view class="price" v-if="detail.stationAddress">
						<text class="unit">{{detail.stationAddress}}</text>
					</view> -->
					<view v-if="price" class="priceListBlMain">

						<view class="price-3-card-view " v-if="personInfo&&personInfo.userType==2&&(userCardBool&&userCard.classify==2||(!userCardBool&&prevMonthKwhBL))">
							<view class="price">

								<text class="span">{{price.costPrice.toFixed(2)}}</text><text class="unit">元/度</text>

							</view>
							<view class="price-3-card ">


								<view class="num1"  v-if="!userCard||userCard.serviceFeeDiscountRate==60" >

									<img src="@/assets/img/9-4/6折卡价.svg" />
									
								</view>
								<view class="num1" style="    background: #303133;
										color: #f4f4f4;
										border-radius: 4px 0 4px 4px;
										padding: 0 3px;
										margin-right: 3px;"  v-else >
								
								
									<span v-if="userCard.cardType==4"  >折扣卡 </span>
									<span v-else  >{{userCard.serviceFeeDiscountRate/10}}折卡 </span>
								</view>
								<text
									class="num">{{ (price.electricityPrice+(price.servicePrice*(userCard?userCard.serviceFeeDiscountRate/100:0.6))).toFixed(2)}}元/度</text>

							</view>
						</view>
						<view class="price-3-card-view " v-else-if="personInfo&&personInfo.userType==2&&((userCardBool&&userCard.classify==1)||(!userCardBool&&!prevMonthKwhBL))">
							<view class="price">
						
								<text class="span">{{price.costPrice.toFixed(2)}}</text><text class="unit">元/度</text>
						
							</view>
							<view class="price-3-card price-3-card-yue ">
						
						
								<view class="num1">
						
									<img src="@/assets/img/9-4/月卡价格.png" />
						
								</view>
								<text
									class="num">{{ (price.electricityPrice).toFixed(2)}}元/度</text>
						
							</view>
						</view>
						<view class="price" v-else-if="false&&personInfo&&personInfo.userType==2">

							<text class="span">{{price.costPrice.toFixed(2)}}</text><text class="unit">元/度</text>
							<text class="unit"
								v-if="station.giveDiscount">(折前价{{((price.electricityPrice*1000+price.servicePrice*1000)/1000).toFixed(2)}}元/度)</text>

						</view>
						<view class="price-2" v-else>
							<view class="price-4">
								<text>{{((price.electricityPrice*1000+price.servicePrice*1000)/1000).toFixed(2)}}</text><text
									class="unit">元/度</text>
							</view>
							<view class="price-3 " v-if="station.giveDiscount">
								<text class="num1">会员</text>
								<text class="num">{{price.costPrice.toFixed(2)}}</text>
								<text class="unit3 ">元/度</text>
							</view>
						</view>
						<view class="priceListBl" @click="priceListBl=!priceListBl">
							{{priceListBl?'收起':'详情'}}
							<u-icon :name="!priceListBl?'arrow-up':'arrow-down'"></u-icon>
						</view>
					</view>
					<view class="chat-box" v-show="priceListBl">
						<view class="chat_hhh">

							<view class="chatTime" v-for="(item,i) in pricesInfo"  :key="i" :style="'width:'+getW(item)" :class="{
								 current1: pricesInfoCurrent.startTime==item.startTime,
								 
								current2: pricesInfoCurrent2.startTime==item.startTime,
							 }" @click="chatShowBtn(item)">

								<view class="chatShow" v-show="chatShow" :class="{
									chatShowA:i<pricesInfo.length/2,
									chatShowB:i>pricesInfo.length/2,
									chatShowNo: pricesInfoCurrent2.startTime!=item.startTime,
									chatShowOk: pricesInfoCurrent2.startTime==item.startTime,
								 }">


									<view>时段：<span  class="">{{item.startTime}}-{{item.endTime}}</span></view>
									<view>电价：<span class="showspan">{{item.electricityPrice}}元/度</span></view>
									<view>服务费：<span  class="showspan">{{(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(item.discountServicePrice))?item.discountServicePrice:item.servicePrice}}元/度</span></view>


								</view>


								<template v-if="station">
									<template
										v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(item.discountServicePrice))">
										<span class="chats1" :style="'height:'+getH(item.discountServicePrice)">

											{{item.discountServicePrice}}</span>

									</template>
									<template v-else>
										<span class="chats1" :style="'height:'+getH(item.servicePrice)">


											{{item.servicePrice}}</span>

									</template>
								</template>



								<span class="chats2" :style="'height:'+getH(item.electricityPrice)">
									<span>{{item.electricityPrice}}</span>
									<span class="chats0" v-if="pricesInfoCurrent.startTime==item.startTime">
										<span>当前</span>
										<span>时段</span>

									</span>
									<span class="chats9" v-else>
										<span>当前</span>
										<span>时段</span>

									</span>


								</span>
							</view>
						</view>
						<view class="chat_hhh_time">
							<span>00:00</span>
							<span>12:00</span>
							<span>24:00</span>
						</view>

					</view>
					<view class="discount-card" 
					:class="{
						'discount-card-4':userCard.cardType==4
					}"
					v-if="userCardBool&&userCard.classify==2">
						<view class="name" v-if="userCard.cardType==4">
							{{projectName}}{{userCard.monthlyRentName}}
						</view>
						<view class="name" v-else>
							自营站充电服务费{{userCard.serviceFeeDiscountRate/10}}折卡
						</view>
						<view class="progress">
							<view class="time">
								{{thisendTime(userCard.endTime)}}到期 | 剩余{{setValidity(thisdaysDistance(userCard.endTime))}}
							</view>
							<view class="electric-quantity" v-if="userCard.chargeDegreeLimit">
								已用{{userCard.chargedDegree?userCard.chargedDegree.toFixed(0):0.00}}度 /
								共{{userCard.chargeDegreeLimit}}度
							</view>
							<view class="electric-quantity" v-if="userCard.chargeDegreeLimit==0&&userCard.saveInformation">
								已用{{userCard.saveInformation.num}}次 /
								共省{{userCard.saveInformation.saveMoney}}元
							</view>
						</view>
						<u-line-progress :show-percent="false" active-color="#2979ff" :percent="thispercent(userCard)">
						</u-line-progress>
					</view>
				</view>
			</view>
		
			<view class="carImg" v-if="personInfo&&personInfo.userType!=2">
					<img @click="gotoLogin" src="@/assets/img/gologin/img.png">
			</view>
			
			<view  class="class20250501" @click="gotoUrl('pages/temporary/activity20250501?source=99')"
			 v-else-if="!userCardBool&&userChargingAmountObj.type">
				<view class="body1" v-if="userChargingAmountObj.type==3">
					<view class="text1">近半年您已花费<span>{{userChargingAmountObj.money}}</span>元用于充电</view>
					<view class="text2">如参与充值送折扣卡活动，预计可省 <span style="font-size: 56rpx;">{{userChargingAmountMethod(userChargingAmountObj).num3}}</span> 元</view>
				</view>
				<view class="body1" v-if="userChargingAmountObj.type==2">
					<view class="text1">按您每月充电花费，半年将超<span>{{userChargingAmountObj.money}}</span>元</view>
					<view class="text2">推荐充值<span>{{userChargingAmountMethod(userChargingAmountObj).num1}}元</span>，预计可省 <span style="font-size: 56rpx;">{{userChargingAmountMethod(userChargingAmountObj).num3}}</span> 元</view>
				</view>
				<view class="body1" v-if="userChargingAmountObj.type==1">
					<view class="text1">新用户参与充值送折扣卡活动推荐充值<span>1000</span>元，预计可省 <span> 133元</span>。</view>
					
				</view>
				<view class="body2">
					<view class="botton">查看活动详情</view>
				</view>
			</view>
		<!-- 	<view class="carImg3"  :class="{
				'carImg3-yue':!prevMonthKwhBL
			}"
			 v-else-if="carImg3Bl&&!userCardBool">
				<view class="carImg2" v-if="prevMonthKwhBL" >
					
			
					<view>
						<view class="carImg-1">您近30天已充电{{carImg3span1}}度</view>
						<view  class="carImg-2">如购买6折卡，可省约<span>{{carImg3span2}}</span>元</view>
						<view  class="carImg-3" @click="gotoUrl('pages/discountCard/productDetails')">
							<span>点击购买</span>
						</view>
					</view>
					</view>
					<view class="carImg2-yue" v-if="!prevMonthKwhBL" >
						
								
						<view>
							<view class="carImg-1">您近30天已充电{{carImg3span1}}度</view>
							<view  class="carImg-2">如购买月卡，可省约<span>{{carImg3span3}}</span>元</view>
							<view  class="carImg-3" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
								<span>点击购买</span>
							</view>
						</view>
						</view>
			
			</view>
			
			<view class="carImg3" v-else-if="carImg4Bl&&!userCardBool">
				<view class="carImg2" >
					
			
					<view>
						<view class="carImg-1">每月只需12.9元</view>
						<view  class="carImg-2">前338度电可省约<span>67.6</span>元</view>
						<view  class="carImg-3" @click="gotoUrl('pages/discountCard/productDetails')">
							<span>点击购买</span>
						</view>
					</view>
					</view>
			
			</view> -->
			
			<view class="slogan-4 " 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-if="showNt">
			
			
							<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix"
								v-show="showNtStep==0" src="@/assets/img/nt/f5surprised-1.png">
			
								<view slot="loading" style="height: 200px;">
									<u-loading mode="flower" size="186">
			
									</u-loading>
			
								</view>
			
							</u-image>
							<view style="color: #ecc07d;
										font-size: 64rpx;
										position: relative;
										top: -220rpx;
										right: -100rpx; width: 400rpx;" @click="showNtStepClick" v-show="showNtStep==0">
								<span>.</span>
							</view>
			
							<u-image width="600" height="700" style="margin: auto;;min-height: 250px;"
								mode="scaleToFill" v-show="showNtStep==1" src="@/assets/img/nt/f5surprised-2.png">
			
							</u-image>
							<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix"
								v-show="showNtStep==2" src="@/assets/img/nt/nt-activity-3.png">
			
							</u-image>
							<u-image width="500" style="color: #FFFFFF;
										font-size: 64rpx;
										position: relative;
										top: -540rpx;
										right: -60rpx;height: 0;
									" mode="widthFix" v-show="showNtStep==2" src="@/assets/img/nt/f5surprised-3.png">
			
							</u-image>
			
			
							<view style="color: #ecc07d;
										font-size: 72rpx;
										position: relative;
										top: -180rpx;
										right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==2">
								<span>.</span>
							</view>
			
							<view style="color: #FFFFFF;
										font-size: 64rpx;
										position: relative;
										top: -528rpx;
										right: -80rpx;" :style="{
									right:showNtValue>99?'-80rpx':(showNtValue>9?'-95rpx':'-110rpx')
								}" v-show="showNtStep==1"><b>{{showNtValue}}</b>
								<span style="font-size: 28rpx;">元</span>
							</view>
			
							<view style="color: #ecc07d;
								 		font-size: 72rpx;
								 		position: relative;
								 		top: -270rpx;
								 		right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==1">
								<span>.</span>
							</view>
			
			
			
			
						</swiper-item>
			
						<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 class="bottom">

				<!-- 解锁中 -->
				<!-- 						<u-button shape="circle" type="success" style="opacity: 0.4;">
							解锁中<img style="margin-left: 4px;" src="@/assets/static/img/riLine-refresh-line.svg" alt="">
						</u-button> -->
				<!-- 刷新充电枪状态   如果改动 ，请添加    方法判断startCarCharging  -->
				<u-button shape="circle" type="success" v-if="gun&&gun.workStatus==2">充电中</u-button>

				<u-button shape="circle" type="success" v-else-if="!openBool">仅单位内部员工可用</u-button>

				<!-- 刷新充电枪状态   如果改动 ，请添加    方法判断startCarCharging  -->
				
				<u-button shape="circle" type="success" @click="getPile()"
					v-else-if="gunDetail.chargingAppointment&&!gunDetail.isMeAppoint">已被预约</u-button>

				<!-- 刷新充电枪状态   如果改动 ，请添加    方法判断startCarCharging  -->
				
				<u-button shape="circle" v-else-if="haveLock&&lockStatus==1" @click="lockDown()"
					style="background-color:#009ED7" type="success">下降地锁</u-button>

				<u-button shape="circle" v-else-if="!isInsert" @click="getPile()" type="success">刷新充电枪状态</u-button>
				<!-- 刷新充电枪状态   如果改动 ，请添加    方法判断startCarCharging  -->
				
				<!-- 开始充电 -->
				<u-button shape="circle" type="success" v-else @click="charge()">开始充电</u-button>
				
				<view v-if="lastTiming&&lastTiming.startTime&&gunDetail.nextTiming">
					<view  style="
						text-align: center;
						color: #FF9800;
						margin-top: 10px;
					" >
						<u-icon
						  style="    margin-top: 2px;"
						  size="30"
						  name="info-circle"
						></u-icon>
						已设置{{lastTiming.startTime}}的定时充电，再次启动将会覆盖设置
					</view>
					<view  @click="onShowRole = true,gotoUrl('pages/user/myReservation/chargingRe')"
					style="width: 100%;    text-align: center;color: #00B962;	margin-top: 10px;">
						预约充电列表<u-icon name="arrow-right-double" color="#00B962" size="22"></u-icon>
					</view>
				</view>
				
			</view>
			<view class="carImg3" style="    background: 0;margin-top: 20rpx;" v-if="station.nightRemind&&station.nightRemindContent" >
				<img :src="station.nightRemindContent" style="   width: 100%;height: 200rpx;">
			</view>
			
		 
			<view  class="cost-explainMain" >
				<view   class="cost-explain"  >
					<view class="text">
					
						充电记录
					</view>
								
					<view class="iconfont" style="
						  font-size: 32rpx;
						text-align: right;" @click="gotoUrl('pages/record/index')">
						查看&#xe600;
					</view>
				</view>	
				<view   class="cost-explain useFreeCoupon"  v-if="station.useFreeCoupon" >
					↑↑充电结束后查看记录使用“免费停车优惠劵”
				</view>	
				<view    class="cost-explain"  v-if="station.id=='f62ce857-1301-4cf3-9c02-74d378c25ab2'" >
					<view class="text" style="width: 100%;">
						费用说明
						
								
						<view class="iconfont" style="color: #1bbe6b;
							    font-size: 28rpx;
							   display: initial;    float: right;" @click="step=1">
							查看更多&#xe600;
						</view>
						
					</view>
					
				</view>
				<p style="text-indent: 2em; font-size: 28rpx;" v-if="station.id=='f62ce857-1301-4cf3-9c02-74d378c25ab2'" >
					停车费调整:本停车场，新能源汽车充电，最高<span style="color:red">只减免2小时</span>停车费用，<span style="color:red">超出部分</span>按停车场规定缴费
							
				</p>
				<view   class="cost-explain" v-else >
					<view class="text">
						费用说明
					</view>
								
					<view class="iconfont" style="
						  font-size: 32rpx;
						text-align: right;" @click="step=1">
						查看&#xe600;
					</view>
				</view>
				
				<view  class="cost-explain" :class="{
					'cost-explain2':!car
				}" >
					<view class="text">
						入场车辆
					</view>
					<view class="car-number" v-if="!car||!carplateMust" @click="carDet()">
						{{car?car.carNum:'填车牌号可减免部分停车费用'}}
						<img v-if="!car"  src="@/assets/static/img/riLine-edit-box-line2.svg" alt="">
					</view>
					<view class="car-number" v-else >
						{{car?car.carNum:'填车牌号可减免部分停车费用'}}
						<!-- <img v-if="car&&car.carNum" @click="carTempBl=true"
							src="@/assets/static/img/riLine-edit-box-line2.svg" alt=""> -->
								
						<img   @click="carTempBl=true" src="@/assets/static/img/riLine-edit-box-line2.svg" alt="">
								
					</view>
				</view>
				
			
			
			</view>
			
			<!--提示  -->
			<view class="tips">
				
				<p class="p" @click="chargeTest">站点标签：</p>
				
				<view class="sign" v-if="station.stationType==50">
					<view class="sign-tag sign-0" v-if="station.isRecommend">推荐</view>
					<view class="sign-tag sign-5" v-if="station.isAlways">常用</view>
					<view class="sign-tag sign-6" v-if="station.isSpecial">特价</view>
				
					{{station.address}}
				</view>
				<view class="sign" v-else>
					<view class="sign-tag sign-0" v-if="station.isRecommend">推荐</view>
					<view class="sign-tag sign-5" v-if="station.isAlways">常用</view>
					<view class="sign-tag sign-6" v-if="station.isSpecial">特价</view>
				
					<!-- 	 -->
					<view class="sign-1 sign-tag "
						v-if="station.giveDiscount&&station.discountRatio&&station.discountRatio!=100">
						会员{{discountRatio10(station.discountRatio)}}折</view>
					<view class="sign-3 sign-tag" v-if="station.category=='超充'">160kW超充站</view>
					<view class="sign-4 sign-tag" v-if="station.nightLowPriceEnabled">
						夜间超低价</view>
				
					<view class="sign-2 sign-tag" v-if="station.platformType==1">自营站</view>
					<view class="sign-2 sign-tag" v-if="station.tagList.length != 0"
						v-for="(tagName,tagIndex) in station.tagList"  :style="'border: 1px solid '+tagNameBy(tagName,1)+';color:'+tagNameBy(tagName,1)"
								:key="tagIndex">{{tagNameBy(tagName,0)}}</view>
				</view>
				
				<p class="p" @click="chargeTest" style="margin-top: 20rpx;">注意事项：</p>
				<!-- <view class="content" v-if="!isInsert">
				点击降锁后，请稍等几十秒，待地锁完全下降后，再驶入车位。
			</view> -->

				<view class="content">

					1.车停好，请熄火后再充电；<br />
					2.请确保充电枪插接到位；<br />
					3.车辆充电时，请关闭车内电源；<br />
					4.充电完毕，请及时拔枪;<br />
					5.填写车牌号，离场时可减免部分停车费。

				</view>


			</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"
					:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
			</view>
		</view>


		<u-modal v-model="showNt" class="showOss2" :show-title="false" :show-confirm-button="false">
			<view class="slot-content">

				<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix" v-show="showNtStep==0"
					src="@/assets/img/nt/news-activity-2.png">

					<view slot="loading" style="height: 200px;">
						<u-loading mode="flower" size="186">

						</u-loading>

					</view>

				</u-image>
				<view style="color: #ecc07d;
								font-size: 64rpx;
								position: relative;
								top: -220rpx;
								right: -100rpx; width: 400rpx;" @click="showNtStepClick" v-show="showNtStep==0">
					<span>.</span>
				</view>

				<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix" v-show="showNtStep==1"
					src="@/assets/img/nt/news-activity-1.png">

				</u-image>
				<view style="color: #FFFFFF;
								font-size: 64rpx;
								position: relative;
								top: -600rpx;
								right: -80rpx;" :style="{
							right:showNtValue>99?'-80rpx':(showNtValue>9?'-95rpx':'-110rpx')
						}" v-show="showNtStep==1"><b>{{showNtValue}}</b>
					<span style="font-size: 28rpx;">元</span>
				</view>

				<view style="color: #ecc07d;
						 		font-size: 72rpx;
						 		position: relative;
						 		top: -290rpx;
						 		right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==1">
					<span>.</span>
				</view>


			</view>
		</u-modal>

		<u-modal v-model="show3" class="showOss" confirm-text="注册会员" cancel-text="先不注册" :show-title="false" width="650"
			border-radius="30" title="" :show-cancel-button="false" :show-confirm-button="false">
			<view class="slot-content">
				<!-- :show-title="false" -->

				<view>
					<img  v-if="branchParameterBl('ud')" src="@/assets/img/gologin/nipic.png" style="width: 100%;"></img>
					
					<img  v-else  src="@/assets/img/Nipic_24385267_20191128181916139081.png" style="width: 100%;"></img>
					
				</view>
				<view>
					<table class="classtable">


						<tr>
							<td class="td1">
								<img src="@/assets/img/Nipic_vip.png" style="width: 24px;"></img>
								<p style="color: #FF9800;line-height: 10px;">会员</p>
							</td>
							<td class="td2">

								<p v-if="branchParameterBl()" ><span class="dian">·</span>充电最低<span style="color:#4aa461">0.66元</span>/度（含服务费）</p>
								<p><span class="dian">·</span>账户充值赠送代金券</p>
								<p><span class="dian">·</span>更有<span style="color:#4aa461">会员充电折扣、服务费包月会员资格</span>等超多福利
								</p>
								<p v-if="branchParameterBl('ud')"><span class="dian">·</span>与51充电联盟会员共享数据，包括账户余额、优惠卡券等</p>
								
							</td>
						</tr>
						<tr>
							<td style="color: #fff;line-height: 3px;">.</td>
						</tr>
						<tr>
							<td class="td1">
								<img src="@/assets/img/Nipic_youke.png" style="width: 24px;"></img>
								<p style="color: rgb(74, 164, 97);line-height: 10px;">游客</p>
							</td>
							<td class="td2">
								<p><span class="dian">·</span>临时车牌快速充电</p>
								<p><span class="dian">·</span>无需注册 先付后退</p>
								<p><span class="dian">·</span><span style="color:#F44336">不可使用</span>平台各类代金券</p>

							</td>
						</tr>

					</table>

				</view>
				<view class="btnview">
					<!-- 	<u-button shape="circle" @click="show3=false"
						style="    width: 200rpx;    background-color: #fff !important; margin: 20rpx;float: left;margin-bottom: 20px; "
						szie="mini" type="success" plain>继续充电</u-button> -->
					<view class="btnview1">
						<u-button shape="circle" style=" float: left;   width: 400rpx; margin: 20rpx; " szie="mini"
							type="success" @click="gotoUrl('pages/login/login')">注册会员</u-button>

					</view>

					<view class="btnview2" @click="show3=false,show4=true">暂不注册,先充电</view>
				</view>
			</view>
		</u-modal>
		
		
		<u-modal v-model="quickChargingBl" class="quickMain" confirm-text="注册会员" cancel-text="先不注册" :show-title="false" width="650"
			border-radius="30" title="" :show-cancel-button="false" :show-confirm-button="false">
			<view class="quickMain-slot-content">
				<!-- :show-title="false" -->
		
				<view class="quickMain-img">
					<img src="@/assets/img/member/10.png" ></img>
				</view>
				<view  class="quickMain-bodyMain" >
					<view  class="quickMain-body">
						<view  class="quickMain-text1">快捷充电功能上线!</view>
						<view  class="quickMain-text2">
							恭喜您达到
							<img src="@/assets/img/9-4/白金会员.svg" ></img>
							<span style="color:#3F51B5;">白金会员</span>等级，您已获得<span style="color: #19be6b;">【快捷充电】</span>功能体验资格。
							
						</view>
						<view  class="quickMain-text2">
							当您插枪扫码后，在个人账户余额充足的情况下，自动帮您选择充满自停模式并开始充电。如需关闭此功能，可在“我的”-“设置”中修改。
						</view>
					</view>
					<view class="btnview">
						<!-- 	<u-button shape="circle" @click="show3=false"
							style="    width: 200rpx;    background-color: #fff !important; margin: 20rpx;float: left;margin-bottom: 20px; "
							szie="mini" type="success" plain>继续充电</u-button> -->
						<view class="btnview1">
							<u-button shape="circle" style=" float: left;   width: 400rpx; margin: 20rpx; " szie="mini"
								type="success" @click="checkedChange2(1)">同意并记住我的选择</u-button>
							
						</view>
							
						<view class="btnview2" @click="checkedChange2(0)">暂不启用</view>
					</view>
				</view>
				
			</view>
		</u-modal>
		<u-modal v-model="carplateMustModel" :mask-close-able="true"  
		@cancel="carTempBl=true" :title="station.name+'提醒您'"
		cancel-text="其他车牌号" :confirm-text="car?car.carNum:''" :show-cancel-button="true"  >
			<view @click="carplateMustModel=false"
			 style="    position: absolute;
    top: 0;
    right: 3px;">关闭</view>
			<view style="padding: 20px;">
				当前绑定的车牌号为<span style="color:#19be6b">{{car?car.carNum:''}}</span><br/>
				车辆充电，车牌号一致可<span style="color:#FF5722">减免停车费</span>，不一致可使用临时车牌号，用于出入停车场
			</view>
		</u-modal>
		<u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" :show-cancel-button="false"
			confirm-color="#53b56b" ref="uModal2" :asyncClose="true">
			<view style="padding: 15px;">请先关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，然后进行车辆充电</view>
		</u-modal>
		
		
		<quickRegistration v-if="show4" @login="loginMethod" :carNum="car?car.carNum:''" ></quickRegistration>
		<u-popup v-model="operating" mode="center"  >
			<view @click="operating=false"
			 style="background-color: #53a849;
			     text-align: center;
				  width: 600rpx; ">
				<img  style="    width: 400rpx;"
				src="@/assets/img/gologin/操作指引-tuya.png"></img>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as API_index from '@/apis/index.js'
	import * as API from "@/apis/chargeProcess.js"
	import * as userApi from '@/apis/user.js'
	import * as newsApi from '@/apis/news.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	
	import * as API_weixin from '@/apis/weixin.js'
	import quickRegistration from '@/components/QuickRegistration.vue'
	
	import {
		newDate,
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime,
		daysDistance
	} from '@/utils'

	export default {
		components: {
			ucarkeyboard,quickRegistration
		},
		data() {
			return {
				userChargingAmountObj:{
					
				},
				pageTitle:"充电枪详情",
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				operating:false,
				carImg3Bl:false,
				carImg4Bl:false,
				carImg3span1:0,
				carImg3span2:0,
				carImg3span3:0,
				pricesInfoCurrent: {},
				pricesInfoCurrent2: {},
				show3: false,
				temporaryCarNum: "",
				form: {
					carNum: '',
					defaultFlag: true,
				},
				priceListBl: false,
				pricesInfo: [],
				showNt: false,
				showNtStep: 0,
				showNtValue: 30,
				station: {},
				step: 0,
				bannerList: [],
				isInsert: false,
				isReady: false,
				onShowRole: false,
				id: "",
				car: {},
				isback: false,
				gun: {},
				prices: {},
				personInfo: {},
				price: {
					costPrice: 0,
					electricityPrice: 0,
					discountServicePrice: 0,
					servicePrice: 0,
				},
				gunDetail: {},
				haveLock: false,
				lockSafeStopTime: 0,
				lockStatus: '', // 1抬锁 2落锁
				carplateMust: false,
				detail: {
					no: '',
					interface: '',
					type: '',
					power: 0,
					price: [

					]

				},
				consumerPhone: "",
				description: '充电前请确保您的车辆已与充电桩连接！并关闭车内电源。',
				show: false,
				title: '联系客服',
				showVin: false,
				confirmText: '拨打电话',
				content: '余额不足5，请先充值。',
				carDetText: '',
				userCard: null,
				canUse: false,
				openStatus: 0,
				isVip: false,
				openBoolShow: false,
				carTempBl: false,
				maxlength: 8,
				chatShowId: "",
				chatShow: false,
				startCarChargingBl:false,
				quickChargingBl:false,
				carplateMustModel:false,
				carplateMustModelFirst:true,
				projectName: "",
				
				showrecharge:"",
				bannerListTop:[],
				getBannerInfoTopBl:true,
				showTop:false,
				showTopImg:"",
				showTopIndex: 0,
				YSTX:"",
				lastTiming:{}
				 
			}
		},

		computed: {
			prevMonthKwhBL(){
				if(this.carImg3span1>=1000){
					return false
				}
				return true
			},
			openBool() {
				if (this.openStatus == '3') {
					return this.isVip
				}
				return true
			},
			userCardBool() {
				if (this.userCard) {
					var date = new Date().getTime()
					var reg = new RegExp('-', 'gi')
					var str = this.userCard.endTime;
					//console.log(str.replace(reg,'/'))
					var date2 = new Date(str.replace(reg, '/')).getTime();
					if (date < date2) {
						return true;
					}
				}
				return false
			},
			
		},
		onShow() {
			console.log("1111")
			uni.hideToast();
			this.checkSubscribe()
			if (this.onShowRole) {
				this.getPile()
			}
		
		},
		onReady() {
		
			
		},
		onLoad(op) {
			this.init(op)
		},
		methods: {
			onShowK() {
				console.log("222")
				uni.hideToast();
				this.checkSubscribe()
				if (this.onShowRole) {
					this.getPile()
				}
			
			},
			init(op){
				
				
				this.projectName = process.car.ProjectName;
				
				var consumerPhone = "400-8899-619"
				// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
				if (consumerPhone) {
					this.consumerPhone = consumerPhone
				}
				var carDetText = "填写车牌号，充电时可以减免部分停车费用"
				// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
				if (carDetText) {
					this.carDetText = carDetText
				}
				
				if( this.branchParameterBl('ud')){
					//this.getf5surprised()
					
					this.getBannerInfoTop("home-top2");	
				}
				try{
					
				}catch(e){
					
				}
				
				this.findNoLTextConfigure()
				//this.startCarCharging()
				if (op.isback) {
					this.isback = true
				}
				if (op.id) {
					this.id = op.id
						
					var personInfo = this.carhelp.getPersonInfo()
					this.personInfo = personInfo
					var userInfo = this.carhelp.getPersonInfo();
					if (this.personInfo && this.personInfo.userType == "1") {
						this.show3 = true
					}else{
						
					}
					if (userInfo && userInfo.id) {
						
						//this.getNewYear()
					} else {
						//this.getBannerInfoTop("home-top");	
					}
					
					this.getPile()
						
				} else {
					uni.showToast({
						title: "请扫码充电"
					})
				}
			},
			userChargingAmount(){
				API_index.userChargingAmount().then((res) => {
					this.userChargingAmountObj = res.data
					//this.userChargingAmountObj.type=3
					
				}).catch(error => {
					
				})
			},
			
			
			findNoLTextConfigure(){
							
							 
							 loginApi.findNoLTextConfigure().then((response) => {
							
							 	this.carhelp.setConfig(response.data.configure) 
								this.YSTX=this.carhelp.getConfig().YSTX
							 }).catch(error => {
							 	uni.showToast({
							 		title: error,
							 		icon: "none"
							 	})
							 })
			},
			loginMethod(){
				var personInfo = this.carhelp.getPersonInfo()
				this.personInfo = personInfo
				this.getPile()
			},
			cancelGz() {
				this.carhelp.setGzDate()
			},
			gotoGz() {
				this.carhelp.setGzDate()
				var url = process.car.gzUrl;
				window.location.href = url
			
			},
			checkSubscribe() {
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
			
					if (res.data == "0") {
						this.show1 = true
						
					} else {
						//this.init();
						this.show1 = false;
						this.show2 = true;
			
			
						//this.carhelp.setGzDate() 
			
					}
			
					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			
			},
			checkedChange2(checked2) {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API_index.changeQuickCharging({qucikStatus: checked2}).then((res) => {
					var userInfo = this.carhelp.getPersonInfo();
					userInfo.quickCharging=checked2;
					this.carhelp.setPersonInfo(userInfo);
					this.quickChargingBl=false;
					uni.hideLoading();
					if(checked2){
						this.startCarCharging()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
			chatShowBtn(item) {
				if(this.chatShow == false){
					this.chatShow = true
				}else if(item.startTime!=this.pricesInfoCurrent2.startTime){
					this.chatShow = true
				}else{
					this.chatShow = false
				}
				
				this.pricesInfoCurrent2=item
			},
			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) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					uni.hideLoading();
					this.bannerList = res.data;

					// document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
				}).catch(error => {
					uni.showToast({

						title: error,
						icon: "none"
					})
				})
			},
			thisdaysDistance(endTime) {

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

			},
			thisendTime(endTime) {
				if (endTime) {
					var reg = new RegExp('-', 'gi')
					var str = endTime.substring(0, 10).replace(reg, '.')
					return str
				}
				return ''
			},
			thispercent(userCard) {
				if(userCard.classify==1||(userCard.classify==2&&userCard.chargeDegreeLimit==0)){
					var k1=daysDistance(userCard.startTime, userCard.endTime)
					var k2=this.thisdaysDistance(userCard.endTime)
					var p=(k1-k2)/k2* 100
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				}else if(userCard.classify==2){
					var p = 0
					
					if (userCard && userCard.chargeDegreeLimit) {
						p = userCard.chargedDegree / userCard.chargeDegreeLimit * 100
					}
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				}else{
					return 0
				}
			},
			carTempBlInit() {
				var aaa = this.$refs.uKeyboard.changeCarInputValue();
				console.log(aaa)
				if (this.form.carNum.length && !aaa) {
					var c = this.$refs.uKeyboard.changeCarInputMode();

				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {

				if (this.form.carNum.length >= this.maxlength) {
					return
				}

				if (true) {
					this.form.carNum += val;
				} else {

				}
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法

				//(this.form.carNum);

				var aaa = this.$refs.uKeyboard.changeCarInputValue();
				if ((this.form.carNum.length == 0) && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				} else if (!aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNum的最后一个字符
				if (this.form.carNum.length) {
					if (true) {

						this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);

					} else {

						//this.selectIndex=-1;
					}
				}




				//(this.form.carNum);

				var aaa = this.$refs.uKeyboard.changeCarInputValue();
				if (this.form.carNum.length == 0 && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			lockDown() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.lockDown({
					gunId: this.gun.id
				}).then((res) => {
					uni.hideLoading()

					this.lockStatus = res.data.lockStatus
					setTimeout(() => {
						this.getPile()
					}, 5 * 1000)

				}).catch(error2 => {
					uni.showToast({
						title: error2
					})
				})
			},
			workStatus2() {
				API_index.findChargeData().then((res) => {

					var list = res.data.chargingRecordList;
					var obj = null;
					for (var i = 0; i < list.length; i++) {

						if (list[i].deviceNo == this.detail.deviceNo && list[i].channelNo == this.gun.channelNo) {
							obj = list[i];
							break;
						}
					}
					if (obj) {
						uni.redirectTo({
							url: "/pages/searchPile/chargeProcess/dcCharging?id=" + obj.id
						})
					}

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

			priceDetail() {
				uni.navigateTo({
					url: 'chargePriceDetails?stationId=' + this.detail.stationId + "&type=" + this.detail.type +
						"&id=" + this.detail.id
				})
			},
			customback2() {
				this.step = 0;
			},
			customback() {
				if (this.isback) {
					if (this.$refs.ujpnavbar) {
						this.$refs.ujpnavbar.navberBack()
					} else {
						uni.navigateBack({

						})
					}

				} else {
					uni.reLaunch({
						url: "/pages/login/welcome"
					})
				}

			},
			gotoLogin() {
				this.onShowRole = true
				if (false) {

				} else {
					uni.navigateTo({
						url: "/pages/login/login?jpcode=jp_team51_charge_id:A_" + this.id
					})
				}

			},
			carTemp() {

			},
			carDet(t) {
				
				if(this.car&&this.car.carNum){
					return
				}
				this.onShowRole = true
				
				var url="/pages/user/car/carDet?jpcode=jp_team51_charge_id:A_" + this.id
				if(	this.car&&	this.car.id){
					url+="&id="+this.car.id
				}
				uni.navigateTo({
					url: url
				})

			},
			openModal() {
				this.show = true;
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			role(bl) {

				if (bl) {
					return true;
				}
				if (this.carplateMust) {

					if (this.car && this.car.carNum) {

					} else {
						uni.showModal({
							title: "提示",
							content: "填写车牌号,离场时可减免部分停车费",
							confirmText: "填写车牌号",
							cancelText: "继续充电",
							success: res1 => {
								if (res1.confirm) {
									
									this.carDet()
								} else if (res1.cancel) {
									//('用户点击取消');
									this.charge(true)
								}
							}
						})


						return false;
					}
				}
				return true;
			},
			getChargeList(){
				var obj=this.carhelp.get("carhelp_getChargeList")
				var time=new Date( ).toLocaleString().substr(0,12).replace("T"," ");
				if(obj&&time==obj.time){
					
					var num1=parseInt(obj.electricQuantity);
					var num2=parseInt(obj.totalServiceMoney) ;
					this.carImg3span1=parseInt(num1/10000);
					this.carImg3span2=parseInt(num2*0.4) ;
					this.carImg3span3=parseInt(num2) ;
					if(num2*0.4>20||this.carImg3span1>=1000){
					
						this.carImg3Bl=true;
					}else{
						this.carImg4Bl=true;
					}
					
					console.log("carhelp_getChargeList",this.carImg3span1,this.carImg3span2)
					return
				}
				
				
				var date =new Date().getTime()-30*1000*60*60*24;
				var startDate =parseUnixTime(new Date(date),'{y}-{m}-{d}');
				API_index.chargingRecordData({
					pageIndex: 1,
					pageSize:999,
					startDate: startDate,
					// endDate: this.endDate
				}).then((res) => {
				
					
					var chargeList =res.data.data;
					var num1=0;
					var num2=0;
					for(var i in chargeList){
						var obj=chargeList[i]
						if(obj.status==2){
							num1+=obj.electricQuantity
							num2+=obj.totalServiceMoney
						}
					}
					console.log(num1,num2)
					this.carhelp.set("carhelp_getChargeList",{
						time: time,
						electricQuantity:num1,
						totalServiceMoney:num2
					})
					this.carImg3span1=parseInt(num1/10000);
					this.carImg3span2=parseInt(num2*0.4) ;
					this.carImg3span3=parseInt(num2) ;
					if(num2*0.4>20||this.carImg3span1>=1000){
						
						this.carImg3Bl=true;
					}else{
						this.carImg4Bl=true;
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getUserCard() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.userCard({
					stationId: this.detail.stationId
				}).then((res2) => {
					uni.hideLoading()
						
					this.userCard = res2.data.regUserCard
					//this.canUse=res2.data.canUse
					//this.user = res.data
					this.personInfo = this.carhelp.getPersonInfo()
					
					if (!this.userCardBool) {
						if (this.personInfo && this.personInfo.userType == "2") {
							 try{
								//this.getChargeList()
								this.userChargingAmount()
								
							}catch(e){
								//TODO handle the exception
								console.log(e)
							}
							
						}

					}
					
					//快捷充电
					if (this.personInfo && (this.personInfo.memberLevel == "3"||this.personInfo.memberLevel == "4") ) {
						if(this.personInfo.quickCharging){
							
							if(this.startCarChargingBl==false){
							
								this.startCarCharging()
							}
						}else if(this.personInfo.quickCharging==null){
							//初始化
							this.quickChargingBl=true
						}
						
							
					}

				}).catch(error2 => {
					uni.showToast({
						title: error2
					})
				})
			},
			getH(item) {

				return item * 100 + 'px'
			},
			getW(item) {
				var t1 = item.endTime.substring(0, 2)
				var t2 = item.startTime.substring(0, 2)
				var k = parseInt(t1) - parseInt(t2);
				return 100 / 24 * k + "%"
			},
			getPile() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.chargingDeviceGunDetail({
					gunNo: this.id,
					jpcode: "jp_team51_charge_id:A_" + this.id
				}).then((res) => {

					uni.hideLoading()
					this.gunDetail = res.data;
					this.detail = res.data.device
					
					if(this.detail.homeApplyId){
						this.pageTitle= "我的家桩充电详情"
					}
					this.station = res.data.station
					this.carplateMust = this.station.carNumRequired;
					this.prices = res.data.prices
					this.pricesInfo = res.data.prices
					this.price = res.data.price
					this.lastTiming=res.data.lastTiming
					this.pricesInfoCurrent = {
						...this.price
					}
					this.pricesInfoCurrent2 = {
						...this.price
					}

					this.gun = res.data.gun
					if(this.gun &&this.gun.workStatus==6){
						this.operating=true;
					}
					this.car =res.data.car
					if (this.carplateMust && this.car && this.car.carNum&&this.carplateMustModelFirst) {
						this.carplateMustModel=true;
						this.carplateMustModelFirst=false;
						
					} else {
						
					}
					
					this.getTemporaryCarNumByOpenId()

					this.lockStatus = res.data.lockStatus;
					this.haveLock = res.data.haveLock;
					this.lockSafeStopTime = res.data.lockSafeStopTime
					this.isVip = res.data.isVip
					this.openStatus = res.data.station.openStatus

					this.isInsert = this.gun.insertStatus
					if (!this.openBool) {
						//this.openBoolShow=true;
						
						uni.showModal({
							title: "提示",
							content: "当前设备仅供内部使用，如有问题可联系客服",
							showCancel: false,
							success: () => {

							}
						})
					}

					if (res.data.chargingAppointment) {

						if (res.data.isMeAppoint) {

							this.getUserCard();


						} else {
							var chargingAppointment = res.data.chargingAppointment
							var data = newDate(chargingAppointment.createTime).getTime()
							var c = hourDistanceArr(new Date(), new Date(data + chargingAppointment
								.reserveMinutes * 60 * 1000))

							var description = '当前充电枪已被其他车主预约，' + c[1] + '分' + c[2] + "秒后预约自动失效。";
							this.isReady = false;

							uni.showModal({
								title: "提示",
								content: description,
								showCancel: false,
								success: () => {

								}
							})
						}

					} else {
						this.getUserCard();
					}
					if (this.gun.workStatus == 2) {
						this.workStatus2()
					}

				}).catch(error => {
					
					uni.hideLoading()
					uni.showModal({
						title: "提示",
						content: "设备扫码异常",
						confirmText: "前往首页",
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}
					})
					// uni.showToast({
					// 	title: error
					// })
				})
			},
			chargeTest(bl) {

				if (process.env.NODE_ENV === "development" && process.car.SIMPLE_RUN) {

					var url = '/pages/searchPile/chargeProcess/charge?stationId=' + this.detail.stationId +
						'&deviceNo=' + this.detail.deviceNo + "&gun=" + this.gun.channelNo + "&carNumber=" + (
							this.car ? this.car.carNum : '');

					url+="&id="+this.id
					uni.navigateTo({
						url: url
					})
				}

			},
			charge(bl) {
				if (!this.role(bl)) {
					return
				}
				if(this.detail.homeApplyId){
					this.startCarCharging()
				}else{
					var url = '/pages/searchPile/chargeProcess/charge?stationId=' + this.detail.stationId +
						'&deviceNo=' + this.detail.deviceNo + "&gun=" + this.gun.channelNo + "&carNumber=" + (
							this.car ? this.car.carNum : '');
						if(this.isback){
							url+="&startMode=1"
						}
						url+="&id="+this.id
						
					uni.navigateTo({
						url: url
					})
				}
				
				


			},
			isInsertBtn() {
				this.isInsert = true;
			},
			getNewYear() {
				//var obj=this.carhelp.get("newyear_activity2023")
				//
				var sz = ["1615623336912621569", "1615623336912621568"];
				var code = parseInt(Math.random() * 2)
				this.carhelp.set("newyear_activity2023", {
					nt: sz[code],
					code: code,
					status: 0
				})

				//先查询另一个领取过没
				userApi.exchangeDetail({
					key: sz[code == 0 ? 1 : 0]
				}).then((res) => {

					if (!res.data.enabled) {

						if (res.data.code == 2) {
							//未开始
						} else {
							//已经结束
						}
						//this.getBannerInfoTop("home-top");	

					} else if (res.data.status == 1) {
						//this.getBannerInfoTop("home-top");	
						//已经兑换，或者不能兑换
					} else if (res.data.status == 2) {
						// this.showNtValue=res.data.totalDiscount
						this.exchangeDetail(sz[code]);
					} else {
						//res.data.status==0
						//this.showNtValue=res.data.totalDiscount
						this.exchangeDetail(sz[code], sz[code == 0 ? 1 : 0]);
					}


				}).catch(error => {
					this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})



			},
			exchangeDetail(exchangeCode, code2) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchangeDetail({
					key: exchangeCode
				}).then((res) => {
					uni.hideLoading();
					//

					if (!res.data.enabled) {

						if (res.data.code == 2) {
							//未开始
						} else {
							//已经结束
						}
						//this.getBannerInfoTop("home-top");	
					} else if (res.data.status == 1) {
						//this.getBannerInfoTop("home-top");	
						//已经兑换，
					} else if (res.data.status == 2) {

						if (code2) {
							//试试另一张卷

							var c = this.carhelp.get("newyear_activity2023")
							if (c) {
								this.carhelp.set("newyear_activity2023", {
									nt: code2,
									code: c.code == 0 ? 1 : 0,
									status: 0
								})
							}

							this.exchangeDetail(code2)
						} else {
							//this.getBannerInfoTop("home-top");	
						}

						//不能兑换
					} else {

						this.showNt = true
						this.showNtStep = 0;
						this.showNtValue = res.data.totalDiscount
					}

				}).catch(error => {
					this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getTemporaryCarNumByOpenId() {
				try {

					API.getTemporaryCarNumByOpenId(this.carhelp.getOpenId()).then((res) => {

						this.temporaryCarNum = res.data
						var temporaryCarNum = res.data
						if (this.temporaryCarNum) {
							var k=false
							if(	this.carplateMustModel==true){
								k=true
								this.carplateMustModel=false
							}

							this.carTempBl = false;
							uni.showModal({
								title: "临牌提醒",
								content: `查询到[${temporaryCarNum}]入场记录`,
								confirmText: "使用临牌",
								cancelText: "取消",
								success: res1 => {
									if (res1.confirm) {
										//this.carDet()	
										this.car = {
											carNum: temporaryCarNum
										}
									} else if (res1.cancel) {
										//('用户点击取消');
										if(k){
											this.carplateMustModel=true
										}
									}

								}
							})
						}

					}).catch(error => {

					})
				} catch (e) {
					//TODO handle the exception
					console.log("errorerrorerrorerrorerror")
				}
			},
			redeemNow(exchangeCode) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchange({
					key: exchangeCode
				}).then((res) => {
					uni.hideLoading();
					this.showNtStep = 1
					this.carhelp.set("newyear_activity2023", {
						nt: exchangeCode,
						status: 1
					})
				}).catch(error => {
					this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showNtStepClick() {
				if (this.showNtStep == 0) {
					var obj = this.carhelp.get("newyear_activity2023")


					if (this.personInfo.userType != 1) {
						this.redeemNow(obj.nt)
					} else {
						this.showNt = false;
						uni.showModal({
							title: "提示",
							content: "游客无法兑换，请先注册为会员后再兑换",
							confirmText: "前往注册",
							success: res1 => {
								if (res1.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res1.cancel) {
									//('用户点击取消');
								}
							}
						})

					}

				} else if (this.showNtStep == 1 || this.showNtStep == 2 || this.showNtStep == 3 || this.showNtStep == 4) {
					this.showNt = false;
					uni.navigateTo({
						url: "/pages/user/coupon/myCoupon"
					})

				}
			},
			getf5surprised() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchangeGroupDetail2("周年红包").then((res) => {
					uni.hideLoading();
					var data=res.data;
					this.key=""
					this.couponList=[]
					if(data.length){
						this.couponList = res.data[0].couponList;
						
						if(this.couponList&&this.couponList.length){
							//this.getBannerInfoTop()
							this.getBannerInfoTop("home-top2");	
						}
					}
					
			
			
				}).catch(error => {
			
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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"
					})
				})
			},
			startCarCharging(){
				
				 if(this.gun&&this.gun.workStatus==2){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content:"快捷充电失败：充电中",
						
					})
				}else if(!this.openBool){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content:"快捷充电失败：仅单位内部员工可用"
					})
				}else if(this.gunDetail.chargingAppointment&&!this.gunDetail.isMeAppoint){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content:"快捷充电失败：已被预约"
					})
				}else if(this.haveLock&&this.lockStatus==1){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content:"快捷充电失败：下降地锁"
					})
				}else if(!this.isInsert){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content:"快捷充电失败：未插枪"
					})
				}else {
					this.startCarChargingApi();
				}
			},
			startCarChargingApi(){
						uni.showLoading({
							title:"快捷充电启动",
							mask: true,
						})
						this.startCarChargingBl=true;
						var submitForm={
							deviceNo:this.detail.deviceNo,
							channelNo:this.gun.channelNo,
							carNumber:this.car ? this.car.carNum : '',
							chargeStrategy:0,
							amount:0,
							payType:2,
						}
						if(this.userCardBool){
							submitForm.userCardId=this.userCard.id
						}
						API.startCarCharging(submitForm).then((res) => {
							if (res.data.status == "5") {
								var _this=this;
								var recordId=res.data.recordId;
								uni.showModal({
									title: '启动充电失败',
									confirmText:"充值",
									cancelText:"暂不启用",
									content:"个人账户余额不足10元,无法启动快捷充电",
									success: function (res) {
											if (res.confirm) {
												console.log('用户点击确定');
												_this.gotoUrl("pages/user/finance/recharge?recordId=" + recordId);
												
											} else if (res.cancel) {
												_this.checkedChange2(0);
												console.log('用户点击取消');
											}
										}
								})
								uni.hideLoading()
							}else{
								this.gotoUrl("pages/searchPile/chargeProcess/dcCharging?id=" + res.data.recordId);
								
							}
							
						}).catch(error => {
							uni.hideLoading()
							if (error == '用户账户余额不足!') {
								var _this=this;
								uni.showModal({
									title: '快捷充电失败',
									confirmText:"充值",
									content:"用户余额不足！",
									success: function (res) {
											if (res.confirm) {
												console.log('用户点击确定');
												_this.showrecharge=true
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
								})
								
							} else {
								uni.showModal({
									title: '提示',
									showCancel:false,
									content:"充电失败:"+( error?error:'未知错误')
								})
							}
							
						
						})
			}
		},

		
	}
</script>

<style lang="scss">
	.priceListBlMain {
		display: flex;
		justify-content: space-between;
		align-items: last baseline;
	}

	.discount-card {

		box-shadow: 0px 0px 8px 0px rgba(0, 65, 30, 0.1);
		border: 1px solid rgba(225, 236, 231, 1);

		border-radius: 8px;
		//background-color: rgba(55, 59, 80, 1);
		padding: 24rpx;
		margin-top: 24rpx;

		.name {
			//color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}

		.progress {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			//	color: rgba(219, 219, 219, 1);
			font-size: 24rpx;
			margin-bottom: 16rpx;
			margin-top: 24rpx;
		}

		::v-deep .u-active {
			background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
		}
	}
	.discount-card-4 {
		background:  #da241e !important;
		.unit{
			color:#fff !important;
		}
		.u-progress{
			    background-color:#cf4c42 !important;
				color: #fff;
		}
		.name{
			color: #ffd695!important;
			font-size: 36rpx;
			  font-family: "SimSun", Arial, sans-serif;  
			font-weight: 400;
			  text-shadow: 2px 1px 0px #800400 ;  
		
		}
		.progress{
				color: #fff;
		}
	}
	
	.temporaryCarNum {
		text-align: right;
		margin-bottom: 10px;
		margin: 0 40rpx;

		span {
			margin: 0 8rpx;
			color: #19be6b;
		}
	}

	.oldTextClassF {

		.tips {
			padding: 36rpx;

			.p {
				font-size: 42rpx !important;
			}

			.content {
				font-size: 34rpx !important;
			}
		}

		.bottom {

			.u-btn {

				font-size: 48rpx
			}
		}

		.text-1 {
			font-size: 56rpx !important;
		}

		.text-2 {
			font-size: 38rpx !important;
		}

		.charging-info {
			.name {
				font-size: 36rpx !important;

				.free {
					font-weight: bold;

					font-size: 36rpx !important;
				}
			}

			.address {
				font-size: 44rpx;
				font-weight: bold;
			}

			.price {
				font-weight: bold;
				font-size: 60rpx !important;

				.unit {
					font-weight: normal;
					font-size: 36rpx !important;
				}

			}

		}
	}


	page {
		background-color: #F6F8F8;
		padding-bottom: 100px;
	}

	.service {
		font-size: 24px;
		color: #101010;
		position: absolute;
		right: 16px;
	}

	.main2 {
		background-color: #fff;
		padding-left: 16px;

		.item {
			border-bottom: 1px solid #e5e7ea;
			padding: 16px 0;

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

				.more {
					font-size: 24px;
					color: #b3b3b3;
					float: right;
					margin-right: 8px;
				}
			}

			.content {
				line-height: 24px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				margin-top: 8px;
				padding-right: 30px;

			}
		}
	}

	.main {
		padding: 40rpx 40rpx 24rpx 40rpx;
		background-image: linear-gradient(#D6EEDC, #F6F8F8);

		.text-1 {
			color: rgba(0, 170, 90, 100);
			font-size: 48rpx;
			line-height: 33px;

		}

		.text-2 {
			color: rgba(102, 102, 102, 100);
			font-size: 32rpx;
			line-height: 22px;
		}

		.charging-info {
			background-color: #fff;
			margin: 0px auto;
			border-radius: 12px;
			padding: 20rpx 38rpx;

			.name {
				margin-top: 8rpx;
				color: #777777;
				font-size: 32rpx;

				.free {
					display: inline-block;
					//width: 72px;
					padding:4rpx 24rpx ;
					//height: 20px;
					line-height: 20px;
					border-radius: 50px;
					background-color: rgba(208, 246, 228, 100);
					color: rgba(0, 185, 98, 100);
					font-size: 28rpx;
					text-align: center;
					margin-left: 12px;
				}
				.workStatusText6{
					background-color: rgba(255, 214, 210, 1);
					color: rgba(255, 56, 56, 1);
				}

			}

			.price-3-card-view {
				display: flex;
				align-items: last baseline;

				.price-3-card {
					max-width: 240rpx;
					min-width: 220rpx;
					display: flex;
					background: linear-gradient(93.02deg, rgba(59, 182, 254, 1) 39.4%, rgba(0, 185, 98, 1) 92.96%);
					border-radius: 4px;
					height: 32rpx;
					min-height: 32rpx;
					margin-left: 32rpx;
					//	align-items: center;
					line-height: 32rpx;

					.num1 {
						img {
							// width: 88rpx;
							//width: 34px;
							height: 32rpx;
						}

						::v-deep .u-image {
							min-height: 32rpx;

						}
						font-size: 22rpx;
						background: rgb(48, 49, 51);
					}

					.num {
						padding: 0 6rpx 0 6rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 22rpx;
						display: flex;
						align-items: center;

					}
				}
				.price-3-card-yue{
					background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
					
				}
			}

			.price-2 {
				display: flex;
				align-items: baseline;

				.price-4 {
					color: rgba(0, 185, 98, 100);
					font-size: 56rpx;
					margin-top: 0rpx;
					display: flex;
					align-items: baseline;

					.unit {
						font-size: 32rpx;
						color: #666666;
						margin-left: 4px;
					}
				}

				.price-3 {
					font-size: 24rpx;
					color: #fff;
					margin-left: 8rpx;
					padding-right: 9rpx;
					background: #00B962;
					border-radius: 8rpx;

					.num1 {
						padding-left: 12rpx;
						border-radius: 8rpx 0 8rpx 8rpx;
						padding-right: 18rpx;
						background: #121212;
						-webkit-clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
						clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);

					}

				}
			}

			.price {
				color: rgba(0, 185, 98, 100);
				//font-size: 56rpx;
				margin: 8rpx 0;

				.span {
					font-size: 56rpx;
				}

				.unit {
					font-size: 32rpx;
					color: #666666;
					margin-left: 4px;
				}

			}

			.address {
				color: #333333;
				font-size: 40rpx;

				.explain {
					line-height: 22px;
					color: rgba(22, 119, 255, 100);
					font-size: 32rpx;
					float: right;
				}
			}
		}
	}

	.main-head {
		display: flex;
		justify-content: space-between;
	}

	.charge-img {

		width: 80px;
		overflow: hidden;
		height: 80px;

		// margin-right: 16rpx;
		img {
			width: 100%;
		}
	}
	.cost-explainMain{
		
		
		margin: 24rpx 40rpx 24rpx 40rpx;
				padding: 30rpx 40rpx;
				 background-color: #fff;
				
				// background-color: #fff;
				// margin: 0 40rpx;
				 border-radius: 12px;
				// padding: 38rpx 40rpx;
				// display: flex;
				
				 font-size: 36rpx;
				
			
				
				// 费用说明
				.cost-explain {
					
					margin-bottom: 12rpx;
					border-radius: 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.car-number {
						display: flex;
						  font-size: 32rpx;
					}
					
					img {
					
						vertical-align: middle;
					}
					.text {
						font-size: 36rpx;
						color: #101010;
						//width: 330rpx;
						white-space: pre;
					}
				
					.iconfont {
						color: #b3b3b3;
						font-size: 48rpx
					}
				}
				.cost-explain2{
					.car-number{
						font-size: 28rpx;
						color: #FF3D00;
					}
				}
	}
	

	.tips {
		background-color: #fff;
		padding: 40rpx;
		margin: 8rpx 40rpx 0 40rpx;
		border-radius: 12px;

		.p {
			line-height: 25px;
			color: #333333;
			font-size: 32rpx;
			font-weight: 550;
		}

		.content {
			margin-top: 16rpx;
			line-height: 22px;
			color: #666666;
			font-size: 28rpx;
		}
	}

	.bottom {

		width: 100%;
		padding: 28rpx 0;


		.u-btn {
			margin: 0 40rpx;
			line-height: 88rpx;
			height: 88rpx;
			font-size: 40rpx
		}
	}

	::v-deep .u-alert-desc {
		color: rgba(255, 115, 0, 100);
		font-size: 16px
	}

	// 入场车辆
	.carp {
		margin: 0 40rpx;
	}

	.carImg {
		margin: 0 40rpx;

		img {
			width: 100%;
		}
	}
	.carImg3 {
		margin: 0 40rpx;
		background: linear-gradient(32.4deg, rgba(59,182,254,1) 20.49%,rgba(0,185,98,1) 118.87%);
		border-radius: 8px;
	}
	.carImg3-yue {
			margin: 0 40rpx;
			background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
			border-radius: 8px;
		}
	.carImg2-yue {
			line-height: 20px;
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			padding:40rpx;
			//background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
			background: url('@/assets/img/9-4/antFill-crown.svg');
			background-repeat: repeat-y;
			background-position-x: 440rpx;
			.carImg-2{
				span{
					font-size: 48rpx;
					color:red;
					margin: 0 4rpx;
					font-weight: bold;
					padding:0rpx 4rpx;
				}
			}
			.carImg-3{
				margin-top:8rpx ;
				span{
					
					padding:8rpx 16rpx;
					border-radius: 12px;
					background-color: rgba(255, 255, 255, 1);
					text-align: center;
					color: #795626 ;
					font-size: 12px;
				}
			}
			
		}
	.carImg2 {
		line-height: 20px;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		padding:40rpx;
		background: url('@/assets/img/9-4/6show.png');
		background-repeat: repeat-y;
		background-position-x: 440rpx;
		.carImg-2{
			span{
				font-size: 48rpx;
				color:red;
				margin: 0 4rpx;
				
				font-weight: bold;
				padding:0rpx 4rpx;
			}
		}
		.carImg-3{
			margin-top:8rpx ;
			span{
					
				padding:8rpx 16rpx;
				border-radius: 12px;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				color: rgba(0, 130, 69, 1);
				font-size: 12px;
			}
		}
		
	}

	.showOss2 {

		::v-deep .u-model,
		::v-deep .u-mode-center-box {
			background-color: transparent;
		}
	}


	.classtable {
		margin: 0rpx 40rpx;

		.td1 {
			width: 50rpx;
			padding: 12rpx 0;
			text-align: center;

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

			font-size: 10px;
		}

		.td2 {
			padding-left: 16rpx;
			font-size: 12px;
			line-height: 24px;

			.dian {
				padding: 0 10rpx
			}
		}

	}

	.btnview {

		display: flex;
		flex-direction: column;
		align-items: center;

		.btnview1 {}

		.btnview2 {
			color: #999999;
			margin-top: 20rpx;
			padding-bottom: 48rpx;
		}
	}


	.sign-6 {
		//background: linear-gradient(89.4deg, rgba(255,61,0,1) 2.8%,rgba(255,134,0,1) 98.02%);
		background: linear-gradient(89.4deg, rgba(0, 164, 87, 1) 2.8%, rgba(0, 206, 141, 1) 98.02%);
		color: rgba(255, 255, 255, 1);
		padding: 0 10rpx;
	}
	.chat_hhh_time {
		display: flex;
		justify-content: space-between;
	}

	.chat_hhh {
		.chatShow {
			.showspan{
				    float: right;
					    color: #00b962;
			}
			margin-bottom: 280rpx;
			//height: 160px;
			visibility: hidden;
			//  width: 120px;
			padding: 4rpx 16rpx;


			text-align: initial;


			/* 定位 */
			position: absolute;
			z-index: 1;

			padding: 4rpx 16rpx;
			background-color: #fff;
			color: rgba(102, 102, 102, 1);
			border-radius: 3px;
			font-size: 24rpx;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);


		}

		.chatShowA {
			margin-left: -60rpx;
		}

		.chatShowB {
			margin-left: -160rpx;
		}

		.chatShowNo {
			visibility: hidden;
		}

		.chatShowOk {
			visibility: visible;
		}

		background: #f9f9f9;
		text-align: center;
		min-height: 160px;
		display: flex;
		font-size: 20rpx;

		.current1 {
			.chats2 {
				//border: 1px solid red;
			}
		}

		.current2 {
			.chats1 {
				border: 1px solid #333333;


				border-bottom: 0px;
			}

			.chats2 {
				border: 1px solid #333333;
				background: #26FF6B !important;

				border-top: 0px;
			}

		}

		.chatTime {
			min-width: 68rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			border: 1px solid #f9f9f9;
			
		
			.chats0 {
				// background-color: #ff8b17;
				// color: #ffecdd;
				display: flex;
				justify-content: center;

				flex-wrap: wrap;
				flex-direction: column;
			}
			
			.chats9 {
				opacity: 0;
				display: flex;
				justify-content: center;

				flex-wrap: wrap;
				flex-direction: column;
			}

			.chats1 {
				background: #dcdcdc;
				min-height: 30rpx
			}

			.chats2 {
				background: #80e0a6;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
	
	.quickMain{
		::v-deep .u-mode-center-box{
			background-color: transparent;
		}
		::v-deep .u-model{
			background-color: transparent;
		}
		.quickMain-slot-content{
			.quickMain-img{
				    position: relative;
				    top: 120rpx;
				    text-align: center;
				img{
					width: 160rpx;
					height: 240rpx;
				}
			}
			.quickMain-bodyMain{
				background-color:#fff;
				border-radius: 15px;
			}
			.quickMain-body{
				
				margin:0 56rpx ;
				color: rgba(51, 51, 51, 1);

				.quickMain-text1{
					font-size: 48rpx;
					text-align: center;
					padding: 132rpx 0 32rpx 0;
				}
				.quickMain-text2{
					margin-bottom: 20rpx ;
					//color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					img{
						width: 40rpx;
						//height: 120px;
					}
				}
				
			}
			
			
		}
	}
	
	
	.slogan-4 {
		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;
	
	}
	
	
	.imageshake {
		position: relative;
		animation: shake 0.5s ease-in-out infinite;
	}
	
	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}
	
		25% {
			transform: rotate(8deg);
		}
	
		50% {
			transform: rotate(0deg);
		}
	
		75% {
			transform: rotate(-8deg);
		}
	
		100% {
			transform: rotate(0deg);
		}
	}
	.showOssK {
	
		::v-deep .u-model,
		::v-deep .u-mode-center-box {
			background-color: transparent;
		}
	}
	// .showOss {
	
	// 	::v-deep .u-model,
	// 	::v-deep .u-mode-center-box {
	// 		background-color: transparent;
	// 	}
	// }
	.swiper {
		height: 700rpx;
	
		.swiperitem {
			height: 700rpx;
		}
	}
	
	.useFreeCoupon{
		font-size: 24rpx;
		color:#FF3D00;
	}
	
	
	.sign {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		
		.sign-tag {
			
			height: 36rpx;
			line-height: 32rpx;
			border-radius: 8rpx;
			//background-color: rgba(255, 255, 255, 100);
			//color: rgba(255, 139, 0, 100);
			font-size: 10px;
			text-align: center;
			//border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 8rpx;
			margin-right: 8rpx;
			margin-bottom: 8rpx;
		}
	
		.sign-0 {
			background: linear-gradient(89.4deg, rgba(129, 97, 255, 1) 2.8%, rgba(169, 147, 255, 1) 98.02%);
			color: rgba(255, 255, 255, 1);
			//padding: 0 10rpx;
			//border: 1px solid rgba(255, 139, 0, 100);
		}
	
		.sign-5 {
			background: linear-gradient(89.4deg, rgba(255, 61, 0, 1) 2.8%, rgba(255, 134, 0, 1) 98.02%);
			color: rgba(255, 255, 255, 1);
			//padding: 0 10rpx;
		}
	
		.sign-1 {
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 139, 0, 100);
			border: 1px solid rgba(255, 139, 0, 100);
	
		}
	
		.sign-2 {
			background-color: rgba(255, 255, 255, 100);
			color: rgba(153, 153, 153, 100);
			border: 1px solid rgba(204, 204, 204, 100);
	
		}
	
		.sign-3 {
			background-color: rgba(255, 255, 255, 100);
			color: #8161FF;
			border: 1px solid #8161FF;
	
		}
	
		.sign-4 {
			background-color: rgba(255, 255, 255, 100);
			color: #00B962;
			border: 1px solid #00B962;
		}
	}
	
	.class20250501{
		width: 670rpx;
		//height: 200rpx;
		background: url(@/assets/img/20250501/char-index-1.png) round;
		    background-size: 100%;
			margin: 0 40rpx;
			//background: linear-gradient(32.4deg, rgba(59,182,254,1) 20.49%,rgba(0,185,98,1) 118.87%);
			border-radius: 8px;
			padding:32rpx 32rpx 16rpx 32rpx;
			    display: flex;
			    flex-direction: column;
			    justify-content: space-between;
				.body1{
					color: #fff;
					font-size: 32rpx;
					span{
						color:#FDE94E;
						font-weight: bold;
					}
					.text1{
						font-weight: bold;
					}
					.text2{
						    margin-top: -20rpx;
						font-size: 28rpx;
					}
				}
				.body2{
					    display: flex;
						margin-top: 16rpx;
					.botton{
						    padding: 2px 6px;
						line-height: 20px;
						border-radius: 50px;
						background-color: rgba(255, 255, 255, 1);
						font-size: 12px;
						color: rgba(0, 130, 69, 1);

					}
				}
	}
</style>