小调整

src/App.vue

@@ -9,25 +9,13 @@
     :class="{ 'white-down-md': state.bgWhite }"
     :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
   >
-    <!-- <router-view
+    <router-view
       :key="$route.fullPath"
       :class="[
         'main-wrapper',
         { 'main-wrapper-fluid': $route.path === '/invite' },
       ]"
-    /> -->
-    <router-view v-slot="{ Component }">
-      <suspense>
-        <component
-          :is="Component"
-          :key="$route.fullPath"
-          :class="[
-            'main-wrapper',
-            { 'main-wrapper-fluid': $route.path === '/invite' },
-          ]"
-        />
-      </suspense>
-    </router-view>
+    />
   </div>
   <PageFooter v-if="$route.path !== '/'" />
 
@@ -44,8 +32,8 @@
     <li><router-link to="/pay-result/success">支付成功</router-link></li>
     <li><router-link to="/pay-result/fail">支付失败</router-link></li>
     <li><router-link to="/imei/bind">绑定IMEI</router-link></li>
-    <li><router-link to="/appointment">维修预约</router-link></li>
-    <li><router-link to="/appointment-list">维修记录</router-link></li>
+    <li><router-link to="/repaire/appointment">维修预约</router-link></li>
+    <li><router-link to="/repaire/history">维修记录</router-link></li>
     <li><router-link to="/invite">邀请好友</router-link></li>
   </ul>
 </template>
@@ -77,7 +65,11 @@ onMounted(getLocation)
   background: #f7f7f7;
   overflow: hidden;
   &:first-child {
-    background: lightblue;
+    background: $primary-color url(@img/bg-sm.png) no-repeat;
+    background-size: contain;
+    @include media-breakpoint-up(md) {
+      background: lightblue;
+    }
   }
   &.white-down-md {
     @include media-breakpoint-down(md) {

src/components/nav-bar/index.vue

@@ -19,7 +19,9 @@
           <div class="nav-menu-body">
             <ul class="nav-links-inner">
               <li class="nav-link">
-                <router-link to="/appointment">REPAIR BOOKING</router-link>
+                <router-link to="/repaire/appointment"
+                  >REPAIR BOOKING</router-link
+                >
               </li>
               <li class="nav-link">
                 <router-link to="/fill-order">ONLINE SHOP</router-link>
@@ -95,9 +97,7 @@
           </div>
           <ul class="dropdown-list">
             <li class="dropdown-item">
-              <router-link to="/appointment-list"
-                >MY REPAIR REQUEST</router-link
-              >
+              <router-link to="/repaire/history">MY REPAIR REQUEST</router-link>
             </li>
             <li class="dropdown-item">
               <router-link to="/order">MY ORDER</router-link>

src/pages/appointment/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-appointment" :class="{ step0: state.step === 0 }">
+  <div class="p-repaire" :class="{ step0: state.step === 0 }">
     <component :is="Component" />
   </div>
 </template>
@@ -7,16 +7,16 @@
 <script setup lang="ts">
 import { computed, watch, onUnmounted } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
-import StepOne from './StepOne.vue'
-import StepTwo from './StepTwo.vue'
-import StepThree from './StepThree.vue'
-import StepFour from './StepFour.vue'
-import StepFive from './StepFive.vue'
+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, StepFour, StepFive][state.step]
+  () => [StepOne, StepTwo, StepThree, StepFive][state.step]
 )
 const fromPath = history.state.back
 const { query } = useRoute()
@@ -38,7 +38,7 @@ watch(
   () => state.step,
   () => {
     window.scrollTo(0, 0)
-    rootState.bgWhite = state.step === 4
+    rootState.bgWhite = state.step === 3
   }
 )
 </script>

src/pages/appointment/records.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-appointment">
+  <div class="p-repaire">
     <h3 class="ptc-title">Confirm appointment</h3>
     <div v-for="item of list" :key="item.id" class="ptc-block wrapper">
       <div class="inner">

src/pages/appointment/index.scss

@@ -1,4 +1,4 @@
-.p-appointment {
+.p-repaire {
   .search-wrap {
     display: flex;
     height: 88px;
@@ -23,7 +23,7 @@
   .search-suggestions {
     @include media-breakpoint-down(md) {
       + .shop-wrap {
-        display: none;
+        display: none !important;
       }
     }
     @include media-breakpoint-up(md) {

src/pages/appointment/StepFive.vue

@@ -63,5 +63,5 @@
 </template>
 
 <script setup lang="ts">
-import { state } from './store'
+import { state } from '../store'
 </script>

src/pages/appointment/StepFour.vue

@@ -54,5 +54,5 @@
 </template>
 
 <script setup lang="ts">
-import { state } from './store'
+import { state } from '../store'
 </script>

src/pages/appointment/StepOne.vue

@@ -56,7 +56,7 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { state } from './store'
+import { state } from '../store'
 import { getShopList } from '@/service/repair'
 import getLocation from '@/utils/getLocation'
 import InfiniteList from '@/components/infinite-list/index.vue'

src/pages/appointment/StepThree.vue

@@ -50,7 +50,7 @@
     </div>
     <div class="ptc-button-group">
       <div class="ptc-inner">
-        <button class="ptc-button" @click="state.step++">CONTINUE</button>
+        <button class="ptc-button" @click="state.step++">SUBMIT</button>
       </div>
     </div>
   </div>
@@ -58,7 +58,7 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { state } from './store'
+import { state } from '../store'
 import { getRepairPhone } from '@/service/repair'
 
 onMounted(async () => {

src/pages/appointment/StepTwo.vue

@@ -63,7 +63,7 @@
 import { watch } from 'vue'
 import dayjs from 'dayjs'
 import { PtcRadioGroup, PtcRadio } from '@/components/radio'
-import { state } from './store'
+import { state } from '../store'
 import { getShopPeriods } from '@/service/repair'
 
 const nex7Days = (function getNext7Days() {

src/router.ts

@@ -44,14 +44,14 @@ const router = createRouter({
       component: () => import('./pages/my-order/index.vue'),
     },
     {
-      path: '/gift-card',
-      component: () => import('./pages/gift-card/index.vue'),
-    },
-    {
       path: '/order/:id',
       component: () => import('./pages/benefits/index.vue'),
     },
     {
+      path: '/gift-card',
+      component: () => import('./pages/gift-card/index.vue'),
+    },
+    {
       path: '/mailing',
       component: () => import('./pages/mailing/index.vue'),
     },
@@ -61,13 +61,13 @@ const router = createRouter({
       props: true,
     },
     {
-      path: '/appointment',
-      component: () => import('./pages/appointment/index.vue'),
+      path: '/repaire/appointment',
+      component: () => import('./pages/repaire/appointment.vue'),
       props: true,
     },
     {
-      path: '/appointment-list',
-      component: () => import('./pages/appointment/records.vue'),
+      path: '/repaire/history',
+      component: () => import('./pages/repaire/history.vue'),
     },
     {
       path: '/invite',