司机管理模块，开票通知模块

src/views/index/driverAdd.vue

@@ -1,47 +1,33 @@
 <template>
 <div class="wrap">
-  <cell-group label="司机姓名" placeholder="请输入司机姓名" @input="getName(name)" v-model="name"/>
-  <cell-group label="手机号码" placeholder="请输入手机号" @input="getPhone(phone)" v-model="phone"/>
-  <cell-group label="身份证号" placeholder="请输入身份证号" @input="getCarId(carId)" v-model="carId"/>
-<!--  <div class="itemContent">-->
-<!--    <div class="titleType">-->
-<!--      <img class="startImg" src="@/assets/start.png" />-->
-<!--      <span>司机姓名</span>-->
-<!--    </div>-->
-<!--    <div class="checkContent">-->
-<!--      <input placeholder="请输入司机姓名" />-->
-<!--    </div>-->
-<!--  </div>-->
-<!--  <div class="lineBot"></div>-->
-<!--  <div class="itemContent">-->
-<!--    <div class="titleType">-->
-<!--      <img class="startImg" src="@/assets/start.png" />-->
-<!--      <span>手机号码</span>-->
-<!--    </div>-->
-<!--    <div class="checkContent">-->
-<!--      <input placeholder="请输入手机号码" />-->
-<!--    </div>-->
-<!--  </div>-->
-<!--  <div class="lineBot"></div>-->
-<!--  <div class="itemContent">-->
-<!--    <div class="titleType">-->
-<!--      <img class="startImg" src="@/assets/start.png" />-->
-<!--      <span>身份证号</span>-->
-<!--    </div>-->
-<!--    <div class="checkContent">-->
-<!--      <input placeholder="请输入身份证号" />-->
-<!--    </div>-->
-<!--  </div>-->
-<!--  <div class="lineBot"></div>-->
+  <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"/>
+  <cell-group label="手机号码"  v-model="driverPhone"  @blurIn="validatePhoneNumber" 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"  class="chosen-select" style="width: 44px">
+    <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>
-      <option value="C3">C3</option>
     </select>
   </div>
   <div class="lineBot"></div>
@@ -51,8 +37,8 @@
       <span>司机状态</span>
     </div>
     <div class="isJoin">
-      <van-radio-group v-model="radio" @change="isUse"  class="joinWrap">
-        <van-radio name="启用" style="margin-right: 26px" class="item">
+      <van-radio-group v-model="states" @change="isUse"  class="joinWrap">
+        <van-radio :name="1" style="margin-right: 26px" class="item">
           启用
           <img
               slot="icon"
@@ -60,7 +46,7 @@
               :src="props.checked ? activeIcon : inactiveIcon"
           >
         </van-radio>
-        <van-radio name="停用" class="item">
+        <van-radio :name="0" class="item">
           停用
           <img
               slot="icon"
@@ -77,46 +63,86 @@
 </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{
-      name:"",
-      phone:"",
-      carId:"",
-      radio:'启用',
+      id:'',
+      driverName:"",
+      driverPhone:"",
+      identityCardNumber:"",
+      drivingModel:'',
+      states:'',
       activeIcon: require('@/assets/check.png'),
-      inactiveIcon: require('@/assets/uncheck.png')
+      inactiveIcon: require('@/assets/uncheck.png'),
+      phoneNumberError: false,
+      phoneNumberErrorMessage: ''
     }
   },
   mounted() {
-    console.log("radio",this.radio)
+    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;
       const selectElement = document.getElementById('mySelect');
       selectElement.addEventListener('change', function() {
         const selectedValue = selectElement.value;
-        console.log('Selected value:', selectedValue);
+        this.drivingModel=selectedValue
       });
+
   },
   methods:{
     isUse(e){
       console.log("是否启用",e)
+      this.states=e
     },
-    cancelBtn(){
-      console.log("取消司机")
+    async submitBtn(){
+      let res = await saveDriver({
+        driverId:this.id ? this.id : '',
+        driverName:this.driverName ,
+        driverPhone:this.driverPhone,
+        identityCardNumber:this.identityCardNumber,
+        drivingModel:this.drivingModel,
+        states:Number(this.states),
+        createTime:timeFormat(new Date())
+      })
+      if(res.code === 200){
+        if(this.id){
+          this.$toast('修改成功')
+
+        }else{
+          this.$toast('添加成功')
+        }
+        setTimeout(()=>{
+          this.$router.back();
+        },2000)
+      }
     },
-    submitBtn(){
-      console.log("提交司机")
+    cancelBtn(){//取消
+      this.driverName='';
+      this.driverPhone='',
+      this.identityCardNumber='',
+      this.drivingModel=''
+      this.states=''
     },
-    getName(e){
-      console.log("NAME",e);
-    },
-    getPhone(e){
-      console.log("phone",e);
-    },
-    getCarId(e){
-      console.log("car",e);
+    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:{
@@ -129,12 +155,19 @@ export default {
 <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;