add:个人认证 + 企业认证

src/pages/UserCenter/Authentication.vue

@@ -6,7 +6,7 @@
       </div>
       <el-row :gutter="20">
         <el-col :span="12">
-          <div class="authentication-card authentication-card-select">
+          <div class="authentication-card" @click="gotoPersonalAuth">
             <div class="authentication-card-title">个人认证</div>
             <el-row :gutter="10">
               <el-col :span="5">
@@ -22,7 +22,7 @@
           </div>
         </el-col>
         <el-col :span="12">
-          <div class="authentication-card">
+          <div class="authentication-card" @click="gotoEnterpriseAuth">
             <div class="authentication-card-title">企业认证</div>
             <el-row :gutter="10">
               <el-col :span="5">
@@ -35,7 +35,7 @@
                 <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
               </el-col>
             </el-row>
-          </div>
+          </div >
         </el-col>
       </el-row>
     </div>
@@ -52,7 +52,12 @@
       }
     },
     methods: {
-
+      gotoPersonalAuth(){
+        this.$router.push({path:'/personal/authentication/individual'})
+      },
+      gotoEnterpriseAuth(){
+        this.$router.push({path:'/personal/authentication/enterprise'})
+      },
     }
   }
 </script>

src/pages/UserCenter/EnterpriseAuth.vue

@@ -7,19 +7,20 @@
       <el-step title="上传企业信息"></el-step>
       <el-step title="上传法人信息"></el-step>
       <el-step title="确认信息"></el-step>
-      <el-step title="认证结果"></el-step>
+<!--      <el-step title="认证结果"></el-step>-->
     </el-steps>
-    <div class="upload-wrapper">
+    <div class="upload-wrapper" v-if="active===0">
       <div>
         <el-upload
-          class="avatar-uploader"
+          class="avatar-uploader idcard-uploader"
           action="https://jsonplaceholder.typicode.com/posts/"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload">
-          <img v-if="imageUrl" :src="imageUrl" class="avatar">
-          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          :before-upload="beforeFileUpload"
+          :http-request="uploadFile"
+          :data="{type:2}"
+        >
+          <img v-if="enterpriseForm.businessLicensePhoto" :src="enterpriseForm.businessLicensePhoto" class="avatar">
         </el-upload>
+
         <div><span style="color: red">*</span>营业执照：（仅支持三证合一）</div>
       </div>
       <div class="authentication-detail">
@@ -32,39 +33,180 @@
         </ul>
       </div>
     </div>
+    <div class="legal-person-wrapper" v-if="active===1">
+      <el-form ref="enterpriseForm" :model="enterpriseForm" label-width="120px" style="width: 70%">
+        <el-form-item label="法人姓名">
+          <el-input v-model="enterpriseForm.legalPersonName" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号码">
+          <el-input v-model="enterpriseForm.idCardNum" placeholder="身份证前后不能有空格"></el-input>
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio-group v-model="enterpriseForm.sex">
+            <el-radio label="男"></el-radio>
+            <el-radio label="女"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="身份证到期时间">
+          <el-input v-model="enterpriseForm.idCardDeadTime" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
+        </el-form-item>
+        <el-form-item label="家庭或单位地址">
+          <el-input v-model="enterpriseForm.address"></el-input>
+        </el-form-item>
+        <el-form-item label="认证权限">
+          <el-checkbox-group v-model="enterpriseForm.roleList">
+            <el-checkbox :label="0">发任务</el-checkbox>
+            <el-checkbox :label="1">接任务</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <div class="upload-wrapper">
+        <el-row style="width: 100%">
+          <el-col :span="9" style="padding-left: 30px">
+            <div>
+              <el-upload
+                class="avatar-uploader"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :before-upload="beforeFileUpload"
+                :http-request="uploadFile"
+                :data="{type:0}"
+              >
+                <img v-if="enterpriseForm.idCardPositivePhoto" :src="enterpriseForm.idCardPositivePhoto" class="avatar">
+              </el-upload>
+              <div style="text-align: center">身份证正面照</div>
+            </div>
+            <div style="width: 280px">
+              <el-upload
+                class="avatar-uploader idcard-uploader"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :before-upload="beforeFileUpload"
+                :http-request="uploadFile"
+                :data="{type:1}"
+              >
+                <img v-if="enterpriseForm.idCardBackPhoto" :src="enterpriseForm.idCardBackPhoto" class="avatar">
+              </el-upload>
+
+              <div style="text-align: center">身份证反面照</div>
+            </div>
+          </el-col>
+          <el-col :span="15">
+            <div class="authentication-detail">
+              <div class="authentication-detail-title">示例</div>
+              <el-row style="width: 100%">
+                <div>
+                  <div class="idcard-example1"></div>
+                  <div class="idcard-example2"></div>
+                </div>
+                <div>
+                  <ul class="authentication-detail-list">
+                    <li>仅支持.jpg .bmp .png .gif的图片格式，图 片大小不超过3M</li>
+                    <li>核实手持证件与原件方向一致，对焦身份证 进行拍照</li>
+                    <li>您提供的照片众测服务平台将予以保护，不 会用于其他用途</li>
+                  </ul>
+                  <a class="authentication-detail-list-blue">实名认证帮助></a>
+                </div>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
     <div class="enterprise-brn-wrapper">
-      <button class="enterprise-btn previousBtn">上一步</button>
-      <button class="enterprise-btn nextBtn">下一步</button>
+      <button class="enterprise-btn previousBtn" @click="active--" v-if="active>0">上一步</button>
+      <button class="enterprise-btn nextBtn" @click="active++" v-if="active===0">下一步</button>
+      <button class="enterprise-btn nextBtn" @click="submitEnterpriseAuth" v-if="active===1">提交审核</button>
     </div>
-
   </div>
 </template>
 
 <script>
+  import Apis from '@/js/api'
+  import Http from '@/js/http'
+  import {notify} from '@/constants/index'
+  import {storageGet} from '@/js/index'
+
   export default {
     name: "EnterpriseAuth",
     data() {
       return {
         active: 0,
-        imageUrl: ''
+        user: {},
+        enterpriseForm: {
+          roleList: [
+            0, 1
+          ],//0是发包 1是接包 如果两个都有那么权限都有。
+          legalPersonName: "徐璇", //法人姓名
+          businessLicensePhoto: require('../../assets/img/business-license.png'),//企业执照
+          idCardNum: "223025199806053322",//身份证号码
+          address: "南京市沛县徐园",//地址
+          sex: "男",
+          idCardPositivePhoto: "000001.png",//身份证正面照
+          idCardBackPhoto: "00002.png",//身份证反面照片
+          idCardDeadTime: "2022-08-09"//身份证过期时间
+        }
+
       }
     },
-    methods:{
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
+    methods: {
+      submitEnterpriseAuth() {
+        Http.post(`/api/user/${this.user.id}/enterpriseAuth`, this.enterpriseForm).then(res => {
+          if (res) {
+            notify('success', '认证成功');
+            this.$router.push('/personal/authentication')
+          }
+        })
       },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      //文件上传前的响应函数
+      beforeFileUpload(file) {
+        // 文件大小不能超过10M
+        if (file.size > 10 * 1000 * 1000) {
+          notify('error', '单个文件大小不能超过5M')
+          return false;
         }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
+        let fileName = file.name
+        let index = fileName.lastIndexOf('.');
+        // 文件不能没有后缀
+        if (index <= 0) {
+          notify('error', '只能上传png/jpg/jpeg格式的文件')
+          return false;
         }
-        return isJPG && isLt2M;
-      }
+        let fileSuffix = fileName.substr(index)
+        // 文件后缀必须是.png或者.jpg
+        if (fileSuffix !== '.jpg' && fileSuffix !== '.png' && fileSuffix !== '.jpeg') {
+          notify('error', '只能上传png/jpg/jpeg格式的文件')
+          return false;
+        }
+      },
+      //上传文件，此处为上传图片
+      uploadFile(param) {
+        const formData = new FormData()
+        let config = {
+          //添加请求头
+          headers: {'Content-Type': 'multipart/form-data'},
+        }
+        formData.append('file', param.file)
+        //console.log(JSON.parse(this.user).userVO)
+        Http.upload(Apis.FILE.UPLOAD_IMAGE.replace('{userId}', this.user.id), formData, config).then((res) => {
+          if(param.data.type==2){
+            this.enterpriseForm.businessLicensePhoto = res.data;
+          }else if(param.data.type == 1){
+            this.enterpriseForm.IDCardBackPhoto = res.data
+          }else{
+            this.enterpriseForm.IDCardPositivePhoto = res.data
+
+          }
+          notify('success', '上传成功')
+          // this.$refs['agency'].validateField('photoUrl');
+        }).catch(error => {
+          notify('error', error.data)
+        })
+      },
+    },
+    mounted() {
+      this.setUserInfo()
     }
   }
 </script>
@@ -87,21 +229,39 @@
       padding: 0 30px;
 
       .authentication-detail {
-        padding:0 30px;
-        border-left: 1px solid rgba(220,220,220,1);
+        padding: 0 30px;
+        border-left: 1px solid rgba(220, 220, 220, 1);
+
+        .idcard-example1{
+          width: 270px;
+          height: 160px;
+          background-image: url("../../assets/img/idcard-back.png");
+          background-size: 100% 100%;
+          margin-bottom: 20px;
+        }
+        .idcard-example2{
+          width: 270px;
+          height: 160px;
+          background-image: url("../../assets/img/idcard-positive.png");
+          background-size: 100% 100%;
+          margin-bottom: 20px;
+        }
+
         .authentication-detail-title {
-          font-size:16px;
-          font-family:Source Han Sans CN;
-          font-weight:600;
-          border-bottom: 1px dashed rgba(220,220,220,1);
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 600;
+          border-bottom: 1px dashed rgba(220, 220, 220, 1);
           margin-bottom: 10px;
           padding-bottom: 5px;
         }
       }
+
       .authentication-detail-list {
         list-style-type: none;
         padding-left: 0;
-        li:before{
+
+        li:before {
           content: "\2022";
           color: #148AE0;
           font-size: 22px;
@@ -114,16 +274,18 @@
       margin-top: 40px;
       display: flex;
       justify-content: center;
-      .enterprise-btn{
-        border: 1px solid rgba(0,118,203,1);
+
+      .enterprise-btn {
+        border: 1px solid rgba(0, 118, 203, 1);
         width: 150px;
         background-color: white;
-        color:rgba(0,118,203,1) ;
+        color: rgba(0, 118, 203, 1);
         padding: 10px;
         margin: 0 30px;
       }
+
       .nextBtn {
-        background-color:rgba(0,118,203,1);
+        background-color: rgba(0, 118, 203, 1);
         color: white;
       }
     }

src/pages/UserCenter/IndividualAuth.vue

@@ -1,46 +1,52 @@
 <template>
-  <div class="right-modifyPsw">
+  <div class="right-modifyPsw" id="individualAuth">
     <div class="right-modifyPsw-title">
       <span style="font-size: 18px;font-weight: bold">个人认证</span>
     </div>
-    <div class="individual-steps-wrapper">
-      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px;width: 300px">
-        <el-step title="填写认证信息"></el-step>
-        <el-step title="认证结果"></el-step>
-      </el-steps>
-  </div>
-    <el-form ref="form" :model="form" label-width="120px" style="width: 70%">
-    <el-form-item label="真实姓名">
-      <el-input v-model="individualForm.username" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
-    </el-form-item>
-    <el-form-item label="身份证号码">
-      <el-input v-model="individualForm.idnumber" placeholder="身份证前后不能有空格"></el-input>
-    </el-form-item>
+<!--    <div class="individual-steps-wrapper">-->
+<!--      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px;width: 300px">-->
+<!--        <el-step title="填写认证信息"></el-step>-->
+<!--        <el-step title="认证结果"></el-step>-->
+<!--      </el-steps>-->
+<!--    </div>-->
+    <el-form ref="individualForm" :model="individualForm" label-width="120px" style="width: 70%">
+      <el-form-item label="真实姓名">
+        <el-input v-model="individualForm.realName" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
+      </el-form-item>
+      <el-form-item label="身份证号码">
+        <el-input v-model="individualForm.IDCard" placeholder="身份证前后不能有空格"></el-input>
+      </el-form-item>
       <el-form-item label="性别">
-        <el-radio-group v-model="individualForm.gender">
+        <el-radio-group v-model="individualForm.sex">
           <el-radio label="男"></el-radio>
           <el-radio label="女"></el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="身份证到期时间">
-        <el-input v-model="individualForm.idDate" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
+        <el-input v-model="individualForm.IDCardDeadTime" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
       </el-form-item>
       <el-form-item label="家庭或单位地址">
         <el-input v-model="individualForm.address"></el-input>
       </el-form-item>
+      <el-form-item label="认证权限">
+        <el-checkbox-group v-model="individualForm.roleList">
+          <el-checkbox :label="0">发任务</el-checkbox>
+          <el-checkbox :label="1">接任务</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
     </el-form>
     <div class="upload-wrapper">
       <el-row style="width: 100%">
         <el-col :span="9" style="padding-left: 30px">
-          <div>
+          <div style="width: 280px">
             <el-upload
-              class="avatar-uploader"
+              class="avatar-uploader idcard-uploader"
               action="https://jsonplaceholder.typicode.com/posts/"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload">
-              <img v-if="imageUrl" :src="imageUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              :before-upload="beforeFileUpload"
+              :http-request="uploadFile"
+              :data="{type:0}"
+            >
+              <img v-if="individualForm.IDCardPositivePhoto" :src="individualForm.IDCardPositivePhoto" class="avatar">
             </el-upload>
             <div style="text-align: center">手持身份证正面照</div>
           </div>
@@ -71,14 +77,15 @@
         <el-col :span="9" style="padding-left: 30px">
           <div>
             <el-upload
-              class="avatar-uploader"
+              class="avatar-uploader idcard-uploader"
               action="https://jsonplaceholder.typicode.com/posts/"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload">
-              <img v-if="imageUrl" :src="imageUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              :before-upload="beforeFileUpload"
+              :http-request="uploadFile"
+              :data="{type:1}"
+            >
+              <img v-if="individualForm.IDCardBackPhoto" :src="individualForm.IDCardBackPhoto" class="avatar">
             </el-upload>
+
             <div style="text-align: center">身份证反面照</div>
           </div>
         </el-col>
@@ -103,39 +110,95 @@
 
     </div>
     <div class="enterprise-brn-wrapper">
-      <button class="enterprise-btn previousBtn">上一步</button>
-      <button class="enterprise-btn nextBtn">提交审核</button>
+<!--      <button class="enterprise-btn previousBtn">上一步</button>-->
+      <button class="enterprise-btn nextBtn" @click="submitIndividualAuth">提交审核</button>
     </div>
 
   </div>
 </template>
 
 <script>
+  import Apis from '@/js/api'
+  import Http from '@/js/http'
+  import {notify} from '@/constants/index'
+  import {storageGet} from '@/js/index'
+
   export default {
     name: "IndividualAuth",
     data() {
       return {
         active: 0,
-        imageUrl: '',
-      individualForm:{}
+        user: {},
+        individualForm: {
+          roleList: [0],//0是发包 1是接包 如果两个都有那么权限都有。
+          realName: "徐璇",
+          sex: "男",
+          IDCard: "32032219941023007X",
+          IDCardPositivePhoto: "00001.jpg",
+          IDCardBackPhoto: "00002.jpg",
+          IDCardDeadTime: "2020-07-20",
+          address: "北京沛县"
+        }
       }
     },
-    methods:{
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
+    methods: {
+      submitIndividualAuth(){
+        Http.post(`/api/user/${this.user.id}/personalAuth`,this.individualForm).then(res=>{
+          if(res){
+            notify('success', '认证成功');
+            this.$router.push('/personal/authentication')
+          }
+        })
       },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      //文件上传前的响应函数
+      beforeFileUpload(file) {
+        // 文件大小不能超过10M
+        if (file.size > 10 * 1000 * 1000) {
+          notify('error', '单个文件大小不能超过5M')
+          return false;
         }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
+        let fileName = file.name
+        let index = fileName.lastIndexOf('.');
+        // 文件不能没有后缀
+        if (index <= 0) {
+          notify('error', '只能上传png/jpg/jpeg格式的文件')
+          return false;
         }
-        return isJPG && isLt2M;
-      }
+        let fileSuffix = fileName.substr(index)
+        // 文件后缀必须是.png或者.jpg
+        if (fileSuffix !== '.jpg' && fileSuffix !== '.png' && fileSuffix !== '.jpeg') {
+          notify('error', '只能上传png/jpg/jpeg格式的文件')
+          return false;
+        }
+      },
+      //上传文件，此处为上传图片
+      uploadFile(param) {
+        const formData = new FormData()
+        let config = {
+          //添加请求头
+          headers: {'Content-Type': 'multipart/form-data'},
+        }
+        formData.append('file', param.file)
+        //console.log(JSON.parse(this.user).userVO)
+        Http.upload(Apis.FILE.UPLOAD_IMAGE.replace('{userId}', this.user.id), formData, config).then((res) => {
+          if(param.data.type === 0){
+            this.individualForm.IDCardPositivePhoto = res.data
+          }else{
+            this.individualForm.IDCardBackPhoto = res.data
+          }
+
+          notify('success', '上传成功')
+          // this.$refs['agency'].validateField('photoUrl');
+        }).catch(error => {
+          notify('error', error.data)
+        })
+      },
+    },
+    mounted() {
+      this.setUserInfo()
     }
   }
 </script>
@@ -157,46 +220,65 @@
       display: flex;
       justify-content: center;
     }
+
     .upload-wrapper {
       /*display: flex;*/
       /*padding: 0 30px;*/
 
+      .idcard-uploader {
+        width: 100%;
+
+        .avatar {
+          width: 100%;
+        }
+
+        .el-upload .el-upload--text {
+          width: 100%;
+        }
+      }
+
       .authentication-detail {
-        padding-left:20px;
-        border-left: 1px solid rgba(220,220,220,1);
+        padding-left: 20px;
+        border-left: 1px solid rgba(220, 220, 220, 1);
+
         .authentication-detail-title {
-          font-size:16px;
-          font-family:Source Han Sans CN;
-          font-weight:600;
-          border-bottom: 1px dashed rgba(220,220,220,1);
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 600;
+          border-bottom: 1px dashed rgba(220, 220, 220, 1);
           margin-bottom: 10px;
           padding-bottom: 5px;
         }
+
         .idcard-example1 {
           height: 140px;
           background-image: url("../../assets/img/idcard-example1.png");
           background-size: 100% 100%;
         }
+
         .idcard-example2 {
           height: 140px;
           background-image: url("../../assets/img/idcard-example2.png");
           background-size: 100% 100%;
         }
       }
+
       .authentication-detail-list {
         list-style-type: none;
         padding-left: 0;
-        font-size:12px;
-        font-family:Source Han Sans CN;
-        font-weight:400;
-        color:rgba(153,153,153,1);
-        li:before{
+        font-size: 12px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: rgba(153, 153, 153, 1);
+
+        li:before {
           content: "\2022";
-          color: rgba(153,153,153,1);
+          color: rgba(153, 153, 153, 1);
           font-size: 16px;
           margin-right: 10px;
         }
-        .authentication-detail-list-blue{
+
+        .authentication-detail-list-blue {
           color: #148AE0;
         }
 
@@ -207,19 +289,35 @@
       margin-top: 40px;
       display: flex;
       justify-content: center;
-      .enterprise-btn{
-        border: 1px solid rgba(0,118,203,1);
+
+      .enterprise-btn {
+        border: 1px solid rgba(0, 118, 203, 1);
         width: 150px;
         background-color: white;
-        color:rgba(0,118,203,1) ;
+        color: rgba(0, 118, 203, 1);
         padding: 10px;
         margin: 0 30px;
       }
+
       .nextBtn {
-        background-color:rgba(0,118,203,1);
+        background-color: rgba(0, 118, 203, 1);
         color: white;
       }
     }
 
   }
 </style>
+<style lang="less">
+  #individualAuth {
+    .avatar-uploader .idcard-uploader {
+      width: 100%;
+      .avatar {
+        width: 100%;
+      }
+      .el-upload .el-upload--text {
+        width: 100% !important;
+      }
+    }
+  }
+
+</style>

src/pages/UserCenter/Mine.vue

@@ -128,7 +128,6 @@
         //console.log(JSON.parse(this.user).userVO)
         Http.upload(Apis.FILE.UPLOAD_IMAGE.replace('{userId}', this.user.id), formData, config).then((res) => {
           this.userForm.photoUrl = res.data
-          console.log(res.data)
           notify('success', '上传成功')
           // this.$refs['agency'].validateField('photoUrl');
         }).catch(error => {
@@ -137,7 +136,8 @@
       },
       loadData() {
         Http.get(`/api/personal/display/${this.user.id}`).then((res) => {
-          this.userForm = res.userVO
+          this.userForm = res.userVO;
+          this.userForm.personalCompetence = ['JKCS']
         })
       },
       setUserInfo(){

src/style/main.scss

@@ -337,7 +337,7 @@ a {
   color: rgba(0, 118, 203, 1);
 }
 .avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
+  //border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
@@ -369,3 +369,4 @@ a {
   padding: 0 8px !important;
   height: 38px !important;
 }
+