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" :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>
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 {
      this.$nextTick(() => {
        this.showToast('参数丢失!', 'error');
      });
    }
  },
  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;
      if (this.$u.test.carNo(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
              },
              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>