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

<template>
	<view>
		<!-- chargingPileDetailsFamily -->
		<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==0">
			<ujp-navbar title="我的家桩充电详情" :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 class="price" v-if="detail.stationAddress">
						<text class="unit">{{detail.stationAddress}}</text>
					</view>
					<view v-if="price" class="priceListBlMain">

						
					</view>
					
					
				</view>
				
				<view class="charging-info">
					<view class="row" @click="startTypeShow=true">
						<view class="key">充电方式</view>
						<view class="value">{{startTypeList[startType].label}}<u-icon name="arrow-right"></u-icon></view>
					</view>
					<view class="row" v-show="startType==0"  @click="startTypeTimeShow=true" >
						<view class="key">定时充电</view>
						<view class="value">{{startTypeTimeList[0][startTypeTimeValue1].label}}:{{startTypeTimeList[1][startTypeTimeValue2].label}}<u-icon name="arrow-right"></u-icon></view>
					</view>
				</view>
				
			</view>
			<u-select v-model="startTypeShow"  @confirm="startTypeConfirm"
			 :default-value="[startType]"
			 :list="startTypeList"></u-select>
			
			<u-select v-model="startTypeTimeShow" 
			title="时:分"
			 mode="mutil-column"
			 @confirm="startTypeTimeConfirm"
			 :default-value="[startTypeTimeValue1,startTypeTimeValue2]"
			 :list="startTypeTimeList"></u-select>
			 
			<view class="carImg" v-if="personInfo&&personInfo.userType!=2">
					<img @click="gotoLogin" src="@/assets/img/gologin/img.png">
			</view>
			
			
			
			<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()">{{startType==0?'定时充电':''}}{{startType==1?'开始充电':''}}</u-button>
				<u-button shape="circle" type="success"   v-if="0"
				  @click="readyToTimingChargingApi()">测试</u-button>
				<view v-if="lastTiming&&lastTiming.startTime&&gunDetail.nextTiming" style="
					text-align: center;
					color: #FF9800;
					margin-top: 5px;
				" >
					<u-icon
					  style="    margin-top: 2px;"
					  size="30"
					  name="info-circle"
					></u-icon>
					已设置{{lastTiming.startTime}}的定时充电，再次启动将会覆盖设置
				</view>
			</view>
			
			
		 
		
			
			<!--提示  -->
			<view class="tips">
				
				
				
				<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="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="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 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 {
				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,
				projectName: "",
				
				showrecharge:"",
				bannerListTop:[],
				getBannerInfoTopBl:true,
				showTop:false,
				showTopImg:"",
				showTopIndex: 0,
				startType:1,
				startTypeShow:false,
				startTypeTimeShow:false,
				startTypeTimeValue1:0,
				startTypeTimeValue2:0,
				lastTiming:{},
				startTypeTimeList:[
					[
						{
							label:"00",
							value:"00"
						},
					],
					[
						{
							label:"00",
							value:"00"
						}
					]
					
				],
				startTypeStartTime:"",
				startTypeList:[
					{
						label:"设置定时",
						value:0
					},
					{
						label:"立即开始",
						value:1
					}
				]
				 
			}
		},

		computed: {
			checked(){
				return !this.startType
			},
			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() {
			uni.hideToast();
			this.checkSubscribe()
			if (this.onShowRole) {
				this.getPile()
			}

		},
		onReady() {
		
			
			
		},
		onLoad(op) {
			//this.startCarCharging()
			this.init(op)
		},
		methods: {
			startTypeTimeConfirm(e){
				console.log(e)
				this.startTypeTimeValue1=this.startTypeTimeList[0].findIndex(item=>{
					return item.value==e[0].value
				})
				this.startTypeTimeValue2=this.startTypeTimeList[1].findIndex(item=>{
					return item.value==e[1].value
				})
				console.log(this.startTypeTimeValue2,this.startTypeTimeValue1)
			},
			// startTypeConfirm(e){
			// 	console.log(e);
			// 	this.startType=e?0:1
			// 	console.log(this.startType);
			// 	if(this.lastTiming==null){
			// 		this.startTypeTimeValue1=new Date().getHours()
			// 		this.startTypeTimeValue2=new Date().getMinutes()
			// 	}
			// },
			startTypeConfirm(e){
				console.log(e);
				this.startType=e[0].value
				if(this.lastTiming==null){
					this.startTypeTimeValue1=new Date().getHours()
					this.startTypeTimeValue2=new Date().getMinutes()
				}
			},
			onShowK() {
				uni.hideToast();
				this.checkSubscribe()
				if (this.onShowRole) {
					this.getPile()
				}
			
			},
			init(op){
				this.startTypeTimeList[0]=[]
				for(var i=0;i<24;i++){
					this.startTypeTimeList[0].push({
							label:i<10?"0"+i:i,
							value:i<10?"0"+i:i,
						})
				}
				this.startTypeTimeList[1]=[]
				for(var i=0;i<60;i++){
					this.startTypeTimeList[1].push({
							label:i<10?"0"+i:i,
							value:i<10?"0"+i:i,
						})
				}
				
				
				
				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");	
				}
				//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) {
						
						
					} else {
						//this.getBannerInfoTop("home-top");	
					}
					
					this.getPile()
						
				} else {
					uni.showToast({
						title: "请扫码充电"
					})
				}
			},
			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) {
				var p = 0

				if (userCard && userCard.chargeDegreeLimit) {
					p = userCard.chargedDegree / userCard.chargeDegreeLimit * 100
				}
				if (p > 100) {
					p = 100
				}
				return p.toFixed(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){
					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() {
				
			},
			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
					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
					if(this.lastTiming){
						
						if(this.lastTiming.lastStartMode==4||this.gunDetail.nextTiming){
							this.startType=0
						}
						if(this.lastTiming.startTime){
							var sz=this.lastTiming.startTime.split(":")
							this.startTypeTimeConfirm([
								{
									value:sz[0],
									label:sz[0]
								},
								{
									value:sz[1],label:sz[1]
								
								}
							])
						}
						
					}
					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.carplateMustModel=true;
					} else {
						
					}
					
					

					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 (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
				}
				
				
	// 			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
	// 			})
	
				if(this.startType==1){
					this.startCarCharging()
				}
				
				if(this.startType==0){
					this.readyToTimingCharging()
				}
			},
			isInsertBtn() {
				this.isInsert = true;
			},
			
			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"
					})
				})
			},
			
			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"
					})
				})
			},
			readyToTimingCharging(){
				
				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.readyToTimingChargingApi();
				} 
			},
			readyToTimingChargingApi(){
						uni.showLoading({
							title:"定时充电启动",
							mask: true,
						})
						this.startTypeStartTime=
						this.startTypeTimeList[0][this.startTypeTimeValue1].value+":"+this.startTypeTimeList[1][this.startTypeTimeValue2].value
						
						
						var submitForm={
							deviceNo:this.detail.deviceNo,
							channelNo:this.gun.channelNo,
							startTime:this.startTypeStartTime
						}
						
						API.readyToTimingCharging(submitForm).then((res) => {
							uni.hideLoading()
							uni.showModal({
									title: '提示',
									showCancel:false,
									content:"设置完成"
							})
							this.getPile()
						}).catch(error => {
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								showCancel:false,
								content:"充电失败:"+( error?error:'未知错误')
							})
							
						
						})
			},
			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: 20rpx auto;
			border-radius: 12px;
			padding: 20rpx 38rpx;
			.row{
				display: flex;
				    justify-content: space-between;
					    padding: 5px 0;
				.key{
					color:#777777;
					font-size: 32rpx;
				}
				.value{
					display: flex;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}
			}
			.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;
		}
	}
</style>