AstraZeneca_uniapp/pages/subPackages/carmange/add.vue

<template>
  <div class="add_car">
    <div class="form bd_bottom pdt32 pdb32" style="display: block">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>车牌号</span>
      </div>
      <div>
        <car-number v-model="carNo"></car-number>
      </div>
    </div>

    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>司机姓名</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            readonly
            placeholder="请选择"
            v-model="formData.driverName"
          />
        </div>
      </div>
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>手机号</span>
        </div>
        <div class="form-value">
          <input
            type="number"
            placeholder="请选择"
            v-model="formData.driverUsername"
          />
        </div>
      </div>
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>所属企业</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            readonly
            placeholder="请选择"
            v-model="formData.qy"
          />
        </div>
      </div>
    </div>
    <!-- <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>创建时间</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            readonly
            placeholder="请选择"
            v-model="formData.userName"
          />
        </div>
      </div>
    </div> -->

    <div class="foot-btn">
      <van-button color="rgba(138, 5, 84, 1)" type="primary" @click="addCar()">
        提交
      </van-button>
    </div>
  </div>
</template>

  <script>
import CarNumber from "@/components/codecook-carnumber/codecook-carnumber.vue";
import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";
import { addCar } from "@/js_sdk/chooseCarApi.js";

export default {
  data() {
    return {
      formData: {},
      carNo: "",

    };
  },
  components: {
    CarNumber,
  },
  onLoad() {
    // demo();
    this.formData.qy = getUserLocalStorageInfo().user.dispName;
    this.formData.bizMainId = getUserLocalStorageInfo().biz.id;
    this.formData.userId = getUserLocalStorageInfo().user.id;
    this.againGetData();
  },
  methods: {
    validateCarNo(carNo) {
      // 规则1：普通车牌号规则
      const carNoRule1 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-HJ-NP-Z]{1}([A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}|[A-HJ-NP-Z0-9]{5,6})$/;

      // 规则2：新能源车牌号规则
      const carNoRule2 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/;
      console.log(carNoRule1.test(carNo))
      console.log(carNoRule2.test(carNo))

      // 任意一个规则匹配成功即返回 true
      return carNoRule1.test(carNo) || carNoRule2.test(carNo);
    },
    againGetData() {
      let formData = { ...this.formData };
      this.formData = {};
      this.formData = formData;
    },
    async addCar() {
      if (!this.carNo || this.carNo.length == 0) {
        this.$showToast("请填写车牌号");
        return;
      }
      if(!this.validateCarNo(this.carNo)){
        this.$showToast("请检查车牌号格式是否正确");
        return
      }
      if (!this.formData.driverName || this.formData.driverName.length == 0) {
        this.$showToast("请填写司机姓名");
        return;
      }
      if (
        !this.formData.driverUsername ||
        this.formData.driverUsername.length == 0
      ) {
        this.$showToast("请填写手机号");
        return;
      }
      // if (this.formData.driverUsername) {
      //   this.$showToast('请填写手机号')
      // }
      console.log(this.carNo);
      this.formData.carNo = this.carNo;
      let data = await addCar(this.formData);
      if (data.errmsg == "成功") {
        this.$showToast("提交成功");
        uni.navigateBack({ delta: 1 });
      }
    },
  },
};
</script>

  <style lang="scss">
.add_car {
  .foot-btn {
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: space-around;
    button {
      width: 654rpx;
      &:after {
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }
    .cancel {
      button {
        color: rgba(138, 5, 84, 1) !important;
      }
    }
  }
  .form-value {
    width: 435rpx;
    input {
      width: 100%;
    }
  }
  .sj-select {
    display: flex;
    flex-wrap: wrap;
    margin-top: 32rpx;
    .select-item {
      text-align: center;
      line-height: 80rpx;
      width: 225rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #eaeff6;
    }
    .iselected {
      background: #ededed;
    }
    .isuse {
      background: rgba(142, 139, 228, 1);
    }
  }
  .sj-select-title {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    .legend {
      display: flex;
      align-items: center;
      margin-right: 32rpx;
    }
    .sj-label {
      margin-right: 64rpx;
    }
    .white-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #e9e9e9;
    }
    .purple-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #8e8be4;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
  }
  .bottom-form {
    background: #ffffff;
    padding: 32rpx;
    box-sizing: border-box;
    .mt-select {
      display: flex;
      flex-wrap: wrap;
      .select-item {
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 12rpx 30rpx;
        margin-left: 5rpx;
        margin-right: 5rpx;
        margin-bottom: 32rpx;
        background: rgba(245, 247, 250, 1);
      }
    }
  }
  .historyList {
    display: none;
    // display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .historyList-item {
      padding: 10rpx 15rpx;
      display: flex;
      text-align: center;
      font-weight: 400;
      color: #666666;
      background: #f5f7fa;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-left: 5rpx;
      margin-right: 5rpx;
      .btn {
        margin-left: 15rpx;
      }
    }
  }

  .form {
    padding: 32rpx 32rpx;
    display: flex;
    background: #ffffff;
    min-height: 112rpx;
    align-items: center;
    box-sizing: border-box;
    .form-label {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      margin-right: 64rpx;
      .form-requird {
        color: red;
      }
    }
  }
  .pdt32 {
    padding-top: 32rpx;
  }
  .pdb32 {
    padding-bottom: 32rpx;
  }
  .mb32 {
    margin-bottom: 32rpx;
  }
  .mt32 {
    margin-top: 32rpx;
  }
  .bd_bottom {
    border-bottom: 2rpx #e6e6e6 solid;
  }
}
</style>