sso-ssr/components/mobile/validation/ValidationPhoneStepSelect.vue

<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/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('question')" v-if="hasQuestion">
          <img src="/images/all/icon03.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-select',
    data () {
      return {
        hasEmail: false,
        hasQuestion: false
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getVerifyWay()
      })
    },
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      },
      // 获取验证方式
      getVerifyWay () {
        this.$http.get('/update/user/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
              }
              if (response.data.content.question) {
                this.hasQuestion = 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>