CRM_25-10-15#story#7316,服务商体系新增潜在服务商--曹智龙

2025-10-14 10:30:13 +08:00
parent 97f6e47a00
commit bb98eff5ae
3 changed files with 536 additions and 125 deletions
--- a/src/views/index/supplierAdd.vue
+++ b/src/views/index/supplierAdd.vue
@ -3,95 +3,100 @@
    <div class="top_banner">
      <img src="@/assets/supplier/topBg.png" alt="">
    </div>
-    <div class="content_wrap">
-      <div class="credentials_info">
-        <img class="title1" src="@/assets/supplier/title1.png" alt="">
-        <div class="credentials_wrap">
-          <div class="credentials_item">
-            <div class="credentials_title">1. 法人身份证正面</div>
-            <van-uploader
-              accept="image/*"
-              v-model="idFrontPhotoList"
-              :after-read="idFrontPhotoHandler"
-              :max-size="5 * 1024 * 1024"
-              max-count="1">
-              <div class="custom-background">
-                <img src="@/assets/supplier/idCardPerson.png" alt="">
-              </div>
-            </van-uploader>
-          </div>
-          <div class="credentials_item ml2">
-            <div class="credentials_title">2. 法人身份证反面</div>
-            <van-uploader
-              accept="image/*"
-              v-model="idBackPhotoList"
-              :after-read="idBackPhotoHandler"
-              :max-size="5 * 1024 * 1024"
-              max-count="1">
-              <div class="custom-background">
-                <img src="@/assets/supplier/idCardBack.png" alt="">
-              </div>
-            </van-uploader>
-          </div>
-          <div class="credentials_item ml2">
-            <div class="credentials_title">3. 营业执照</div>
-            <van-uploader
-              accept="image/*"
-              v-model="companyPhotoList"
-              :after-read="companyPhotoHandler"
-              :max-size="5 * 1024 * 1024"
-              max-count="1">
-              <div class="custom-background">
-                <img src="@/assets/supplier/companyPhoto.png" alt="">
-              </div>
-            </van-uploader>
+    <van-form @submit="applyAdd">
+      <div class="content_wrap">
+        <div class="credentials_info">
+          <img class="title1" src="@/assets/supplier/title1.png" alt="">
+          <div class="credentials_wrap">
+            <div class="credentials_item">
+              <div class="credentials_title">1. 法人身份证正面</div>
+              <van-uploader
+                accept="image/*"
+                v-model="idFrontPhotoList"
+                :after-read="idFrontPhotoHandler"
+                :max-size="5 * 1024 * 1024"
+                max-count="1">
+                <div class="custom-background">
+                  <img src="@/assets/supplier/idCardPerson.png" alt="">
+                </div>
+              </van-uploader>
+            </div>
+            <div class="credentials_item ml2">
+              <div class="credentials_title">2. 法人身份证反面</div>
+              <van-uploader
+                accept="image/*"
+                v-model="idBackPhotoList"
+                :after-read="idBackPhotoHandler"
+                :max-size="5 * 1024 * 1024"
+                max-count="1">
+                <div class="custom-background">
+                  <img src="@/assets/supplier/idCardBack.png" alt="">
+                </div>
+              </van-uploader>
+            </div>
+            <div class="credentials_item ml2">
+              <div class="credentials_title">3. 营业执照</div>
+              <van-uploader
+                accept="image/*"
+                v-model="companyPhotoList"
+                :after-read="companyPhotoHandler"
+                :max-size="5 * 1024 * 1024"
+                max-count="1">
+                <div class="custom-background">
+                  <img src="@/assets/supplier/companyPhoto.png" alt="">
+                </div>
+              </van-uploader>
+            </div>
          </div>
        </div>
-      </div>
-      <div class="company_info">
-        <img class="title2" src="@/assets/supplier/title2.png" alt="">
-        <div class="company_wrap">
-          <van-form>
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务商名称" placeholder="请输入"  :rules="[{ required: true, message: '请输入服务商名称' }]" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="法人名称" placeholder="请输入"  :rules="[{ required: true, message: '请输入法人名称' }]" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="联系人姓名" placeholder="请输入"  :rules="[{ required: true, message: '请输入联系人姓名' }]" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="联系电话" placeholder="请输入"  :rules="[{ required: true, message: '请输入联系电话' }]" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力" placeholder="请输入"  :rules="[{ required: true, message: '请选择服务能力' }]" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力"  :rules="[{ required: true, message: '请选择服务能力' }]">
-              <template #input>
-                <el-tree
-                  show-checkbox
-                  node-key="id"
-                  ref="tree"
-                  :highlight-current="true"
-                  :expand-on-click-node="false"
-                  :data="supplierServiceList"
-                  :props="defaultProps">
-                </el-tree>
-              </template>
-            </van-field>
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="拖车数量" placeholder="请输入"  :rules="[{ required: true, message: '请输入拖车数量' }]" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="抢修车数量" placeholder="请输入"  :rules="[{ required: true, message: '请输入抢修车数量' }]" />
-            <van-field name="supplierName" class="required" label="服务区域" placeholder="请选择"  :rules="[{ required: true, message: '请选择服务区域' }]">
-              <template #input>
-                <span @click="areaShow = true">省/市/区</span>
-              </template>
-            </van-field>
-          </van-form>
-          <div class="wei_code_wrap">
-            <div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
-            <div class="wei_code_bg">
-              <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
+        <div class="company_info">
+          <img class="title2" src="@/assets/supplier/title2.png" alt="">
+          <div class="company_wrap">
+              <van-field :border="true" readonly v-model="form.name" class="required" name="name" label="服务商名称" placeholder="请输入"  :rules="[{ required: true, message: '请输入服务商名称' }]" />
+              <van-field :border="true" readonly v-model="form.areaName" class="required" name="areaName" label="注册地址" placeholder="请输入"  :rules="[{ required: true, message: '请输入注册地址' }]" />
+              <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" class="required" name="serviceType" label="服务能力">
+                <template #input>
+                  <el-tree
+                    show-checkbox
+                    node-key="id"
+                    ref="tree"
+                    :highlight-current="true"
+                    :expand-on-click-node="false"
+                    :data="supplierServiceList"
+                    :props="defaultProps">
+                  </el-tree>
+                </template>
+              </van-field>
+              <van-field :border="true" v-model="form.trailCount" name="trailCount" label="拖车数量" placeholder="请输入" />
+              <van-field :border="true" v-model="form.minorCount" name="minorCount" label="抢修车数量" placeholder="请输入" />
+              <van-field :border="true" class="required" label="服务区域" placeholder="请选择">
+                <template #input>
+                  <el-cascader
+                    v-model="form.serviceAreaCode"
+                    :options="areaList"
+                    :props="areaProps"
+                    ref="areaCascader"
+                    popper-class="responsive-cascader"
+                    :popper-append-to-body="false"
+                    clearable></el-cascader>
+                </template>
+              </van-field>
+            <div class="wei_code_wrap" v-if="form.name">
+              <div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
+              <div class="wei_code_bg">
+                <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
+              </div>
            </div>
          </div>
        </div>
      </div>
-    </div>
-    <div class="btn_wrap">
-      <div class="btn">
-        提交申请
+      <div class="btn_wrap">
+        <van-button class="btn" block type="info" :native-type="'submit'">提交申请</van-button>
      </div>
-    </div>
+    </van-form>
    <van-popup
      v-model="areaShow"
      position="bottom"
@ -103,15 +108,18 @@
 </template>

 <script>
+  import {leftCopy} from  "@/utils/common"
  import QRCode from 'qrcode'
-  import { uploadImage, supplierServiceTree } from "@/api/mine"
+  import { uploadImage, supplierServicePartTree, ocrHandler, unifiedOCRWithCompress, getArea, saveSupplier, getSupplierInfo, getOrCodeInfo } from "@/api/mine"
  import {myMixins} from "@/utils/myMixins"
-  import {areaList} from "@vant/area-data";
+  import {Dialog} from "vant";
  export default {
    name: "supplierAdd",
    mixins:[myMixins],
    data() {
      return {
+        clickFlag: true,
+        phoneVerify: [{ required: true, message: '请输入联系电话' }, { validator: value => { return /^1[3456789]\d{9}$/.test(value) }, message: '联系电话格式不正确' }],
        id:'', //车辆Id
        idBackPhotoList: [],
        idBackPhoto: '',
@ -120,26 +128,147 @@
        companyPhotoList: [],
        companyPhoto: '',
        form: {
-          supplierName: '',
+          name: '',
+          legalName: '',
+          areaName: '',
+          linkName: '',
+          linkPhone: '',
+          serviceType: '',
+          trailCount: '',
+          minorCount: '',
+          serviceAreaCode: [],
        },
        qrCodeUrl: '',
        areaShow: false,
-        areaList: areaList,
-        region: [],
+        areaList: [],
        supplierServiceList: [],
        defaultProps: {
          children: 'children',
-          label: 'name'
+          label: 'title'
        },
+        areaProps: { multiple: true, checkStrictly: true,  value: 'id',label: 'title', }
      }
    },
-    mounted() {
-      this.getQrCode();
-      this.getSupplierServiceTree();
+    async mounted() {
+      const urlParams = new URLSearchParams(window.location.search);
+      this.id = this.$route.query.id || urlParams.get('id');
+      await this.getAreaTree();
+      if(this.id) {
+        await this.getInfoHandler();
+      }
+
+      await this.getSupplierServiceTree();
    },
    methods: {
+      async QrCodeHandler() {
+        await this.QrCodeInfo()
+        await this.getQrCode();
+      },
+      async QrCodeInfo() {
+        let res = await getOrCodeInfo({
+          name: this.form.name
+        });
+        console.log('idid', res);
+      },
+      async getInfoHandler() {
+        let res = await getSupplierInfo({
+          id: this.id
+        });
+        let _data = res?.data
+        leftCopy(this.form, {..._data})
+        this.idFrontPhoto = _data?.idCardFrontUrl;
+        this.idBackPhoto = _data?.idCardBackUrl;
+        this.companyPhoto = _data?.businessLicense;
+        if(this.idFrontPhoto) {
+          this.idFrontPhotoList = [{ url : this.idFrontPhoto }];
+        }
+        if(this.idBackPhoto) {
+          this.idBackPhotoList = [{ url : this.idBackPhoto }];
+        }
+        if(this.companyPhoto) {
+          this.companyPhotoList = [{ url : this.companyPhoto }];
+        }
+        if( _data.serviceType ) {
+          this.$refs.tree.setCheckedKeys(_data.serviceType.split(','))
+        }
+        if(_data?.serviceAreaCode) {
+          this.form.serviceAreaCode = _data?.serviceAreaCode.split(',')
+        }
+      },
+      async applyAdd() {
+        if( !this.idFrontPhoto ) {
+          this.$toast('法人身份证正面照未上传')
+          return
+        }
+        if( !this.idBackPhoto ) {
+          this.$toast('法人身份证反面照未上传')
+          return
+        }
+        if( !this.companyPhoto ) {
+          this.$toast('营业执照未上传')
+          return
+        }
+        if( !(this.form.serviceAreaCode.length > 0) ) {
+          this.$toast('服务区域不能为空')
+          return
+        }
+       /* let flag = await this.QrCodeResult();
+        if( !flag ) {
+          this.$toast('请先添加企微再申请')
+          return
+        }*/
+        if( this.$refs.tree.getCheckedKeys().length > 0 ) {
+          await this.saveHandler()
+        } else {
+          this.$toast('服务能力不能为空')
+          return
+        }
+      },
+      /*async QrCodeResult() {    //获取添加企微结果
+        await getContactQrCodeResult({
+          configId: this.configId
+        });
+      },*/
+      async saveHandler() {
+        if( this.clickFlag ) {
+          try {
+            this.clickFlag = false
+            let _node = this.$refs.areaCascader.getCheckedNodes();
+            let checkArr = [];
+            _node.map(item => {
+              checkArr.push(item.data.id)
+            })
+            let res = await saveSupplier({
+              id: this.id,
+              ...this.form,
+              idCardFrontUrl: this.idFrontPhoto,
+              idCardBackUrl: this.idBackPhoto,
+              businessLicense: this.companyPhoto,
+              serviceType: this.$refs.tree.getCheckedKeys().join(','),
+              serviceAreaCode: checkArr.join(','),
+              wechatId: 'test',
+            });
+            Dialog.alert({
+              title: '提示',
+              message: "操作成功"
+            }).then(async () => {
+              this.goPage('supplierInfo', { id : res?.data })
+              this.clickFlag = true
+            });
+          } finally {
+            this.clickFlag = true
+          }
+        }
+      },
+      async getAreaTree() {
+        let res = await getArea();
+        this.areaList = res?.data;
+      },
      async getSupplierServiceTree(){
-        let res = await supplierServiceTree();
+        let res = await supplierServicePartTree({
+          serviceTypes: '1002,1003',
+          treeType: 2
+        });
        this.supplierServiceList=res.data
      },
      confirmHandle(val){
@ -174,14 +303,37 @@
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData);
-        this.idFrontPhoto = res.data
+        this.idFrontPhoto = res.data;
+        await this.idCardOcrHandler();
+      },
+      async idCardOcrHandler() {    // 身份证正面 ocr识别
+        this.form.legalName = '';
+        let res = await ocrHandler({
+          ocrType: 1,
+          imageUrl: this.idFrontPhoto,
+          cardSide: 'FRONT'
+        })
+        this.form.legalName = res?.data?.name
      },
      async companyPhotoHandler(file) {
        const formData = new FormData();
        formData.append("file" , file.file);
        let res = await uploadImage(formData);
        this.companyPhoto = res.data
-      }
+        await this.companyOcrHandler()
+      },
+      async companyOcrHandler() {    // 营业照 ocr识别
+        this.form.name = '';
+        this.form.areaName = '';
+        let res = await unifiedOCRWithCompress({
+          ocrType: 7,
+          imageUrl: this.companyPhoto,
+          cardSide: 'FRONT'
+        })
+        this.form.name = res?.data?.name;
+        this.form.areaName = res?.data?.address
+        await this.QrCodeHandler();
+      },
    },
    computed: {
      regionText() {
@ -258,6 +410,7 @@
  font-size: .3rem;
 }
  .wei_code_wrap {
+    margin-top: 10px;
    .wei_title {
      font-size: 15px;
      color: #FF553B;
@ -295,5 +448,95 @@
      line-height: 46px;
    }
  }
+  /*::v-deep .el-cascader {
+    width: 100% !important;
+  }

+  ::v-deep .el-input__inner {
+    width: 100% !important;
+    border: none !important;
+    padding-left: 0 !important;
+    background: transparent !important;
+  }
+
+  ::v-deep .el-input {
+    width: 100% !important;
+  }
+
+  ::v-deep .el-input__suffix {
+    right: 0 !important;
+  }*/
+</style>
+<style>
+  .responsive-cascader .el-cascader-menu {
+    min-width: 100px !important;
+  }
+  .responsive-cascader .el-cascader-panel {
+    font-size: 12px !important;
+  }
+  .responsive-cascader .el-cascader-node {
+    padding-left: 5px !important;
+    padding-right: 4px !important;
+  }
+ /* !* 级联选择器下拉框样式 *!
+  .responsive-cascader {
+    width: 90vw !important;
+    max-width: 400px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  .responsive-cascader .el-cascader-panel {
+    display: flex !important;
+    width: 100% !important;
+    max-height: 60vh !important;
+  }
+
+
+
+  .responsive-cascader .el-cascader-node {
+    padding: 12px 16px !important;
+    font-size: 12px !important;
+    height: 20px !important;
+    !*min-height: 44px !important;*!
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .responsive-cascader .el-cascader-node__label {
+    font-size: 12px !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    flex: 1 !important;
+  }
+
+  !* 移动端触摸优化 *!
+  .responsive-cascader .el-cascader-node {
+    padding: 6px 6px !important;
+  }
+
+  !* 选中状态 *!
+  .responsive-cascader .el-cascader-node.in-active-path,
+  .responsive-cascader .el-cascader-node.is-active {
+    color: #1989fa !important;
+    background-color: #f2f8ff !important;
+  }
+
+  !* 移动端适配 *!
+  @media (max-width: 768px) {
+    .responsive-cascader {
+      width: 95vw !important;
+      max-width: none !important;
+    }
+
+    .responsive-cascader .el-cascader-menu {
+      width: 33.33% !important;
+      flex: none !important;
+    }
+
+    .responsive-cascader .el-cascader-node__label {
+      font-size: 13px !important;
+    }
+  }*/
 </style>