add mail rebinding

src/components/commons/ProvinceCity.vue

@@ -8,7 +8,7 @@
       prop="status"
       style="width: calc(50% - 20px)"
     >
-      <el-select v-model="province" placeholder="请选择" @change="provinceChanged">
+      <el-select v-model="province" placeholder="请选择" @change="provinceChanged" :disabled="isModifyMode">
 <!--        <el-option :key="''" :label="'全部'" :value="''"></el-option>-->
         <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.code"></el-option>
       </el-select>
@@ -20,7 +20,7 @@
       prop="status"
       style="width: calc(50% - 20px);margin-right: 0px"
     >
-      <el-select v-model="city" :loading="loadingCity" @change="cityChanged" placeholder="请选择">
+      <el-select v-model="city" :loading="loadingCity" @change="cityChanged" placeholder="请选择" :disabled="isModifyMode">
 <!--        <el-option :key="''" :label="'请选择'" :value="''"></el-option>-->
         <el-option v-for="item in cities" :key="item.code" :label="item.name" :value="item.code"></el-option>
       </el-select>
@@ -40,6 +40,10 @@ export default {
     cityCode: {
       type: String,
       default: ""
+    },
+    isModifyMode:{
+      type:Boolean,
+      default:false
     }
   },
   created() {

src/pages/UserCenter/BindingMail.vue

@@ -0,0 +1,89 @@
+<template>
+  <div style="margin-top: 20px">
+    <el-form label-width="80px" style="width:400px">
+      <el-form-item label="邮箱号" >
+        <el-input v-model="mailBindingForm.mail"></el-input>
+      </el-form-item>
+      <el-form-item label="验证码">
+        <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>
+    <el-button type="primary" plain style="margin-left: 80px" @click="bindingEmail">完成绑定</el-button>
+  </div>
+
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import {storageGet} from '@/js/index'
+  import {notify} from '@/constants/index'
+  export default {
+    name: "BindingMail",
+    data(){
+      return{
+        mailBindingForm:{
+          mail:'',
+          verifyCode:''
+        },
+        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,
+          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--;
+            }else{
+              clearInterval(codeTimer);
+              _this.hasVerifyCode = false;
+              this.codeTime = 10;
+            }
+          },1000)
+        }).catch(err=> {
+          notify('error', '获取验证码失败:' + err.data);
+        })
+      },
+      bindingEmail(){
+        let params = {
+          id:this.user.id,
+          email:this.mailBindingForm.mail,
+          verifyCode: this.mailBindingForm.verifyCode
+        };
+        Http.put('/api/user/email',params).then(res=>{
+          if(res.code === 20000){
+            notify('success', '绑定成功');
+            this.$router.push({path:'/personal/mailBinding'});
+          }
+        }).catch(err=> {
+          notify('error', err.data);
+        })
+      }
+    },
+    mounted() {
+      this.setUserInfo()
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/pages/UserCenter/MailBinding.vue

@@ -1,42 +1,35 @@
 <template>
   <div>
     <div class="right-modifyPsw">
-      <div>
+      <div >
         <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" v-if="showBindWranning">
-          <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
-          <el-button type="primary" plain size="mini" @click="bindingEmail = true;showBindWranning = false">立即绑定
-          </el-button>
-          <div>
-            邮箱绑定成功后，您将享受以下服务：
+        <div>
+          <div v-if="!user.email">
+            <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px" v-if="showBindWranning">
+              <img src="../../assets/img/phoneUnbinding.png"></img>
+              <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
+              <el-button type="primary" plain size="mini" @click="handleBindingEmail">立即绑定
+              </el-button>
+            </div>
+            <div>
+              邮箱绑定成功后，您将享受以下服务：
+            </div>
+            <div>①邮箱地址登录 可直接使用“邮箱地址”登录到众测服务平台</div>
+            <div>②重要事件提醒 进行（支付/提现/众测/中标）时，可及时收到邮件提醒</div>
+            <div>③找回账号密码 忘记密码时，可使用邮件找回密码</div>
           </div>
-          <div>①邮箱地址登录 可直接使用“邮箱地址”登录到众测服务平台</div>
-          <div>②重要事件提醒 进行（支付/提现/众测/中标）时，可及时收到邮件提醒</div>
-          <div>③找回账号密码 忘记密码时，可使用邮件找回密码</div>
-        </div>
-      </div>
-      <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 v-if="user.email">
+            <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">您绑定的邮箱是：{{this.user.email}}</span>
+              <el-button type="primary" plain size="mini" @click="handleChangeEmail" style="margin-left: 20px">修改邮箱</el-button>
+            </div>
+          </div>
+          <router-view></router-view>
         </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>
 </template>
@@ -50,7 +43,7 @@
     name: "MailBinding",
     data() {
       return {
-        showBindWranning: true,
+        // showBindWranning: true,
         hasVerifyCode: false,
         bindingEmail: false,
         codeTime: 10,
@@ -63,23 +56,22 @@
     },
     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);
+        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(){
+        this.$router.push({
+          path: '/personal/mailBinding/binding',
+        });
+      },
+      handleChangeEmail(){
+        this.$router.push({
+          path: '/personal/mailBinding/rebinding',
+        });
+      },
       getVerifyCode() {
         let params = {
           id: this.user.id,
@@ -95,6 +87,7 @@
               clearInterval(codeTimer);
               _this.hasVerifyCode = false;
               this.codeTime = 10;
+              this.setUserInfo()
             }
           }, 1000)
         }).catch(err => {
@@ -103,7 +96,7 @@
       }
     },
     mounted() {
-      this.showBindWranning = !!this.user.email;
+      console.log('aaa');
       this.setUserInfo();
     }
   }

src/pages/UserCenter/Mine.vue

@@ -12,27 +12,27 @@
             action="https://jsonplaceholder.typicode.com/posts/"
             :before-upload="beforeFileUpload"
             :http-request="uploadFile"
-            style="border: lightgrey 1px solid"
+            :disabled="!isModifyMode"
           >
             <img v-if="userForm.photoUrl" :src="userForm.photoUrl" class="avatar">
             <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"></el-input>
+          <el-input v-model="userForm.userName" autocomplete="off" :disabled="!isModifyMode"></el-input>
         </el-form-item>
         <el-form-item label="企业简称" prop="enterprise">
-          <el-input v-model="userForm.unit" autocomplete="off"></el-input>
+          <el-input v-model="userForm.unit" autocomplete="off" :disabled="!isModifyMode"></el-input>
         </el-form-item>
         <el-form-item label="性别" prop="gender">
-          <el-radio-group v-model="userForm.gender">
+          <el-radio-group v-model="userForm.gender" :disabled="!isModifyMode">
             <el-radio label="男"></el-radio>
             <el-radio label="女"></el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="生日" prop="birthday">
           <el-date-picker type="date" placeholder="选择日期" v-model="userForm.birthday"
-                          style="width: 100%;"></el-date-picker>
+                          style="width: 100%;" :disabled="!isModifyMode"></el-date-picker>
         </el-form-item>
         <el-form-item label="联系地址" prop="address" style="width: 160%">
           <provincecity
@@ -40,15 +40,16 @@
             @selectChange="locationChange"
             :provinceCode="userForm.location==null?'3200':userForm.location.provinceCode"
             :cityCode="userForm.location==null?'3201':userForm.location.cityCode"
+            :isModifyMode="!isModifyMode"
           ></provincecity>
         </el-form-item>
         <el-form-item label="个人能力" style="width: 160%">
-          <el-checkbox-group v-model="userForm.personalCompetence">
+          <el-checkbox-group v-model="userForm.personalCompetence" :disabled="!isModifyMode">
             <el-checkbox v-for="item in serviceType" :label="item.code" :name="item.code" :key="item.code" >{{item.name}}</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="isModifyMode" type="primary" size="small" class="pull-left" @click="submitUserInfo">提交修改</el-button>
+          <el-button  v-if="isModifyMode" type="primary" size="small" class="pull-left" @click="submitUserInfo">提交修改</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -86,7 +87,6 @@
     methods: {
       submitUserInfo(){
         Http.put(`/api/personal/update/${this.user.id}`,this.userForm).then(res=>{
-          console.log(res);
           this.isModifyMode = false;
         })
       },
@@ -147,9 +147,7 @@
           this.userForm.city = res.userVO.unit ? res.userVO.city : '';
           this.userForm.personalCompetence = res.userVO.personalCompetence ? res.userVO.personalCompetence : [];
           //获取省市code
-          console.log(getProvinceCodeByProvinceName(this.userForm.province, this.userForm.city));;
           let location = getProvinceCodeByProvinceName(this.userForm.province, this.userForm.city);
-          console.log(location)
           this.userForm.province = location.provinceCode;
           this.userForm.city = location.cityCode;
           this.userForm.location=location;

src/pages/UserCenter/PhoneBinding.vue

@@ -47,13 +47,13 @@
       changePhoneNumber(){
         this.showBingWranning = false;
         this.$router.push({
-          path: '/personal/phoneBinding/rebinding',
+          path: '/personal/mailBinding/rebinding',
         });
       },
       bindPhoneNumber(){
         this.showBingWranning = false;
         this.$router.push({
-          path: '/personal/phoneBinding/binding',
+          path: '/personal/mailBinding/binding',
         });
       },
       setUserInfo(){

src/pages/UserCenter/ReBindingMail.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-form label-width="80px" style="with:400px;">
+      <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="reBindingMail">完成绑定</el-button>
+  </div>
+
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import {storageGet} from '@/js/index'
+  import {notify} from '@/constants/index'
+
+  export default {
+    name: "ReBindingMail",
+    data() {
+      return {
+        active: 0,
+        user: {},
+        emailBindingForm: {
+          email: '',
+          verifyCode: ''
+        },
+        hasVerifyCode: false,
+        codeTime: 10,
+      }
+    },
+    methods: {
+      setUserInfo() {
+        let userId = storageGet('user') && storageGet('user').userVO.id;
+        Http.get(`/api/user/${userId}`).then(res => {
+          this.user = res.userVO
+        })
+      },
+      reBindingMail() {
+        let params = {
+          "id": this.user.id,
+          "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);
+        })
+      },
+      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.setUserInfo();
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/pages/UserCenter/ReBindingMobile.vue

@@ -61,7 +61,8 @@
             Http.put('/api/verify/old/mobile',params).then(res=>{
               if(res.code === 20000){
                 notify('success', '验证成功');
-                this.active = 1;
+                this.active = 0;
+                this.setUserInfo();
               }
             }).catch(err=> {
               notify('error', '验证原手机失败:' + err.data);
@@ -106,9 +107,7 @@
       }
     },
     mounted() {
-      this.phoneBindingForm.phone = this.user.mobile;
       this.setUserInfo();
-      console.log(storageGet('user'));
     }
   }
 </script>

src/router/index.js

@@ -441,6 +441,16 @@ export default new Router({
         {
           path: '/personal/mailBinding',
           component: resolve => require(['@/pages/UserCenter/MailBinding.vue'], resolve),
+          children: [
+            {
+              path:'/personal/mailBinding/binding',
+              component:resolve => require(['@/pages/UserCenter/BindingMail.vue'], resolve),
+            },
+            {
+              path:'/personal/mailBinding/rebinding',
+              component:resolve => require(['@/pages/UserCenter/ReBindingMail.vue'], resolve),
+            },
+          ]
         },
         {
           path: '/personal/authentication',