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: {
    againGetData() {
      let formData = { ...this.formData };
      this.formData = {};
      this.formData = formData;
    },
    async addCar() {
      if (!this.carNo || this.carNo.length == 0) {
        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>