12345678910111213141516171819202122232425262728293031323334353637 |
- <template>
- <div class="p-repair" :class="{ step0: state.step === 0 }">
- <component :is="Component" />
- </div>
- </template>
- <script setup lang="ts">
- import { computed, watch, onUnmounted } from 'vue'
- import { 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 { id, right_id } = useRoute().query as any
- id && (state.repairId = id)
- right_id && (state.rightId = right_id)
- onUnmounted(() => resetState())
- watch(
- () => state.step,
- () => {
- window.scrollTo(0, 0)
- rootState.bgWhite = state.step === 3
- }
- )
- </script>
- <style lang="scss" src="./index.scss"></style>
|