Merge branch 'feature-2.0' into 'Dev'

Feature 2.0

See merge request crowd-2019/crowd-test-service-front!87

src/main.js

@@ -12,6 +12,7 @@ import moment from 'moment'
 import vRegion from 'v-region'
 import {
   Avatar,
+  Alert,
   Badge,
   Button,
   ButtonGroup,
@@ -192,6 +193,7 @@ Vue.use(Progress)
 Vue.use(Steps)
 Vue.use(Step)
 Vue.use(Divider)
+Vue.use(Alert)
 Vue.prototype.$msgbox = MessageBox
 Vue.prototype.$alert = MessageBox.alert
 Vue.prototype.$confirm = MessageBox.confirm

src/pages/DetailPage/CrowdDetail.vue

@@ -44,7 +44,7 @@
             <el-col :span="4" type="flex" align="middle" justify="center">操作</el-col>
           </el-row>
           <project-item v-if="(projectList != null || projectList.length > 0 )"
-                                    v-for="(item,index) in projectList" :key="index" :projectItem="item"/>
+                                    v-for="(item,index) in projectList" :key="item.id" :projectItem="item"/>
         </el-tab-pane>
       </el-tabs>
     </div>

src/pages/Homepage/BrandCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="test-card">
+  <el-card class="test-card" style="margin-top: 15px">
     <div slot="header" class="clearfix test-card-header">
       <span>入驻品牌机构</span>
       <a class="pull-right" style="color: rgba(0, 118, 203, 1); cursor: pointer" @click="goToMoreAgency()">more>></a>

src/pages/Homepage/Homepage.vue

@@ -42,6 +42,12 @@
         <el-col :span="19" class="test-type-wrapper">
           <TestMenu :testTypeList="homeData.testTypeList"></TestMenu>
           <TestCard :applicationTypeList="homeData.applicationTypeList"></TestCard>
+          <el-row>
+            <ResourceAndTool :resourceList="homeDataNoCache.resourceList"></ResourceAndTool>
+          </el-row>
+          <el-row>
+            <BrandCard :residentAgencyList = homeData.residentAgencyList></BrandCard>
+          </el-row>
         </el-col>
         <el-col :span="5"  class="homepage-right-modules">
           <LoginCard/>
@@ -51,14 +57,6 @@
           <HotContest :competitionList="homeData.competitionList"/>
         </el-col>
       </el-row>
-      <el-row :gutter="15">
-        <el-col :span="12">
-          <ResourceAndTool :resourceList="homeDataNoCache.resourceList"></ResourceAndTool>
-        </el-col>
-        <el-col :span="12">
-          <BrandCard :residentAgencyList = homeData.residentAgencyList></BrandCard>
-        </el-col>
-      </el-row>
       <InstitutionCard></InstitutionCard>
     </div>
   </div>

src/pages/Homepage/LoginCard.vue

@@ -1,9 +1,9 @@
 <template>
   <el-card class="login-card">
     <div class="login-welcome">
-      <img v-if="this.user.userVO.photo != null && this.user.userVO.photo != ''" :src="this.user.userVO.photo" alt="welcome-img" class="pull-left welcome-img">
+      <img v-if="user.userVO&&user.userVO.photoUrl" :src="user.userVO&&user.userVO.photoUrl" alt="welcome-img"
+           class="pull-left welcome-img">
       <img v-else src="../../assets/img/logo-project.png" alt="welcome-img" class="pull-left welcome-img">
-
       <div style="margin-left: 46px">
         <div class="welcome-title">
           hi，欢迎使用群智众测平台
@@ -13,8 +13,12 @@
         </div>
       </div>
       <div class="welcome-btn">
-        <a :href="loginUrl"><el-button type="primary" size="mini" class="pull-left login-btn" v-if="!isLogin">登录</el-button></a>
-        <el-button type="danger" size="mini" class="pull-right cancel-btn" v-if="isLogin"  @click.native="userLogout()">登出</el-button>
+        <a :href="loginUrl">
+          <el-button type="primary" size="mini" class="pull-left login-btn" v-if="!isLogin">登录</el-button>
+        </a>
+        <el-button type="danger" size="mini" class="pull-right cancel-btn" v-if="isLogin" @click.native="userLogout()">
+          登出
+        </el-button>
       </div>
     </div>
   </el-card>
@@ -24,72 +28,83 @@
   import Http from '@/js/http.js'
   import Apis from '@/js/api.js'
   import {storageGet} from '@/js/index.js'
+
   export default {
     name: "LoginCard",
-    data(){
-        return {
-            isLogin: false,
-            user: {},
-            loginUrl: process.env.LOGIN_URL,
-        }
+    data() {
+      return {
+        isLogin: false,
+        user: {},
+        loginUrl: process.env.LOGIN_URL,
+      }
     },
     methods: {
-        loadData() {
-            this.showLoading();
-            if (storageGet('user') != null) {
-                this.isLogin = true;
-                this.user = storageGet('user');
-            }
-        },
-        userLogout () {
-            this.isLogin = false
-            logout().then((res) => {
-                location.reload();
-                this.$router.push('/home')
-            })
+      loadData() {
+        if (storageGet('user') != null) {
+          this.isLogin = true;
+          this.user = storageGet('user');
+        }
+      },
+      userLogout() {
+        this.isLogin = false
+        logout().then((res) => {
+          location.reload();
+          this.$router.push('/home')
+        })
 
-        },
+      },
+    },
+    mounted() {
+      this.loadData();
     }
   }
 </script>
 
 <style scoped lang="less">
-.login-card {
-  margin-bottom: 15px;
-  .welcome-img {
-    width: 40px;
-    height: 40px;
-    display: inline-block;
-    margin: 2px 0;
-  }
-  .welcome-title {
-    font-size:14px;
-    font-family:Source Han Sans CN;
-    font-weight:bold;
-    color:rgba(0,0,0,1);
-  }
-  .welcome-content {
-    font-size:13px;
-    font-family:Source Han Sans CN;
-    font-weight:400;
-    color:rgba(0,0,0,1);
-  }
-  .welcome-btn {
-    width: 100%;
-    height: 28px;
-    margin-top: 25px;
-    .login-btn {
-      background-color: rgba(0, 118, 203,1);
-      &:hover {
-        background-color: rgba(0, 118, 203,0.8);
-      }
+  .login-card {
+    margin-bottom: 15px;
+
+    .welcome-img {
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      margin: 2px 0;
     }
-    .cancel-btn {
-      background-color:rgba(217,92,93,1);
-      &:hover {
-        background-color:rgba(217,92,93,0.8);
+
+    .welcome-title {
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 1);
+    }
+
+    .welcome-content {
+      font-size: 13px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 1);
+    }
+
+    .welcome-btn {
+      width: 100%;
+      height: 28px;
+      margin-top: 25px;
+
+      .login-btn {
+        background-color: rgba(0, 118, 203, 1);
+
+        &:hover {
+          background-color: rgba(0, 118, 203, 0.8);
+        }
+      }
+
+      .cancel-btn {
+        background-color: rgba(217, 92, 93, 1);
+
+        &:hover {
+          background-color: rgba(217, 92, 93, 0.8);
+        }
       }
     }
   }
-}
 </style>

src/pages/Homepage/ResourceAndTool.vue

@@ -5,7 +5,11 @@
       <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text"  @click="getMore()">more>></el-button>
     </div>
     <div>
-      <div v-for="item in resourceList" :key="item.code"><span style="cursor: pointer" @click="goToDetail(item.code)">{{item.name}}</span></div>
+      <el-row>
+        <el-col :span="8" v-for="item in resourceList" :key="item.code" >
+          <span style="cursor: pointer" @click="goToDetail(item.code)">{{item.name}}</span>
+        </el-col>
+      </el-row>
     </div>
   </el-card>
 </template>

src/pages/Square/PopularProjectAndTaskList.vue

@@ -50,7 +50,7 @@
             <el-col :span="4" type="flex" align="middle" justify="center">操作</el-col>
           </el-row>
           <project-item v-if="(projectAndTaskArr != null || projectAndTaskArr.length > 0 )"
-                                    v-for="(item,index) in projectAndTaskArr" :key="index" :projectItem="item"/>
+                                    v-for="(item,index) in projectAndTaskArr" :key="item.id" :projectItem="item"/>
         </el-tab-pane>
 
         <el-tab-pane name="myProject" v-if="currTab == 'task'">
@@ -68,7 +68,6 @@
                      v-for="(item,index2) in projectAndTaskArr" :key="index2" :task="item"/>
         </el-tab-pane>
 
-
       </el-tabs>
     </div>
 

src/pages/UserCenter/BindingMail.vue

@@ -1,17 +1,19 @@
 <template>
   <div style="margin-top: 20px">
-    <el-form label-width="80px" style="width:400px">
-      <el-form-item label="邮箱号" >
+    <el-form label-width="80px" style="width:400px" :rules="rules" :model="mailBindingForm">
+      <el-form-item label="邮箱号" prop="mail">
         <el-input v-model="mailBindingForm.mail"></el-input>
       </el-form-item>
-      <el-form-item label="验证码">
+      <el-form-item label="验证码" prop="verifyCode">
         <el-input placeholder="验证码内容" v-model="mailBindingForm.verifyCode" class="input-with-select">
           <el-button slot="append" @click="getVerifyCode">{{hasVerifyCode ? codeTime : '获取验证码'}}</el-button>
         </el-input>
         <span v-if="hasVerifyCode">验证码已发送到您邮箱上</span>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" plain  @click="bindingEmail">完成绑定</el-button>
+      </el-form-item>
     </el-form>
-    <el-button type="primary" plain style="margin-left: 80px" @click="bindingEmail">完成绑定</el-button>
   </div>
 
 </template>
@@ -29,8 +31,17 @@
           verifyCode:''
         },
         hasVerifyCode:false,
-        codeTime:10,
-        user:{}
+        codeTime:60,
+        user:{},
+        rules: {
+          verifyCode: [
+            {required: true, message: '请输入验证码', trigger: 'blur'},
+              {min:6, max: 6, message: '验证码长度为6个字符', trigger: 'blur'}
+          ],
+          mail: [
+            {required: true, message: '请输入邮箱', trigger: 'blur'},
+          ],
+        }
       }
     },
     methods:{
@@ -46,17 +57,22 @@
           email:this.mailBindingForm.mail
         }
         Http.put('/api/verify/email',params).then((res)=>{
-          this.hasVerifyCode = true;
-          let _this = this;
-          let codeTimer = setInterval(function () {
-            if(_this.codeTime > 0 ){
-              _this.codeTime--;
+            if(res.msg == "ERROR"){
+                notify('error', res.data);
             }else{
-              clearInterval(codeTimer);
-              _this.hasVerifyCode = false;
-              this.codeTime = 10;
+                notify('success', res.data);
+                this.hasVerifyCode = true;
+                let _this = this;
+                let codeTimer = setInterval(function () {
+                    if(_this.codeTime > 0 ){
+                        _this.codeTime--;
+                    }else{
+                        clearInterval(codeTimer);
+                        _this.hasVerifyCode = false;
+                        this.codeTime = 10;
+                    }
+                },1000)
             }
-          },1000)
         }).catch(err=> {
           notify('error', '获取验证码失败:' + err.data);
         })
@@ -68,8 +84,10 @@
           verifyCode: this.mailBindingForm.verifyCode
         };
         Http.put('/api/user/email',params).then(res=>{
-          if(res.code === 20000){
-            notify('success', '绑定成功');
+          if(res.msg == "ERROR"){
+            notify('error', '重新绑定失败:' + res.data);
+          }else{
+            notify('success', '重新绑定成功');
             this.$router.push({path:'/personal/mailBinding'});
           }
         }).catch(err=> {

src/pages/UserCenter/BindingMobile.vue

@@ -1,87 +1,112 @@
 <template>
   <div style="margin-top: 20px">
-    <el-form label-width="80px" style="width:400px">
-      <el-form-item label="手机号码" >
+    <el-form label-width="80px" style="width:400px" :rules="rules" :model="phoneBindingForm">
+      <el-form-item label="手机号码" prop="phone">
         <el-input v-model="phoneBindingForm.phone"></el-input>
       </el-form-item>
-      <el-form-item label="验证码">
+      <el-form-item label="验证码" prop="verifyCode">
         <el-input placeholder="验证码内容" v-model="phoneBindingForm.verifyCode" class="input-with-select">
           <el-button slot="append" @click="getVerifyCode">{{hasVerifyCode ? codeTime : '获取验证码'}}</el-button>
         </el-input>
         <span v-if="hasVerifyCode">验证码已发送到您手机上</span>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" plain @click="bindingMobile">完成绑定</el-button>
+      </el-form-item>
     </el-form>
-    <el-button type="primary" plain style="margin-left: 80px" @click="bindingMobile">完成绑定</el-button>
   </div>
 
 </template>
 
 <script>
-  import Http from '@/js/http.js'
-  import {storageGet} from '@/js/index'
-  import {notify} from '@/constants/index'
-  export default {
-    name: "BindingMobile",
-    data(){
-      return{
-        phoneBindingForm:{
-          phone:'',
-          verifyCode:''
+    import Http from '@/js/http.js'
+    import {storageGet} from '@/js/index'
+    import {notify} from '@/constants/index'
+
+    export default {
+        name: "BindingMobile",
+        data() {
+            return {
+                phoneBindingForm: {
+                    phone: '',
+                    verifyCode: ''
+                },
+                hasVerifyCode: false,
+                codeTime: 60,
+                user: {},
+                rules: {
+                    verifyCode: [
+                        {required: true, message: '请输入验证码', trigger: 'blur'},
+                        {min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur'}
+                    ],
+                    phone: [
+                        {required: true, message: '请输入手机号', trigger: 'blur'},
+                        {min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur'}
+                    ],
+                }
+            }
         },
-        hasVerifyCode:false,
-        codeTime:10,
-        user:{}
-      }
-    },
-    methods:{
-      setUserInfo() {
-        let userId = storageGet('user')&&storageGet('user').userVO.id;
-        Http.get(`/api/user/${userId}`).then(res=>{
-          this.user = res.userVO
-        })
-      },
-      getVerifyCode(){
-        let params = {
-          id:this.user.id,
-          mobile:this.phoneBindingForm.phone
-        }
-        Http.put('/api/verify/mobile',params).then((res)=>{
-          this.hasVerifyCode = true;
-          let _this = this;
-          let codeTimer = setInterval(function () {
-            if(_this.codeTime > 0 ){
-              _this.codeTime--;
-            }else{
-              clearInterval(codeTimer);
-              _this.hasVerifyCode = false;
-              this.codeTime = 10;
+        methods: {
+            setUserInfo() {
+                let userId = storageGet('user') && storageGet('user').userVO.id;
+                Http.get(`/api/user/${userId}`).then(res => {
+                    this.user = res.userVO
+                })
+            },
+            getVerifyCode() {
+                let params = {
+                    id: this.user.id,
+                    mobile: this.phoneBindingForm.phone
+                }
+                Http.put('/api/verify/mobile', params).then((res) => {
+                    if (res.msg == "ERROR") {
+                        notify('error', res.data);
+                    } else {
+                        notify('success', res.data);
+                        this.hasVerifyCode = true;
+                        let _this = this;
+                        let codeTimer = setInterval(function () {
+                            if (_this.codeTime > 0) {
+                                _this.codeTime--;
+                            } else {
+                                clearInterval(codeTimer);
+                                _this.hasVerifyCode = false;
+                                this.codeTime = 10;
+                            }
+                        }, 1000)
+                    }
+                }).catch(err => {
+                    notify('error', '绑定手机失败:' + err.data);
+                })
+            },
+            bindingMobile() {
+                // this.$refs['phoneBindingForm'].validate(valid => {
+                //     if (valid) {
+                //
+                //     }
+                // })
+                let params = {
+                    id: this.user.id,
+                    mobile: this.phoneBindingForm.phone,
+                    verifyCode: this.phoneBindingForm.verifyCode
+                };
+                Http.put('/api/user/mobile', params).then(res => {
+                    if (res.msg == "ERROR") {
+                        notify('error', '重新绑定失败:' + res.data);
+                    } else {
+                        notify('success', '重新绑定成功');
+                        this.$router.push({path: '/personal/phoneBinding'});
+                    }
+                }).catch(err => {
+                    notify('error', err.data);
+                })
             }
-          },1000)
-        }).catch(err=> {
-          notify('error', '绑定手机失败:' + err.data);
-        })
-      },
-      bindingMobile(){
-        let params = {
-          id:this.user.id,
-          mobile:this.phoneBindingForm.phone,
-          verifyCode: this.phoneBindingForm.verifyCode
-        };
-        Http.put('/api/user/mobile',params).then(res=>{
-          if(res.code === 20000){
-            notify('success', '绑定成功');
-            this.$router.push({path:'/personal/phoneBinding'});
-         }
-        }).catch(err=> {
-          notify('error', err.data);
-        })
-      }
-    },
-    mounted() {
-      this.setUserInfo()
+        },
+        mounted() {
+            this.setUserInfo()
 
+        }
     }
-  }
 </script>
 
 <style scoped>

src/pages/UserCenter/EnterpriseAuth.vue

@@ -4,20 +4,25 @@
       <span style="font-size: 18px;font-weight: bold">企业认证</span>
       <el-tag :type="authStatus.style" v-if="authType===1">{{authStatus.text}}</el-tag>
       <el-tag type="danger" v-if="authType===0">未认证</el-tag>
-      <el-button type="primary" class="pull-right" size="small" v-if="canEdit">编辑</el-button>
+      <el-button type="primary" class="pull-right" size="small" v-if="!canEdit" @click="canEdit = true">编辑</el-button>
     </div>
-    <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
+    <el-steps :active="active" process-status="finish" style="width: 400px;margin: 0 auto;margin-bottom: 20px;">
       <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" v-if="active===0">
+    <el-alert
+      v-if="failureReason&&failureReason!==''"
+      :title="failureReason"
+      type="error">
+    </el-alert>
+    <div class="upload-wrapper" v-if="active===0" style="margin-top: 10px">
       <el-row class="agency-form-item">
         <el-col :span="3">企业logo：</el-col>
         <el-col :span="12">
           <el-upload
-            class="avatar-uploader idcard-uploader"
+            class="avatar-uploader"
             style="border: lightgrey 1px solid"
             action="https://jsonplaceholder.typicode.com/posts/"
             :before-upload="beforeFileUpload"
@@ -83,7 +88,15 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="身份证到期时间">
-          <el-input :disabled="!canEdit" v-model="enterpriseForm.idCardDeadTime" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
+          <el-date-picker
+            v-model="enterpriseForm.idCardDeadTime"
+            style="width: 100%"
+            align="right"
+            type="date"
+            placeholder="请按身份证背面“有效期限”如实填写"
+            :disabled="!canEdit"
+          >
+          </el-date-picker>
         </el-form-item>
         <el-form-item label="家庭或单位地址">
           <el-input :disabled="!canEdit" v-model="enterpriseForm.address"></el-input>
@@ -98,9 +111,9 @@
       <div class="upload-wrapper">
         <el-row style="width: 100%">
           <el-col :span="9" style="padding-left: 30px">
-            <div>
+            <div style="height:50%">
               <el-upload
-                class="avatar-uploader"
+                class="avatar-uploader idcard-uploader"
                 style="border: lightgrey 1px solid"
                 action="https://jsonplaceholder.typicode.com/posts/"
                 :before-upload="beforeFileUpload"
@@ -112,7 +125,7 @@
               </el-upload>
               <div style="text-align: center">身份证正面照</div>
             </div>
-            <div style="width: 280px">
+            <div style="width: 280px;margin-top: 50px">
               <el-upload
                 class="avatar-uploader idcard-uploader"
                 style="border: lightgrey 1px solid"
@@ -153,7 +166,7 @@
     <div class="enterprise-brn-wrapper">
       <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>
+      <button class="enterprise-btn nextBtn" @click="submitEnterpriseAuth" v-if="active===1 && authStatus.text !=='认证通过'">提交审核</button>
     </div>
   </div>
 </template>
@@ -172,6 +185,7 @@
         active: 0,
         user: {},
         canEdit:false,
+        authType:-1,
         enterpriseForm: {
           roleList: [],//0是发包 1是接包 如果两个都有那么权限都有。
           legalPersonName: "", //法人姓名
@@ -184,15 +198,16 @@
           idCardDeadTime: "",//身份证过期时间
           evaluationAgencyName:"", //企业名称
           agencyPhoto:"", //企业logo
-        }
+        },
+        failureReason:''
 
       }
     },
     methods: {
       submitEnterpriseAuth() {
-        Http.post(`/api/user/${this.user.id}/agency`, this.enterpriseForm).then(res => {
+        Http.put(`/api/user/${this.user.id}/agency`, this.enterpriseForm).then(res => {
           if (res) {
-            notify('success', '认证成功');
+            notify('success', '提交成功');
             this.$router.push('/personal/authentication')
           }
         })
@@ -201,13 +216,14 @@
       getAuthStatus() {
         Http.get(`/api/user/${this.user.id}`).then(res => {
           if (res.agencyVO) {
-            this.authType = 1  //个人已参与认证
+            this.authType = 1  //企业已参与认证
             this.authStatus = res.agencyVO.authStatus
             //成功和审核中状态不可编辑，认证失败状态可编辑
-            this.authStatus.style === 'info' ? this.canEdit = true : null
+            this.authStatus.style !== 'info' ? this.canEdit = true : null
+            this.failureReason = res.agencyVO.explain
             this.setFormInfo(res.agencyVO);
           } else {
-            this.authType = 0  //未参与个人认证
+            this.authType = 0  //未参与企业认证
             this.canEdit = true
           }
         })
@@ -268,7 +284,6 @@
             this.enterpriseForm.IDCardPositivePhoto = res.data
           }else if(param.data.type == 3){
             this.enterpriseForm.agencyPhoto = res.data
-
           }
           notify('success', '上传成功')
           // this.$refs['agency'].validateField('photoUrl');
@@ -285,13 +300,27 @@
 </script>
 
 <style scoped lang="less">
-  .avatar-uploader .el-upload {
-    //border: 1px dashed #d9d9d9;
+  .avatar-uploader{
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    margin-right: 30px;
+    width: 170px;
+    height: 170px;
+  }
+  .idcard-uploader {
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     margin-right: 30px;
+    width: 270px;
+    height: 150px;
+  }
+  .idcard-uploader .el-upload{
+    width: 270px;
+    height: 170px;
   }
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
@@ -299,14 +328,14 @@
   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
-    width: 278px;
-    height: 178px;
+    width: 100%;
+    height:170px;
     line-height: 178px;
     text-align: center;
   }
   .avatar {
-    width: 220px;
-    height: 150px;
+    width: 100%;
+    height: 170px;
     display: block;
   }
   .right-modifyPsw {

src/pages/UserCenter/IndividualAuth.vue

@@ -4,7 +4,7 @@
       <span style="font-size: 18px;font-weight: bold;margin-right: 10px">个人认证</span>
       <el-tag :type="authStatus.style" v-if="authType===1">{{authStatus.text}}</el-tag>
       <el-tag type="danger" v-if="authType===0">未认证</el-tag>
-      <el-button type="primary" class="pull-right" size="small" v-if="canEdit">编辑</el-button>
+      <el-button type="primary" class="pull-right" size="small" v-if="!canEdit" @click="canEdit = true">编辑</el-button>
     </div>
     <!--    <div class="individual-steps-wrapper">-->
     <!--      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px;width: 300px">-->
@@ -12,7 +12,13 @@
     <!--        <el-step title="认证结果"></el-step>-->
     <!--      </el-steps>-->
     <!--    </div>-->
-    <el-form ref="individualForm" :model="individualForm" label-width="120px" style="width: 70%">
+
+    <el-alert
+      v-if="failureReason&&failureReason!==''"
+      :title="failureReason"
+      type="error">
+    </el-alert>
+    <el-form ref="individualForm" :model="individualForm" label-width="120px" style="width: 70%;margin-top: 10px">
       <el-form-item label="真实姓名">
         <el-input :disabled="!canEdit" v-model="individualForm.realName" placeholder="请输入您的姓名，需与身份证保持一致"></el-input>
       </el-form-item>
@@ -26,7 +32,15 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="身份证到期时间">
-        <el-input :disabled="!canEdit" v-model="individualForm.idCardDeadTime" placeholder="请按身份证背面“有效期限”如实填写"></el-input>
+        <el-date-picker
+          v-model="individualForm.idCardDeadTime"
+          style="width: 100%"
+          align="right"
+          type="date"
+          placeholder="请按身份证背面“有效期限”如实填写"
+          :disabled="!canEdit"
+          >
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="家庭或单位地址">
         <el-input :disabled="!canEdit" v-model="individualForm.address"></el-input>
@@ -43,7 +57,7 @@
         <el-col :span="9" style="padding-left: 30px">
           <div style="width: 280px">
             <el-upload
-              class="avatar-uploader idcard-uploader"
+              class="avatar-uploader"
               style="border: lightgrey 1px solid"
               action="https://jsonplaceholder.typicode.com/posts/"
               :before-upload="beforeFileUpload"
@@ -82,7 +96,7 @@
         <el-col :span="9" style="padding-left: 30px">
           <div>
             <el-upload
-              class="avatar-uploader idcard-uploader"
+              class="avatar-uploader"
               style="border: lightgrey 1px solid"
               action="https://jsonplaceholder.typicode.com/posts/"
               :before-upload="beforeFileUpload"
@@ -147,22 +161,25 @@
           idCardDeadTime: "",
           address: ""
         },
+        failureReason: '',
         authType: -1,
         authDetail: {},
         authStatus: '',
-        canEdit:false
+        canEdit: false
       }
     },
     methods: {
-      setUserInfo(){
+      setUserInfo() {
         this.user = storageGet('user') && storageGet('user').userVO;
       },
       submitIndividualAuth() {
-        Http.post(`/api/user/${this.user.id}/personalAuth`, this.individualForm).then(res => {
+        Http.put(`/api/user/${this.user.id}/personalAuth`, this.individualForm).then(res => {
           if (res) {
-            notify('success', '认证成功');
+            notify('success', '提交成功');
             this.$router.push('/personal/authentication')
           }
+        }).catch(err => {
+          notify('error', err.data)
         })
       },
       //获取当前认证状态
@@ -172,24 +189,27 @@
             this.authType = 1  //个人已参与认证
             this.authStatus = res.personalAuthVO.authStatus
             //成功和审核中状态不可编辑，认证失败状态可编辑
-            this.authStatus.style === 'info' ? this.canEdit = true : null
+            // this.authStatus.style === 'info' ? this.canEdit = true : null
+            this.failureReason = res.personalAuthVO.explain
             this.setFormInfo(res.personalAuthVO);
           } else {
             this.authType = 0  //未参与个人认证
             this.canEdit = true
           }
+        }).catch(err => {
+          notify('error', err.data)
         })
       },
       setFormInfo(detail) {
         //回显认证信息
         this.individualForm.roleList = detail.roleList,
-        this.individualForm.realName = detail.realName,
-        this.individualForm.gender = detail.gender,
-        this.individualForm.idCard = detail.idCard,
-        this.individualForm.address = detail.address,
-        this.individualForm.idCardPositivePhoto = detail.idCardPositivePhoto,
-        this.individualForm.idCardBackPhoto = detail.idCardBackPhoto,
-        this.individualForm.idCardDeadTime = detail.idCardDeadTime
+          this.individualForm.realName = detail.realName,
+          this.individualForm.gender = detail.gender,
+          this.individualForm.idCard = detail.idCard,
+          this.individualForm.address = detail.address,
+          this.individualForm.idCardPositivePhoto = detail.idCardPositivePhoto,
+          this.individualForm.idCardBackPhoto = detail.idCardBackPhoto,
+          this.individualForm.idCardDeadTime = detail.idCardDeadTime
       },
       //文件上传前的响应函数
       beforeFileUpload(file) {
@@ -227,7 +247,6 @@
           } else {
             this.individualForm.IDCardBackPhoto = res.data
           }
-
           notify('success', '上传成功')
           // this.$refs['agency'].validateField('photoUrl');
         }).catch(error => {
@@ -243,6 +262,34 @@
 </script>
 
 <style scoped lang="less">
+  .avatar-uploader {
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    margin-right: 30px;
+    width: 270px;
+    height: 170px;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 270px;
+    height: 170px;
+    line-height: 178px;
+    text-align: center;
+  }
+
+  .avatar {
+    width: 270px;
+    height: 170px;
+    display: block;
+  }
 
   .right-modifyPsw {
     padding: 20px;

src/pages/UserCenter/MailBinding.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="right-modifyPsw">
-      <div >
+      <div>
         <div class="right-modifyPsw-title">
           <span style="font-size: 18px;font-weight: bold">邮箱绑定</span>
         </div>
         <div>
           <div v-if="!user.email">
-            <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px" v-if="showBindWranning">
+            <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
               <img src="../../assets/img/phoneUnbinding.png"></img>
               <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
               <el-button type="primary" plain size="mini" @click="handleBindingEmail">立即绑定
@@ -43,7 +43,6 @@
     name: "MailBinding",
     data() {
       return {
-        // showBindWranning: true,
         hasVerifyCode: false,
         bindingEmail: false,
         codeTime: 10,
@@ -59,7 +58,6 @@
         let userId = storageGet('user')&&storageGet('user').userVO.id;
         Http.get(`/api/user/${userId}`).then(res=>{
           this.user = res.userVO
-          this.showBindWranning = !!this.user.email;
         })
       },
       handleBindingEmail(){
@@ -96,8 +94,14 @@
       }
     },
     mounted() {
-      console.log('aaa');
       this.setUserInfo();
+    },
+    watch:{
+      '$route' (to, from) {
+        if(to.path==='/personal/mailBinding'){
+          this.$router.go(0);
+        }
+      }
     }
   }
 </script>

src/pages/UserCenter/Mine.vue

@@ -4,11 +4,12 @@
       <span style="font-size: 18px;font-weight: bold">基本设置</span>
       <el-button v-if="!isModifyMode" type="primary" size="mini" class="pull-right" @click="isModifyMode = true">编辑</el-button>
     </div>
-    <div style="margin-bottom: 15px;width: 60%">
-      <el-form :model="userForm" status-icon ref="userForm" label-width="100px" class="demo-ruleForm">
-        <el-form-item label="头像" prop="avator">
+    <div style="margin-bottom: 15px;width: 550px">
+      <el-form :model="userForm" :rules="rules" status-icon ref="userForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="头像" prop="photoUrl">
           <el-upload
             class="avatar-uploader"
+            style="border: lightgrey 1px solid;width:178px;"
             action="https://jsonplaceholder.typicode.com/posts/"
             :before-upload="beforeFileUpload"
             :http-request="uploadFile"
@@ -18,10 +19,10 @@
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="userForm.userName" autocomplete="off" :disabled="!isModifyMode"></el-input>
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="userForm.userName" autocomplete="off" :disabled="true"></el-input>
         </el-form-item>
-        <el-form-item label="企业简称" prop="enterprise">
+        <el-form-item label="单位" prop="unit">
           <el-input v-model="userForm.unit" autocomplete="off" :disabled="!isModifyMode"></el-input>
         </el-form-item>
         <el-form-item label="性别" prop="gender">
@@ -34,7 +35,7 @@
           <el-date-picker type="date" placeholder="选择日期" v-model="userForm.birthday"
                           style="width: 100%;" :disabled="!isModifyMode"></el-date-picker>
         </el-form-item>
-        <el-form-item label="联系地址" prop="address" style="width: 160%">
+        <el-form-item label="地址" prop="address" style="width: 160%">
           <provincecity
             ref="addFormProvince"
             @selectChange="locationChange"
@@ -78,6 +79,26 @@
           personalCompetence:[],
           province:'',
           city:''
+        },
+        rules: {
+          photoUrl: [
+            { required: true, message: '请上传头像', trigger: 'blur'},
+          ],
+          userName: [
+            { required: true, message: '请设置用户名', trigger: 'change' }
+          ],
+          province: [
+            { required: true, message: '请选择省份', trigger: 'blur' }
+          ],
+          city: [
+            { required: true, message: '请选择城市', trigger: 'blur' }
+          ],
+          gender: [
+            { required: true, message: '请选择性别', trigger: 'blur' }
+          ],
+          // address:[
+          //   {required: true, message: '请填写地址', trigger: 'blur' },
+          // ]
         }
       }
     },
@@ -86,13 +107,18 @@
     },
     methods: {
       submitUserInfo(){
-        Http.put(`/api/personal/update/${this.user.id}`,this.userForm).then(res=>{
-          this.isModifyMode = false;
-        })
+
+          this.$refs['userForm'].validate(valid => {
+              if (valid) {
+                  Http.put(`/api/personal/update/${this.user.id}`,this.userForm).then(res=>{
+                      this.isModifyMode = false;
+                  })
+              }
+          })
+
       },
       //联系地址改变
       locationChange (provinceId, cityId) {
-        console.log("aaa",provinceId,cityId)
         if (provinceId || cityId) {
           this.userForm.province = provinceId
           this.userForm.city = cityId
@@ -173,13 +199,14 @@
 </script>
 
 <style scoped lang="less">
-  .avatar-uploader .el-upload {
-    //border: 1px dashed #d9d9d9;
+  .avatar-uploader{
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     margin-right: 30px;
+    width: 178px;
+    height: 178px;
   }
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
@@ -187,7 +214,7 @@
   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
-    width: 278px;
+    width: 178px;
     height: 178px;
     line-height: 178px;
     text-align: center;

src/pages/UserCenter/PhoneBinding.vue

@@ -45,15 +45,13 @@
     },
     methods: {
       changePhoneNumber(){
-        this.showBingWranning = false;
         this.$router.push({
-          path: '/personal/mailBinding/rebinding',
+          path: '/personal/phoneBinding/rebinding',
         });
       },
       bindPhoneNumber(){
-        this.showBingWranning = false;
         this.$router.push({
-          path: '/personal/mailBinding/binding',
+          path: '/personal/phoneBinding/binding',
         });
       },
       setUserInfo(){
@@ -65,6 +63,13 @@
     },
     mounted() {
       this.setUserInfo();
+    },
+    watch:{
+      '$route' (to, from) {
+        if(to.path==='/personal/phoneBinding'){
+          this.$router.go(0);
+        }
+      }
     }
   }
 </script>

src/pages/UserCenter/ReBindingMail.vue

@@ -1,17 +1,19 @@
 <template>
   <div>
-    <el-form label-width="80px" style="with:400px;">
-      <el-form-item label="新邮箱号">
+    <el-form label-width="80px" style="width:400px;" :rules="rules">
+      <el-form-item label="新邮箱号" prop="email">
         <el-input v-model="emailBindingForm.email"></el-input>
       </el-form-item>
-      <el-form-item label="验证码">
+      <el-form-item label="验证码" prop="verifyCode">
         <el-input placeholder="验证码内容" v-model="emailBindingForm.verifyCode" class="input-with-select">
           <el-button slot="append" @click="getVerifyCode">{{hasVerifyCode ? codeTime : '获取验证码'}}</el-button>
         </el-input>
         <span v-if="hasVerifyCode">验证码已发送到您邮箱上</span>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" plain  @click="reBindingMail">完成绑定</el-button>
+      </el-form-item>
     </el-form>
-    <el-button type="primary" plain style="margin-left: 80px" @click="reBindingMail">完成绑定</el-button>
   </div>
 
 </template>
@@ -32,7 +34,15 @@
           verifyCode: ''
         },
         hasVerifyCode: false,
-        codeTime: 10,
+        codeTime: 60,
+        rules: {
+          verifyCode: [
+            {required: true, message: '请输入验证码', trigger: 'blur'},
+          ],
+          phone: [
+            {required: true, message: '请输入邮箱', trigger: 'blur'},
+          ],
+        }
       }
     },
     methods: {
@@ -48,26 +58,17 @@
           "email": this.emailBindingForm.email,
           "verifyCode": this.emailBindingForm.verifyCode
         };
-        // Http.put('/api/user/email', params).then(res => {
-        //   if (res.msg !== 'ERROR') {
-        //     notify('success', '重新绑定成功');
-        //     // this.$router.push({path: '/personal/mailBinding'});
-        //     window.location.href({path: '/personal/mailBinding'});
-        //   }
-        // }).catch(err => {
-        //   notify('error', '重新绑定失败:' + err.data);
-        // })
-
-        if(this.emailBindingForm.email == this.user.email){
-            notify('error', '请使用其他邮箱，此邮箱您已绑定！');
+        if (this.emailBindingForm.email == this.user.email) {
+          notify('error', '请使用其他邮箱，此邮箱您已绑定！');
         }
         Http.put('/api/user/email', params).then((res) => {
-            if(res.msg == "ERROR"){
-                notify('error', '重新绑定失败:' + res.data);
-            }else{
-                notify('success', '重新绑定成功');
-                window.location.href({path: '/personal/mine'});
-            }
+
+          if (res.msg == "ERROR") {
+            notify('error', '重新绑定失败:' + res.data);
+          } else {
+            notify('success', '重新绑定成功');
+            this.$router.push({path: '/personal/mailBinding'});
+          }
         })
       },
       getVerifyCode() {

src/pages/UserCenter/ReBindingMobile.vue

@@ -1,26 +1,29 @@
 <template>
   <div>
-          <el-steps :active="active" process-status="finish" style="margin: 20px">
-            <el-step title="验证原手机"></el-step>
-            <el-step title="绑定新手机"></el-step>
-          </el-steps>
-
-          <el-form label-width="80px"  style="with:400px;">
-            <el-form-item label="原手机号" v-if="active===0">
-              <span v-model="phoneBindingForm.phone">{{this.user.mobile}}</span>
-            </el-form-item>
-            <el-form-item label="新手机号" v-if="active===1">
-              <el-input v-model="phoneBindingForm.phone"></el-input>
-            </el-form-item>
-            <el-form-item label="验证码">
-              <el-input placeholder="验证码内容" v-model="phoneBindingForm.verifyCode" class="input-with-select">
-                <el-button slot="append" @click="getVerifyCode">{{hasVerifyCode ? codeTime : '获取验证码'}}</el-button>
-              </el-input>
-              <span v-if="hasVerifyCode">验证码已发送到您手机上</span>
-            </el-form-item>
-          </el-form>
-    <el-button type="primary" plain style="margin-left: 80px" @click="reBindingMobile">{{this.active===0  ? '下一步':'完成绑定'}}</el-button>
+    <el-steps :active="active" process-status="finish" style="margin: 20px">
+      <el-step title="验证原手机"></el-step>
+      <el-step title="绑定新手机"></el-step>
+    </el-steps>
 
+    <el-form label-width="80px" style="width:400px;" :rules="rules">
+      <el-form-item label="原手机号" v-if="active===0" prop="phone">
+        <span v-model="phoneBindingForm.phone">{{this.user.mobile}}</span>
+      </el-form-item>
+      <el-form-item label="新手机号" v-if="active===1" prop="phone">
+        <el-input v-model="phoneBindingForm.phone"></el-input>
+      </el-form-item>
+      <el-form-item label="验证码" prop="verifyCode">
+        <el-input placeholder="验证码内容" v-model="phoneBindingForm.verifyCode" class="input-with-select">
+          <el-button slot="append" @click="getVerifyCode">{{hasVerifyCode ? codeTime : '获取验证码'}}</el-button>
+        </el-input>
+        <span v-if="hasVerifyCode">验证码已发送到您手机上</span>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" plain  @click="reBindingMobile">{{this.active===0 ?
+          '下一步':'完成绑定'}}
+        </el-button>
+      </el-form-item>
+    </el-form>
   </div>
 
 </template>
@@ -29,79 +32,93 @@
   import Http from '@/js/http.js'
   import {storageGet} from '@/js/index'
   import {notify} from '@/constants/index'
+
   export default {
     name: "ReBindingMobile",
-    data(){
-      return{
+    data() {
+      return {
         active: 0,
-        user:{},
+        user: {},
         phoneBindingForm: {
           phone: '',
           verifyCode: ''
         },
-        hasVerifyCode:false,
-        codeTime:10,
+        hasVerifyCode: false,
+        codeTime: 60,
+        rules: {
+          verifyCode: [
+            {required: true, message: '请输入验证码', trigger: 'blur'},
+          ],
+          phone: [
+            {required: true, message: '请输入手机号', trigger: 'blur'},
+          ],
+        }
       }
     },
-    methods:{
+    methods: {
       setUserInfo() {
-        let userId = storageGet('user')&&storageGet('user').userVO.id;
-        Http.get(`/api/user/${userId}`).then(res=>{
-          this.user = res.userVO
+        let userId = storageGet('user') && storageGet('user').userVO.id;
+        Http.get(`/api/user/${userId}`).then(res => {
+          this.user = res.userVO;
+          this.phoneBindingForm.phone = this.user.mobile;
         })
       },
-      reBindingMobile(){
-          if(this.active === 0){
-            //1.验证原手机
-            let params = {
-              "id": this.user.id,
-              "mobile": this.user.mobile,
-              "verifyCode":this.phoneBindingForm.verifyCode
-            }
-            Http.put('/api/verify/old/mobile',params).then(res=>{
-              if(res.code === 20000){
-                notify('success', '验证成功');
-                this.active = 0;
-                this.setUserInfo();
-              }
-            }).catch(err=> {
-              notify('error', '验证原手机失败:' + err.data);
-            })
-          }else{
-            let params = {
-              "id": this.user.id,
-              "mobile": this.phoneBindingForm.phone,
-              "verifyCode": this.phoneBindingForm.verifyCode
-            };
-            Http.put('/api/user/mobile',params).then(res=>{
-              if(res.code === 20000){
-                notify('success', '重新绑定成功');
-                this.$router.push({path:'/personal/phoneBinding'});
-              }
-            }).catch(err=> {
-              notify('error', '重新绑定失败:' + err.data);
-            })
+      reBindingMobile() {
+        if (this.active === 0) {
+          //1.验证原手机
+          let params = {
+            "id": this.user.id,
+            "mobile": this.user.mobile,
+            "verifyCode": this.phoneBindingForm.verifyCode
           }
+          Http.put('/api/verify/old/mobile', params).then(res => {
+            if (res.code === 20000) {
+              notify('success', '验证成功');
+              this.active = 1;
+              this.phoneBindingForm.phone = '';
+              this.phoneBindingForm.verifyCode = '';
+              this.setUserInfo();
+            }
+          }).catch(err => {
+            notify('error', '验证原手机失败:' + err.data);
+          })
+        } else {
+          let params = {
+            "id": this.user.id,
+            "mobile": this.phoneBindingForm.phone,
+            "verifyCode": this.phoneBindingForm.verifyCode
+          };
+          Http.put('/api/user/mobile', params).then(res => {
+            if (res.msg == "ERROR") {
+              notify('error', '重新绑定失败:' + res.data);
+            } else {
+              notify('success', '重新绑定成功');
+              this.$router.push({path: '/personal/phoneBinding'});
+            }
+          }).catch(err => {
+            notify('error', '重新绑定失败:' + err.data);
+          })
+        }
 
       },
-      getVerifyCode(){
+      getVerifyCode() {
         let params = {
-          id:this.user.id,
-          mobile:this.phoneBindingForm.phone
+          id: this.user.id,
+          mobile: this.phoneBindingForm.phone
         }
-        Http.put('/api/verify/mobile',params).then((res)=>{
+        Http.put('/api/verify/mobile', params).then((res) => {
           this.hasVerifyCode = true;
           let _this = this;
           let codeTimer = setInterval(function () {
-            if(_this.codeTime > 0 ){
+            if (_this.codeTime > 0) {
               _this.codeTime--;
-            }else{
+            } else {
               clearInterval(codeTimer);
               _this.hasVerifyCode = false;
               this.codeTime = 10;
             }
-          },1000)
-        }).catch(err=> {
+          }, 1000)
+        }).catch(err => {
           notify('error', '获取验证码失败:' + err.data);
         })
       }