sso-ssr/pages/reset/forgetPasswordValidationAccount.vue

<template>
  <div>
    <template v-if="isMobile">
      <step-first v-if="step === 'first'" @stepEvent="setStep"/>
      <step-select v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
      <step-before v-if="step === 'before'" @stepEvent="setStep"/>
      <step-email v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
      <step-mobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep" @lastEvent="setStepLast"/>
      <step-security v-if="step === 'security'" @stepEvent="setStep" :tokenId="tokenId"/>
      <step-new v-if="step === 'new'" @stepEvent="setStep" @lastEvent="setStepLast" :stepLast="stepLast" :tokenId="tokenId"/>
      <step-Last v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
    </template>
    <template v-else>
      <accountCenter-header/>
      <forgetPassword-validationAccount/>
    </template>
  </div>
</template>
<script>
  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
  import ForgetPasswordValidationAccount from '~components/reset/ForgetPasswordValidationAccount.vue'
  import {StepFirst, StepSelect, StepBefore, StepEmail, StepMobile, StepAppeal, StepNew, StepSecurity, StepLast} from '~components/mobile/reset'
  export default {
    layout (context) {
      return context.store.state.option.isMobile ? 'mobile' : 'default'
    },
    transition: {
      name: 'fade',
      mode: 'out-in'
    },
    data () {
      return {
        step: 'first',
        stepLast: 'new',
        info: '',
        tokenId: ''
      }
    },
    components: {
      AccountCenterHeader,
      ForgetPasswordValidationAccount,
      StepFirst,
      StepSelect,
      StepNew,
      StepLast,
      StepSecurity,
      StepBefore,
      StepMobile,
      StepEmail,
      StepAppeal
    },
    mounted () {
      if (this.$route.query.token) {
        this.step = 'new'
      } else if (this.$store.state.option.isLogin.data.content.isLogin) {
        this.step = 'select'
      }
    },
    computed: {
      isMobile () {
        return this.$store.state.option.isMobile
      }
    },
    methods: {
      setStepLast (type) {
        this.stepLast = type
      },
      loadToken (type) {
        this.tokenId = type
      },
      setInfo (type) {
        this.info = type
      },
      setStep (type) {
        this.step = type
      }
    }
  }
</script>