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

src/router/index.js

@@ -11,6 +11,22 @@ const routes = [
       path: '/',
       redirect: '/index'
     },
+    {
+        path: '/supplierAdd',
+        name: 'supplierAdd',
+        component: () => import('@/views/index/supplierAdd'),
+        meta:{
+            title: '信息录入',
+        }
+    },
+    {
+        path: '/supplierInfo',
+        name: 'supplierInfo',
+        component: () => import('@/views/index/supplierInfo'),
+        meta:{
+            title: '信息查看',
+        }
+    },
     {
       path: '/toDoList',
       name: 'toDoList',

src/views/index/supplierAdd.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="wrap">
+    <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>
+          </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>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn_wrap">
+      <div class="btn">
+        提交申请
+      </div>
+    </div>
+    <van-popup
+      v-model="areaShow"
+      position="bottom"
+    >
+      <van-area title="服务区域" :area-list="areaList" :columns-num="3"  closeable="true" :value="form.areaCode ? String(form.areaCode) : ''"
+                @cancel="areaShow = false" @confirm="confirmHandle"/>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import QRCode from 'qrcode'
+  import { uploadImage, supplierServiceTree } from "@/api/mine"
+  import {myMixins} from "@/utils/myMixins"
+  import {areaList} from "@vant/area-data";
+  export default {
+    name: "supplierAdd",
+    mixins:[myMixins],
+    data() {
+      return {
+        id:'', //车辆Id
+        idBackPhotoList: [],
+        idBackPhoto: '',
+        idFrontPhotoList: [],
+        idFrontPhoto: '',
+        companyPhotoList: [],
+        companyPhoto: '',
+        form: {
+          supplierName: '',
+        },
+        qrCodeUrl: '',
+        areaShow: false,
+        areaList: areaList,
+        region: [],
+        supplierServiceList: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
+      }
+    },
+    mounted() {
+      this.getQrCode();
+      this.getSupplierServiceTree();
+    },
+    methods: {
+      async getSupplierServiceTree(){
+        let res = await supplierServiceTree();
+        this.supplierServiceList=res.data
+      },
+      confirmHandle(val){
+        this.region=[]
+        val?.forEach(item => this.region.push(item.name))
+        let code=[]
+        val?.forEach(item => code.push(item.code))
+        this.form.areaCode=code[code.length - 1]
+        this.areaShow=false
+      },
+      async getQrCode() {
+        try {
+          this.qrCodeUrl = await QRCode.toDataURL('123123', {
+            width: 150,
+            margin: 2,
+            color: {
+              dark: '#000000',
+              light: '#FFFFFF'
+            },
+          })
+        } catch (error) {
+          console.error('生成二维码失败:', error)
+        }
+      },
+      async idBackPhotoHandler(file) {
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.idBackPhoto = res.data
+      },
+      async idFrontPhotoHandler(file) {
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.idFrontPhoto = res.data
+      },
+      async companyPhotoHandler(file) {
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.companyPhoto = res.data
+      }
+    },
+    computed: {
+      regionText() {
+        return this.region.length ? `${this.region[0]}/${this.region[1]}/${this.region[2]}` : '请选择所在地区';
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap{
+    @include wh(100%,100%);
+    box-sizing: border-box;
+    padding-bottom: 100px;
+    overflow-y: auto;
+  }
+.top_banner {
+  width: 100%;
+  img {
+    width: 100%;
+    height: 169px;
+  }
+}
+.content_wrap {
+  padding: 0 20px;
+}
+.credentials_info {
+  height: 170px;
+}
+.credentials_wrap {
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  .credentials_item {
+    width: 32%;
+    text-align: center;
+    .credentials_title {
+      font-size: 12px;
+      color: #4A4A4A;
+      padding: 10px 0;
+    }
+    .custom-background img {
+      width: 97px;
+      height: 64px;
+    }
+  }
+  .ml2 {
+    margin-left: 2%;
+  }
+}
+::v-deep .van-uploader__preview-image {
+  width: 97px;
+  height: 64px;
+}
+.title1 {
+  width: 106px;
+  height: 19px;
+  margin-top: 25px;
+}
+.title2 {
+  width: 90px;
+  height: 18px;
+  margin-top: 25px;
+  margin-bottom: 10px;
+}
+.van-cell.required::before{
+  content: "＊";
+  position: absolute;
+  color: #F00;
+  left: 0px;
+  top: .25rem;
+  font-size: .3rem;
+}
+  .wei_code_wrap {
+    .wei_title {
+      font-size: 15px;
+      color: #FF553B;
+      text-align: center;
+    }
+    .wei_code_bg {
+      width: 163px;
+      height: 173px;
+      background-image: url("~@/assets/supplier/weiCodeBg.png");
+      background-size: 100% 100%;
+      margin: 8px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .btn_wrap {
+    width: 100%;
+    padding: 15px 0;
+    position: fixed;
+    bottom: 0;
+    background: #F7F7F9;
+    box-shadow: 0px -7px 24px 0px rgba(0, 0, 0, 0.11);
+    z-index: 10000 !important;
+    .btn {
+      width: calc(100% - 80px);
+      margin-left: 40px;
+      height: 46px;
+      background: #0E76F4;
+      border-radius: 5px;
+      font-size: 15px;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 46px;
+    }
+  }
+
+</style>

src/views/index/supplierInfo.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div class="nav_bar_bg status_danger">
+      <template v-if="false">
+        <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">
+        <div class="status_wrap">
+          <img class="wait_icon" src="@/assets/supplier/successIcon.png" alt="">
+          <span class="wait_status success_status">恭喜你，审核通过！</span>
+        </div>
+      </template>
+      <template>
+        <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">
+          不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道
+        </div>
+      </template>
+    </div>
+    <div class="supplier_content">
+      <div class="credentials_info">
+        <div class="common_title">证件照信息</div>
+        <div class="credentials_wrap">
+          <div class="credentials_item">
+            <div class="credentials_title">1. 法人身份证正面</div>
+            <img src="@/assets/supplier/idCardPerson.png" alt="">
+          </div>
+          <div class="credentials_item ml2">
+            <div class="credentials_title">2. 法人身份证反面</div>
+            <img src="@/assets/supplier/idCardPerson.png" alt="">
+          </div>
+          <div class="credentials_item ml2">
+            <div class="credentials_title">3. 营业执照</div>
+            <img src="@/assets/supplier/idCardPerson.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="company_info">
+        <div class="common_title">公司信息</div>
+        <div class="info_wrap">
+          <div class="info_item">
+            <div class="label">服务商名称：</div>
+            <div class="content">苏州速道汽车服务有限公司</div>
+          </div>
+          <div class="info_item">
+            <div class="label">法人姓名：</div>
+            <div class="content">666</div>
+          </div>
+          <div class="info_item">
+            <div class="label">联系人姓名：</div>
+            <div class="content">666</div>
+          </div>
+          <div class="info_item">
+            <div class="label">联系电话：</div>
+            <div class="content">666</div>
+          </div>
+          <div class="info_item">
+            <div class="label">服务能力：</div>
+            <div class="content service_color">拖车服务、抢修服务</div>
+          </div>
+          <div class="info_item">
+            <div class="label">拖车数量：</div>
+            <div class="content">23</div>
+          </div>
+          <div class="info_item">
+            <div class="label">抢修车数量：</div>
+            <div class="content">12</div>
+          </div>
+          <div class="info_item">
+            <div class="label">服务区域：</div>
+            <div class="content">省/市/区</div>
+          </div>
+        </div>
+      </div>
+      <div class="btn_wrap">
+        修改信息
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {myMixins} from "@/utils/myMixins"
+  export default {
+    name: "supplierInfo",
+    mixins:[myMixins],
+    data() {
+      return {
+        id:'', //车辆Id
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .nav_bar_bg {
+    width: 100%;
+    height: 125px;
+    padding-top: 50px;
+  }
+  .status_wait {
+    background: linear-gradient( 180deg, #FFE4C9 0%, rgba(255,248,233,0) 100%);
+  }
+  .status_success {
+    background: linear-gradient( 180deg, #DAFFF8 0%, rgba(237,255,233,0) 100%);
+  }
+  .status_danger {
+    background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
+  }
+  .status_wrap {
+    display: flex;
+    align-items: center;
+    .wait_icon {
+      width: 34px;
+      height: 34px;
+      margin-left: 31px;
+    }
+    .wait_status {
+      color: #E69B0B;
+      font-weight: 600;
+      font-size: 16px;
+      margin-left: 11px;
+    }
+    .success_status {
+      color: #37B864;
+    }
+    .danger_status {
+      color: #ED440C;
+    }
+  }
+  .danger_tip {
+    font-size: 12px;
+    color: #FF553B;
+    line-height: 18px;
+    padding-left: 38px;
+    padding-right: 23px;
+    margin-top: 5px;
+  }
+  .supplier_content {
+    padding: 0 24px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .common_title {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(50, 54, 67, 0.66);
+    padding-left: 2px;
+  }
+  .common_title::after {
+    content: '';
+    display: block;
+    width: 100%;
+    border: 1px solid;
+    margin-top: 10px;
+    opacity: 0.16;
+    border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+  }
+  .credentials_wrap {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    .credentials_item {
+      width: 32%;
+      text-align: center;
+      .credentials_title {
+        font-size: 12px;
+        color: #4A4A4A;
+        padding: 10px 0;
+      }
+      img {
+        width: 97px;
+        height: 64px;
+      }
+    }
+    .ml2 {
+      margin-left: 2%;
+    }
+  }
+  .company_info {
+    margin-top: 20px;
+    .company_wrap {
+      .info_wrap {
+        margin-top: 10px;
+        .info_item {
+          display: flex;
+          padding: 10px 2px;
+          .label {
+            font-size: 13px;
+            color: rgba(50, 54, 67, 0.6);
+            width: 90px;
+            flex-shrink: 0;
+          }
+          .content {
+            font-size: 13px;
+            color: #323643;
+            /*font-weight: bold;*/
+            flex: 1;
+          }
+          .service_color {
+            color: rgba(230, 155, 11, 0.9);
+          }
+        }
+      }
+    }
+  }
+  .btn_wrap {
+    width: calc(100% - 80px);
+    height: 46px;
+    position: fixed;
+    bottom: 20px;
+    left: 40px;
+    background: #0E76F4;
+    border-radius: 5px;
+    font-size: 15px;
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 46px;
+  }
+</style>