parking_h5/pages/VehicleInquiry/VehicleInquiry.vue

<!-- 车辆查询 -->
<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" @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>
export default {
  data() {
    return {
      form: {
        vehicleNo: ''
      },
      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
          }
        ]
      }
    };
  },
  onShow() {
    this.getCarsList();
  },
  methods: {
    /**
     * @description: 获取我的车辆列表
     * @return {*}
     */
    async getCarsList() {
      const { data } = await this.$u.api.getMycars({ pageNum: 1, pageSize: 100 });
      const vehicleList = [];
      data.rows.forEach((item) => {
        const { vehicleNo } = item;
        vehicleList.push({ label: vehicleNo, value: vehicleNo });
      });
      this.vehicleList = vehicleList;
      await this.$nextTick();
      this.$refs.refValue.init();
    },
    /**
     * @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() {
      try {
        const response = await this.$u.api.getVehicleInquiryListApi();
        if (response.code === 200) {
          console.log(response);
        }
      } catch (error) {
      }
    },
    /**
     * @description: 确认车费查询
     * @return {*}
     */
    async submitVehicleInquiry() {
      const { vehicleNo } = this.form;
      if (this.$u.test.carNo(vehicleNo)) {
        this.loading = true;
        this.$refs.uToast.show({
          title: '查询成功!',
          type: 'success',
          url: '/pages/OnsitePayment/OnsitePayment',
          params: {
            vehicleNo
          },
          callback: () => {
            this.loading = false;
          }
        });
      } else {
        this.$refs.uToast.show({
          title: '请输入有效的车牌号!',
          type: 'error'
        });
      }
    }
  }
};
</script>

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