移动设置密保页面

assets/scss/mobileCommon.scss

@@ -268,7 +268,7 @@
   font-size: .4rem;
 }
 .phone-btn-blank span.upload {
-  margin-left: .4rem;
+  margin-left: .15rem;
   line-height: .94rem;
   font-size: .32rem;
   color: #c9c9c9;
@@ -330,3 +330,15 @@
 .el-checkbox__input.is-checked+.el-checkbox__label {
   color: #a1a1a1;
 }
+
+//下拉选择框
+
+.page-part select{
+  padding-left: .22rem;
+  width: 100%;
+  height: 48px;
+  border: 1px solid #b5b5b5;
+  appearance:none;
+  -moz-appearance:none; /* Firefox */
+  -webkit-appearance:none; /* Safari 和 Chrome */
+}

components/mobile/encryptedSetting/StepEmail.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>设置密保</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <span>使用电子邮箱 <strong>{{info | hide}}</strong> 进行验证，有效期7天</span>
+      </div>
+      <div class="page-part">
+        <mt-button :disabled="hasSend" size="large"
+                   type="primary"
+                   @click="sureAccount()"
+                   v-text="secretEmail">发送验证请求</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-email',
+    props: ['info'],
+    data () {
+      return {
+        secretEmail: '发送验证请求',
+        hasSend: false
+      }
+    },
+    filters: {
+      hide: function (value) {
+        let getEmailIndex = value.indexOf('@')
+        if (getEmailIndex > 3) {
+          let len = value.substring(3, getEmailIndex)
+          value = value.replace(len, '***')
+        }
+        return value
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 发送邮件
+      sureAccount () {
+        this.$indicator.open('发送过程中...')
+        this.$http.get(`/update/user/check/email`, {params: {email: this.info, operate: 'question'}})
+          .then(response => {
+            this.$indicator.close()
+            if (response.data.success) {
+              this.hasSend = true
+              this.secretEmail = '已发送验证邮件，请查收'
+            } else {
+              this.hasSend = false
+              this.downToast(response.data.errMsg)
+            }
+          }).catch(() => {
+            this.$indicator.close()
+            this.downToast('请检查网络是否正常或联系服务商')
+          })
+      }
+    }
+  }
+</script>

components/mobile/encryptedSetting/StepMobile.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>设置密保</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <span>使用手机号<strong>{{info | hide}}</strong>接收验证码</span>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="code"
+                  :state="state.code"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount">下一步</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-mobile',
+    props: ['info'],
+    data () {
+      return {
+        state: {
+          code: 'error'
+        },
+        code: '',
+        tokenCode: '',
+        tokenText: '获取验证码',
+        tokenTime: '60'
+      }
+    },
+    filters: {
+      hide: function (value) {
+        let reg = /^(\d{3})\d{6}(\d{2})$/
+        return value.replace(reg, '$1******$2')
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证码验证
+      validateCode () {
+        if (!this.code) {
+          this.downToast('请填写验证码信息')
+          this.state.code = 'error'
+        } else {
+          let param = new FormData()
+          param.append('mobile', this.info)
+          param.append('code', this.code)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/update/user/checkCode/mobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.state.code = 'success'
+              } else {
+                this.state.code = 'error'
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.downToast(err.errMsg)
+            })
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          this.$indicator.open('获取中...')
+          let _this = this
+          this.$http.get('/update/user/check/mobile', {params: {mobile: this.info}})
+            .then(response => {
+              this.$indicator.close()
+              if (response.data) {
+                this.tokenCode = response.data.content.token
+                this.$toast({
+                  message: '验证码已经发送到您的手机，请注意查收',
+                  iconClass: 'el-icon-success'
+                })
+                this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                let setTime = setInterval(() => {
+                  _this.tokenTime--
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  if (this.tokenTime <= 0) {
+                    clearInterval(setTime)
+                    _this.tokenText = '获取验证码'
+                    _this.tokenTime = 60
+                  }
+                }, 1000)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      },
+      // 验证信息
+      sureAccount () {
+        if (this.state.code !== 'success') {
+          this.downToast('请确认填写是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('mobile', this.info)
+          param.append('code', this.code)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/update/user/check/mobile', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', 'new')
+                this.$emit('tokenEvent', response.data.content)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/encryptedSetting/StepNew.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>设置密保</p>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <select v-model="selectedQ1">
+          <option disabled value=''>问题一</option>
+          <option v-for="question1 in questionOne" v-bind:value="question1">{{question1}}</option>
+        </select>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="答案一"
+                  v-model="valid.answer1"
+                  :state="state.answer1"
+                  @blur.native.capture="validateAnswer1"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <select v-model="selectedQ2">
+          <option disabled value=''>问题二</option>
+          <option v-for="question2 in questionTwo" v-bind:value="question2">{{question2}}</option>
+        </select>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="答案二"
+                  v-model="valid.answer2"
+                  :state="state.answer2"
+                  @blur.native.capture="validateAnswer2"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('success')">提 交</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-one',
+    props: ['tokenId'],
+    data () {
+      return {
+        state: {
+          answer1: 'error',
+          answer2: 'error'
+        },
+        valid: {
+          answer1: '',
+          answer2: ''
+        },
+        questionOne: [],
+        questionTwo: [],
+        selectedQ1: '',
+        selectedQ2: ''
+      }
+    },
+    mounted () {
+//      获取密保问题
+      this.$http.get('/data/question.json').then(response => {
+        this.questionOne = response.data.questionOne
+        this.questionTwo = response.data.questionTwo
+      })
+    },
+    methods: {
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证密保问题1
+      validateAnswer1 () {
+        if (!this.selectedQ1) {
+          this.downToast('请先选择密保问题')
+        } else {
+          if (!this.valid.answer1) {
+            this.downToast('请填写密保答案')
+            this.state.answer1 = 'error'
+          } else {
+            this.state.answer1 = 'success'
+          }
+        }
+      },
+      // 验证密保问题2
+      validateAnswer2 () {
+        if (!this.selectedQ2) {
+          this.downToast('请先选择密保问题')
+        } else {
+          if (!this.valid.answer2) {
+            this.downToast('请填写密保答案')
+            this.state.answer2 = 'error'
+          } else {
+            this.state.answer2 = 'success'
+          }
+        }
+      },
+      sureAccount (type) {
+        if (this.state.answer1 !== 'success' ||
+          this.state.answer1 !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          let userQuestion = []
+          userQuestion.push({'question': this.selectedQ1, 'answer': this.valid.answer1, 'sort': '1'}, {'question': this.selectedQ2, 'answer': this.valid.answer2, 'sort': '2'})
+          let userQuestions = JSON.stringify(userQuestion)
+          param.append('userQuestions', userQuestions)
+          param.append('token', this.tokenId ? this.tokenId : this.$route.query.token)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/update/user/setQuestion', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/encryptedSetting/StepSelect.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>设置密保</p>
+    </div>
+    <div>
+      <ul class="select-item">
+        <li class="item" @click="jump('mobile')" v-if="hasMobile">
+          <img src="/images/all/icon01.png">
+          <span>通过验证手机</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('email')" v-if="hasEmail">
+          <img src="/images/all/icon02.png">
+          <span>通过验证邮箱</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+      </ul>
+    </div>
+    <!--未验证手机弹出框-->
+    <div v-show="goValidPhone">
+      <el-dialog class="valid-phone"
+                 :visible.sync="goValidPhone"
+                 @close="goValidPhoneStep"
+                 size="tiny">
+        <div class="set-tip">
+          <p>您的账号未验证手机，请先验证手机号</p>
+          <a href="/validation/phoneValidation">确定</a>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-select',
+    data () {
+      return {
+        goValidPhone: false,
+        hasMobile: false,
+        hasEmail: false,
+        mobile: '',
+        email: ''
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+        if (type === 'mobile') {
+          this.$emit('setDataEvent', this.mobile)
+        } else if (type === 'email') {
+          this.$emit('setDataEvent', this.email)
+        }
+      },
+      // 获取验证方式
+      getVerifyWay () {
+        this.$http.get('/update/user/checkType')
+          .then(response => {
+            if (response.data.success) {
+              if (response.data.content.mobile) {
+                this.mobile = response.data.content.mobile
+                this.hasMobile = true
+              } else {
+                this.goValidPhone = true
+                this.hasMobile = false
+              }
+              if (response.data.content.email) {
+                this.hasEmail = true
+                this.email = response.data.content.email
+              }
+            }
+          }).catch(err => {
+            console.log(err)
+          })
+      },
+      goValidPhoneStep () {
+        this.$router.push({ path: '/validation/phoneValidation' })
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+  .select-item {
+    padding-top:.5rem;
+    .item {
+      position:relative;
+      padding-left:.4rem;
+      margin-bottom:.2rem;
+      line-height: 1.5rem;
+      background: #f4f4f4;
+      font-size: .32rem;
+      span{
+        color:#505050;
+        margin-left:.4rem;
+      }
+      i{
+        display:inline-block;
+        position:absolute;
+        right:.4rem;
+        line-height: 1.5rem;
+        font-size:.45rem;
+
+      }
+    }
+  }
+</style>

components/mobile/encryptedSetting/StepSuccess.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="f-main">
+    <template>
+      <div class="content-top">
+        <p>设置密保</p>
+      </div>
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>重置成功</span></h4>
+        <p>及时更新电子邮箱能极大地提高账号安全性！</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount()">完 成</mt-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-success',
+    methods: {
+      sureAccount () {
+        this.$router.push('/cloudcenter')
+      }
+    }
+  }
+</script>

components/mobile/encryptedSetting/index.js

@@ -0,0 +1,7 @@
+import StepSelect from './StepSelect.vue'
+import StepMobile from './StepMobile.vue'
+import StepEmail from './StepEmail.vue'
+import StepNew from './StepNew.vue'
+import StepSuccess from './StepSuccess.vue'
+
+export {StepSelect, StepMobile, StepEmail, StepNew, StepSuccess}

pages/encrypted-setting/encryptedSetting.vue

@@ -1,17 +1,65 @@
 <template>
   <div>
-    <accountCenter-header/>
-    <encrypted-setting/>
+    <template v-if="isMobile">
+      <step-select v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
+      <step-mobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
+      <step-email v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
+      <step-new v-if="step === 'new'" @stepEvent="setStep" :tokenId="tokenId"/>
+      <step-success v-if="step === 'success'"/>
+    </template>
+    <template v-else>
+      <accountCenter-header/>
+      <encrypted-setting/>
+    </template>
   </div>
 </template>
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import EncryptedSetting from '~components/encrypted-setting/EncryptedSetting.vue'
+  import {StepSelect, StepMobile, StepEmail, StepNew, StepSuccess} from '~components/mobile/encryptedSetting'
   export default {
-    layout: 'default',
+    layout (content) {
+      return content.store.state.option.isMobile ? 'mobile' : 'default'
+    },
+    transition: {
+      name: 'fade',
+      mode: 'out-in'
+    },
+    middleware: 'authenticated',
+    data () {
+      return {
+        step: 'select',
+        info: '',
+        tokenId: ''
+      }
+    },
     components: {
       AccountCenterHeader,
-      EncryptedSetting
+      EncryptedSetting,
+      StepSelect,
+      StepMobile,
+      StepEmail,
+      StepNew,
+      StepSuccess
+    },
+    mounted () {
+      this.$route.query.token ? this.step = 'new' : this.step = 'select'
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+    },
+    methods: {
+      setStep (step) {
+        this.step = step
+      },
+      setInfo (info) {
+        this.info = info
+      },
+      loadToken (token) {
+        this.tokenId = token
+      }
     }
   }
 </script>

pages/encrypted-setting/encryptedSettingSecondStep.vue

@@ -12,6 +12,11 @@
     components: {
       AccountCenterHeader,
       EncryptedSettingSecondStep
+    },
+    mounted () {
+      if (this.$store.state.option.isMobile) {
+        this.$router.push('/encrypted-setting/encryptedSetting?token=' + this.$route.query.token)
+      }
     }
   }
 </script>

pages/validation/emailValidation.vue

@@ -57,7 +57,6 @@
       } else {
         if (this.$route.query.step === '2') {
           this.step = 'new'
-          console.log('new')
         } else if (this.$route.query.step === '3') {
           this.step = 'last'
           this.stepLast = 'last'