loading/empty

src/views/resourceCenter/components/ResourceList.vue

@@ -3,8 +3,8 @@
 		<div class="list-header">
 			<div style="display: flex">
 				<div style="display: flex; justify-content: center; align-items: center">
-					<a-image :width="24" :src="allResource" :preview="false"/>
-					<span style="font-weight: bold;font-size: 20px;" class="ml-2">共计 {{ total }} 个资源</span>
+					<a-image :width="24" :src="allResource" :preview="false" />
+					<span style="font-weight: bold; font-size: 20px" class="ml-2">共计 {{ total }} 个资源</span>
 				</div>
 				<div style="width: 20px"></div>
 				<TabSwitcher @selectTab="selectTab" />
@@ -83,9 +83,12 @@
 					</a-card>
 				</a-col>
 			</a-row>
+			<a-spin :spinning="spinning">
+				<a-empty v-if="resources.length <= 0" />
+			</a-spin>
 		</a-spin>
 		<div style="height: 20px"></div>
-		<div style="display: flex; width: 100%; align-items: center; justify-content: center">
+		<div style="display: flex; width: 100%; align-items: center; justify-content: center" v-if="resources.length > 0">
 			<a-pagination
 				v-model:current="currentPage.current"
 				v-model:pageSize="currentPage.size"
@@ -116,22 +119,9 @@
 		sortflag: tabKey
 	})
 	const searchKeyword = ref('')
-	const resources = ref([
-		// { id: 1, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 2, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 3, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 4, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 5, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 6, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 7, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 8, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 9, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 10, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 11, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
-		// { id: 12, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 }
-		// 更多数据...
-	])
+	const resources = ref([])
 	const timeArr = ref()
+	const spinning = ref(false)
 	const dateChange = (e, d) => {
 		currentPage.startTime = d[0]
 		currentPage.endTime = d[1]
@@ -160,10 +150,6 @@
 		getList()
 	}
 
-	// watch(currentPage.value.current, (newValue) => {
-	// 	// getList()
-	// })
-
 	const getList = () => {
 		loading.value = true
 		list({ ...currentPage, ...queryData.value })
@@ -179,6 +165,9 @@
 				console.log(err)
 				loading.value = false
 			})
+			.finally(() => {
+				spinning.value = false
+			})
 	}
 
 	const upLoadList = (data) => {