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" v-if="orderInfo.payAmount">-{{orderInfo.payAmount}}</view>
			<view class="pay-amount" v-else>{{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.orderId"></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>
		<!-- 支付方式 -->
		<PaymentMethod
			:payWayPop="payWayPop"
			:curOrderList="orderList"
			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../../../utils/getUrlParams.js";
	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
	export default{
		components: {
			PaymentMethod
		},
		data(){
			return{
				orderId: null,
				orderInfo: [],
				// 立即支付弹框
				payWayPop: false,
				// 订单列表,一般长度为1的数组
				orderList: []
			}
		},
		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){
				this.orderList = []
				this.orderList.push(orderId)
				this.payWayPop = true
				// 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
				// 	}
				// });
			},
			/**
			 * 关闭支付方式弹框
			 * */
			closePaymentMethod() {
				this.payWayPop = false
			}
			
		},
		filters:{
			verifyPaySource(value) {
				if (value === 0) {
				  return '现金支付';
				}else if(value === 1){
					return '微信支付';				
				} else if(value === 2){
					return '支付宝支付';				
				}else if(value === 3){
					return '贵州银行快捷支付';				
				}else if(value === 4){
					return '贵州银行扫码支付';				
				}else if(value === 5){
					return '贵州银行被扫支付';				
				}else {
				  return '';
				}
			},
		}
	}
</script>

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