sso-ssr/components/mobile/reset/stepSelect.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
    </div>
    <div>
      <ul class="select-item">
        <li class="item" @click="jump('before')" v-if="$store.state.option.isLogin.data.content.isLogin">
          <img src="/images/all/icon03.png">
          <span>通过登录密码</span>
          <i class="fa fa-angle-right second"></i>
        </li>
        <li class="item" @click="jump('mobile')">
          <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>
        <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,
        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('/sso/resetPwd/checkType/' + (this.$store.state.option.isLogin.data.content.isLogin ? 'update' : 'reset'))
          .then(response => {
            if (response.data.success) {
              this.mobile = response.data.content.mobile
              if (response.data.content.email) {
                this.hasEmail = true
                this.email = response.data.content.email
              }
            }
          }).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>