parking_pda/pages/getout/getoutpage/getoutpage.vue

<template>
	<view class="wrap">
		<view class="car-info u-flex">
			<view class="car-info-img">
				<u-image src="../../../static/img/default-car.png" width="100%" height="100%"></u-image>
			</view>
			<view class="car-info-text u-flex-1">
				<view class="text-item">
					<view class="car">豫U88888</view>
					<view class="position">车位：P-03</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">100元</span></view>
					<view class="recharge">充值</view>
				</view>
				<view class="text-item">类型：小车（计时）</view>
			</view>
		</view>
		<view class="parking-info">
			<view class="parking-info-item">进场时间：2021-04-08 17:14:31</view>
			<view class="parking-info-item">出场时间：2021-04-08 18:40:24</view>
			<view class="parking-info-item">停车时长：01:50:32</view>
			<view class="parking-info-item">进场押金：0.0元</view>
		</view>
		<view class="bottom-btn-wrap">
			<view class="bottom-btn-box u-flex">
				<view class="bottom-btn bg-blue" @click="handleOut">出场</view>
				<view class="bottom-btn bg-gray">取消</view>
			</view>
		</view>
		
		<!-- 订单细节 -->
		<u-modal v-model="showOrderDetails"
		 title="温馨提示" 
		 cancel-text="取消" 
		 confirm-text="确认" 
		 :show-cancel-button="true"
		 :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 {
				showOrderDetails:false,//是否线上订单细节
				content:'',
				
			}
		},
		onLoad() {
			
			
		},
		methods:{
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			handleOut(res){
				this.showOrderDetails = true;
				
				this.content = `
				   <dl><dt>停车时长：</dt> <dd>` + res?.data?.roadName + `</dd></dl>`
				+ `<dl><dt>账户类型：</dt><dd>` + res?.data?.roadNo + `</dd></dl>`
				+ `<dl><dt>账户余额：</dt><dd>` + res?.data?.manager + `</dd></dl>`
				+ `<dl><dt>车辆类型：</dt><dd>` + res?.data?.telephone + `</dd></dl>`
				+ `<dl><dt>押金：</dt><dd>` + res?.data?.manager + `</dd></dl>`
				+ `<dl><dt>应收：</dt><dd>` + res?.data?.manager + `</dd></dl>`
				+ `<dl><dt>补交：</dt><dd><span class="u-type-warning">` + res?.data?.manager + `<span></dd></dl>`
				+ `<div class="tip">你是否将该车辆出场，如果是请点击确认，否则点击取消！</div>`;
				
			}
			
		},
		filters:{
			
		}
		
	}
</script>

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