移动页面验证手机

components/mobile/validation/ValidationPhoneStepSelect.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>验证手机</p>
+    </div>
+    <div>
+      <ul class="select-item">
+        <li class="item" @click="jump('mobile')">
+          <img src="/images/all/icon03.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/icon01.png">
+          <span>通过验证邮箱</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('question')">
+          <img src="/images/all/icon02.png">
+          <span>通过验证密保</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('appeal')">
+          <img src="/images/all/icon04.png">
+          <i></i><span>通过人工申诉</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-two',
+    data () {
+      return {
+        hasEmail: false
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 获取验证方式
+      getVerifyWay () {
+        this.$http.get('/sso/resetPwd/checkType/' + (this.$store.state.option.isLogin.data.content.isLogin ? 'update' : 'reset'))
+          .then(response => {
+            if (response.data.success) {
+              console.log(response.data)
+              if (response.data.content.email) {
+                this.hasEmail = true
+              }
+            }
+          }).catch(err => {
+          console.log(err)
+        })
+      }
+    }
+  }
+</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/validation/index.js

@@ -0,0 +1,11 @@
+import ValidationPhoneStepSelect from './ValidationPhoneStepSelect.vue'
+import StepSelect from './stepSelect.vue'
+import StepBefore from './stepBefore.vue'
+import StepMobile from './stepMobile.vue'
+import StepEmail from './stepEmail.vue'
+import StepAppeal from './stepAppeal.vue'
+import StepNew from './stepNew.vue'
+import StepSecurity from './stepSecurity .vue'
+import StepLast from './stepLast.vue'
+
+export {ValidationPhoneStepSelect, StepSelect, StepBefore, StepMobile, StepEmail, StepAppeal, StepNew, StepSecurity, StepLast}

pages/validation/phoneValidation.vue

@@ -1,17 +1,35 @@
 <template>
   <div>
-    <accountCenter-header/>
-    <phone-validation/>
+    <template v-if="isMobile">
+      <validationPhone-stepSelect v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
+    </template>
+    <template v-else>
+      <accountCenter-header/>
+      <phone-validation/>
+    </template>
   </div>
 </template>
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import PhoneValidation from '~components/validation/PhoneValidation.vue'
+  import {ValidationPhoneStepSelect} from '~components/mobile/reset'
   export default {
-    layout: 'default',
+    layout (context) {
+      return context.store.state.option.isMobile ? 'mobile' : 'default'
+    },
+    transition: {
+      name: 'fade',
+      mode: 'out-in'
+    },
     components: {
       AccountCenterHeader,
-      PhoneValidation
+      PhoneValidation,
+      ValidationPhoneStepSelect
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
     }
   }
 </script>