sso-ssr/pages/validation/emailValidation.vue

<template>
  <div>
    <template v-if="isMobile">
      <validationEmail-stepSelect v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
      <validationEmail-stepMobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
      <validationEmail-stepEmail v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
      <validationEmail-stepSecurity v-if="step === 'questions'" @stepEvent="setStep" @tokenEvent="loadToken"/>
      <validationEmail-stepNew v-if="step === 'new'" @stepEvent="setStep" :tokenId="tokenId"/>
      <validationEmail-stepSuccess v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep" @lastEvent="setStepLast"/>
    </template>
    <template v-else>
      <accountCenter-header/>
      <email-stepSelect v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
      <email-stepMobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
      <email-stepEmail v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
      <email-stepSecurity v-if="step === 'questions'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
      <email-stepNew v-if="step === 'new'" @stepEvent="setStep" :tokenId="tokenId"/>
      <email-stepSuccess v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
    </template>
  </div>
</template>
<script>
  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
  import { EmailStepSelect, EmailStepMobile, EmailStepEmail, EmailStepSecurity, EmailStepNew, EmailStepSuccess } from '~components/validation'
  import {ValidationEmailStepSelect, ValidationEmailStepMobile, ValidationEmailStepEmail, ValidationEmailStepSecurity, ValidationEmailStepNew, ValidationEmailStepSuccess, StepAppeal} from '~components/mobile/validation'
  export default {
    layout (content) {
      return content.store.state.option.isMobile ? 'mobile' : 'default'
    },
    transition: {
      name: 'fade',
      mode: 'out-in'
    },
    data () {
      return {
        step: 'select',
        info: '',
        tokenId: '',
        stepLast: 'last'
      }
    },
    components: {
      AccountCenterHeader,
      EmailStepSelect,
      EmailStepMobile,
      EmailStepEmail,
      EmailStepSecurity,
      EmailStepNew,
      EmailStepSuccess,
      ValidationEmailStepSelect,
      ValidationEmailStepMobile,
      ValidationEmailStepEmail,
      ValidationEmailStepSecurity,
      ValidationEmailStepNew,
      ValidationEmailStepSuccess,
      StepAppeal
    },
    mounted () {
      if (this.$route.query.token) {
        if (this.$route.query.step === '2') {
          this.step = 'new'
        }
        if (this.$route.query.step === '3') {
          this.step = 'last'
          this.stepLast = 'last'
        }
      } else {
        if (this.logged && this.logged.isLogin) {
          this.step = 'select'
        } else {
          this.$router.push('/')
        }
      }
    },
    computed: {
      logged () {
        return this.$store.state.option.isLogin.data.content
      },
      isMobile () {
        return this.$store.state.option.isMobile
      }
    },
    methods: {
      setStepLast (type) {
        this.stepLast = type
      },
      setStep (step) {
        this.step = step
      },
      setInfo (info) {
        this.info = info
      },
      loadToken (token) {
        this.tokenId = token
      }
    }
  }
</script>