车费查询页面调整

components/params-loss-pop/params-loss-pop.vue

@@ -0,0 +1,55 @@
+<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/loss-params-icon.png" />
+      </view>
+      <view class="content-text">{{ tipText }}</view>
+      <view class="content-btn">
+        <u-button type="primary" @click="backHome">确认</u-button>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    tipText: {
+      type: String,
+      default: '参数丢失，返回首页'
+    }
+  },
+  methods: {
+    backHome() {
+      uni.switchTab({
+        url: '/pages/index/index'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 60rpx 40rpx;
+  width: 590rpx;
+
+  &-icon {
+    width: 348rpx;
+    height: 395rpx;
+    margin: 10rpx auto 0;
+  }
+
+  &-text {
+    color: #999999;
+    font-size: 32rpx;
+    text-align: center;
+    margin-bottom: 40rpx;
+  }
+}
+</style>

pages/VehicleInquiry/VehicleInquiry.scss

@@ -1,30 +1,51 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: calc(100vh - 44px);
-  &-title {
-    text-align: center;
-    font-size: 30rpx;
-    color: #888;
-    margin-bottom: 40rpx;
+  min-height: calc(100vh - 88px);
+  background: url('/static/img/license-query-bg.png') no-repeat center center;
+  background-size: cover;
+  padding: 44px 40rpx 0;
+  font-family: PingFang SC;
+
+  &-vehicle {
+    width: 326rpx;
+    height: 197rpx;
+    margin: 0 auto 44rpx;
   }
-  &-select {
-    width: 620rpx;
-    text-align: center;
-    color: #777777;
-    padding: 20rpx 0x;
-    &-empty {
-      text-align: center;
-      font-size: 26rpx;
+
+  &-content {
+    background-color: #fff;
+    border-radius: 20rpx;
+    padding: 27rpx 40rpx 53rpx;
+
+    &-search {
+
+      &-title {
+        font-size: 36rpx;
+        color: #333333;
+        font-weight: 600;
+        margin-bottom: 20rpx;
+      }
     }
-    &-scroll {
-      height: 600rpx;
+
+    &-choose {
+      margin-top: 30rpx;
+      display: flex;
+      justify-content: center;
+    }
+
+    &-list {
+      border-top: solid 1px #CCCCCC;
+
+      &-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 30rpx 0;
+        color: #333333;
+        font-size: 40rpx;
+      }
+    }
+
+    &-confirm {
+      margin-top: 200rpx;
     }
-  }
-  &-btn {
-    width: 680rpx;
-    margin-top: 40rpx;
   }
 }

pages/VehicleInquiry/VehicleInquiry.vue

@@ -1,58 +1,68 @@
 <!-- 车辆查询 -->
 <template>
   <view class="container">
-    <view class="container-title">
-      <text>输入车牌，查询车费</text>
+    <view class="container-vehicle">
+      <u-image width="100%" height="100%" src="/static/img/vehicle-icon.png" />
     </view>
-    <!-- 车牌输入 -->
-    <view class="container-input" @click="vehicleNoInputClick">
-      <u-message-input :maxlength="8" width="60" font-size="40" :disabled-keyboard="true" v-model="form.vehicleNo" />
+    <view class="container-content">
+      <view class="container-content-search">
+        <view class="container-content-search-title">输入车牌查询</view>
+        <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-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" />
+            </view>
+          </view>
+        </radio-group>
+      </view>
+      <view class="container-content-confirm">
+        <u-button type="primary" :loading="loading" :disabled="!form.vehicleNo" @click="submitVehicleConfirm">确认</u-button>
+      </view>
     </view>
-    <!-- 车辆下拉 -->
-    <view class="container-select">
-      <u-collapse ref="refValue" :head-style="{ fontSize: '28rpx' }">
-        <u-collapse-item title="点击选择车牌" align="center">
-          <scroll-view class="container-select-scroll" scroll-y="true">
-            <u-cell-group v-if="vehicleList.length">
-              <u-cell-item :title="item.value" v-for="(item, index) in vehicleList" :key="index" :arrow="false">
-                <u-radio-group v-model="form.vehicleNo" @change="radioGroupChange">
-                  <u-radio :name="item.value" :key="index" />
-                </u-radio-group>
-              </u-cell-item>
-            </u-cell-group>
-            <template v-else>
-              <view class="container-select-empty">暂无绑定车牌</view>
-            </template>
-          </scroll-view>
-        </u-collapse-item>
-      </u-collapse>
-    </view>
-    <view class="container-btn">
-      <u-button type="primary" :loading="loading" :disabled="!form.vehicleNo" @click="submitVehicleInquiry">确定</u-button>
-    </view>
-    <!-- 选择颜色 -->
-    <u-action-sheet :list="bindVehiclePop.colorList" @click="confirmColor" v-model="bindVehiclePop.colorShow" />
-    <!-- 车牌号键盘 -->
-    <u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow" />
-    <u-toast ref="uToast" />
+    <parmas-loss-pop :show="lossPopShow" />
   </view>
 </template>
 
 <script>
-import { base64Encrypt } from '@/utils';
+import ParmasLossPop from '@/components/params-loss-pop/params-loss-pop.vue';
 export default {
+  components: {
+    ParmasLossPop
+  },
   data() {
     return {
       form: {
-        vehicleNo: '',
-        parkNo: ''
+        vehicleNo: ''
       },
-      vehicleList: [],
-      keyboardshow: false,
-      loading: false,
-      showChangeVehicleNo: false,
-      bindVehiclePop: {
-        colorShow: false,
+      carKeyboard: {
+        show: false
+      },
+      colorPop: {
+        show: false,
         colorList: [
           {
             text: '蓝色',
@@ -80,8 +90,11 @@ export default {
           }
         ]
       },
-      parkNo: null,
-      parkInfo: {}
+      toggle: false,
+      loading: false,
+      vehicleList: [],
+      parkInfo: {},
+      lossPopShow: false
     };
   },
   onLoad(options) {
@@ -90,68 +103,25 @@ export default {
       this.form.parkNo = parkNo;
       this.getVehicleInquiryList(parkNo);
     } else {
-      uni.showModal({
-        title: '提示',
-        content: '参数丢失, 返回首页',
-        showCancel: false,
-        success: function (res) {
-          if (res.confirm) {
-            uni.switchTab({
-              url: '/pages/index/index'
-            });
-          }
-        }
-      });
+      this.lossPopShow = true;
     }
   },
   methods: {
     /**
-     * @description: 车牌输入框点击
-     * @return {*}
-     */
-    vehicleNoInputClick() {
-      this.keyboardshow = true;
-      this.form.vehicleNo = '';
-    },
-    /**
-     * @description: 单击车牌
-     * @param {*} e
+     * @description: 点击车牌输入框
      * @return {*}
      */
-    radioGroupChange(e) {
-      this.form.vehicleNo = e;
+    clickCarKeyboard() {
+      this.carKeyboard.show = true;
     },
     /**
-     * @description: 颜色下拉确认
-     * @return {*}
-     */
-    confirmColor() {
-      this.bindVehiclePop.colorShow = false;
-    },
-    /**
-     * @description: 车牌键盘输入变化
+     * @description: 车牌键盘变化(将每次按键的值拼接到value变量中，注意+=写法)
      * @param {*} val
      * @return {*}
      */
     keyboardChange(val) {
-      // 将每次按键的值拼接到value变量中，注意+=写法
       this.form.vehicleNo += val;
     },
-    /**
-     * @description: 键盘输入完成确认时
-     * @return {*}
-     */
-    keyboardConfirm() {
-      this.bindVehiclePop.colorShow = true;
-    },
-    /**
-     * @description: 退格键被点击
-     * @return {*}
-     */
-    backspace() {
-      // 删除value的最后一个字符
-      if (this.form.vehicleNo.length) this.form.vehicleNo = this.form.vehicleNo.substr(0, this.form.vehicleNo.length - 1);
-    },
     /**
      * @description: 获取当前用户车辆
      * @return {*}
@@ -170,10 +140,35 @@ export default {
       } catch (error) {}
     },
     /**
-     * @description: 确认车费查询
+     * @description: 车牌键盘确认
      * @return {*}
      */
-    async submitVehicleInquiry() {
+    keyboardConfirm() {
+      this.colorPop.show = true;
+    },
+    /**
+     * @description: 车牌键盘删除键(删除value的最后一个字符)
+     * @return {*}
+     */
+    backspace() {
+      if (this.form.vehicleNo.length) this.form.vehicleNo = this.form.vehicleNo.substr(0, this.form.vehicleNo.length - 1);
+    },
+    /**
+     * @description: 选取颜色弹框确认
+     * @return {*}
+     */
+    confirmColor() {
+      this.colorPop.show = false;
+    },
+    /**
+     * @description:
+     * @param {*} e
+     * @return {*}
+     */
+    radioChange(e) {
+      this.form.vehicleNo = e.detail.value;
+    },
+    async submitVehicleConfirm() {
       const { vehicleNo } = this.form;
       const reg =
         /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;

pages/VehicleInquiry/VehicleInquiry20230427..vue

@@ -0,0 +1,225 @@
+<!-- 车辆查询 -->
+<template>
+  <view class="container">
+    <view class="container-title">
+      <text>输入车牌，查询车费</text>
+    </view>
+    <!-- 车牌输入 -->
+    <view class="container-input" @click="vehicleNoInputClick">
+      <u-message-input :maxlength="8" width="60" font-size="40" :disabled-keyboard="true" v-model="form.vehicleNo" />
+    </view>
+    <!-- 车辆下拉 -->
+    <view class="container-select">
+      <u-collapse ref="refValue" :head-style="{ fontSize: '28rpx' }">
+        <u-collapse-item title="点击选择车牌" align="center">
+          <scroll-view class="container-select-scroll" scroll-y="true">
+            <u-cell-group v-if="vehicleList.length">
+              <u-cell-item :title="item.value" v-for="(item, index) in vehicleList" :key="index" :arrow="false">
+                <u-radio-group v-model="form.vehicleNo" @change="radioGroupChange">
+                  <u-radio :name="item.value" :key="index" />
+                </u-radio-group>
+              </u-cell-item>
+            </u-cell-group>
+            <template v-else>
+              <view class="container-select-empty">暂无绑定车牌</view>
+            </template>
+          </scroll-view>
+        </u-collapse-item>
+      </u-collapse>
+    </view>
+    <view class="container-btn">
+      <u-button type="primary" :loading="loading" :disabled="!form.vehicleNo" @click="submitVehicleInquiry">确定</u-button>
+    </view>
+    <!-- 选择颜色 -->
+    <u-action-sheet :list="bindVehiclePop.colorList" @click="confirmColor" v-model="bindVehiclePop.colorShow" />
+    <!-- 车牌号键盘 -->
+    <u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow" />
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import { base64Encrypt } from '@/utils';
+export default {
+  data() {
+    return {
+      form: {
+        vehicleNo: '',
+        parkNo: ''
+      },
+      vehicleList: [],
+      keyboardshow: false,
+      loading: false,
+      showChangeVehicleNo: false,
+      bindVehiclePop: {
+        colorShow: false,
+        colorList: [
+          {
+            text: '蓝色',
+            colorCode: 0
+          },
+          {
+            text: '黄色',
+            colorCode: 1
+          },
+          {
+            text: '黑色',
+            colorCode: 2
+          },
+          {
+            text: '白色',
+            colorCode: 3
+          },
+          {
+            text: '绿色',
+            colorCode: 4
+          },
+          {
+            text: '其他',
+            colorCode: 99
+          }
+        ]
+      },
+      parkNo: null,
+      parkInfo: {}
+    };
+  },
+  onLoad(options) {
+    const { parkNo } = options;
+    if (parkNo) {
+      this.form.parkNo = parkNo;
+      this.getVehicleInquiryList(parkNo);
+    } else {
+      uni.showModal({
+        title: '提示',
+        content: '参数丢失, 返回首页',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            uni.switchTab({
+              url: '/pages/index/index'
+            });
+          }
+        }
+      });
+    }
+  },
+  methods: {
+    /**
+     * @description: 车牌输入框点击
+     * @return {*}
+     */
+    vehicleNoInputClick() {
+      this.keyboardshow = true;
+      this.form.vehicleNo = '';
+    },
+    /**
+     * @description: 单击车牌
+     * @param {*} e
+     * @return {*}
+     */
+    radioGroupChange(e) {
+      this.form.vehicleNo = e;
+    },
+    /**
+     * @description: 颜色下拉确认
+     * @return {*}
+     */
+    confirmColor() {
+      this.bindVehiclePop.colorShow = false;
+    },
+    /**
+     * @description: 车牌键盘输入变化
+     * @param {*} val
+     * @return {*}
+     */
+    keyboardChange(val) {
+      // 将每次按键的值拼接到value变量中，注意+=写法
+      this.form.vehicleNo += val;
+    },
+    /**
+     * @description: 键盘输入完成确认时
+     * @return {*}
+     */
+    keyboardConfirm() {
+      this.bindVehiclePop.colorShow = true;
+    },
+    /**
+     * @description: 退格键被点击
+     * @return {*}
+     */
+    backspace() {
+      // 删除value的最后一个字符
+      if (this.form.vehicleNo.length) this.form.vehicleNo = this.form.vehicleNo.substr(0, this.form.vehicleNo.length - 1);
+    },
+    /**
+     * @description: 获取当前用户车辆
+     * @return {*}
+     */
+    async getVehicleInquiryList(parkNo) {
+      try {
+        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();
+        }
+      } catch (error) {}
+    },
+    /**
+     * @description: 确认车费查询
+     * @return {*}
+     */
+    async submitVehicleInquiry() {
+      const { vehicleNo } = this.form;
+      const reg =
+        /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;
+      if (reg.test(vehicleNo)) {
+        this.loading = true;
+        try {
+          const { code } = await this.$u.api.getOrderInfoByParknoApi({ ...this.form });
+          if (code === 200) {
+            this.$refs.uToast.show({
+              title: '查询成功!',
+              type: 'success',
+              url: '/pages/OnsitePayment/OnsitePayment',
+              params: {
+                ...this.form,
+                vehicleNo: base64Encrypt(this.form.vehicleNo)
+              },
+              callback: () => {
+                this.loading = false;
+              }
+            });
+          }
+        } catch (error) {
+          this.loading = false;
+          // this.showToast(error?.msg, 'error');
+        }
+      } else {
+        this.loading = false;
+        this.showToast('请输入有效的车牌号!', 'error');
+      }
+    },
+    /**
+     * @description: 提示
+     * @param {*} title
+     * @param {*} type
+     * @return {*}
+     */
+    showToast(title = '操作失败!', type = 'error') {
+      this.$refs.uToast.show({
+        title,
+        type
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './VehicleInquiry.scss';
+</style>

pages/VehicleInquiry/VehicleInquiry20230427.scss

@@ -0,0 +1,30 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 44px);
+  &-title {
+    text-align: center;
+    font-size: 30rpx;
+    color: #888;
+    margin-bottom: 40rpx;
+  }
+  &-select {
+    width: 620rpx;
+    text-align: center;
+    color: #777777;
+    padding: 20rpx 0x;
+    &-empty {
+      text-align: center;
+      font-size: 26rpx;
+    }
+    &-scroll {
+      height: 600rpx;
+    }
+  }
+  &-btn {
+    width: 680rpx;
+    margin-top: 40rpx;
+  }
+}

pages/choosePayment/choosePayment.vue

@@ -280,8 +280,8 @@ export default {
       if (this.projectFlag === 'zhenning') {
         this.radioCurrent = 'weixinzn';
       } else if (this.projectFlag === 'wudang') {
-				 this.radioCurrent = 'juhe';
-			} else if (this.wxEnv) {
+        this.radioCurrent = 'juhe';
+      } else if (this.wxEnv) {
         this.radioCurrent = 'weixin';
       } else {
         this.radioCurrent = 'juhe';