细节完善

src/components/toast/Toast.vue

@@ -82,12 +82,12 @@ watch(() => props.message, reset)
   z-index: 9999;
 
   @include media-breakpoint-up(md) {
-    top: 15%;
-    transform: translate(-50%, 0);
+    // top: 15%;
+    // transform: translate(-50%, 0);
     max-width: 800px;
-    background-color: #dbe8ff;
-    color: $primary-color;
-    box-shadow: $toast-shadow;
+    // background-color: #dbe8ff;
+    // color: $primary-color;
+    // box-shadow: $toast-shadow;
   }
 
   &--loading {
@@ -109,18 +109,18 @@ watch(() => props.message, reset)
 
 .toast-in {
   animation: fadeIn 0.3s;
-  @include media-breakpoint-up(md) {
-    animation: slideFadeIn 0.3s;
-  }
+  // @include media-breakpoint-up(md) {
+  //   animation: slideFadeIn 0.3s;
+  // }
 }
 .toast-out {
   animation: fadeOut 0.3s forwards;
 }
 
-@keyframes slideFadeIn {
-  0% {
-    transform: translate(-50%, -40px);
-    opacity: 0;
-  }
-}
+// @keyframes slideFadeIn {
+//   0% {
+//     transform: translate(-50%, -40px);
+//     opacity: 0;
+//   }
+// }
 </style>

src/pages/fill-order/StepThree.vue

@@ -40,7 +40,9 @@
       </div>
       <div class="ptc-button-group">
         <div class="ptc-inner">
-          <button class="ptc-button" @click="submit">SUBMIT</button>
+          <button class="ptc-button" :loading="loading" @click="submit">
+            SUBMIT
+          </button>
         </div>
       </div>
     </div>
@@ -48,6 +50,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { string } from 'yup'
 import { state, getters } from './store'
 import { state as rootState } from '@/store'
@@ -58,7 +61,10 @@ defineEmits<{
   (e: 'go', delta?: number): void
 }>()
 
+const loading = ref(false)
+
 async function submit() {
+  loading.value = true
   try {
     const schema = string().email('Please enter a valid email address')
     if (!rootState.userInfo) schema.required('Email is required')
@@ -68,6 +74,7 @@ async function submit() {
   } catch (err) {
     Toast(err.message)
   }
+  loading.value = false
 }
 </script>
 

src/pages/mailing/index.vue

@@ -66,7 +66,7 @@
       <div class="ptc-wrapper">
         <div class="ptc-block">
           <div class="ptc-inner">
-            <div class="title">Merchandise：{{ right_name }} (1)</div>
+            <div class="title">Merchandise：{{ right_name }}</div>
             <div class="info">
               <div class="cell">
                 <span class="cell__label">Name:</span>
@@ -85,7 +85,10 @@
         </div>
         <div class="ptc-button-group">
           <div class="ptc-inner">
-            <button class="ptc-button ptc-button--stroke" @click="step--">
+            <button
+              class="ptc-button ptc-button--stroke"
+              @click="$router.back()"
+            >
               BACK
             </button>
           </div>
@@ -100,10 +103,15 @@ import { reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { applyPost } from '@/service/order'
 import Toast from '@/components/toast'
+import { state } from '@/store'
 
 const { right_id, right_name } = useRoute().query
 const step = ref(0)
-const form: any = reactive({ address: [] })
+const form: any = reactive({
+  post_name: state.userInfo?.name,
+  post_phone: state.userInfo?.mobile,
+  address: [],
+})
 
 watch(step, () => window.scrollTo(0, 0))
 

src/pages/repaire/steps/StepThree.vue

@@ -52,7 +52,7 @@
     </div>
     <div class="ptc-button-group">
       <div class="ptc-inner">
-        <button class="ptc-button ptc-button--loading" @click="onSubmit">
+        <button class="ptc-button" :loading="loading" @click="onSubmit">
           SUBMIT
         </button>
       </div>
@@ -74,6 +74,7 @@ onMounted(async () => {
 })
 
 const submitted = ref(false)
+const loading = ref(false)
 
 function onSubmit() {
   submit().then(next)
@@ -81,7 +82,10 @@ function onSubmit() {
 
 async function submit() {
   if (submitted.value) return
-  if (!state.phoneNumber) return Toast('Please enter your phone number')
+  if (!state.phoneNumber) {
+    Toast('Please enter your phone number')
+    return Promise.reject()
+  }
   const commonParams = {
     igeektek_id: state.shop.igeektek_id,
     pickup_time: state.date + ' ' + state.period,
@@ -91,6 +95,8 @@ async function submit() {
   const request = state.repairId
     ? api.rescheduleRepair({ id: state.repairId, ...commonParams })
     : api.applyRepair({ right_id: state.rightId, ...commonParams })
+  loading.value = true
+  request.finally(() => (loading.value = false))
   const { results } = await request
   state.repairId = results
   submitted.value = true

src/style/components.scss

@@ -82,16 +82,16 @@
     }
   }
 
-  &--loading {
+  &[loading=true] {
     pointer-events: none;
     opacity: 0.75;
     position: relative;
     &::before {
       content: '';
-      margin-right: 8px;
-      margin-top: -4px;
-      animation: rotate 2s linear infinite;
-      @include icon('@img/loading2.svg', 48px);
+      position: absolute;
+      right: 24px;
+      animation: rotate 1s ease-in-out infinite;
+      @include icon('@img/loading.svg', 40px);
     }
   }
 }