parking_h5/pages/center/order/orderDetails/orderDetails.vue

<template>
	<view class="wrap">
		<view class="order-info">
			<u-image class="order-info-img" width="90rpx" height="90rpx" src="../../../../static/img/position.png"></u-image>
			<view class="addr">{{orderInfo.roadName}}</view>
			<view class="pay-amount">-{{orderInfo.payAmount}}</view>
			<u-cell-group :border="false">
				<u-cell-item title="车牌号" :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.vehicleNo"></u-cell-item>
				<u-cell-item title="优惠总金额" :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.preferentialAmount"></u-cell-item>
			</u-cell-group>
			<u-cell-group>
				<u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.vehicleNo"></u-cell-item>
				<u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime"></u-cell-item>
				<u-cell-item title="停车时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.duration"></u-cell-item>
				<u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime"></u-cell-item>
				<u-cell-item v-if="orderInfo.createTime" title="订单创建时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.createTime"></u-cell-item>
				<u-cell-item v-if="orderInfo.payTime" title="支付时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.payTime"></u-cell-item>
				<u-cell-item title="缴费方式 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.paySource | verifyPaySource"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="bottom-btn-wrap" v-if="orderInfo.payStatus!=1">
			<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../../../utils/getUrlParams.js";
	export default{
		data(){
			return{
				orderId:null,
				orderInfo:[],
				
			}
		},
		onLoad(){
			let locationLocaturl = window.location.hash;
			this.orderId = getUrlParams(locationLocaturl,"orderId"); // 截取orderId
			console.log('this.orderId',this.orderId);
			this.handleGetOrderinfo(this.orderId);
			
		},
		methods:{
			handleGetOrderinfo(orderId){
				this.$u.api.getOrderDetail({id:orderId})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.orderInfo = res.data;
					console.log('handleGetOrderinfo',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handleGetOrderinfo ',err)
				});
				
			},
			goPay(orderId){
				let orderList=[];
				orderList.push(orderId);
				this.$u.api.payGzbank({orderList: orderList}).then(res=>{
					let payUrl = res.data.url;
					window.open(payUrl);
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
				// this.$u.route({
				// 	url: 'pages/payPage/payPage',
				// 	params: {
				// 		orderId: orderId
				// 	}
				// });
			},	
			
			
		},
		filters:{
			verifyPaySource(value) {
				if (value === 0) {
				  return '未支付';
				}else if(value === 1){
					return '微信支付';				
				} else if(value === 2){
					return '支付宝支付';				
				}else {
				  return '';
				}
			},
		}
	}
</script>

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