Bläddra i källkod

feat: 我收到的日志加loading

qiny 1 år sedan
förälder
incheckning
889899c2e8
1 ändrade filer med 16 tillägg och 0 borttagningar
  1. 16 0
      client_h5/src/pages/myLogs/Daily/MyLogs.vue

+ 16 - 0
client_h5/src/pages/myLogs/Daily/MyLogs.vue

@@ -1,5 +1,8 @@
 <template>
 <template>
   <div class="log-calendar">
   <div class="log-calendar">
+    <div class="loading-container" v-if="loading">
+      <van-loading size="24px" />
+    </div>
     <van-calendar
     <van-calendar
       title="手机端仅能查看近三个月内填报情况"
       title="手机端仅能查看近三个月内填报情况"
       :show-title="true"
       :show-title="true"
@@ -11,6 +14,7 @@
       :formatter="formatter"
       :formatter="formatter"
       @confirm="jumpDetail"
       @confirm="jumpDetail"
       :show-subtitle="false"
       :show-subtitle="false"
+      v-if="!loading"
     />
     />
   </div>
   </div>
 </template>
 </template>
@@ -20,6 +24,9 @@ import { http } from "../http";
 /**
 /**
  * @description 日报详情
  * @description 日报详情
  */
  */
+
+const loading = ref(false);
+
 // 限制日期范围
 // 限制日期范围
 const minDate = moment().subtract(2, "months").startOf("month").toDate();
 const minDate = moment().subtract(2, "months").startOf("month").toDate();
 const maxDate = moment().toDate();
 const maxDate = moment().toDate();
@@ -27,6 +34,7 @@ const maxDate = moment().toDate();
 const logObj = ref<any>({});
 const logObj = ref<any>({});
 const dayOfWorkObj = ref<any>({});
 const dayOfWorkObj = ref<any>({});
 onMounted(async () => {
 onMounted(async () => {
+  loading.value = true;
   const logList = await http.getLogList("daily");
   const logList = await http.getLogList("daily");
 
 
   logList.map((item: any) => {
   logList.map((item: any) => {
@@ -45,6 +53,7 @@ onMounted(async () => {
       isWorkday: item.isworkday === 1 ? true : false,
       isWorkday: item.isworkday === 1 ? true : false,
     };
     };
   });
   });
+  loading.value = false;
 });
 });
 // 格式化日历
 // 格式化日历
 const formatter = (day: any) => {
 const formatter = (day: any) => {
@@ -118,4 +127,11 @@ const jumpDetail = (day: any) => {
 :deep(.not-fill) {
 :deep(.not-fill) {
   color: red;
   color: red;
 }
 }
+.loading-container {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
 </style>