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

<template>
	<view>
		<view v-show="step==1">
				<ujp-navbar title="费用说明页" :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"  @click="priceDetail" v-if="price">
						<view class="title">
							电费+服务费
							<view class="iconfont more">
								&#xe600;
							</view>
						</view>
						<view class="content">
							当前时段：{{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>
					<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="充电枪详情" :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">
						{{isInsert?'可充电':'未插枪'}}
					</view>
					<view class="text-2">
						{{isInsert?'充电枪已连接，可进行充电':'未检测到充电枪，若已插枪，请拔出重插'}}
						
					</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">
					{{gun.sortNo}}号/{{detail.name}}枪{{gun.channelNo}}
					
					<text class="free" v-if="gunDetail.chargingAppointment&&gunDetail.isMeAppoint">您已预约</text>
					<text class="free" v-else-if="gunDetail.chargingAppointment&&!gunDetail.isMeAppoint">已被预约</text>
					<text class="free" v-else>{{gun.workStatusText}}</text>
				</view>
				<view class="price" v-if="price">
					<text>{{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>
		</view>
		
		<view class="cost-explain">
			<view class="text">
				费用说明
			</view>
			<view class="iconfont" style="
					width: 80px;
					text-align: right;
				"
			 
			 @click="step=1">
				&#xe600;
			</view>
		</view>
		
		<!--提示  -->
		<view class="tips"  v-if="userCardBool" style="margin-bottom: 40rpx;" >
			<p class="p">会员活动：</p>
			<!-- <view class="content" v-if="!isInsert">
				点击降锁后，请稍等几十秒，待地锁完全下降后，再驶入车位。
			</view> -->
			<view class="content" :style="canUse?'':'color: red;'" >
			
				{{canUse?'充电服务费月卡':'此充电站不支持月卡服务'}}
				 
			</view>

		</view>
	<!-- 填写车牌后状态 -->
	<view class="car">
		<view class="car-name">
			入场车辆
		</view>
		<view class="car-number">
			{{car?car.carNum:''}}
			<img   v-if="!car" @click="carDet(car?car.carNum:'')" src="../../../static/img/riLine-edit-box-line2.svg" alt="">
		</view>
	</view>
	

		<view class="bottom">
			 
			<!-- 解锁中 -->
			<!-- 						<u-button shape="circle" type="success" style="opacity: 0.4;">
							解锁中<img style="margin-left: 4px;" src="../../../static/img/riLine-refresh-line.svg" alt="">
						</u-button> -->
			<!-- 刷新充电枪状态 -->
			<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>
			
			
			<u-button shape="circle" type="success" @click="getPile()"  v-else-if="gunDetail.chargingAppointment&&!gunDetail.isMeAppoint"   >已被预约</u-button>
			
			
			<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>
			
			<!-- 开始充电 -->
			 <u-button shape="circle" type="success" v-else  @click="charge"  >开始充电</u-button>
		</view>
		<!--提示  -->
		<view class="tips"  >
			<p class="p">注意事项：</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>
	</view>
</template>

<script>
	import * as API_index from '@/apis/index.js'
	import * as API from "@/apis/chargeProcess.js"
	import {
		newDate,
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'

	export default {
		data() {
			return {
				station:{},
				step:0,
				isInsert:false,
				isReady: false,
				onShowRole: false,
				id: "",
				car: {},
				isback: false,
				gun: {},
				prices: {},
				price: {},
				gunDetail:{},
				haveLock :false,
				lockSafeStopTime:0,
				lockStatus:'',// 1抬锁 2落锁
				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,
			}
		},
		computed:{
			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();
		
			if (this.onShowRole) {
				this.getPile()
			}
		
		},
		methods: {
			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"
					})
				})
			},
			vinCk(){
				
				if(this.userCard&&this.userCard.vin&&this.gun&&this.gun.vin){
					if(this.userCard.vin==this.gun.vin){
						return true
					}else{
						return false
					}
				}else{
					return true
				}
			},
			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"
					})
				}
				
			},
			carDet(t){
				this.onShowRole = true
				if(false){
					
				}else{
					uni.navigateTo({
						url: "/pages/user/car/carDet?jpcode=jp_team51_charge_id:A_" +  this.id
					})
				}
				
			},
			openModal() {
				this.show = true;
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			role() {
				 
				
			},
			getUserCard(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.userCard({
					stationId:this.detail.stationId
				}).then((res2) => {
						uni.hideLoading()
					console.log(res2)
					this.userCard=res2.data.regUserCard
					this.canUse=res2.data.canUse
					//this.user = res.data
					
					if(this.userCardBool){
						//检查vin码
						 
					}
					
				}).catch(error2 => {
					uni.showToast({
						title: error2
					})
				})
			},
			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.prices = res.data.prices
					this.price=res.data.price
					this.gun = res.data.gun
					
					this.car = res.data.car
					
					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: () => {
						
							}
						})
					}
					this.role()
					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
					// })
				})
			},
			charge() {
				//this.role()
				var url='/pages/searchPile/chargeProcess/charge?stationId=' + this.detail.stationId +
							'&deviceNo=' + this.detail.deviceNo + "&gun=" + this.gun.channelNo + "&carNumber=" + (
								this.car ? this.car.carNum : '');
					
					 
					uni.navigateTo({
						url: url
					})
				

			},
			isInsertBtn(){
				this.isInsert=true;
			}
		},

		onReady() {

			 
			var consumerPhone = this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
			var carDetText = this.carhelp.getConfig().carDet
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (carDetText) {
				this.carDetText = carDetText
			}
		},
		onLoad(op) {
			if (op.isback) {
				this.isback = true
			}
			if (op.id) {
				this.id = op.id
				
				
				
				//this.carhelp.setGunId(op.id)
				this.getPile()
				
			} else {
				uni.showToast({
					title: "请扫码充电"
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.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;
					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;
				}

			}

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

				.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-explain{
	margin: 0px 40rpx 24rpx 40rpx;
	padding: 40rpx;
	background-color: #fff;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.text{
		font-size: 36rpx;
		color: #101010;
	}
	.iconfont{
		color: #b3b3b3;
		font-size: 48rpx
	}
}
	.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
		}
	}

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

	// 入场车辆
	.car {
		background-color: #fff;
		margin: 0 40rpx;
		border-radius: 12px;
		padding:38rpx 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;
       .car-number{
		   display: flex;
	   }
		img {

			vertical-align: middle;
		}
	}
</style>