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

src/views/MianView.vue

@@ -39,6 +39,7 @@ async function fetchTotolNotificate() {
     })
 }
 
+const statusLoad = ref<boolean>(false)
 /** function เรียกข้อมุลแจ้งเตือน */
 async function fetchNotifications(index: number, type: string) {
   await http
@@ -63,7 +64,7 @@ async function fetchNotifications(index: number, type: string) {
         })
       })
       notiList.value.push(...list)
-      totalNotiList.value = res.data.result.total
+      statusLoad.value = totalNotiList.value === 0 ? true : false
     })
     .catch((err) => {
       messageError($q, err)
@@ -202,7 +203,7 @@ onMounted(async () => {
             anchor="bottom middle"
             self="top middle"
             class="q-mx-lg q-mt-xl"
-            style="height: 500px; width: 480px"
+            style="width: 480px"
           >
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
@@ -211,7 +212,7 @@ onMounted(async () => {
                 ทั้งหมด {{ totalNotiList }} ข้อความ
               </div>
             </div>
-            <q-infinite-scroll @load="onLoad">
+            <q-infinite-scroll @load="onLoad" v-if="statusLoad === false">
               <div
                 v-for="(item, index) in notiList"
                 :key="index"
@@ -282,6 +283,19 @@ onMounted(async () => {
                 </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>
         <q-btn