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

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

<script setup lang="ts">
import { computed, watch, onMounted, 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'
import { getRepairInfo } from '@/service/repair'

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)

onMounted(async () => {
  if (id) {
    const res = (await getRepairInfo(+id)).results
    state.phoneNumber = res.phone_number
    state.remark = res.remark
  }
})
onUnmounted(() => resetState())

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

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