sso-ssr/components/mobile/validation/ValidationEmailStepSelect.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('questions')" 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 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 {
        hasEmail: false,
        hasQuestion: false,
        goValidPhone: false,
        mobile: '',
        email: '',
        questions: ''
      }
    },
    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
              } else {
                this.goValidPhone = true
              }
              if (response.data.content.email) {
                this.hasEmail = true
                this.email = response.data.content.email
              }
              if (response.data.content.questions) {
                this.hasQuestion = true
                this.questions = response.data.content.questions
              }
            }
          }).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>