parking_h5_all/pages/VehicleInquiry/VehicleInquiry.vue

<!-- 车辆查询 -->
<template>
  <view class="container">
    <view class="container-vehicle">
      <u-image width="100%" height="100%" src="/static/img/vehicle-icon.png" />
    </view>
    <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>
    <parmas-loss-pop :show="lossPopShow" />
  </view>
</template>

<script>
import ParmasLossPop from '@/components/params-loss-pop/params-loss-pop.vue';
export default {
  components: {
    ParmasLossPop
  },
  data() {
    return {
      form: {
        vehicleNo: ''
      },
      carKeyboard: {
        show: false
      },
      colorPop: {
        show: false,
        colorList: [
          {
            text: '蓝色',
            colorCode: 0
          },
          {
            text: '黄色',
            colorCode: 1
          },
          {
            text: '黑色',
            colorCode: 2
          },
          {
            text: '白色',
            colorCode: 3
          },
          {
            text: '绿色',
            colorCode: 4
          },
          {
            text: '其他',
            colorCode: 99
          }
        ]
      },
      toggle: false,
      loading: false,
      vehicleList: [],
      parkInfo: {},
      lossPopShow: false
    };
  },
  onLoad(options) {
    const { parkNo } = options;
    if (parkNo) {
      this.form.parkNo = parkNo;
      this.getVehicleInquiryList(parkNo);
    } else {
      this.lossPopShow = true;
    }
  },
  methods: {
    /**
     * @description: 点击车牌输入框
     * @return {*}
     */
    clickCarKeyboard() {
      this.carKeyboard.show = true;
    },
    /**
     * @description: 车牌键盘变化(将每次按键的值拼接到value变量中，注意+=写法)
     * @param {*} val
     * @return {*}
     */
    keyboardChange(val) {
      this.form.vehicleNo += val;
    },
    /**
     * @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 {*}
     */
    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})$/;
      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>