add:mobile + email

src/pages/DetailPage/AgencyDetail.vue

@@ -160,6 +160,5 @@
 
   .el-form-item {
     max-height: 120px !important;
-    overflow: auto;
   }
 </style>

src/pages/DetailPage/ExpertDetail.vue

@@ -103,6 +103,5 @@
 
   .el-form-item {
     max-height: 120px !important;
-    overflow: auto;
   }
 </style>

src/pages/DetailPage/ResourceDetail.vue

@@ -105,6 +105,5 @@
 
   .el-form-item {
     max-height: 120px !important;
-    overflow: auto;
   }
 </style>

src/pages/UserCenter/BankCard.vue

@@ -4,7 +4,7 @@
       <el-col :span="8" v-for="item in bankCardVOList" :key="item.id">
         <div class="bank-card">
           <div class="bank-card-title" style="padding: 10px;height:43px">
-            <img src="../../assets/img/bankimg.png">
+            <img :src="item.logoUrl" class="bank-card-logo">
             <span class="" style="font-size: 16px;font-weight: bold;line-height: 43px">{{item.name}}</span>
             <el-button type="primary" plain class="pull-right" size="mini" @click="requestUntieBankCard(item)">解绑
             </el-button>
@@ -78,7 +78,10 @@
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
     margin-bottom: 10px;
-
+  .bank-card-logo {
+    width: 42px;
+    height: 42px;
+  }
     .bank-card-detail-wrapper {
       padding: 10px;
 

src/pages/UserCenter/BindingMobile.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <el-form label-width="80px" style="width:400px">
+      <el-form-item label="手机号码" >
+        <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="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:''
+        },
+        hasVerifyCode:false,
+        codeTime:10,
+        user:{}
+      }
+    },
+    methods:{
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').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;
+            }
+          },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'});
+            //需要更改vuex和storage中得user
+            console.log(storageGet(user));
+         }
+        }).catch(err=> {
+          notify('error', err.data);
+        })
+      }
+    },
+    mounted() {
+      this.setUserInfo()
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/pages/UserCenter/MailBinding.vue

@@ -1,60 +1,110 @@
 <template>
   <div>
     <div class="right-modifyPsw">
-      <div class="right-modifyPsw-title">
-        <span style="font-size: 18px;font-weight: bold">邮箱绑定</span>
+      <div v-if="showBindWranning">
+        <div class="right-modifyPsw-title">
+          <span style="font-size: 18px;font-weight: bold">邮箱绑定</span>
+        </div>
+        <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
+          <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
+          <el-button type="primary" plain size="mini" @click="bindingEmail = true;showBindWranning = false">立即绑定
+          </el-button>
+        </div>
+        <div>
+          邮箱绑定成功后，您将享受以下服务：
+        </div>
+        <div>①邮箱地址登录 可直接使用“邮箱地址”登录到众测服务平台</div>
+        <div>②重要事件提醒 进行（支付/提现/众测/中标）时，可及时收到邮件提醒</div>
+        <div>③找回账号密码 忘记密码时，可使用邮件找回密码</div>
       </div>
-      <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
-        <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
-        <el-button type="primary" plain size="mini">立即绑定</el-button>
+      <div v-if="!showBindWranning">
+        <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
+          <span style="font-size: 16px">您绑定的邮箱是：{{this.user.email}}</span>
+        </div>
       </div>
-      <div>
-        邮箱绑定成功后，您将享受以下服务：
+      <div v-if="bindingEmail">
+        <el-form label-width="80px">
+          <el-form-item label="邮箱号">
+            <el-input v-model="emailBindingForm.email"></el-input>
+          </el-form-item>
+          <el-form-item label="验证码">
+            <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>
+        <el-button type="primary" plain style="margin-left: 80px" @click="handleBindingEmail">完成绑定</el-button>
       </div>
-      <div>①邮箱地址登录 可直接使用“邮箱地址”登录到众测服务平台</div>
-      <div>②重要事件提醒 进行（支付/提现/众测/中标）时，可及时收到邮件提醒</div>
-      <div>③找回账号密码 忘记密码时，可使用邮件找回密码</div>
 
-      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
-        <el-step title="添加邮箱"></el-step>
-        <el-step title="完成绑定"></el-step>
-      </el-steps>
-
-<!--      <el-form  label-width="80px"  v-if="active===0">-->
-<!--        <el-form-item label="邮箱号">-->
-<!--          <span v-model="mailBindingForm.mail">135****6699</span>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="验证码">-->
-<!--          <span v-model="mailBindingForm.phone">135****6699</span>-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
-
-      <el-form  label-width="80px"  v-if="active===0">
-        <el-form-item label="邮箱号">
-          <el-input v-model="mailBindingForm.mail"></el-input>
-        </el-form-item>
-        <el-form-item label="验证码">
-          <span v-model="mailBindingForm.phone">135****6699</span>
-        </el-form-item>
-      </el-form>
     </div>
   </div>
 </template>
 
 <script>
+  import Http from '@/js/http.js'
+  import {storageGet} from '@/js/index'
+  import {notify} from '@/constants/index'
 
   export default {
     name: "MailBinding",
     data() {
       return {
-        active: 0,
-        mailBindingForm:{
-          mail:''
-        }
+        showBindWranning: true,
+        hasVerifyCode: false,
+        bindingEmail: false,
+        codeTime: 10,
+        emailBindingForm: {
+          email: '',
+          verifyCode: ''
+        },
+        user: {}
       }
     },
     methods: {
-
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      handleBindingEmail() {
+        let params = {
+          "id": this.user.id,
+          "email": this.emailBindingForm.email,
+          'verifyCode': this.emailBindingForm.verifyCode
+        }
+        Http.put('/api/user/email', params).then(res => {
+          if (res.code === 20000) {
+            notify('success', '绑定邮箱成功');
+            //vuex  storage 存数据
+          }
+        }).catch(err => {
+          notify('error', '绑定邮箱失败:' + err.data);
+        })
+      },
+      getVerifyCode() {
+        let params = {
+          id: this.user.id,
+          email: this.emailBindingForm.email
+        }
+        Http.put('/api/verify/email', 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;
+            }
+          }, 1000)
+        }).catch(err => {
+          notify('error', '获取验证码失败:' + err.data);
+        })
+      }
+    },
+    mounted() {
+      this.showBindWranning = !!this.user.email;
+      this.setUserInfo();
     }
   }
 </script>

src/pages/UserCenter/Mine.vue

@@ -29,7 +29,7 @@
         <el-form-item label="联系地址" prop="address">
           <v-region @values="regionChange"></v-region>
         </el-form-item>
-        <el-form-item label="个人能力" style="width: 100%">
+        <el-form-item label="个人能力" style="width: 160%">
           <el-checkbox-group v-model="userForm.serviceType">
             <el-checkbox v-for="item in serviceType" :label="item.name" :name="item.code" :key="item.code" ></el-checkbox>
           </el-checkbox-group>
@@ -63,25 +63,15 @@
       },
       loadData() {
         Http.get(`/api/personal/display/${this.user.id}`).then((res) => {
-          this.initUserForm(res);
+          this.userForm = res.userVO
         })
       },
       setUserInfo(){
         this.user = storageGet('user') && storageGet('user').userVO;
       },
-      initUserForm(res){
-        this.userForm.username = res.username;
-        this.userForm.enterprise = res.username;
-        this.userForm.gender = res.gender;
-        this.userForm.birthday = res.birthday;
-        this.userForm.address = res.address;
-        this.userForm.photoUrl = res.photoUrl;
-        this.userForm.unit = res.unit;
-      },
       setServiceType () {
         getAllServiceTypes().then((res) => {
           this.serviceType = res;
-          console.log(this.serviceType);
         })
       },
 

src/pages/UserCenter/ModifyPsw.vue

@@ -10,16 +10,16 @@
       </div>
       <el-form ref="modifyForm" :model="modifyForm" label-width="80px" style="margin-top: 20px">
         <el-form-item label="当前密码">
-          <el-input v-model="modifyForm.password"></el-input>
+          <el-input v-model="modifyForm.oldPassword" type="password"></el-input>
         </el-form-item>
         <el-form-item label="新密码">
-          <el-input v-model="modifyForm.newpassword"></el-input>
+          <el-input v-model="modifyForm.password" type="password"></el-input>
         </el-form-item>
         <el-form-item label="确认密码">
-          <el-input v-model="modifyForm.password"></el-input>
+          <el-input v-model="modifyForm.password2" type="password"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary">确认修改</el-button>
+          <el-button type="primary" @click="ModifyPassword">确认修改</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -27,17 +27,40 @@
 </template>
 
 <script>
-
+  import Http from '@/js/http.js'
+  import {storageGet} from '@/js/index'
+  import {notify} from '@/constants/index'
   export default {
     name: "ModifyPsw",
     data(){
       return {
+        user:{},
         modifyForm: {
+          oldPassword:'',
           password:'',
-          newpassword: '',
-          repassword:'',
+          password2:'',
         },
       }
+    },
+    methods:{
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      ModifyPassword(){
+        let params = {
+          id:this.user.id.toString(),
+          ...this.modifyForm
+        }
+        Http.put(`/api/password/reset`,params).then(res=>{
+          window.alert('修改密码成功，跳转至登录页重新登录');
+          window.location.href = process.env.LOGIN_URL;
+        }).catch(err=>{
+          notify('error', '修改密码失败:' + err.data)
+        })
+      }
+    },
+    mounted() {
+      this.setUserInfo();
     }
   }
 </script>

src/pages/UserCenter/MyBankCard.vue

@@ -21,6 +21,16 @@
         <el-form-item label="卡号">
           <el-input v-model="bankCardForm.number"></el-input>
         </el-form-item>
+        <el-form-item>
+          <el-select v-model="value" placeholder="请选择银行卡种类">
+            <el-option
+              v-for="item in bankCardType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <div>
         银行卡绑定成功后，您将享受以下服务：
@@ -63,7 +73,8 @@
           number:''
         },
         user:{},
-        bankCardVOList:[]
+        bankCardVOList:[],
+        bankCardType:[]
       }
     },
     methods:{
@@ -81,11 +92,17 @@
         })
         this.addBankCard = false
         this.loadData();
+      },
+      getBankType(){
+        Http.get('/api/personal/banktype').then(res=>{
+          this.bankCardType = res.bankLogoVOList;
+        })
       }
     },
     mounted() {
       this.setUserInfo();
       this.loadData();
+      this.getBankType();
     }
   }
 </script>

src/pages/UserCenter/MyQualification.vue

@@ -3,14 +3,15 @@
     <div class="right-qualification">
       <div class="right-qualification-title">
         <span style="font-size: 18px;font-weight: bold">我的资质</span>
-        <el-button type="primary" size="mini" class="pull-right" @click="addQualification = true">添加</el-button>
+        <el-button type="primary" size="mini" class="pull-right" @click="handleEditQualification">添加</el-button>
       </div>
       <div style="margin-bottom: 15px">
-        <QualificationCard :qualificationVOList="qualificationVOList"></QualificationCard>
+        <QualificationCard :qualificationVOList="qualificationVOList"
+                           @handleEditQualification="handleEditQualification"></QualificationCard>
       </div>
     </div>
     <el-dialog
-      title="新增资质"
+      :title="modalTitle"
       :visible.sync="addQualification"
       width="30%"
     >
@@ -29,16 +30,29 @@
         </el-form-item>
         <el-form-item label="是否公开">
           <el-radio-group v-model="form.isPublic">
-            <el-radio label="1">公开</el-radio>
-            <el-radio label="0">不公开</el-radio>
+            <el-radio :label="1">公开</el-radio>
+            <el-radio :label="0">不公开</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
+        <el-button type="danger" @click="requireDeleteQualification">删 除</el-button>
     <el-button @click="addQualification = false">取 消</el-button>
     <el-button type="primary" @click="handleAddQualification">确 定</el-button>
   </span>
     </el-dialog>
+
+    <el-dialog
+      title="删除资质提示"
+      :visible.sync="deleteQualification"
+      width="30%"
+    >
+      <span>确定删除资质“{{form.name}}”吗？</span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="deleteQualification = false">取 消</el-button>
+    <el-button type="primary" @click="handleDeleteQualification">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 
 </template>
@@ -50,38 +64,89 @@
 
   export default {
     name: "MyQualification",
-    components:{
+    components: {
       QualificationCard
     },
-    data(){
+    data() {
       return {
+        deleteQualification:false,
         addQualification: false,
         form: {
           name: '',
-          number:'',
-          licensingAuthority:'',
-          time:'',
-          isPublic:''
+          number: '',
+          licensingAuthority: '',
+          time: '',
+          isPublic: ''
         },
-        user:{},
-        qualificationVOList:[]
+        user: {},
+        qualificationVOList: [],
+        // qualificationVO: {},
+        modalTitle: '新增资质'
       }
     },
-    methods:{
-      loadData(){
-        Http.get(`/api/personal/displayqualification/${this.user.id}`).then((res)=>{
+    methods: {
+      loadData() {
+        Http.get(`/api/personal/displayqualification/${this.user.id}`).then((res) => {
           this.qualificationVOList = res.qualificationVOList;
         })
       },
-      setUserInfo(){
+      setUserInfo() {
         this.user = storageGet('user') && storageGet('user').userVO;
       },
-      handleAddQualification(){
-        Http.post(`/api/personal/addqualification/${this.user.id}`,this.form).then(res=>{
-          console.log(res);
+      handleAddQualification() {
+        if (!this.form.id) {
+          //新增
+          Http.post(`/api/personal/addqualification/${this.user.id}`, this.form).then(res => {
+            this.addQualification = false;
+            this.loadData();
+          })
+        } else {
+          //编辑
+          let newForm = {
+            name: this.form.name,
+            number: this.form.number,
+            licensingAuthority: this.form.licensingAuthority,
+            time: this.form.time,
+            isPublic: this.form.isPublic
+          };
+          Http.put(`/api/personal/updatequalification/${this.form.id}/${this.user.id}`,newForm).then(res=>{
+            this.form = newForm;
+            this.addQualification = false;
+            this.loadData();
+          })
+        }
+      },
+      requireDeleteQualification(item){
+        this.deleteQualification = true;
+      },
+      handleDeleteQualification(item){
+        console.log('delete')
+        Http.delete(`/api/personal/deletequalification/${this.form.id}/${this.user.id}`,{}).then((res) => {
+          this.deleteQualification = false;
+          this.addQualification = false;
+          this.loadData();
         })
-        this.addQualification = false;
-        this.loadData();
+      },
+      handleEditQualification(item) {
+        if(!item.id){
+          //新增
+          this.form = {
+            name: '',
+            number: '',
+            licensingAuthority: '',
+            time: '',
+            isPublic: ''
+          },
+          this.modalTitle = '新增资质';
+          this.addQualification = true;
+        }else{
+          //编辑
+          Http.get(`/api/personal/displayone/${item.id}`).then((res) => {
+            this.form = res.qualificationVO;
+          })
+          this.modalTitle = '编辑资质';
+          this.addQualification = true;
+        }
       }
     },
     mounted() {
@@ -97,10 +162,10 @@
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
 
-  .right-qualification-title {
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-    margin-bottom: 20px;
-  }
+    .right-qualification-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
   }
 </style>

src/pages/UserCenter/PhoneBinding.vue

@@ -4,57 +4,77 @@
       <div class="right-modifyPsw-title">
         <span style="font-size: 18px;font-weight: bold">手机绑定</span>
       </div>
-      <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
-        <img src="../../assets/img/phoneBinding.png"></img>
-        <span style="font-size: 16px">您已绑定的手机号码是138****1380</span>
-        <el-button type="primary" plain size="mini">修改号码</el-button>
-    </div>
-      <div style="background-color: rgba(233,239,249,1);padding: 10px">
-        <img src="../../assets/img/phoneUnbinding.png"></img>
-        <span style="font-size: 16px">您未绑定的手机号码是138****1380</span>
-          <el-button type="danger" plain size="mini">立即绑定</el-button>
+      <div>
+        <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px" v-if="user.mobile">
+          <img src="../../assets/img/phoneBinding.png"></img>
+          <span style="font-size: 16px">您已绑定的手机号码是{{this.user.mobile}}</span>
+          <el-button type="primary" plain size="mini" @click="changePhoneNumber" style="margin-left: 20px">修改号码</el-button>
+        </div>
+        <div style="background-color: rgba(233,239,249,1);padding: 10px" v-if="!user.mobile">
+          <img src="../../assets/img/phoneUnbinding.png"></img>
+          <span style="font-size: 16px">您尚未绑定手机号</span>
+          <el-button type="danger" plain size="mini" style="margin-left: 20px" @click="bindPhoneNumber">立即绑定</el-button>
+        </div>
       </div>
-      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
-        <el-step title="验证原手机"></el-step>
-        <el-step title="绑定新手机"></el-step>
-        <el-step title="完成绑定"></el-step>
-      </el-steps>
+      <router-view></router-view>
 
-      <el-form  label-width="80px"  v-if="active===0">
-        <el-form-item label="原手机号">
-          <span v-model="phoneBindingForm.phone">135****6699</span>
-        </el-form-item>
-        <el-form-item label="验证码">
-          <span v-model="phoneBindingForm.phone">135****6699</span>
-        </el-form-item>
-      </el-form>
 
-      <el-form  label-width="80px"  v-if="active===1">
-        <el-form-item label="新手机号">
-          <el-input v-model="phoneBindingForm.phone"></el-input>
-        </el-form-item>
-        <el-form-item label="验证码">
-          <span v-model="phoneBindingForm.phone">135****6699</span>
-        </el-form-item>
-      </el-form>
+<!--      <el-form label-width="80px" v-if="active===1">-->
+<!--        <el-form-item label="新手机号">-->
+<!--          <el-input v-model="phoneBindingForm.phone"></el-input>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="验证码">-->
+<!--          <el-input placeholder="验证码内容" v-model="input3" class="input-with-select">-->
+<!--            <el-button slot="append">{{hasVerifyCode ? codeTime :'获取验证码'}}</el-button>-->
+<!--          </el-input>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
     </div>
   </div>
 </template>
 
 <script>
-
+  import BindingMobile from './BindingMobile'
+  import ReBindingMobile from './ReBindingMobile'
+  import {storageGet} from '@/js/index'
+  import Http from '@/js/http.js'
   export default {
     name: "PhoneBinding",
+    components:{
+      BindingMobile,
+      ReBindingMobile
+    },
     data() {
       return {
-        active: 1,
-        phoneBindingForm:{
-          phone:''
-        }
+        active: 0,
+        showBingWranning:false,
+        user:{},
+        phoneBindingForm: {
+          phone: '',
+          verifyCode: ''
+        },
+
       }
     },
     methods: {
-
+      changePhoneNumber(){
+        this.showBingWranning = false;
+        this.$router.push({
+          path: '/personal/phoneBinding/rebinding',
+        });
+      },
+      bindPhoneNumber(){
+        this.showBingWranning = false;
+        this.$router.push({
+          path: '/personal/phoneBinding/binding',
+        });
+      },
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+    },
+    mounted() {
+      this.setUserInfo();
     }
   }
 </script>

src/pages/UserCenter/QualificationCard.vue

@@ -1,34 +1,42 @@
 <template>
-  <el-row :gutter="15">
-    <el-col :span="8" v-for="item in qualificationVOList" :key="item.id">
-      <div class="qualification-card" >
-        <div class="qualification-card-title" style="padding: 10px;height:28px">
-          <span class="pull-left" style="font-size: 16px;font-weight: bold;line-height: 28px">{{item.name}}</span>
-          <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
-        </div>
-        <div class="qualification-card-detail-wrapper">
-          <div class="qualification-card-detail">
-            <div class="qualification-card-detail-title">证书编号：</div>
-            <div class="qualification-card-detail-info">{{item.number}}</div>
-          </div>
-          <div class="qualification-card-detail">
-            <div class="qualification-card-detail-title">发证机关：</div>
-            <div class="qualification-card-detail-info">{{item.licensingAuthority}}</div>
+  <div>
+    <el-row :gutter="15">
+      <el-col :span="8" v-for="item in qualificationVOList" :key="item.id">
+        <div class="qualification-card" @click="showQualificationDetail(item)">
+          <div class="qualification-card-title" style="padding: 10px;height:28px">
+            <span class="pull-left" style="font-size: 16px;font-weight: bold;line-height: 28px">{{item.name}}</span>
+            <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
           </div>
-          <div class="qualification-card-detail">
-            <div class="qualification-card-detail-title">发证时间：</div>
-            <div class="qualification-card-detail-info">{{item.time}}</div>
+          <div class="qualification-card-detail-wrapper">
+            <div class="qualification-card-detail">
+              <div class="qualification-card-detail-title">证书编号：</div>
+              <div class="qualification-card-detail-info">{{item.number}}</div>
+            </div>
+            <div class="qualification-card-detail">
+              <div class="qualification-card-detail-title">发证机关：</div>
+              <div class="qualification-card-detail-info">{{item.licensingAuthority}}</div>
+            </div>
+            <div class="qualification-card-detail">
+              <div class="qualification-card-detail-title">发证时间：</div>
+              <div class="qualification-card-detail-info">{{item.time}}</div>
+            </div>
           </div>
         </div>
-      </div>
-    </el-col>
-  </el-row>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
   export default {
     name: "QualifucationCard",
-    props:['qualificationVOList']
+    props:['qualificationVOList'],
+    methods:{
+      showQualificationDetail(item){
+        console.log('item')
+        this.$emit('handleEditQualification',item);
+      }
+    }
   }
 </script>
 

src/pages/UserCenter/ReBindingMobile.vue

@@ -0,0 +1,114 @@
+<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>
+
+  </div>
+
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import {storageGet} from '@/js/index'
+  import {notify} from '@/constants/index'
+  export default {
+    name: "ReBindingMobile",
+    data(){
+      return{
+        active: 1,
+        user:{},
+        phoneBindingForm: {
+          phone: '',
+          verifyCode: ''
+        },
+        hasVerifyCode:false,
+        codeTime:10,
+      }
+    },
+    methods:{
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      reBindingMobile(){
+          if(this.active === 0){
+            //1.验证原手机
+            let params = {
+              "id": this.user.id,
+              "mobile": this.user.mobile
+            }
+            Http.put('/api/verify/mobile',params).then(res=>{
+              if(res.code === 20000){
+                notify('success', '验证成功');
+                this.active = 1;
+              }
+            }).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);
+            })
+          }
+
+      },
+      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;
+            }
+          },1000)
+        }).catch(err=> {
+          notify('error', '获取验证码失败:' + err.data);
+        })
+      }
+    },
+    mounted() {
+      this.phoneBindingForm.phone = this.user.mobile;
+      this.setUserInfo();
+      console.log(storageGet('user'));
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -399,6 +399,16 @@ export default new Router({
         {
           path: '/personal/phoneBinding',
           component: resolve => require(['@/pages/UserCenter/PhoneBinding.vue'], resolve),
+          children: [
+            {
+              path:'/personal/phoneBinding/binding',
+              component:resolve => require(['@/pages/UserCenter/BindingMobile.vue'], resolve),
+            },
+            {
+              path:'/personal/phoneBinding/rebinding',
+              component:resolve => require(['@/pages/UserCenter/ReBindingMobile.vue'], resolve),
+            },
+          ]
         },
         {
           path: '/personal/mailBinding',