新账号中心验证手机页面（密保邮箱验证）

assets/scss/common.scss

@@ -647,3 +647,13 @@ form .el-form-item.padding55 .el-form-item__content a.active{
 form .el-form-item.padding55 .el-form-item__content a.correct {
   border-color: #67c23a !important;
 }
+
+
+//密保问题
+form .questions .el-form-item__content{
+  text-align: left;
+}
+form .questions .el-form-item__content span.question {
+  font-size: 14px;
+  color: #000;
+}

components/appeal/ChangeManagerAppeal.vue

@@ -29,7 +29,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="">仍有问题？</a></span>
             </el-form-item>
             <el-form-item prop="businessCode">
               <el-input type="text" v-model="changeManager.businessCode" auto-complete="off" placeholder="营业执照号"></el-input>
@@ -212,11 +212,11 @@
               this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.changeManager.spaceName}})
                 .then(response => {
                   if (response.data.success) {
-                    this.spaceNameChecked = true
-                    this.isSpaceNameExist = false
-                  } else {
                     this.spaceNameChecked = false
                     this.isSpaceNameExist = true
+                  } else {
+                    this.spaceNameChecked = true
+                    this.isSpaceNameExist = false
                     return Promise.reject(response.data)
                   }
                 }).catch(err => {
@@ -704,7 +704,7 @@
   span.tip{
     position: absolute;
     top: 0;
-    right: -238px;
+    right: -215px;
     font-size: 13px;
     color: #8c8c8c;
   a{

components/validation/PhoneValidation.vue

@@ -44,7 +44,7 @@
         <div class="content-bottom">
           <span class="use">使用手机号<em>{{secretMobile}}</em>接收验证码</span>
           <div>
-            <el-form :model="valid" :rules="rules" ref="valid" label-width="100px" class="demo-ruleForm">
+            <el-form :model="valid" :rules="rules" ref="valid" label-width="100px" class="demo-ruleForm" style="margin-top: 0;">
               <el-form-item prop="code">
                 <el-input type="text" v-model="valid.code"
                           v-bind:class="{ active: codeErrorChecked }"
@@ -75,8 +75,15 @@
           </div>
         </div>
         <div class="content-bottom">
-          <span class="use">使用电子邮箱<em>183****08@qq.com</em>进行验证，有效期7天</span>
-          <div class="warp"><button class="btn">发送验证请求</button></div>
+          <span class="use">使用电子邮箱<em>{{secretEmail}}</em>进行验证，有效期7天</span>
+          <div class="warp"
+               @click="firstStepValidEmail"
+               v-show="!emailSendSuccess">
+            <button class="btn">发送验证请求</button>
+          </div>
+          <div class="warp" v-show="emailSendSuccess">
+            <button class="btn" :disabled="emailSendSuccess">已发送验证邮件，请查收</button>
+          </div>
         </div>
       </div>
       <div class="content" v-show="showQuestionsValid">
@@ -88,33 +95,31 @@
             <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
           </div>
         </div>
-        <form action="">
-          <div class="form-group">
-            <input type="text" value="问题一" class="answer form-control"/>
-            <ul>
-              <li>您的母亲的生日是几月几日？</li>
-              <li>您最喜欢的宠物叫什么名字？</li>
-              <li>您最喜欢的电影片名是什么？</li>
-              <li>您的学号是？</li>
-            </ul>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="答案一"/>
-          </div>
-          <div class="form-group">
-            <input type="text" value="问题一" class="answer form-control"/>
-            <ul>
-              <li>您的爷爷叫什么名字？</li>
-              <li>您的配偶的生日是几月几日？</li>
-              <li>您最喜欢的歌手是谁？</li>
-              <li>您就读的小学学校全称是？</li>
-            </ul>
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="答案二"/>
-          </div>
-          <button class="btn">提交</button>
-        </form>
+        <div>
+          <el-form :model="validQuestion" :rules="rulesQuestion" ref="valid" label-width="100px" class="demo-ruleForm">
+            <el-form-item class="questions">
+              <span class="question">问题：{{question1}}</span>
+            </el-form-item>
+            <el-form-item prop="answer1">
+              <el-input type="text" v-model="validQuestion.answer1"
+                        auto-complete="off"
+                        placeholder="答案一"></el-input>
+            </el-form-item>
+            <el-form-item class="questions">
+              <span class="question">问题：{{question2}}</span>
+            </el-form-item>
+            <el-form-item prop="answer2">
+              <el-input type="text" v-model="validQuestion.answer2"
+                        auto-complete="off"
+                        placeholder="答案二"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <a class="btn finish"
+                 :disabled="!answer1SecondChecked || !answer2SecondChecked"
+                 @click="validQuestionSubmit">提交</a>
+            </el-form-item>
+          </el-form>
+        </div>
       </div>
       <div class="content" v-show="goSecondStep">
         <div class="content-top">
@@ -162,7 +167,7 @@
         </div>
         <div class="content-bottom">
           <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
-          <span>及时更换最新的手机号码能极大地提高账号安全性哦！</span>
+          <span class="close-tip">及时更换最新的手机号码能极大地提高账号安全性哦！</span>
           <div class="close-btn" @click="goCloudCenter">关闭</div>
         </div>
       </div>
@@ -210,7 +215,7 @@
           callback()
         }
       }
-//      第二步
+//      第二步验证手机
       var validateSecondMobile = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('请填写正确的手机号'))
@@ -266,6 +271,29 @@
           callback()
         }
       }
+//      第二步验证密保
+      var validateSecondAnswer1 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer1SecondChecked = false
+        } else {
+          if (this.validQuestion.answer1 !== '') {
+            this.answer1SecondChecked = true
+          }
+          callback()
+        }
+      }
+      var validateSecondAnswer2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请填写正确的答案'))
+          this.answer2SecondChecked = false
+        } else {
+          if (this.validQuestion.answer2 !== '') {
+            this.answer2SecondChecked = true
+          }
+          callback()
+        }
+      }
       return {
         activeTab: 0,
         goFirstStep: true,
@@ -286,13 +314,23 @@
         codeChecked: false,
         secondCodeChecked: false,
         secretMobile: '',
+        secretEmail: '',
         getMobile: '',
+        getEmail: '',
+        getQuestions: '',
+        question1: '',
+        question2: '',
+        sort1: '',
+        sort2: '',
         codeErrorMsg: '',
         secondCodeErrorMsg: '',
         firstStepToken: '',
         mobileSecondChecked: false,
+        answer1SecondChecked: false,
+        answer2SecondChecked: false,
         getCodeBtnIsDisabled: true,
         showSecondStepCode: true,
+        emailSendSuccess: false,
         valid: {
           code: ''
         },
@@ -300,6 +338,10 @@
           mobile: '',
           code: ''
         },
+        validQuestion: {
+          answer1: '',
+          answer2: ''
+        },
         rules: {
           code: [
             {validator: validateFirstCode, trigger: 'blur'}
@@ -312,6 +354,14 @@
           code: [
             {validator: validateSecondCode, trigger: 'blur'}
           ]
+        },
+        rulesQuestion: {
+          answer1: [
+            {validator: validateSecondAnswer1, trigger: 'blur'}
+          ],
+          answer2: [
+            {validator: validateSecondAnswer2, trigger: 'blur'}
+          ]
         }
       }
     },
@@ -348,6 +398,7 @@
       getVerifyWay () {
         this.$http.get('/update/user/checkType').then(response => {
           if (response.data.success) {
+            console.log(response.data.content)
             if (!response.data.content) {
               this.goSecondStep = true
               this.goFirstStep = false
@@ -363,10 +414,32 @@
               if (response.data.content.questions) {
                 this.hasValidQuestionsWay = true
                 this.showManualAppeal = true
+                this.getQuestions = response.data.content.questions
+                console.log(this.getQuestions)
+                console.log(this.getQuestions[0].question)
+                this.question1 = this.getQuestions[0].question || ''
+                this.question2 = this.getQuestions[1].question || ''
+                this.sort1 = this.getQuestions[0].sort || ''
+                this.sort2 = this.getQuestions[1].sort || ''
               }
               if (response.data.content.email) {
                 this.hasValidEmailWay = true
                 this.showManualAppeal = true
+                this.getEmail = response.data.content.email
+                console.log(this.getEmail)
+                let getEmailIndex = this.getEmail.indexOf('@')
+                if (getEmailIndex > 3) {
+                  let len = this.getEmail.substring(3, getEmailIndex)
+                  this.secretEmail = this.getEmail.replace(len, '*')
+                  console.log(this.secretEmail)
+                } else {
+                  console.log(getEmailIndex)
+                  this.getEmailArr = this.getEmail.split('')
+                  this.getEmailSplit = this.getEmailArr.splice(getEmailIndex, 0, '*')
+                  this.secretEmail = this.getEmailArr.join('')
+                  console.log(this.getEmailArr)
+                  console.log(this.secretEmail)
+                }
               }
               this.goSecondStep = false
               this.goFirstStep = true
@@ -501,6 +574,51 @@
 //      跳转至云中心页面
       goCloudCenter () {
         window.location.href = '/cloudcenter'
+      },
+//      第一步验证邮箱
+      firstStepValidEmail () {
+        this.$http.get(`/update/user/check/email`, {params: {email: this.getEmail, operate: {'mobile': this.getMobile}}})
+          .then(response => {
+            if (response.data.success) {
+              console.log(response.data)
+              this.emailSendSuccess = true
+            } else {
+              this.emailSendSuccess = false
+              return Promise.reject(response.data)
+            }
+          }).catch(err => {
+            console.log(err)
+//          this.$message.error(err.errMsg)
+          })
+      },
+//      第一步验证密保提交
+      validQuestionSubmit () {
+        if (this.answer1SecondChecked && this.answer2SecondChecked) {
+          let param = new FormData()
+          console.log(this.sort2)
+          let answer = []
+          answer.push({'answer': this.validQuestion.answer1, 'sort': this.sort1}, {'answer': this.validQuestion.answer2, 'sort': this.sort2})
+          let answers = JSON.stringify(answer)
+          param.append('answers', answers)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/update/user/check/question`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.firstStepToken = response.data.content.token
+                this.showQuestionsValid = false
+                this.goSecondStep = true
+                console.log(this.firstStepToken)
+              } else {
+                this.showQuestionsValid = true
+                this.goSecondStep = false
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.$message.error(err.errMsg)
+            })
+        }
       }
     }
   }
@@ -554,6 +672,7 @@
             }
           }
           form {
+            margin-top: 150px;
             padding-bottom: 44px;
               input{
                 padding: 0 0 0 18px;
@@ -664,10 +783,12 @@
             }
             span{
               display: inline-block;
-              margin: 15px 0 140px 0;
               font-size: 14px;
               color: #8b8b8b;
             }
+            span.close-tip{
+              margin: 15px 0 140px 0;
+            }
             .close-btn{
               margin: 0 auto;
               width: 200px;