parking_pda/pages/getout/getoutpage/getoutpage.vue

<template>
	<view class="">
		<view class="car-info u-flex">
			<view class="car-info-img">
				<u-image :src="vehicleImage" mode="aspectFit" width="100%" height="100%"></u-image>
			</view>
			<view class="car-info-text u-flex-1">
				<view class="text-item">
					<view class="car">{{ orderVehicleNo }}</view>
					<view class="position">车位：{{orderSpaceName}}</view>
				</view>
				<!-- <view class="text-item" style="color: #3192FB;">临时卡</view> -->
				<!-- <view class="text-item u-flex u-flex u-row-between">
					<view class="">余额：<span class="balance">暂无</span></view>
					<view class="recharge" @click="$refs.uToast.show({title: '建设中'})">充值</view>
				</view> -->
				<view class="text-item">类型：{{vehicleType|filterCarType}}</view>
			</view>
		</view>
		<view class="parking-info">
			<view class="parking-info-item">进场时间：{{orderInTime}}</view>
			<view class="parking-info-item">出场时间：{{orderOutTime}}</view>
			<view class="parking-info-item">停车时长：{{frontDuration}}</view>
			<view class="parking-info-item">本次应收：<span class="u-type-primary">{{totalAmount}}元</span></view>
			<view class="parking-info-item">历史欠费：<span class="u-type-warning">{{totalAmount}}元</span></view>
		</view>
		<view class="bottom-btn-wrap" v-if="payStatus==0">
			<view class="bottom-btn-box u-flex">
				<view class="bottom-btn bg-blue" @click="handleOut">出场</view>
				<view class="bottom-btn bg-gray" @click="openPage('pages/getout/getout')">取消</view>
			</view>
		</view>
		
		<!-- 订单细节 -->
		<u-modal v-model="showOrderDetails"
		 title="温馨提示" 
		 cancel-text="取消" 
		 confirm-text="确认" 
		 :show-cancel-button="true"
		 @confirm="confirmOut"
		 :title-style="{color: '#404040',fontSize: '46rpx',borderBottom:'1px solid #D5D5D5',margin:'0 30rpx 30rpx',paddingBottom:'30rpx'}">
			<view class="slot-content">
				<rich-text class="orderDetails" :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vehicleImage:'/static/img/default-car.png',
				showOrderDetails:false,//是否线上订单细节
				content:'',
				orderID:'',
				orderInTime:'',
				orderOutTime:'',
				orderSpaceName:'',
				orderVehicleNo:'',
				totalAmount:'',
				vehicleType:0,
				payStatus:null,
				
			}
		},
		onLoad(page) {
			this.orderID = page.orderID;
			this.orderInTime = page.orderInTime;
			this.orderOutTime = page.orderOutTime;
			this.orderSpaceName = page.orderSpaceName;
			this.orderVehicleNo = page.orderVehicleNo;
			// this.handleEntranceOutDetail();
			
		},
		onShow() {
			this.handleEntranceOutDetail();
		},
		methods:{
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			handleEntranceOutDetail(){
				this.$u.api.entranceOutDetail({spaceId:this.orderID})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.payAmount = res.data.payAmount;
					this.payStatus = res.data.payStatus;
					this.vehicleImage =res.data.vehicleImage;
					this.totalAmount = res.data.totalAmount;
					this.vehicleType = res.data.vehicleType;
					this.content = `
					   <dl><dt>停车时长：</dt> <dd>` + this.frontDuration + `</dd></dl>`
					+ `<dl><dt>账户类型：</dt><dd>` + '暂无' + `</dd></dl>`
					+ `<dl><dt>账户余额：</dt><dd>` + '暂无' + `</dd></dl>`
					+ `<dl><dt>车辆类型：</dt><dd>` + '暂无' + `</dd></dl>`
					+ `<dl><dt>押金：</dt><dd>` + '暂无' + `</dd></dl>`
					+ `<dl><dt>应收：</dt><dd>` + res.data.payAmount + `</dd></dl>`
					+ `<dl><dt>补交：</dt><dd><span class="u-type-warning">` + '暂无' + `<span></dd></dl>`
					+ `<div class="tip">你是否将该车辆出场，如果是请点击确认，否则点击取消！</div>`;
					
					console.log('entranceOutDetail',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('entranceOutDetail ',err)
				});
				
			},
			handleOut(res){
				this.showOrderDetails = true;
			},
			confirmOut(){
				this.$u.api.getOut({spaceId:this.orderID})
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						url:'pages/getout/getout'
					});
					console.log('getOut',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getOut ',err)
				});
			},
			timeago(inTime,outTime){
				var time_start = new Date(inTime.replace(/-/g,'/'));
				var time_end = new Date(outTime.replace(/-/g,'/'));
				var clock_start = time_start.getTime();
				var clock_end = time_end.getTime();
				// console.log('currentTime',this.currentTime)
				
				const formatNumber = (num) => {
					num = num.toString()
					return num[1] ? num : '0' + num
				};
				
				var i_total_secs = Math.round(clock_end - clock_start);
				//计算出相差天数
				var days = Math.floor(i_total_secs / (24 * 3600 * 1000))
					 
				//计算出小时数
				var leave1 = i_total_secs % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
				var hours = Math.floor(i_total_secs / (3600 * 1000))
				
				//计算相差分钟数
				var leave2 = i_total_secs % (3600 * 1000)        //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)
				
				hours = formatNumber(hours);
				minutes = formatNumber(minutes);
				seconds = formatNumber(seconds);
				// console.log(days + '天' + hours + '个小时' + minutes + '分钟' + seconds + '秒');
				// this.frontDuration = hours + ':' + minutes + ':' + seconds;
				return hours + ':' + minutes + ':' + seconds
			}
			
		},
		computed:{
			frontDuration:function(){
				return this.timeago(this.orderInTime,this.orderOutTime)
			}
		}
		
	}
</script>

<style lang="scss">
	@import "./getoutpage.scss";
</style>