jp-charge/pagesFinance/preengaged/preengagedListDetails.vue

<template>
	<view>
		<u-navbar title="预约单详情">

		</u-navbar>
		
		<u-alert-tips type="warning" v-if="detail.chargingAppointment.status == '0'" :description="description"></u-alert-tips>
		<view class="reverse-time">
			<view class="time" v-if="detail.chargingAppointment.status == '0'">
				预留{{detail.chargingAppointment.reserveMinutes}}分钟
			</view>
			<view class="time" v-if="detail.chargingAppointment.status == '1'">
				预留{{detail.chargingAppointment.reserveMinutes}}分钟
				<view class="img-box">
					<img src="../../assets/img/finished.png" alt="">
				</view>
			</view>
			<view class="time" v-if="detail.chargingAppointment.status == '3'">
				预留{{detail.chargingAppointment.reserveMinutes}}分钟
				<view class="img-box">
					<img src="../../assets/img/canc.png" alt="">
				</view>
			</view>
			<view class="time" v-if="detail.chargingAppointment.status == '2'">
				预留{{detail.chargingAppointment.reserveMinutes}}分钟
				<view class="img-box">
					<img src="../../assets/img/f.png" alt="">
				</view>
			</view>
			<view class="time refused" v-if="detail.chargingAppointment.status == '4'">
				{{detail.chargingAppointment.statusText}}
			</view>
			<view class="time refused" v-if="detail.chargingAppointment.status == '9'">
				{{detail.chargingAppointment.statusText}}
			</view>
			<view class="details-item">
				<view class="item">
					<view class="item-name">
						预约单号
					</view>
					<view class="item-content">
						{{detail.chargingAppointment.flowNo}}
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						预计开始充电
					</view>
					<view class="item-content">
						{{detail.chargingAppointment.endTime}}
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						预计充电时长
					</view>
					<view class="item-content">
						{{(detail.chargingAppointment.estimateMinutes/60).toFixed(2)}}
					</view>
				</view>
			</view>
		</view>
		<!-- 充电桩详情 -->
		<view class="charge-pile">
			<view class="box">
				<view class="name ellipsis">
					{{detail.chargingDevice.stationName}}/{{detail.chargingDevice.name}}
				</view>
				<view class="address ellipsis">
					{{detail.chargingDevice.address}}
				</view>
				<text class="iconfont more">
					&#xe600;
				</text>
			</view>

			<view class="tel" @click="phoneClick(detail.chargingAppointment)">
				<view class="tel-text">
					联系电话
				</view>
				<view class="tel-num">
					{{detail.chargingAppointment.regUserName.slice(0,1)+'先生'}}{{" "}}{{detail.chargingAppointment.phone}}
					<text class="iconfont more2">
						&#xe600;
					</text>
				</view>
			</view>
			<view class="details-item">
				<view class="item">
					<view class="item-name">
						预约单生成时间
					</view>
					<view class="item-content">
						{{detail.chargingAppointment.createTime}}
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						电费单价
					</view>
					<view class="item-content">
						{{detail.price.electricityPrice }}元/度
					</view>
				</view>
				<view class="item">
					<view class="item-name">
						充电服务费
					</view>
					<view class="item-content">
						{{detail.price.servicePrice }}元/度
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom">
			<u-button shape='circle' class="refuse-btn" v-if="detail.chargingAppointment.status == '0'" @click="refuseClick(detail.chargingAppointment)">拒绝</u-button>
			<u-button type="success" shape='circle' v-if="detail.chargingAppointment.status == '0'" @click="sureClick(detail.chargingAppointment)">确认</u-button>
			<!-- <u-button shape='circle' class="cancel-btn" v-if="detail.chargingAppointment.status == '4' || detail.chargingAppointment.status == '9'">删除订单</u-button> -->
		</view>
	</view>
</template>

<script>
	import * as myApi from '@/apis/my.js'
	import {
		hourDistanceArr,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	
	export default {
		data() {
			return {
				description: '等待桩主确认预约单，剩余时间04:59:59',
				id: '',
				detail: {},
				estimateMinutes: '',
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.getAppointmentDetail();
			}
		},
		methods: {
			getAppointmentDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myApi.merchantAppointmentDetail(this.id).then((res) => {
					uni.hideLoading();
					
					this.detail = res.data;
					
					if(this.detail.chargingAppointment.status=="0"){
						//this.description= '等待桩主确认预约单，剩余时间'
						var data=new Date(this.detail.chargingAppointment.createTime).getTime()
						var c=hourDistanceArr(new Date(),new Date(data+5*60*1000))
					
						this.description= '等待桩主确认预约单，剩余时间'+c[1]+'分'+c[2]+"秒";		
						
						
						setTimeout(()=>{
							this.getInfo(true);
						},2000)
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			phoneClick(item) {
				uni.makePhoneCall({
					phoneNumber: item.phone
				});
			},
			sureClick(item) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myApi.merchantChangeStatus({
					id: item.id,
					status: '1'
				}).then((res) => {
					uni.hideLoading();
					this.getAppointmentList(true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			refuseClick(item) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myApi.merchantChangeStatus({
					id: item.id,
					status: '4'
				}).then((res) => {
					uni.hideLoading();
					this.getAppointmentList(true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 151px;
	}
	.tittle-font {

		font-size: 24px;
		position: fixed;
		top: 12px;
		right: 16px;
		z-index: 99999;

	}

	/deep/.u-alert-desc {
		width: 100vw;
		text-align: center;
		color: #ff5a00;
	}

	.reverse-time {
		background-color: #fff;
		padding: 36px 12px 16px 28px;

		.time {
			height: 36px;
			color: rgba(0, 185, 98, 100);
			font-size: 36px;
			text-align: center;
			position: relative;
			.img-box{
				width: 72px;
				height: 72px;
				img{
					width: 72px;
					height: 72px;
					position: absolute;
					top: -12px;
					right: -2px;
				}
			}
		}
		.refused{
			color: #666666;
		}
		

	}

	.details-item {
		margin-top: 40px;
		padding-right: 16px;
		padding-bottom: 12px;

		.item {
			display: flex;
			justify-content: space-between;
			margin-top: 8px;
		}
	}

	// 充电桩详情
	.charge-pile {
		background-color: #fff;
		margin-top: 12px;
		padding: 0 0 12px 16px;

		.box {
			position: relative;
			height: 66px;
			padding: 12px 0;

			.more {
				position: absolute;
				top: 19px;
				right: 12px;
				font-size: 24px;
				color: #b3b3b3;
			}
		}
	
		.name {
			width: 90%;
			line-height: 18px;
			color: rgba(16, 16, 16, 100);
			font-size: 18px;
			font-weight: 600;
		}
		.ellipsis{
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.address {
			width: 90%;
			line-height: 20px;
			color: rgba(51, 51, 51, 100);
			margin-top: 4px;
		}

		// 联系电话
		.tel {
			line-height: 48px;
			display: flex;
			justify-content: space-between;
			border: 1px solid #eef2f0;
			border-left: none;
			position: relative;

			.tel-num {
				width: 50%;
			}

			.more2 {
				display: inline-block;
				font-size: 24px;
				color: #b3b3b3;
				height: 48px;
				position: absolute;
				top: 1px;
				right: 12px;

			}
		}

		.item {
			margin-top: 20px;
		}
	}


// 按钮
.bottom{
	width: 100%;
	height: 56px;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	display: flex;
	.refuse-btn{
		background-color: #DBDBDB;
	}
	.u-btn{
		width: 44%;
		height: 40px;
		margin: auto;
		font-size: 18px;
		
	}
	.cancel-btn{
		width: 91.4%;
		background-color: #dbdbdb;
		color: #666666
	}
}
</style>