订单详情

pages/center/order/orderDetails/orderDetails.vue

@@ -1,72 +1,34 @@
 <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 ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'"
-        ></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>
-        <template v-if="orderInfo.deviceType == 1">
-        	<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.outTime"
-        	></u-cell-item>
-        </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 ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'">
+				</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>
+				<template v-if="orderInfo.deviceType == 1">
+					<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.outTime"></u-cell-item>
+				</template>
 				<template v-else>
-					<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.outTime"
-					></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.outTime"></u-cell-item>
 				</template>
-        <!-- <u-cell-item
+				<!-- <u-cell-item
           title="停车时长 "
           :arrow="false"
           :border-bottom="false"
@@ -81,102 +43,51 @@
 				  :value="orderInfo.freeDuration"
 				></u-cell-item> -->
 				<template v-if="orderInfo.deviceType == 1">
-					<u-cell-item
-					  title="免费时长 "
-					  :arrow="false"
-					  :border-bottom="false"
-					  :border-top="false"
-					  :value="orderInfo.freeDuration"
-					></u-cell-item>
+					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false"
+						:value="orderInfo.freeDuration"></u-cell-item>
 				</template>
 				<template v-else>
-					<u-cell-item
-					  title="免费时长 "
-					  :arrow="false"
-					  :border-bottom="false"
-					  :border-top="false"
-					  value="0天0时15分0秒"
-					></u-cell-item>
+					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false"
+						value="0天0时15分0秒"></u-cell-item>
 				</template>
-				<u-cell-item
-				  title="计费时长 "
-				  :arrow="false"
-				  :border-bottom="false"
-				  :border-top="false"
-				  :value="orderInfo.calcDuration"
-				></u-cell-item>
-				<u-cell-item
-				  title="累计停车时长 "
-				  :arrow="false"
-				  :border-bottom="false"
-				  :border-top="false"
-				  :value="orderInfo.duration"
-				></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
-          v-if="orderInfo.payStatus == 1"
-          title="缴费方式 "
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="orderInfo.paySource | verifyPaySource"
-        ></u-cell-item>
-      </u-cell-group>
-    </view>
+				<u-cell-item title="计费时长 " :arrow="false" :border-bottom="false" :border-top="false"
+					:value="orderInfo.calcDuration"></u-cell-item>
+				<u-cell-item title="累计停车时长 " :arrow="false" :border-bottom="false" :border-top="false"
+					:value="orderInfo.duration"></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 v-if="orderInfo.payStatus == 1" title="缴费方式 " :arrow="false" :border-bottom="false"
+					:border-top="false" :value="orderInfo.paySource | verifyPaySource"></u-cell-item>
+			</u-cell-group>
+		</view>
 		<!-- 地磁显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败)并且订单金额不能为0 -->
 		<view class="" v-if="orderInfo.deviceType === 1">
-			<view
-			  class="bottom-btn-wrap"
-			  v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open' && Number(orderInfo.payAmount) !== 0"
-			>
-			  <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
+			<view class="bottom-btn-wrap"
+				v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open' && Number(orderInfo.payAmount) !== 0">
+				<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
 			</view>
-			<view
-			  class="bottom-btn-wrap"
-			  v-else-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open' && Number(orderInfo.payAmount) === 0"
-			>
-			  <view class="tips">提示：可寻找附近的收费员打印小票并扫码出场</view>
+			<view class="bottom-btn-wrap"
+				v-else-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open' && Number(orderInfo.payAmount) === 0">
+				<view class="tips">提示：可寻找附近的收费员打印小票并扫码出场</view>
 			</view>
 		</view>
 		<!-- 其他显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败) -->
 		<view class="" v-else>
-			<view
-			  class="bottom-btn-wrap"
-			  v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'"
-			>
-			  <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
+			<view class="bottom-btn-wrap"
+				v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'">
+				<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
 			</view>
 		</view>
-		<view
-		  class="bottom-btn-wrap"
-		  v-if="openFlag === 'open' && orderInfo.payStatus == 1"
-		>
-		  <view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
+		<view class="bottom-btn-wrap" v-if="openFlag === 'open' && orderInfo.payStatus == 1">
+			<view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
 		</view>
-		
-    <!-- 支付方式 -->
-    <PaymentMethod
-      :payWayPop="payWayPop"
-      :curOrderList="orderList"
-			:jumpUrl="jumpUrl"
-      @closePaymentMethod="closePaymentMethod"
-    ></PaymentMethod>
-		
+
+		<!-- 支付方式 -->
+		<PaymentMethod :payWayPop="payWayPop" :curOrderList="orderList" :jumpUrl="jumpUrl"
+			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
+
 		<!-- 加载中遮罩 -->
 		<u-mask :show="loadingMask">
 			<view class="loading-warp">
@@ -188,152 +99,156 @@
 				</view>
 			</view>
 		</u-mask>
-    <u-toast ref="uToast" />
-  </view>
+		<u-toast ref="uToast" />
+	</view>
 </template>
 
 <script>
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
-export default {
-  components: {
-    PaymentMethod
-  },
-  data () {
-    return {
-      orderId: null,
-      openFlag: null,
-			polyOrderId: null,
-      // 订单信息
-      orderInfo: {},
-      // 立即支付弹框
-      payWayPop: false,
-      // 订单列表,一般长度为1的数组
-      orderList: [],
-			// 重定向页面
-			jumpUrl: location.href + '&type=open',
-			loadingMask: false
-    }
-  },
-  onLoad (page) {
-    this.orderId = page?.orderId
-		// 该标识判断是否是从支付完成页面回调回来
-		this.openFlag = page?.type
-		this.polyOrderId = page?.polyOrderId
-		if (this.orderId) {
-			// 如果type标识和支付订单id同时存在,证明需要执行轮询判断支付状态,否则直接查询
-			if (this.openFlag && this.polyOrderId) {
-				this.loadingMask = true
-				this.handlePayStatus(this.polyOrderId)
-				let time = 0
-				this.timer = setInterval(() => {
-					time ++
-					this.handlePayStatus(this.polyOrderId, openFlag)
-					// 超过60s直接清除轮询
-					if (time === 60) {
-						clearInterval(this.timer)
-					}
-				}, 1000)
-			} else {
-				this.handleGetOrderinfo(this.orderId)
+	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
+	export default {
+		components: {
+			PaymentMethod
+		},
+		data() {
+			return {
+				orderId: null,
+				openFlag: null,
+				polyOrderId: null,
+				// 订单信息
+				orderInfo: {},
+				// 立即支付弹框
+				payWayPop: false,
+				// 订单列表,一般长度为1的数组
+				orderList: [],
+				// 重定向页面
+				jumpUrl: location.href + '&type=open',
+				loadingMask: false
 			}
-		}
-  },
-  methods: {
-		jumpOrderList() {
-			this.$u.route({
-				url: 'pages/center/order/order'
-			})
 		},
-		/**
-		 * 通过订单id去获取订单信息
-		 * */
-    handleGetOrderinfo (orderId) {
-      this.$u.api.getOrderDetail({ id: orderId })
-        .then(res => {
-          if (res.code === 200) {
-            this.orderInfo = res.data
-          } else {
-            this.$refs.uToast.show({
-              title: res.msg,
-              type: 'error'
-            })
-          }
-        })
-    },
-		/**
-		 * 查询支付状态
-		 * @param { String } orderId
-		 */
-		handlePayStatus(orderId) {
-			this.$u.api.getOrderInfo({ orderId }).then(res => {
-				if (res.code === 200) {
-					if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+		onLoad(page) {
+			this.orderId = page?.orderId
+			// 该标识判断是否是从支付完成页面回调回来
+			this.openFlag = page?.type
+			this.polyOrderId = page?.polyOrderId
+			if (this.orderId) {
+				// 如果type标识和支付订单id同时存在,证明需要执行轮询判断支付状态,否则直接查询
+				if (this.openFlag && this.polyOrderId) {
+					this.loadingMask = true
+					this.handlePayStatus(this.polyOrderId)
+					let time = 0
+					this.timer = setInterval(() => {
+						time++
+						this.handlePayStatus(this.polyOrderId, openFlag)
+						// 超过60s直接清除轮询
+						if (time === 60) {
+							clearInterval(this.timer)
+						}
+					}, 1000)
+				} else {
+					this.handleGetOrderinfo(this.orderId)
+				}
+			}
+		},
+		methods: {
+			jumpOrderList() {
+				this.$u.route({
+					url: 'pages/center/order/order'
+				})
+			},
+			/**
+			 * 通过订单id去获取订单信息
+			 * */
+			handleGetOrderinfo(orderId) {
+				this.$u.api.getOrderDetail({
+						id: orderId
+					})
+					.then(res => {
+						if (res.code === 200) {
+							this.orderInfo = res.data
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							})
+						}
+					})
+			},
+			/**
+			 * 查询支付状态
+			 * @param { String } orderId
+			 */
+			handlePayStatus(orderId) {
+				this.$u.api.getOrderInfo({
+					orderId
+				}).then(res => {
+					if (res.code === 200) {
+						if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+							this.loadingMask = false
+							clearInterval(this.timer);
+							this.handleGetOrderinfo(this.orderId)
+						}
+					} else {
+						this.$refs.uToast.show({
+							title: res.msg,
+							type: 'error'
+						})
 						this.loadingMask = false
 						clearInterval(this.timer);
-						this.handleGetOrderinfo(this.orderId)
 					}
+				}).catch(() => {
+					this.loadingMask = false
+					clearInterval(this.timer);
+				})
+			},
+			goPay(orderId) {
+				this.orderList = []
+				this.orderList.push(orderId)
+				if (this.orderList.length > 0) {
+					this.payWayPop = true
 				} else {
 					this.$refs.uToast.show({
-					  title: res.msg,
-					  type: 'error'
+						title: '当前订单编号不存在,请重新进入当前页面!',
+						type: 'warning'
 					})
-					this.loadingMask = false
-					clearInterval(this.timer);
 				}
-			}).catch(() => {
-				this.loadingMask = false
-				clearInterval(this.timer);
-			})
-		},
-    goPay (orderId) {
-      this.orderList = []
-      this.orderList.push(orderId)
-      if (this.orderList.length > 0) {
-        this.payWayPop = true
-      } else {
-        this.$refs.uToast.show({
-          title: '当前订单编号不存在,请重新进入当前页面!',
-          type: 'warning'
-        })
-      }
-    },
-    /**
-       * 关闭支付方式弹框
-       * */
-    closePaymentMethod () {
-      this.payWayPop = false
-    }
+			},
+			/**
+			 * 关闭支付方式弹框
+			 * */
+			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 if (value === 6) {
-        return '贵州银行无感支付'
-      } else {
-        return ''
-      }
-    }
-  },
-  destroyed() {
-	  if (this.timer) {
-		  clearInterval(this.timer)
-	  }
-  }
-}
+		},
+		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 if (value === 6) {
+					return '贵州银行无感支付'
+				} else {
+					return ''
+				}
+			}
+		},
+		destroyed() {
+			if (this.timer) {
+				clearInterval(this.timer)
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
-@import "./orderDetails.scss";
+	@import "./orderDetails.scss";
 </style>