123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <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>
|