新账号中心验证手机页面

components/appeal/AccountAppeal.vue

@@ -254,7 +254,7 @@
     },
     computed: {
       logged () {
-        return this.$store.state.option.isLogin.logged
+        return this.$store.state.option.isLogin.data.content
       }
     },
     mounted () {
@@ -274,7 +274,7 @@
       },
 //     判断用户是否登录
       isLogin () {
-        if (!this.logged) {
+        if (!this.logged.isLogin) {
 //          未登录跳到登录页面
           window.location.href = '/'
         }

components/appeal/ChangeManagerAppeal.vue

@@ -407,7 +407,7 @@
     },
     computed: {
       logged () {
-        return this.$store.state.option.isLogin.logged
+        return this.$store.state.option.isLogin.data.content
       }
     },
     mounted () {
@@ -434,7 +434,7 @@
       },
       //      判断用户是否登录
       isLogin () {
-        if (!this.logged) {
+        if (!this.logged.isLogin) {
 //          未登录跳到登录页面
           window.location.href = '/'
         }

components/certification/EnterpriseCertification.vue

@@ -278,7 +278,7 @@
     },
     computed: {
       logged () {
-        return this.$store.state.option.isLogin.logged
+        return this.$store.state.option.isLogin.data.content
       }
     },
     mounted () {
@@ -305,7 +305,7 @@
       },
 //      判断用户是否登录
       isLogin () {
-        if (!this.logged) {
+        if (!this.logged.isLogin) {
 //          未登录跳到登录页面
           window.location.href = '/'
         }

components/certification/RealNameCertification.vue

@@ -154,7 +154,7 @@
     },
     computed: {
       logged () {
-        return this.$store.state.option.isLogin.logged
+        return this.$store.state.option.isLogin.data.content
       }
     },
     mounted () {
@@ -174,7 +174,7 @@
       },
 //      判断用户是否登录
       isLogin () {
-        if (!this.logged) {
+        if (!this.logged.isLogin) {
 //          未登录跳到登录页面
 //          window.location.href = '/'
         }

components/login/Login.vue

@@ -210,7 +210,7 @@
           this.$http.post('/sso/login', param, config)
             .then(response => {
               if (response.data.success) {
-                console.log(response.data.content)
+//                console.log(response.data.content)
                 if (response.data.content.spaces) {
 //                   弹框让用户选择企业
                   this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)

components/register/EnterpriseRegistration.vue

@@ -44,7 +44,7 @@
                         auto-complete="off"
                         placeholder="企业名称"
               ></el-input>
-              <span class="tip exist" v-show="isSpaceNameExist">该企业已被注册，请确认。<a href="">仍有问题？</a></span>
+              <span class="tip exist" v-show="isSpaceNameExist">该企业已被注册，请确认。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
             </el-form-item>
             <el-form-item prop="businessCode">
               <el-input type="text"
@@ -52,7 +52,7 @@
                         v-bind:class="{ active: isBusinessCodeExist }"
                         auto-complete="off"
                         placeholder="营业执照号"></el-input>
-              <span class="tip exist" v-show="isBusinessCodeExist">该企业已被注册，请确认。<a href="">仍有问题？</a></span>
+              <span class="tip exist" v-show="isBusinessCodeExist">该企业已被注册，请确认。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
             </el-form-item>
             <el-form-item prop="vipName" v-if="!isHasRegister">
               <el-input type="text" v-model="enterprise1.vipName" auto-complete="off" placeholder="管理员姓名"></el-input>

components/validation/PhoneValidation.vue

@@ -1,46 +1,76 @@
 <template>
   <div class="validation">
     <div class="container">
-      <div class="content" v-if="activeTab == 0">
+      <div class="content" v-show="goFirstStep">
         <div class="content-top">
-          <h3>验证手机</h3>
+          <h3 @click="getVerifyWay">验证手机</h3>
           <div class="step">
             <img src="/images/all/step01.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span>新手机号码</span><span>设置完成</span></div>
-            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
         <div class="choose">
-          <div class="active"><img src="/images/all/icon01.png" alt="" class="first mob"/><span>通过验证手机</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon02.png" alt="" class="first"/><span>通过验证邮箱</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon03.png" alt="" class="first"/><span>通过验证密保</span><i class="fa fa-angle-right second"></i></div>
-          <div><img src="/images/all/icon04.png" alt="" class="first"/><span>通过人工申诉</span><i class="fa fa-angle-right second"></i></div>
+          <div v-show="hasValidPhoneWay"
+               @click="chooseWay(1)">
+            <img src="/images/all/icon01.png" alt="" class="first mob"/>
+            <span>通过验证手机</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="hasValidEmailWay"
+               @click="chooseWay(2)">
+            <img src="/images/all/icon02.png" alt="" class="first"/>
+            <span>通过验证邮箱</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="hasValidQuestionsWay"
+               @click="chooseWay(3)">
+            <img src="/images/all/icon03.png" alt="" class="first"/>
+            <span>通过验证密保</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="showManualAppeal"
+               @click="goAccountAppeal()">
+            <img src="/images/all/icon04.png" alt="" class="first"/>
+            <span>通过人工申诉</span><i class="fa fa-angle-right second"></i>
+          </div>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 1">
+      <div class="content" v-show="showPhoneValid">
         <div class="content-top">
           <h3>验证手机</h3>
           <div class="step">
-            <img src="/images/all/step02.png" alt=""/>
+            <img src="/images/all/step01.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span>新手机号码</span><span>设置完成</span></div>
+            <a @click="goPreviousStep" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
         <div class="content-bottom">
           <span class="use">使用手机号<em>183******08</em>接收验证码</span>
-          <div class="form-group">
-            <input type="text" class="form-control msg" placeholder="短信验证码"/>
-            <span class="msg">获取验证码</span>
-            <!--<span class="msg send">已发送(54s)</span>-->
+          <div>
+            <el-form :model="valid" :rules="rules" ref="valid" label-width="100px" class="demo-ruleForm">
+              <el-form-item prop="code">
+                <el-input type="text" v-model="valid.code"
+                          v-bind:class="{ active: codeErrorChecked }"
+                          auto-complete="off" class="msg"
+                          placeholder="短信验证码"></el-input>
+                <el-button type="primary" class="code"
+                           v-show="sendAccountCode"
+                           @click="getCheckCode"
+                           :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
+                <el-button type="primary"  v-show="!sendAccountCode" class="code code-send">已发送({{account_time}}s)</el-button>
+                <!--<span v-show="codeErrorChecked" class="tip codeError-tip" >验证码输入错误</span>-->
+              </el-form-item>
+              <el-form-item>
+                <a class="btn finish">下一步</a>
+              </el-form-item>
+            </el-form>
           </div>
-          <button class="btn">下一步</button>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 2">
+      <div class="content" v-show="showEmailValid">
         <div class="content-top">
           <h3>验证手机</h3>
           <div class="step">
-            <img src="/images/all/step02.png" alt=""/>
+            <img src="/images/all/step01.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span>新手机号码</span><span>设置完成</span></div>
+            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
         <div class="content-bottom">
@@ -48,12 +78,13 @@
           <div class="warp"><button class="btn">发送验证请求</button></div>
         </div>
       </div>
-      <div class="content" v-if="activeTab == 3">
+      <div class="content" v-show="showQuestionsValid">
         <div class="content-top">
           <h3>验证手机</h3>
           <div class="step">
-            <img src="/images/all/step03.png" alt=""/>
+            <img src="/images/all/step01.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span>新手机号码</span><span>设置完成</span></div>
+            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
         <form action="">
@@ -84,11 +115,11 @@
           <button class="btn">提交</button>
         </form>
       </div>
-      <div class="content" v-if="activeTab == 4">
+      <div class="content" v-show="goSecondStep">
         <div class="content-top">
           <h3>验证手机</h3>
           <div class="step">
-            <img src="/images/all/step03.png" alt=""/>
+            <img src="/images/all/step02.png" alt=""/>
             <div class="step-item"><span class="active">账号验证</span><span class="active">新手机号码</span><span>设置完成</span></div>
           </div>
         </div>
@@ -126,8 +157,167 @@
   export default {
     name: 'validation',
     data () {
+      var validateCode = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的验证码'))
+          this.codeErrorChecked = false
+          this.codeChecked = false
+        } else {
+          if (this.enterprise.code !== '') {
+            if (this.token !== '') {
+              if (this.enterprise.code !== '' && this.enterprise.mobile !== '') {
+                let param = new FormData()
+                param.append('mobile', this.enterprise.mobile)
+                param.append('code', this.enterprise.code)
+                param.append('token', this.token)
+                let config = {
+                  headers: {'Content-Type': 'multipart/form-data'}
+                }
+                this.$http.post(`/sso/personal/register/checkCode`, param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.codeChecked = true
+                      this.codeErrorChecked = false
+                    } else {
+                      this.codeErrorChecked = true
+                      this.codeChecked = false
+                      return Promise.reject(response.data)
+                    }
+                  }).catch(err => {
+                    this.$message.error(err.errMsg)
+                  })
+              }
+            } else {}
+          }
+          callback()
+        }
+      }
       return {
-        activeTab: 0
+        activeTab: 0,
+        goFirstStep: true,
+        goSecondStep: false,
+        hasValidPhoneWay: false,
+        hasValidQuestionsWay: false,
+        hasValidEmailWay: false,
+        showManualAppeal: false,
+        showPhoneValid: false,
+        showEmailValid: false,
+        showQuestionsValid: false,
+        sendAccountCode: false,
+        account_time: 0,
+        getCodeBtnIsDisabled: true,
+        valid: {
+          code: ''
+        },
+        rules: {
+          code: [
+            {validator: validateCode, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    computed: {
+      logged () {
+//        console.log(this.$store.state.option.isLogin.data.content.isLogin)
+        return this.$store.state.option.isLogin.data.content
+      }
+    },
+    mounted () {
+//      验证是否登录
+      this.$nextTick(() => {
+        this.isLogin()
+        // 刷新统计信息
+        setInterval(() => {
+          this.isLogin()
+        }, 10000)
+      })
+//      获取验证方式
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+//      判断用户是否登录
+      isLogin () {
+        if (!this.logged.isLogin) {
+//          console.log(this.logged.isLogin)
+//          未登录跳到登录页面
+          window.location.href = '/'
+        }
+      },
+//      获取验证方式
+      getVerifyWay () {
+        this.$http.get('/update/user/checkType').then(response => {
+          console.log(response.data)
+          if (response.data.success) {
+            if (!response.data.content) {
+              this.goSecondStep = true
+              this.goFirstStep = false
+              this.showManualAppeal = false
+            } else {
+              if (response.data.content.mobile) {
+                this.hasValidPhoneWay = true
+                this.showManualAppeal = true
+              }
+              if (response.data.content.questions) {
+                this.hasValidQuestionsWay = true
+                this.showManualAppeal = true
+              }
+              if (response.data.content.email) {
+                this.hasValidEmailWay = true
+                this.showManualAppeal = true
+              }
+              this.goSecondStep = false
+              this.goFirstStep = true
+            }
+          }
+        })
+      },
+//      选择方式
+      chooseWay (flag) {
+        if (flag === 1) {
+          this.showPhoneValid = true
+        } else if (flag === 2) {
+          this.showEmailValid = true
+        } else if (flag === 3) {
+          this.showQuestionsValid = true
+        }
+        this.goFirstStep = false
+      },
+//      跳转到人工申诉页面
+      goAccountAppeal () {
+        window.location.href = '/appeals/accountAppeal'
+      },
+//      返回上一步
+      goPreviousStep () {
+        this.goFirstStep = true
+        this.showPhoneValid = false
+        this.showEmailValid = false
+        this.showQuestionsValid = false
+      },
+//      获取手机验证码
+      getCheckCode () {
+        this.$http.get(`/update/user/check/mobile`, {params: {mobile: this.passwordRest.mobile}})
+          .then(response => {
+            this.token = response.data.content.token
+            if (this.token !== '') {
+              this.$message({
+                message: '验证码已经发送到您的手机，请注意查收',
+                type: 'success'
+              })
+              this.sendAccountCode = false
+              this.account_time = 60
+              var accountTime = setInterval(() => {
+                this.account_time--
+                if (this.account_time <= 0) {
+                  this.sendAccountCode = true
+                  clearInterval(accountTime)
+                }
+              }, 1000)
+            }
+          }).catch(err => {
+            this.$message.error(err.errMsg)
+          })
       }
     }
   }

store/index.js

@@ -28,8 +28,8 @@ export const actions = {
     commit('option/REQUEST_IS_LOGIN')
     return axios.get('/sso/login/isLogin')
     .then(response => {
-      // console.log(JSON.stringify(response.data.content))
-      commit('option/REQUEST_IS_LOGIN_SUCCESS', response.data.data)
+      // console.log(JSON.stringify(response.data))
+      commit('option/REQUEST_IS_LOGIN_SUCCESS', response.data)
     }, err => {
       commit('option/REQUEST_IS_LOGIN_FAILURE', err)
     })

store/option.js

@@ -16,7 +16,7 @@ export const state = {
     // 是否登录
     logged: false,
     fetching: false,
-    data: {}
+    data: []
   },
   // 系统设置
   globalOptions: {
@@ -41,15 +41,15 @@ export const mutations = {
   UPDATE_URL (state, result) {
     state.url = result
   },
-  REQUEST_USER_INFO (state) {
+  REQUEST_IS_LOGIN (state) {
     state.isLogin.fetching = true
   },
-  REQUEST_USER_INFO_SUCCESS (state, result) {
+  REQUEST_IS_LOGIN_SUCCESS (state, result) {
     state.isLogin.fetching = false
     state.isLogin.data = result || {}
     state.isLogin.logged = !!(result && result.userName)
   },
-  REQUEST_USER_INFO_FAILURE (state) {
+  REQUEST_IS_LOGIN_FAILURE (state) {
     state.isLogin.fetching = false
     state.isLogin.data = {}
   },