vue-ptc/src/pages/repaire/appointment.vue

<template>
  <div class="p-repaire" :class="{ step0: state.step === 0 }">
    <component :is="Component" />
  </div>
</template>

<script setup lang="ts">
import { computed, watch, onUnmounted } from 'vue'
import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
import StepOne from './steps/StepOne.vue'
import StepTwo from './steps/StepTwo.vue'
import StepThree from './steps/StepThree.vue'
// import StepFour from './steps/StepFour.vue'
import StepFive from './steps/StepFive.vue'
import { state, resetState } from './store'
import { state as rootState } from '@/store'

const Component = computed(
  () => [StepOne, StepTwo, StepThree, StepFive][state.step]
)
const fromPath = history.state.back
const { id, right_id } = useRoute().query as any

id && (state.repairId = id)
right_id && (state.rightId = right_id)

onBeforeRouteLeave((to, from) => {
  if (to.path === fromPath && to.path !== '/' && state.step > 0) {
    state.step--
    return false
  } else {
    state.step = 0
  }
})

onUnmounted(() => resetState())

watch(
  () => state.step,
  () => {
    window.scrollTo(0, 0)
    rootState.bgWhite = state.step === 3
  }
)
</script>

<style lang="scss" src="./index.scss"></style>