CRM_26-01-13#story#7762,潜在服务商增加财务结算信息的需求--曹智龙

src/views/index/supplierAdd.vue

@@ -9,7 +9,7 @@
           <img class="title1" src="@/assets/supplier/title1.png" alt="">
           <div class="credentials_wrap">
             <div class="credentials_item">
-              <div class="credentials_title">1. 法人身份证正面</div>
+              <div class="credentials_title">1.法人身份证人像页</div>
               <van-uploader
                 accept="image/*"
                 v-model="idFrontPhotoList"
@@ -22,7 +22,7 @@
               </van-uploader>
             </div>
             <div class="credentials_item ml2">
-              <div class="credentials_title">2. 法人身份证反面</div>
+              <div class="credentials_title">2.法人身份证国徽页</div>
               <van-uploader
                 accept="image/*"
                 v-model="idBackPhotoList"
@@ -35,7 +35,7 @@
               </van-uploader>
             </div>
             <div class="credentials_item ml2">
-              <div class="credentials_title">3. 营业执照</div>
+              <div class="credentials_title">3.营业执照</div>
               <van-uploader
                 accept="image/*"
                 v-model="companyPhotoList"
@@ -47,6 +47,19 @@
                 </div>
               </van-uploader>
             </div>
+            <div class="credentials_item">
+              <div class="credentials_title">4.开户许可证</div>
+              <van-uploader
+                  accept="image/*"
+                  v-model="licensePhotoList"
+                  :after-read="licensePhotoHandler"
+                  :max-size="5 * 1024 * 1024"
+                  max-count="1">
+                <div class="custom-background">
+                  <img src="@/assets/supplier/licensePhoto.png" alt="">
+                </div>
+              </van-uploader>
+            </div>
           </div>
         </div>
         <div class="company_info">
@@ -57,6 +70,7 @@
               <van-field :border="true" readonly v-model="form.legalName" class="required" name="legalName" label="法人姓名" placeholder="请输入"  :rules="[{ required: true, message: '请输入法人姓名' }]" />
               <van-field :border="true" v-model="form.linkName" class="required" name="linkName" label="联系人姓名" placeholder="请输入"  :rules="[{ required: true, message: '请输入联系人姓名' }]" />
               <van-field :border="true" v-model="form.linkPhone" class="required" name="linkPhone" label="联系电话" placeholder="请输入"  :rules="phoneVerify" />
+              <van-field :border="true" v-model="form.linkEmail" class="required" name="linkEmail" label="邮箱" placeholder="请输入"  :rules="emailVerify" />
               <van-field :border="true" class="required" name="serviceType" label="服务能力">
                 <template #input>
                   <el-tree
@@ -121,13 +135,16 @@
       return {
         clickFlag: true,
         phoneVerify: [{ required: true, message: '请输入联系电话' }, { validator: value => { return /^1[3456789]\d{9}$/.test(value) }, message: '联系电话格式不正确' }],
+        emailVerify: [{ required: true, message: '请输入邮箱' }, { validator: value => { return  /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value) }, message: '邮箱格式不正确' }],
         id:'', //车辆Id
         idBackPhotoList: [],
         idBackPhoto: '',
         idFrontPhotoList: [],
         idFrontPhoto: '',
         companyPhotoList: [],
+        licensePhotoList: [],
         companyPhoto: '',
+        licensePhoto:'',
         form: {
           name: '',
           legalName: '',
@@ -138,6 +155,7 @@
           trailCount: '',
           minorCount: '',
           serviceAreaCode: [],
+          linkEmail:'',
         },
         qrCodeUrl: '',
         qrCode: '',
@@ -195,6 +213,7 @@
         this.idFrontPhoto = _data?.idCardFrontUrl;
         this.idBackPhoto = _data?.idCardBackUrl;
         this.companyPhoto = _data?.businessLicense;
+        this.liensePhoto = _data?.accountUrl;
         this.wechatId = _data?.wechatId
         if(this.idFrontPhoto) {
           this.idFrontPhotoList = [{ url : this.idFrontPhoto }];
@@ -205,6 +224,9 @@
         if(this.companyPhoto) {
           this.companyPhotoList = [{ url : this.companyPhoto }];
         }
+        if(this.licensePhoto){
+          this.licensePhotoList= [{ url : this.licensePhoto }];
+        }
         if( _data.service ) {
           this.$refs.tree.setCheckedKeys(_data.service.split(','))
         }
@@ -277,6 +299,7 @@
               idCardFrontUrl: this.idFrontPhoto,
               idCardBackUrl: this.idBackPhoto,
               businessLicense: this.companyPhoto,
+              accountUrl:this.licensePhoto,
               service: this.$refs.tree.getCheckedKeys().join(',') ,
               serviceAreaCode: checkArr.join(','),
               wechatId: this.wechatId,
@@ -384,6 +407,12 @@
         this.form.areaName = res?.data?.address
         await this.QrCodeHandler();
       },
+      async licensePhotoHandler(file){// 开户许可证
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.licensePhoto = res.data
+      },
     },
     computed: {
       regionText() {
@@ -413,12 +442,13 @@
   padding: 0 20px;
 }
 .credentials_info {
-  height: 170px;
+  //height: 170px;
 }
 .credentials_wrap {
   display: flex;
   width: 100%;
   margin-top: 10px;
+  flex-wrap: wrap;
   .credentials_item {
     width: 32%;
     text-align: center;