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>
      </view>
      <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>
      <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>
          </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,
    PageErrorPop
  },
  data() {
    return {
      form: {
        vehicleNo: '',
        parkNo: ''
      },
      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,
      pageErrorShow: false,
      pageErrorTxt: ''
    };
  },
  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;
          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) {
        console.log(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: 点击收起和展开车牌列表
     * @return {*}
     */
    toggleVehicleList() {
      this.toggle = !this.toggle;
    },
    /**
     * @description:
     * @param {*} e
     * @return {*}
     */
    radioChange(e) {
      this.form.vehicleNo = e.detail.value;
    },
    /**
     * @description: 确认提交
     * @return {*}
     */
    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',
              duration: 1000,
              params: {
                ...this.form,
                vehicleNo: base64Encrypt(this.form.vehicleNo)
              },
              callback: () => {
                this.loading = false;
              }
            });
          }
        } catch (error) {
          this.loading = false;
          this.pageErrorShow = true;
          this.pageErrorTxt = error?.msg ?? '查询出错啦!';
        }
      } else {
        this.loading = false;
        this.showToast('请输入有效的车牌号!', 'error');
      }
    },
    /**
     * @description: 提示
     * @param {*} title
     * @param {*} type
     * @return {*}
     */
    showToast(title = '操作失败!', type = 'error') {
      this.$refs.uToast.show({
        title,
        type
      });
    },
    /**
     * @description: 关闭报错弹框
     * @return {*}
     */
    pageErrorPopClose() {
      this.pageErrorShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './VehicleInquiry.scss';
</style>