parking_h5/pages/parkexport/parkexport.vue

<template>
	<!-- 地磁 -->
	<view class="parking-lock">
		<!-- 地磁支付 -->
		<template >
			<view class="parking-lock-pay" v-if="infoData">
				<!-- <view class="parking-lock-title">支付停车费</view> -->
				<!-- <view class="parking-lock-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view> -->
				<view class="parking-lock-info">
					<view class="parking-lock-info-item">
						<view>停车场</view>
						<view class="weight">{{ infoData.outParkingName}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>出口名称</view>
						<view>{{infoData.outEntranceName }}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>通道名称</view>
						<view>{{infoData.outRoadwayName}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>入场时间</view>
						<view>{{infoData.inTime}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>出场时间</view>
						<view>{{infoData.outTime}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>停车时长</view>
						<view>{{infoData.duration}}</view>
					</view>
					<view class="parking-lock-info-item">
						<view>应收金额</view>
						<view>{{infoData.totalAmount}}元</view>
					</view>
				</view>
				<view class="parking-lock-pay-btn">
					<button type="default" @click="onEntraceClick">支付出场</button>
				</view>
			</view>
			<view v-else>
				<view class="parking-lock-info">
					<view class="parking-lock-info-item">
						<view>入口无车辆</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				intoInfo:{
					parkNo: '',
					roadwayNo:''
				},
				infoData:undefined
			}
		},
		onLoad(page) {
			this.intoInfo.parkNo = page?.parkNo;
			this.intoInfo.roadwayNo = page?.roadwayNo;
		},
		onShow() {
			this.getOrderDetails(this.intoInfo.parkNo, this.intoInfo.roadwayNo);
		},
		onUnload() {
			
		},
		methods: {
			onEntraceClick(){
				
			},
			/**
			 * 查询订单信息
			 * @param { String } tqgThree 车位ID
			 * @param { String } orderId 订单id
			 * @param { String } payeeId 收费员ID
			 */
			getOrderDetails(parkNo, roadwayNo) {
				this.$u.api.getDetailExportApi({parkNo,roadwayNo}).then(res => {
					if (res.code === 200 ) {
						this.infoData = res.data
					} else {
						this.$refs.uToast.show({
							title: res.msg || '订单无数据',
							type: 'error',
						});
					}
				})
			}
	
		}
	}
</script>

<style lang="scss" scoped>
	@import './parkexport.scss';
</style>