feat: 给详情页加上加载动画

src/api/index.ts

@@ -1,6 +1,7 @@
 import * as booking from './module/booking'
 import * as tracking from './module/tracking'
 import * as common from './module/common'
+import * as login from './module/login'
 /**
  * api 对象接口定义
  */
@@ -15,7 +16,8 @@ function generateApiMap(maps: any) {
 const apis = generateApiMap({
   ...booking,
   ...tracking,
-  ...common
+  ...common,
+  ...login
 })
 export default {
   ...apis // 取出所有可遍历属性赋值在新的对象上

src/api/module/login.ts

@@ -0,0 +1,18 @@
+import HttpAxios from '@/utils/axios'
+
+const baseUrl = 'http://localhost/api/Customer_Service_Online/login.php'
+
+/**
+ * Tracking首页表格列数据
+ */
+export const login = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'login',
+      operate: 'do_login',
+      ...params
+    },
+    config
+  )
+}

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -61,7 +61,9 @@ const handleDraggable = (type: string, id: number) => {
 }
 
 const allData = ref()
+const loading = ref(false)
 const getData = () => {
+  loading.value = true
   $api
     .getBookingDetail({
       status: 'Confirmed',
@@ -74,6 +76,9 @@ const getData = () => {
         allData.value = res.data
       }
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 getData()
 
@@ -83,7 +88,7 @@ const formatTime = (time: string) => {
 </script>
 
 <template>
-  <div class="booking-detail">
+  <div class="booking-detail" v-vloading="loading">
     <div class="header">
       <div class="detail-status">
         <span class="font_family icon-icon_ocean_b" style="font-size: 64px"></span>

src/views/Layout/src/components/Header/HeaderView.vue

@@ -40,8 +40,8 @@ const handleLogin = () => {
         placeholder="Search a reference number to see shipment details"
         :prefix-icon="Search"
       />
-      <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
-      <span class="font_family icon-icon_language_b" style="font-size: 16px"></span>
+      <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
+      <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
 
       <el-popover
         placement="bottom-end"

src/views/Login/src/loginView.vue

@@ -125,7 +125,7 @@ const errorTipsRef = ref()
     </el-card>
     <el-card class="login-card" v-else>
       <div class="title">
-        <span class="welcome"> Reset Password</span>
+        <span class="welcome">Password Retrieval</span>
         <span class="tips">We'll send you new password in email</span>
       </div>
       <div class="login-form">

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -79,7 +79,9 @@ const handleAMSISF = () => {
 }
 
 const allData = ref()
+const loading = ref(false)
 const getData = () => {
+  loading.value = true
   $api
     .getTrackingDetail({
       status: 'Confirmed',
@@ -93,6 +95,9 @@ const getData = () => {
         allData.value = res.data
       }
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 getData()
 
@@ -102,7 +107,7 @@ const formatTime = (time: string) => {
 </script>
 
 <template>
-  <div class="tracking-detail">
+  <div class="tracking-detail" v-vloading="loading">
     <div class="header">
       <div class="detail-status">
         <span class="font_family icon-icon_ocean_b" style="font-size: 64px"></span>