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

<template>
	<view>
		<view v-show="step==1">
				<ujp-navbar title="费用说明页" :custom-back="customback2">
					
				</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">
						<view class="title">
							电费+服务费
							<view class="iconfont more">
								&#xe600;
							</view>
						</view>
						<view class="content">
							当前时段：{{price.startTime}}~{{price.endTime}}    费用为{{price.costPrice}} 元/度(含电费{{price.electricityPrice}}元/度 + 服务费{{price.servicePrice}}元/度)
							
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="title">
							停车费用
						</view>
						<view class="content">
							充电免停2小时停车费(临牌车不享受免停)
						</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="text-1">
				{{isInsert?'可充电':'未插枪'}}
			</view>
			<view class="text-2">
				{{isInsert?'充电枪已连接，可进行充电':'未检测到充电枪，若已插枪，请拔出重插'}}
				
			</view>
			<view class="charging-info">
				<view class="name">
					{{detail.name}}/充电枪{{gun.channelNo>9?gun.channelNo:'0'+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">
					<text>{{price.costPrice}}</text><text class="unit">元/度</text>
				</view>
				<view class="address">
					{{detail.stationAddress}}
					<text class="explain" @click="step=1">费用说明</text>
				</view>
			</view>
		</view>
		<!--提示  -->
		<view class="tips" >
			<p class="p">提示：</p>
			<!-- <view class="content" v-if="!isInsert">

				点击降锁后，请稍等几十秒，待地锁完全下降后，再驶入车位。
				
			</view> -->
			<view class="content">
			
				{{carDetText}}
				
			</view>
			
		</view>
		<!-- 入场车辆 -->
		<!-- 未填写车牌状态 -->
		<view class="car" v-if="false">
			<view class="car-name">
				入场车辆
			</view>
			<input type="text" placeholder="填写车牌号减免停车费">
		</view>
		<!-- 填写车牌后状态 -->
		<view class="car">
			<view class="car-name">
				入场车辆
			</view>
			<view class="car-number">
				{{car?car.carNum:''}}
				<img @click="carDet(car?car.carNum:'')" src="../../../static/img/riLine-edit-box-line Copy.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" @click="getPile()" v-if="gunDetail.chargingAppointment&&!gunDetail.isMeAppoint"   >已被预约</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>

			<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 from "@/apis/chargeProcess.js"
	import {
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'

	export default {
		data() {
			return {
				step:0,
				isInsert:false,
				isReady: false,
				onShowRole: false,
				id: "",
				car: {},
				isback: false,
				gun: {},
				prices: {},
				price: {},
				gunDetail:{},
				detail: {
					no: '',
					interface: '',
					type: '',
					power: 0,
					price: [

					]

				},
				consumerPhone: "",
				description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。',
				show: false,
				title: '联系客服',

				confirmText: '拨打电话',
				content: '余额不足5，请先充值。',
				carDetText: '',
			}
		},
		onShow() {
			uni.hideToast();
		
			if (this.onShowRole) {
				this.getPile()
			}
		
		},
		methods: {
			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){
					uni.navigateBack({
						
					})
				}else{
					uni.reLaunch({
						url:"/pages/login/welcome"
					})
				}
				
			},
			carDet(t){
				this.onShowRole = true
				if(t){
					uni.navigateTo({
						url: "/pages/user/car/index?jpcode=jp_team51_charge_id:A_" +  this.id
					})
				}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() {
				 
				
			},
			getPile() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.chargingDeviceGunDetail({
					gunNo: this.id,
					jpcode: "jp_team51_charge_id:A_" + this.id
				}).then((res) => {
					this.gunDetail= res.data;
					this.detail = res.data.device
					this.prices = res.data.prices
					this.price=res.data.price
					this.gun = res.data.gun
					this.car = res.data.car
					
					this.isInsert=this.gun.insertStatus
					this.role()
					if (res.data.chargingAppointment) {

						if (res.data.isMeAppoint) {
							
						} else {
							var chargingAppointment = res.data.chargingAppointment
							var data = new Date(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: () => {

								}
							})
						}

					}

					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			charge() {
				//this.role()
				
					uni.navigateTo({
						url: '/pages/searchPile/chargeProcess/charge?stationId=' + this.detail.stationId +
							'&deviceNo=' + this.detail.deviceNo + "&gun=" + this.gun.channelNo + "&carNumber=" + (
								this.car ? this.car.carNum : '')
					})
				

			},
			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">
	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: 28px 20px;
		background-image: linear-gradient(#D6EEDC, #F6F8F8);

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

		}

		.text2 {
			color: rgba(102, 102, 102, 100);
			font-size: 16px;
			line-height: 22px;
		}

		.charging-info {

			background-color: #fff;
			margin: 20px auto 0;
			border-radius: 12px;
			padding: 20px;

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

				.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: 14px;
					text-align: center;
					margin-left: 12px;
				}

			}

			.price {
				color: rgba(0, 185, 98, 100);
				font-size: 28px;
				margin-top: 12px;

				.unit {
					font-size: 16px
				}
			}

			.address {
				line-height: 23px;
				color: rgba(102, 102, 102, 100);
				font-size: 16px;
				margin-top: 12px;

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

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

		.p {
			line-height: 25px;
			color: rgba(16, 16, 16, 100);
			font-size: 18px;
		}

		.content {
			margin-top: 8px;
			line-height: 22px;
			color: rgba(102, 102, 102, 100);
			font-size: 16px;
		}
	}

	.bottom {
		background-color: #fff;
		width: 100%;
		padding: 12px 0;
		position: fixed;
		bottom: 0;
		left: 0;

		.u-btn {
			width: 91.4%
		}
	}

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

	// 入场车辆
	.car {
		background-color: #fff;
		margin: 20px;
		border-radius: 12px;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		font-size: 18px;

		img {

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