แสดงการแจ้งเตือน

src/views/MainLayout.vue

@@ -51,6 +51,7 @@ async function fetchTotolNotificate() {
     });
 }
 
+const statusLoad = ref<boolean>(false);
 const fetchlistNotification = async (index: number, type: string) => {
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${15}`)
@@ -75,8 +76,7 @@ const fetchlistNotification = async (index: number, type: string) => {
         });
       });
       notiList.value.push(...list);
-
-      totalInbox.value = res.data.result.total;
+      statusLoad.value = totalInbox.value === 0 ? true : false;
     })
     .catch((err) => {
       console.log(err);
@@ -238,7 +238,11 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
                 ทั้งหมด {{ totalInbox }} ข้อความ
               </div>
             </div>
-            <q-infinite-scroll @load="onLoad" :offset="250">
+            <q-infinite-scroll
+              @load="onLoad"
+              :offset="250"
+              v-if="statusLoad === false"
+            >
               <div
                 v-for="(item, index) in notiList"
                 :key="index"
@@ -309,6 +313,19 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
                 </div>
               </template>
             </q-infinite-scroll>
+            <div class="q-pa-md" v-else>
+              <q-banner rounded class="bg-amber-1 text-center">
+                <div class="text-yellow-10">
+                  <q-icon
+                    name="mdi-alert-box"
+                    class="q-mx-xs"
+                    size="sm"
+                    color="yellow-10"
+                  />
+                  ไมมีข้อมูล
+                </div>
+              </q-banner>
+            </div>
           </q-menu>
         </q-btn>