supplier-dispatch-h5/src/views/index/driverAdd.vue

<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        :title="id ? '修改司机信息' : '添加司机'"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="h5GoBack"
    />
  </div>
  <cell-group label="司机姓名" placeholder="请输入司机姓名"  v-model="driverName"   :disabled="supplierType ==1 ? true:false"/>
  <cell-group label="手机号码"  v-model="driverPhone"   placeholder="请输入手机号" />
  <p v-if="phoneNumberError" class="error-message">{{ phoneNumberErrorMessage }}</p>
  <cell-group label="身份证号" v-model="identityCardNumber"   placeholder="请输入身份证号"   />
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>准驾车型</span>
    </div>
    <select id="mySelect" v-model="drivingModel"  class="chosen-select" style="width: 44px">
      <option value="A1">A1</option>
      <option value="A2">A2</option>
      <option value="A3">A3</option>
      <option value="B1">B1</option>
      <option value="B2">B2</option>
      <option value="C1">C1</option>
      <option value="C2">C2</option>
    </select>
  </div>
  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>司机状态</span>
    </div>
    <div class="isJoin">
      <van-radio-group v-model="states" @change="isUse"  class="joinWrap">
        <van-radio :name="1" style="margin-right: 26px" class="item">
          启用
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio :name="0" class="item">
          停用
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <div class="lineBot"></div>
  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
</div>
</template>

<script>
import {myMixins} from  "@/utils/myMixins"
// import {timeFormat} from "@/utils/common"
import {saveDriver} from "@/api/mine"
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
import CellGroup  from "@/components/cellGroup.vue"
export default {
  name: "driverAdd",
  mixins:[myMixins],
  data(){
    return{
      id:'',
      driverName:"",
      driverPhone:"",
      identityCardNumber:"",
      drivingModel:'',
      states:'',
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png'),
      phoneNumberError: false,
      phoneNumberErrorMessage: '',
      supplierType:'',
      createTime:''
    }
  },
  mounted() {
    this.id = this.$route.params?.id;
    this.driverName = this.$route.params?.name;
    this.driverPhone = this.$route.params?.phone;
    this.drivingModel = this.$route.params?.drivingModel;
    this.identityCardNumber = this.$route.params?.identityCardNumber;
    this.states = this.$route.params?.states;
    this.supplierType=this.$route.params?.supplierType;
    this.createTime=this.$route.params?.createTime;
    console.log(this.driverName,this.driverPhone,this.drivingModel,this.identityCardNumber,this.states)
      const selectElement = document.getElementById('mySelect');
      selectElement.addEventListener('change', function() {
        const selectedValue = selectElement.value;
        this.drivingModel=selectedValue
      });

  },
  methods:{
    isUse(e){
      this.states=e
    },
    async submitBtn(){
      // if (this.driverName || this.driverPhone || this.identityCardNumber || this.drivingModel || this.states){
      //   this.$toast('必填字段未填写')
      // }else{
         await saveDriver({
          driverId:this.id ? this.id : '',
          driverName:this.driverName ,
          driverPhone:this.driverPhone,
          identityCardNumber:this.identityCardNumber,
          drivingModel:this.drivingModel,
          states:Number(this.states),
          createTime:this.createTime || ''
        })
        if(this.id){
          this.$toast('修改成功')

        }else{
          this.$toast('添加成功')
        }
        setTimeout(()=>{
          this.$router.back();
        },2000)
      // }
    },
    cancelBtn(){//取消
     this.$router.back()
    },
    // @blurIn="validatePhoneNumber"
    // validatePhoneNumber() {
    //   const phoneNumberRegex = /^1[0-9]{10}$/;
    //   if (!phoneNumberRegex.test(this.driverPhone)) {
    //     this.phoneNumberError = true;
    //     this.phoneNumberErrorMessage = '电话号码格式不正确，请输入有效的11位手机号码。';
    //   } else {
    //     this.phoneNumberError = false;
    //     this.phoneNumberErrorMessage = '';
    //   }
    // }
  },
  components:{
    TwoCommonBtn,
    CellGroup
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.error-message {
  color: red;
}
.wrap{
  @include wh(100%,100%);
  box-sizing: border-box;
  padding-left: 16px;
}
.navBar{
  //height: 46px;
  margin-bottom: 46px;
}
.itemContent{
  @include flexColBet;
  line-height: 56px;
  box-sizing: border-box;
  padding-right: 25px;
  .titleType{
    @include fontWeightSize(bold,14px);
    color: #323643;
  }
  .isJoin{
    display: flex;
    .joinWrap, .item{
      @include flexCenter;
    }
    img{
      @include widHeiMar(16px,16px,6px)
    }
  }
  .startImg{
    @include widHeiMar(6px,6px,3px);
    vertical-align: super;
  }
  input{
    border: none;
    text-align: right;
    @include fontWeightSize(bold,13px);
    opacity: .5;
  }

}
.lineBot{
  @include wh(100%,1px);
  background: #E9E9EA;
  opacity: 0.6;
}
.btn{
  margin-left: 8px;
  width: 91%;
  position: fixed;
  bottom: 30px;
}
</style>