个人认证

public/css/common.scss

@@ -733,4 +733,47 @@ i{
   margin: 10px;
   padding: 0 5px;
   cursor: pointer;
+}
+
+//面包屑
+.el-breadcrumb{
+  .el-breadcrumb__inner,.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link,.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
+    color:#565B79;
+    font-weight:400;
+    font-size: 14px;
+  }
+  .el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{
+    color:#565B79 !important;
+  }
+}
+
+//tab导航
+.authContent{
+  .el-tabs__nav-wrap::after{
+    background: transparent !important;
+    height: 1px !important;
+  }
+  .el-tabs__header{
+    padding-left:30px;
+    border-bottom: 1px solid #E7E9F5;
+  }
+  //.el-tabs__nav{
+  //  height: 66px;
+  //  line-height:66px;
+  //}
+  .el-tabs__item{
+    font-size: 16px;
+    color: #9197B4;
+    height: 66px;
+    line-height: 66px;
+  }
+  .el-tabs__item.is-active, .el-tabs__item:hover{
+    color: #69697A;
+  }
+  .el-tabs__active-bar{
+    background:#5D78FF;
+  }
+  .el-tabs__content{
+    padding-left: 8%;
+  }
 }
\ No newline at end of file

src/common/lang/en.js

@@ -173,5 +173,38 @@ module.exports = {
         personalAuth:"personalAuth",
         questions:"questions",
         suggestions:"suggestions"
+    },
+
+    leftNav:{ //左侧nav
+        postDemand:"发送需求en",
+        postDemandByMe:"我发送的需求en",
+        selfrecommend:"自推荐en",
+        mypurpose:"我的意向en",
+        mycollection:"我的收藏en",
+        aboutTechbook:"关于TechBooken"
+    },
+
+    personalAuth:{ //个人认证
+        setAccount:"账号设置en",
+        personalAuth:"个人认证en",
+        modifyPwd:"修改密码en",
+        notAuthTitle:"您的账号还未进行个人认证，提交认证成功后即可解锁完整功能en",
+        name:"姓名en",
+        placeholderName:"请输入你的真实姓名en",
+        phone:"手机号en",
+        company:"公司全称en",
+        placeholderCompany:"请输入公司全称en",
+        companyEmail:"公司邮箱",
+        placeholderEmail:"请填写公司邮箱地址en",
+        code:"验证码en",
+        placeholderCode:"请输入邮箱验证码v",
+        notsendCode:"收不到验证码？en",
+        department:"所在部门en",
+        placeholderDepartment:"请输入所在公司部门en",
+        position:"职位en",
+        placeholderPosition:"请输入职位名称en",
+        businessCard:"上传名片en",
+        businessCardTitle:"请确保图片清晰、完整，仅支持PNG，JPG，最大不超过2Men",
+        submitAuth:"提交认证en"
     }
 }

src/common/lang/zh.js

@@ -173,5 +173,38 @@ module.exports = {
         personalAuth:"个人认证",
         questions:"常见问题",
         suggestions:"意见反馈"
+    },
+
+    leftNav:{ //左侧nav
+        postDemand:"发送需求",
+        postDemandByMe:"我发送的需求",
+        selfrecommend:"自推荐",
+        mypurpose:"我的意向",
+        mycollection:"我的收藏",
+        aboutTechbook:"关于TechBook"
+    },
+
+    personalAuth:{ //个人认证
+        setAccount:"账号设置",
+        personalAuth:"个人认证",
+        modifyPwd:"修改密码",
+        notAuthTitle:"您的账号还未进行个人认证，提交认证成功后即可解锁完整功能",
+        name:"姓名",
+        placeholderName:"请输入你的真实姓名",
+        phone:"手机号",
+        company:"公司全称",
+        placeholderCompany:"请输入公司全称",
+        companyEmail:"公司邮箱",
+        placeholderEmail:"请填写公司邮箱地址",
+        code:"验证码",
+        placeholderCode:"请输入邮箱验证码",
+        notsendCode:"收不到验证码？",
+        department:"所在部门",
+        placeholderDepartment:"请输入所在公司部门",
+        position:"职位",
+        placeholderPosition:"请输入职位名称",
+        businessCard:"上传名片",
+        businessCardTitle:"请确保图片清晰、完整，仅支持PNG，JPG，最大不超过2M",
+        submitAuth:"提交认证"
     }
 }

src/components/authentication/personalAuth.vue

+<template>
+  <div>
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm">
+
+      <el-form-item :label="$t('personalAuth.name')+'：'" prop="name">
+        <el-input v-model="ruleForm.name" :placeholder="$t('personalAuth.placeholderName')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('personalAuth.phone')+'：'" prop="phone">
+        <el-input v-model.trim="ruleForm.phone" disabled autocomplete
+                  maxlength="11"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('personalAuth.company')+'：'" prop="company">
+        <el-input v-model="ruleForm.company" :placeholder="$t('personalAuth.company')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('personalAuth.companyEmail')+'：'" prop="email">
+        <el-input v-model.trim="ruleForm.email" :placeholder="$t('personalAuth.placeholderEmail')" autocomplete maxlength="36"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('personalAuth.code')+'：'" prop="code" class="yzcodeItem" style="margin-bottom: 30px !important;">
+        <el-input type="text" v-model.trim="ruleForm.code" :placeholder="$t('personalAuth.placeholderCode')" style="float: left;" maxlength="6"
+                  autocomplete></el-input>
+        <span class="getyzcodeBtn" @click="handleGetCode" v-if="showCount">{{$t("commonTips."+codehtml)}}</span>
+        <span class="getdyzcodeBtn"  v-if="!showCount">{{count}}{{$t("commonTips.resendCode")}}</span>
+      </el-form-item>
+      <el-form-item v-if="isShowSlider">
+        <sliderCmpt @sendVerification="getVerification"></sliderCmpt>
+      </el-form-item>
+      <el-form-item v-if="showMessageInfo" class="message-item">
+        <el-tag
+          :type="messageObj.type"
+          effect="plain">
+          {{ messageObj.message }}
+        </el-tag>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')">提交认证</el-button>
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "personalAuth",
+    data() {
+      return {
+        ruleForm: {
+          name: '',
+          phone:'',
+          company:'',
+          email:'',
+          code:'',
+        },
+        codehtml:"getCode",
+        rules: {
+          name: [
+            {required: true, message: '请输入姓名', trigger: 'blur'},
+            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
+          ],
+        },
+        bool:false,
+        errorInfo:"",
+        isShowSlider:false,
+        showMessageInfo:false,
+        sliderSuccess:false,
+        timer:null,
+        showCount:true,
+        count:'',
+        messageObj:{
+          type:"success",
+          message:null
+        }
+      }
+    },
+
+    methods: {
+
+      //提交
+      submitForm(formName) {
+
+      },
+
+      //重置
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+
+      //获取验证码
+      handleGetCode(){
+        let that = this;
+        if(this.ruleForm.email===""){
+          this.errorInfo = this.$t("commonTips.firstPlaceholderEmail");
+          this.bool = false;
+        }
+        if(this.bool) this.isShowSlider = true;
+        else this.$message.error(that.errorInfo);
+      },
+
+    },
+
+    mounted() {
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .demo-ruleForm {
+    width: 330px !important;
+  }
+  .yzcodeItem {
+    position: relative;
+    margin-bottom: 0 !important;
+    & .el-input{
+      height: 40px !important;
+    }
+    & .el-input__inner{
+      width: 140px !important;
+    }
+    & .getyzcodeBtn {
+      position: absolute;
+      right: 0;
+      width: 114px;
+    }
+  }
+</style>

src/views/accountmanage/api/api.js

+import api from '../../../api/api';
+import Qs from 'qs';
+const baseUrl = "/business";
+export default {
+}

src/views/accountmanage/pages/edit.vue

+<template>
+  <div class="authWrapper">
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item><a href="/#/editAuth">账号设置</a></el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/' }">个人认证</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="authContent">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="个人认证" name="first">
+          <div class="authFormWrapper">
+            <personalAuthCmpt></personalAuthCmpt>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="修改密码" name="second">
+          修改密码
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+  import personalAuthCmpt from '../../../components/authentication/personalAuth';
+
+  export default {
+    name: "edit",
+    components: {
+      personalAuthCmpt
+    },
+    data() {
+      return {
+        activeName: "first",
+      }
+    },
+    methods: {
+      handleClick() {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .authWrapper {
+    padding: 10px 30px;
+    background: #ECECF2;
+    .breadcrumb {
+      padding: 7px 0;
+      color: #565B79;
+      font-size: 14px;
+    }
+    .authContent {
+      margin-top: 10px;
+      background: #fff;
+    }
+  }
+</style>