修改订单详情加loading效果

common/http.interceptor.js

@@ -47,20 +47,29 @@ const install = (Vue, vm) => {
 		if(res.code == 200) {
 			// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
 			return res;  
-		} else if(res.msg == "令牌不能为空" || res.code == 401){
+		} else if(res.msg == "令牌不能为空" || res.code == 401 || res.code == 400){
 			const backUrl = location.href
 			const loginUrl = 'phoneLogin'
 			if (backUrl.indexOf(loginUrl) > 0) {
 				localStorage.clear()
 			} else {
 				localStorage.setItem('backUrl', location.href)
-				alert('还未登录,即将跳转登录');
+				uni.showToast({
+					title: res.msg || '!',
+					duration: 2000,
+					icon: 'none'
+				})
 				uni.navigateTo({
 					url: "/pages/center/phoneLogin/phoneLogin"
 				})
 			}
-			
-		}else return res;
+		} else {
+			uni.showToast({
+				title: res.msg || '程序错误!',
+				duration: 2000,
+				icon: 'none'
+			})
+		};
 	}
 }
 

pages/center/order/orderDetails/orderDetails.scss

@@ -24,4 +24,10 @@
 	line-height: 84rpx;
 	letter-spacing: 2px;
 	margin-bottom: 18rpx;
+}
+.loading-warp {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
 }

pages/center/order/orderDetails/orderDetails.vue

@@ -83,10 +83,17 @@
     </view>
     <view
       class="bottom-btn-wrap"
-      v-if="orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3"
+      v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'"
     >
       <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
     </view>
+		<view
+		  class="bottom-btn-wrap"
+		  v-if="openFlag === 'open' && orderInfo.payStatus == 1"
+		>
+		  <view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
+		</view>
+		
     <!-- 支付方式 -->
     <PaymentMethod
       :payWayPop="payWayPop"
@@ -94,6 +101,13 @@
 	  :jumpUrl="jumpUrl"
       @closePaymentMethod="closePaymentMethod"
     ></PaymentMethod>
+		
+		<!-- 加载中遮罩 -->
+		<u-mask :show="loadingMask">
+			<view class="loading-warp">
+				<u-loading mode="flower" size="50"></u-loading>
+			</view>
+		</u-mask>
     <u-toast ref="uToast" />
   </view>
 </template>
@@ -107,43 +121,52 @@ export default {
   data () {
     return {
       orderId: null,
+      openFlag: null,
       // 订单信息
       orderInfo: {},
       // 立即支付弹框
       payWayPop: false,
       // 订单列表,一般长度为1的数组
       orderList: [],
-	  // 重定向页面
-	  jumpUrl: location.href + '&type=open'
+			// 重定向页面
+			jumpUrl: location.href + '&type=open',
+			loadingMask: false
     }
   },
   onLoad (page) {
     const orderId = page?.orderId
-	// 该标识判断是否是从支付完成页面回调回来
-	const openFlag = page?.type
-	if (orderId) {
-		this.orderId = orderId
-		// 如果标识存在,证明需要执行轮询判断支付状态,否则直接查询
-		if (openFlag && openFlag === 'open') {
-			this.handleGetOrderinfo(orderId, openFlag)
-			let time = 0
-			this.timer = setInterval(() => {
-				time ++
+		// 该标识判断是否是从支付完成页面回调回来
+		const openFlag = page?.type
+		if (orderId) {
+			this.orderId = orderId
+			// 如果标识存在,证明需要执行轮询判断支付状态,否则直接查询
+			if (openFlag && openFlag === 'open') {
+				this.openFlag = openFlag
+				this.loadingMask = true
 				this.handleGetOrderinfo(orderId, openFlag)
-				// 超过60s直接清除轮询
-				if (time === 60) {
-					clearInterval(this.timer)
-				}
-			}, 1000)
-		} else {
-			this.handleGetOrderinfo(orderId)
+				let time = 0
+				this.timer = setInterval(() => {
+					time ++
+					this.handleGetOrderinfo(orderId, openFlag)
+					// 超过60s直接清除轮询
+					if (time === 60) {
+						clearInterval(this.timer)
+					}
+				}, 1000)
+			} else {
+				this.handleGetOrderinfo(orderId)
+			}
 		}
-	}
   },
   methods: {
-	/**
-	 * 通过订单id去获取订单信息
-	 * */
+		jumpOrderList() {
+			this.$u.route({
+				url: 'pages/center/order/order'
+			})
+		},
+		/**
+		 * 通过订单id去获取订单信息
+		 * */
     handleGetOrderinfo (orderId, openFlag) {
       this.$u.api.getOrderDetail({ id: orderId })
         .then(res => {
@@ -151,6 +174,7 @@ export default {
             this.orderInfo = res.data
 			if (openFlag === 'open') {
 				if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+					this.loadingMask = false
 					clearInterval(this.timer)
 				}
 			}

pages/index/index.vue

@@ -146,7 +146,7 @@
               <view class="order">停车泊位:{{ item.spaceName }}</view>
             </view>
             <view class="go-pay-wrap">
-              <view class="go-pay" @click="  goPay(item.id)">出场缴费</view>
+              <view class="go-pay" @click="goPay(item.id)">出场缴费</view>
             </view>
           </view>
           <view class="pending-order-body-wrap" v-show="orderNav == 1">
@@ -169,7 +169,7 @@
         <text>优惠活动</text>
       </view>
       <view class="promotion-banner">
-        <u-swiper :list="promotionBannerList" @click="  promotionBannerClick" height="221"></u-swiper>
+        <u-swiper :list="promotionBannerList" @click="promotionBannerClick" height="221"></u-swiper>
       </view>
     </view>
 
@@ -315,8 +315,6 @@ export default {
     const locationLocaturl = window.location.search
     this.code = getUrlParams(locationLocaturl, 'code')
     if (this.code && !this.$store.state.vuex_wxinfo.openId) { this.handleGetWXInfo(this.code) };
-    const href = location.href.split('#')
-    this.jumpUrl = href[0] + '#/pages/center/order/order'
   },
   methods: {
     // 定位
@@ -385,7 +383,12 @@ export default {
         .then(res => {
           if (res.code == 200) {
             this.handleGetIndexData()
-          }
+          } else {
+						this.$refs.uToast.show({
+						  title: res.msg,
+						  type: 'error'
+						})
+					}
           uni.hideLoading()
         })
     },
@@ -497,6 +500,8 @@ export default {
     },
     // 去支付,选择支付方式
     goPay (orderId) {
+			const href = location.href.split('#')
+			this.jumpUrl = href[0] + '#/pages/center/order/orderDetails/orderDetails?orderId=' + orderId + '&type=open'
       this.payWayPop = true
       this.curOrderList = []
       this.curOrderList.push(orderId)