车辆查询页面优化

common/http.interceptor.js

@@ -2,8 +2,8 @@
 const install = (Vue, vm) => {
   Vue.prototype.$u.http.setConfig({
     baseUrl: vm.config.baseUrl,
-		loadingText: '努力加载中~',
-		loadingTime: 800
+    loadingText: '努力加载中~',
+    loadingTime: 800
   });
   // 请求拦截，配置Token等参数
   Vue.prototype.$u.http.interceptor.request = (config) => {
@@ -12,7 +12,14 @@ const install = (Vue, vm) => {
     }
     // 请求地址加时间戳
     config.url = config.url + '?t=' + Date.now();
-    let noTokenList = ['/client/wechat/h5/code/', '/client/auth/sendSmsCodeV2', '/client/auth/verifyCodeV2', '/client/auth/loginToWxOpenId', '/client/auth/sendSmsCodeV3', '/client/auth/loginToMobile'];
+    let noTokenList = [
+      '/client/wechat/h5/code/',
+      '/client/auth/sendSmsCodeV2',
+      '/client/auth/verifyCodeV2',
+      '/client/auth/loginToWxOpenId',
+      '/client/auth/sendSmsCodeV3',
+      '/client/auth/loginToMobile'
+    ];
     if (noTokenList.includes(config.url)) config.header.noToken = true;
     return config;
   };
@@ -53,11 +60,16 @@ const install = (Vue, vm) => {
       }
       return false;
     } else {
-      uni.showToast({
-        title: res.msg || '程序错误!',
-        duration: 2000,
-        icon: 'none'
-      });
+      // 用来判断时候需要使用当前提示框
+      const noTipMsg = ['无任何订单'];
+      const index = noTipMsg.findIndex((item) => res?.msg.indexOf(item) > -1);
+      if (index < 0) {
+        uni.showToast({
+          title: res.msg || '程序错误!',
+          duration: 2000,
+          icon: 'none'
+        });
+      }
       return false;
     }
   };

components/page-error-pop/page-error-pop.vue

@@ -0,0 +1,53 @@
+<template>
+  <u-popup v-model="show" mode="center" borderRadius="20" :mask-close-able="false">
+    <view class="content">
+      <view class="content-icon">
+        <u-image width="100%" height="100%" src="/static/img/page-error-icon.png" />
+      </view>
+      <view class="content-text">{{ tipText }}</view>
+      <view class="content-btn">
+        <u-button type="primary" @click="confirm">确认</u-button>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    tipText: {
+      type: String,
+      default: '页面出错啦!!!'
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit('pageErrorPopClose')
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 60rpx 40rpx;
+  width: 590rpx;
+
+  &-icon {
+    width: 145rpx;
+    height: 145rpx;
+    margin: 10rpx auto 20rpx;
+  }
+
+  &-text {
+    color: #999999;
+    font-size: 32rpx;
+    text-align: center;
+    margin-bottom: 40rpx;
+  }
+}
+</style>

pages/VehicleInquiry/VehicleInquiry.scss

@@ -17,6 +17,7 @@
     padding: 27rpx 40rpx 53rpx;
 
     &-search {
+      margin-bottom: 30rpx;
 
       &-title {
         font-size: 36rpx;
@@ -27,25 +28,26 @@
     }
 
     &-choose {
-      margin-top: 30rpx;
       display: flex;
       justify-content: center;
+
+      &-text {
+        margin-bottom: 20rpx;
+      }
     }
 
     &-list {
-      border-top: solid 1px #CCCCCC;
+      border-top: solid 1px #cccccc;
+      margin-bottom: 200rpx;
 
       &-item {
         display: flex;
         justify-content: space-between;
         padding: 30rpx 0;
         color: #333333;
-        font-size: 40rpx;
+        font-size: 34rpx;
+        border-bottom: solid 1px #cccccc;
       }
     }
-
-    &-confirm {
-      margin-top: 200rpx;
-    }
   }
 }

pages/VehicleInquiry/VehicleInquiry.vue

@@ -10,53 +10,59 @@
         <view class="container-content-search-input" @click="clickCarKeyboard">
           <u-message-input :maxlength="8" width="55" font-size="40" :disabled-keyboard="true" v-model="form.vehicleNo" />
         </view>
-        <!-- 车牌号键盘 -->
-        <u-keyboard
-          ref="uKeyboard"
-          mode="car"
-          @change="keyboardChange"
-          @confirm="keyboardConfirm"
-          @backspace="backspace"
-          v-model="carKeyboard.show"
-        />
-        <!-- 选择颜色 -->
-        <u-action-sheet :list="colorPop.colorList" @click="confirmColor" v-model="colorPop.show" />
       </view>
-      <view class="container-content-choose">
+      <view class="container-content-choose" @click="toggleVehicleList">
         <view class="container-content-choose-text">点击选择车牌</view>
         <view class="container-content-choose-icon">
           <u-icon name="arrow-up" v-if="toggle"></u-icon>
           <u-icon name="arrow-down" v-else></u-icon>
         </view>
       </view>
-      <view class="container-content-list">
-        <radio-group @change="radioChange">
-          <view class="container-content-list-item" v-for="(item, index) in vehicleList" :key="index">
-            <view class="left">{{ item.label }}</view>
-            <view class="right">
-              <radio :value="item.value" :checked="item.value === form.vehicleNo" />
+      <template v-if="toggle">
+        <view class="container-content-list" v-if="vehicleList.length">
+          <radio-group @change="radioChange">
+            <view class="container-content-list-item" v-for="(item, index) in vehicleList" :key="index" @click="form.vehicleNo = item.value">
+              <view class="left">{{ item.label }}</view>
+              <view class="right">
+                <radio :value="item.value" :checked="item.value === form.vehicleNo" />
+              </view>
             </view>
-          </view>
-        </radio-group>
-      </view>
+          </radio-group>
+        </view>
+        <view v-else>
+          <u-empty text="车牌记录为空" mode="list"></u-empty>
+        </view>
+      </template>
       <view class="container-content-confirm">
         <u-button type="primary" :loading="loading" :disabled="!form.vehicleNo" @click="submitVehicleConfirm">确认</u-button>
       </view>
     </view>
+    <!-- 车牌号键盘 -->
+    <u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="carKeyboard.show" />
+    <!-- 选择颜色 -->
+    <u-action-sheet :list="colorPop.colorList" @click="confirmColor" v-model="colorPop.show" />
+    <!-- 参数丢失弹框 -->
     <parmas-loss-pop :show="lossPopShow" />
+    <!-- 页面报错弹框 -->
+    <page-error-pop :show="pageErrorShow" :tipText="pageErrorTxt" @pageErrorPopClose="pageErrorPopClose" />
+    <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
 import ParmasLossPop from '@/components/params-loss-pop/params-loss-pop.vue';
+import PageErrorPop from '@/components/page-error-pop/page-error-pop.vue';
+import { base64Encrypt } from '@/utils';
 export default {
   components: {
-    ParmasLossPop
+    ParmasLossPop,
+    PageErrorPop
   },
   data() {
     return {
       form: {
-        vehicleNo: ''
+        vehicleNo: '',
+        parkNo: ''
       },
       carKeyboard: {
         show: false
@@ -94,7 +100,9 @@ export default {
       loading: false,
       vehicleList: [],
       parkInfo: {},
-      lossPopShow: false
+      lossPopShow: false,
+      pageErrorShow: false,
+      pageErrorTxt: ''
     };
   },
   onLoad(options) {
@@ -131,13 +139,17 @@ export default {
         const { data, code } = await this.$u.api.getVehicleInquiryListApi({ parkNo });
         if (code === 200) {
           this.parkInfo = data;
-          this.vehicleList = data.vehicleList.map((item) => {
-            return { label: item, value: item };
-          });
-          await this.$nextTick();
-          this.$refs.refValue.init();
+          if (data.vehicleList && data.vehicleList.length) {
+            this.vehicleList = data.vehicleList.map((item) => {
+              return { label: item, value: item };
+            });
+            await this.$nextTick();
+            this.$refs.refValue.init();
+          }
         }
-      } catch (error) {}
+      } catch (error) {
+        console.log(error);
+      }
     },
     /**
      * @description: 车牌键盘确认
@@ -160,6 +172,13 @@ export default {
     confirmColor() {
       this.colorPop.show = false;
     },
+    /**
+     * @description: 点击收起和展开车牌列表
+     * @return {*}
+     */
+    toggleVehicleList() {
+      this.toggle = !this.toggle;
+    },
     /**
      * @description:
      * @param {*} e
@@ -168,6 +187,10 @@ export default {
     radioChange(e) {
       this.form.vehicleNo = e.detail.value;
     },
+    /**
+     * @description: 确认提交
+     * @return {*}
+     */
     async submitVehicleConfirm() {
       const { vehicleNo } = this.form;
       const reg =
@@ -181,6 +204,7 @@ export default {
               title: '查询成功!',
               type: 'success',
               url: '/pages/OnsitePayment/OnsitePayment',
+              duration: 1000,
               params: {
                 ...this.form,
                 vehicleNo: base64Encrypt(this.form.vehicleNo)
@@ -192,7 +216,8 @@ export default {
           }
         } catch (error) {
           this.loading = false;
-          // this.showToast(error?.msg, 'error');
+          this.pageErrorShow = true;
+          this.pageErrorTxt = error?.msg ?? '查询出错啦!';
         }
       } else {
         this.loading = false;
@@ -210,6 +235,13 @@ export default {
         title,
         type
       });
+    },
+    /**
+     * @description: 关闭报错弹框
+     * @return {*}
+     */
+    pageErrorPopClose() {
+      this.pageErrorShow = false;
     }
   }
 };