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

src/api/mine.js

@@ -50,6 +50,63 @@ export function supplierServiceTree(){
         method:'POST'
     })
 }
+
+// 服务商服务能力
+export function supplierServicePartTree(data){
+    return request({
+        url:'/supplier/approval/getSupplierServiceTree',
+        method:'POST',
+        data
+    })
+}
+
+// 申请加入
+export function saveSupplier(data){
+    return request({
+        url:'/supplier/potential/save',
+        method:'POST',
+        data
+    })
+}
+
+// 申请加入
+export function auditSupplier(data){
+    return request({
+        url:'/supplier/potential/audit',
+        method:'POST',
+        data
+    })
+}
+
+// 修改申请信息
+export function getSupplierInfo(key){
+    return request({
+        url:'/supplier/potential/getById',
+        method:'GET',
+        params:key
+    })
+}
+
+// 获取企微二维码
+export function getOrCodeInfo(data){
+    return request({
+        url:'/agg-api/wxcp/createContactQrCode',
+        method:'POST',
+        contentType:'application/json',
+        data
+    })
+}
+
+// 获取是否添加企微结果
+export function getContactQrCodeResult(data){
+    return request({
+        url:'/agg-api/wxcp/getContactQrCodeResult',
+        method:'POST',
+        contentType:'application/json',
+        data
+    })
+}
+
  //司机列表
 export function driverList(data){
     return request({
@@ -318,6 +375,14 @@ export function unifiedOCRWithCompress(data){
     })
 }
 
+export function getArea(data){
+    return request({
+        url:'/base/area/tree',
+        method:'POST',
+        data
+    })
+}
+
 // 服务商是否培训
 export function jumpPage(data){
     return request({

src/views/index/supplierAdd.vue

@@ -3,6 +3,7 @@
     <div class="top_banner">
       <img src="@/assets/supplier/topBg.png" alt="">
     </div>
+    <van-form @submit="applyAdd">
       <div class="content_wrap">
         <div class="credentials_info">
           <img class="title1" src="@/assets/supplier/title1.png" alt="">
@@ -51,13 +52,12 @@
         <div class="company_info">
           <img class="title2" src="@/assets/supplier/title2.png" alt="">
           <div class="company_wrap">
-          <van-form>
+              <van-field :border="true" readonly v-model="form.name" class="required" name="name" 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" readonly v-model="form.areaName" class="required" name="areaName" 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" readonly v-model="form.legalName" class="required" name="legalName" 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.linkName" class="required" name="linkName" 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.linkPhone" class="required" name="linkPhone" label="联系电话" placeholder="请输入"  :rules="phoneVerify" />
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力" placeholder="请输入"  :rules="[{ required: true, message: '请选择服务能力' }]" />
+              <van-field :border="true" class="required" name="serviceType" label="服务能力">
-            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力"  :rules="[{ required: true, message: '请选择服务能力' }]">
                 <template #input>
                   <el-tree
                     show-checkbox
@@ -70,15 +70,21 @@
                   </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.trailCount" name="trailCount" label="拖车数量" placeholder="请输入" />
-            <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.minorCount" name="minorCount" label="抢修车数量" placeholder="请输入" />
-            <van-field name="supplierName" class="required" label="服务区域" placeholder="请选择"  :rules="[{ required: true, message: '请选择服务区域' }]">
+              <van-field :border="true" class="required" label="服务区域" placeholder="请选择">
                 <template #input>
-                <span @click="areaShow = true">省/市/区</span>
+                  <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>
-          </van-form>
+            <div class="wei_code_wrap" v-if="form.name">
-          <div class="wei_code_wrap">
               <div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
               <div class="wei_code_bg">
                 <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
@@ -88,10 +94,9 @@
         </div>
       </div>
       <div class="btn_wrap">
-      <div class="btn">
+        <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,
+        areaList: [],
-        region: [],
         supplierServiceList: [],
         defaultProps: {
           children: 'children',
-          label: 'name'
+          label: 'title'
         },
+        areaProps: { multiple: true, checkStrictly: true,  value: 'id',label: 'title', }
       }
     },
-    mounted() {
+    async mounted() {
-      this.getQrCode();
+      const urlParams = new URLSearchParams(window.location.search);
-      this.getSupplierServiceTree();
+      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>

src/views/index/supplierInfo.vue

@@ -1,25 +1,25 @@
 <template>
-  <div>
+  <div class="wrap">
-    <div class="nav_bar_bg status_danger">
+    <div class="nav_bar_bg" :class="{ 'status_wait': supplierInfo?.state == 0, 'status_danger': supplierInfo?.state == 99, 'status_success': supplierInfo?.state == 1 }">
-      <template v-if="false">
+      <template v-if="supplierInfo?.state == 0">
         <div class="status_wrap">
           <img class="wait_icon" src="@/assets/supplier/waitIcon.png" alt="">
           <span class="wait_status">审批中</span>
         </div>
       </template>
-      <template v-if="false">
+      <template v-if="supplierInfo?.state == 1">
         <div class="status_wrap">
           <img class="wait_icon" src="@/assets/supplier/successIcon.png" alt="">
           <span class="wait_status success_status">恭喜你，审核通过！</span>
         </div>
       </template>
-      <template>
+      <template v-if="supplierInfo?.state == 99">
         <div class="status_wrap">
           <img class="wait_icon" src="@/assets/supplier/failIcon.png" alt="">
           <span class="wait_status danger_status">审核不通过</span>
         </div>
         <div class="danger_tip">
-          不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道
+          {{supplierInfo?.failReason}}
         </div>
       </template>
     </div>
@@ -29,15 +29,15 @@
         <div class="credentials_wrap">
           <div class="credentials_item">
             <div class="credentials_title">1. 法人身份证正面</div>
-            <img src="@/assets/supplier/idCardPerson.png" alt="">
+            <img :src="supplierInfo?.idCardFrontUrl" alt="">
           </div>
           <div class="credentials_item ml2">
             <div class="credentials_title">2. 法人身份证反面</div>
-            <img src="@/assets/supplier/idCardPerson.png" alt="">
+            <img :src="supplierInfo?.idCardBackUrl" alt="">
           </div>
           <div class="credentials_item ml2">
             <div class="credentials_title">3. 营业执照</div>
-            <img src="@/assets/supplier/idCardPerson.png" alt="">
+            <img :src="supplierInfo?.businessLicense" alt="">
           </div>
         </div>
       </div>
@@ -46,46 +46,76 @@
         <div class="info_wrap">
           <div class="info_item">
             <div class="label">服务商名称：</div>
-            <div class="content">苏州速道汽车服务有限公司</div>
+            <div class="content">{{supplierInfo?.name}}</div>
           </div>
           <div class="info_item">
             <div class="label">法人姓名：</div>
-            <div class="content">666</div>
+            <div class="content">{{supplierInfo?.legalName}}</div>
           </div>
           <div class="info_item">
             <div class="label">联系人姓名：</div>
-            <div class="content">666</div>
+            <div class="content">{{supplierInfo?.linkName}}</div>
           </div>
           <div class="info_item">
             <div class="label">联系电话：</div>
-            <div class="content">666</div>
+            <div class="content">{{supplierInfo?.linkPhone}}</div>
           </div>
           <div class="info_item">
             <div class="label">服务能力：</div>
-            <div class="content service_color">拖车服务、抢修服务</div>
+            <div class="content service_color">{{supplierInfo?.serviceAreaName}}</div>
           </div>
           <div class="info_item">
             <div class="label">拖车数量：</div>
-            <div class="content">23</div>
+            <div class="content">{{supplierInfo?.trailCount || ''}}</div>
           </div>
           <div class="info_item">
             <div class="label">抢修车数量：</div>
-            <div class="content">12</div>
+            <div class="content">{{supplierInfo?.minorCount || ''}}</div>
           </div>
           <div class="info_item">
             <div class="label">服务区域：</div>
-            <div class="content">省/市/区</div>
+            <div class="content">{{supplierInfo?.serviceName}}</div>
+          </div>
+          <template v-if="type == 'audit'">
+            <div class="info_item">
+              <div class="label"><span style="color: red;margin-right: 2px">*</span>审批：</div>
+              <div class="content">
+                <van-radio-group v-model="form.state"  direction="horizontal" icon-size="18px">
+                  <van-radio name="1">审批通过</van-radio>
+                  <van-radio name="99">审批不通过</van-radio>
+                </van-radio-group>
               </div>
             </div>
+            <div class="info_item" v-if="form.state == 1">
+              <div class="label"><span style="color: red;margin-right: 2px">*</span>服务商简称：</div>
+              <div class="content">
+                <el-input style="width: 100%" v-model.trim="form.abbr" placeholder="请输入服务商简称"></el-input>
               </div>
-      <div class="btn_wrap">
+            </div>
-        修改信息
+            <div class="info_item" v-if="form.state == 99">
+              <div class="label"><span style="color: red;margin-right: 2px">*</span>不通过原因：</div>
+              <div class="content">
+                <textarea class="report_textarea" rows="4" maxlength="200" show-word-limit placeholder="点击这里输入不通过原因" v-model.trim="form.failReason"></textarea>
+              </div>
+            </div>
+          </template>
+
+        </div>
+      </div>
+
+
+      <div class="btn_wrap" v-if="type == 'show' && supplierInfo?.state == 99">
+        <div class="btn" @click="goModifyPage">修改信息</div>
+      </div>
+      <div class="btn_wrap" v-if="type == 'audit'">
+        <div class="btn" v-if="type == 'audit'" @click="auditSupplier">保 存</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import { getSupplierInfo, auditSupplier } from "@/api/mine"
   import {myMixins} from "@/utils/myMixins"
   export default {
     name: "supplierInfo",
@@ -93,12 +123,77 @@
     data() {
       return {
         id:'', //车辆Id
+        form: {
+          state: '',
+          abbr: '',
+          failReason: '',
+        },
+        supplierInfo: {},
+        type: 'show',
       }
+    },
+    async mounted() {
+      const urlParams = new URLSearchParams(window.location.search);
+      this.id=this.$route.query.id ||  urlParams.get('id');
+      this.type=this.$route.query.type || urlParams.get('type') || 'show';
+      await this.getInfoHandler();
+    },
+    methods: {
+      goModifyPage() {
+        this.goPage('supplierAdd', { id : this.id })
+      },
+      async auditSupplier() {
+        if( !this.form.state ) {
+          this.$toast('请选择审批结果')
+          return
+        }
+        if( this.form.state == 99 && !this.form.failReason ) {
+          this.$toast('请输入不通过原因')
+          return
+        }
+        if( this.form.state == 1 && !this.form.abbr ) {
+          this.$toast('请输入服务商简称')
+          return
+        }
+        try {
+          await auditSupplier({
+            id: this.id,
+            ...this.form,
+            wechatId: 'test',  // 参数将会被去掉
+          })
+        } finally {
+          this.closeParentDialog();
+        }
+      },
+      async getInfoHandler() {
+        let res = await getSupplierInfo({
+          id: this.id,
+        });
+        this.supplierInfo = res?.data;
+        console.log('res', res)
+      },
     }
   }
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .report_textarea {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 6px;
+    min-height: 95px;
+    border: 1px solid #E2EAF6;
+    padding: 10px;
+    font-size: 13px;
+  }
+  .wrap{
+    @include wh(100%,100%);
+    box-sizing: border-box;
+    padding-bottom: 100px;
+    overflow-y: auto;
+  }
   .nav_bar_bg {
     width: 100%;
     height: 125px;
@@ -185,7 +280,7 @@
   }
   .company_info {
     margin-top: 20px;
-    .company_wrap {
+    /*.company_wrap {*/
       .info_wrap {
         margin-top: 10px;
         .info_item {
@@ -207,15 +302,22 @@
             color: rgba(230, 155, 11, 0.9);
           }
         }
-      }
+      /*}*/
     }
   }
   .btn_wrap {
-    width: calc(100% - 80px);
+    width: 100%;
-    height: 46px;
+    padding: 15px 0;
     position: fixed;
-    bottom: 20px;
+    bottom: 0;
-    left: 40px;
+    background: #F7F7F9;
+    box-shadow: 0px -7px 24px 0px rgba(0, 0, 0, 0.11);
+    z-index: 10000 !important;
+    left: 0;
+    .btn {
+      width: calc(100% - 80px);
+      margin-left: 40px;
+      height: 46px;
       background: #0E76F4;
       border-radius: 5px;
       font-size: 15px;
@@ -223,4 +325,5 @@
       text-align: center;
       line-height: 46px;
     }
+  }
 </style>