loading/empty

src/views/courseCenter/components/ResourceList.vue

@@ -4,7 +4,7 @@
 			<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>
+					<span style="font-weight: bold; font-size: 20px" class="ml-2">共计 {{ total }} 个资源</span>
 				</div>
 
 				<div style="width: 20px"></div>
@@ -68,7 +68,10 @@
 		</a-row>
 
 		<div style="height: 20px"></div>
-		<div style="display: flex; width: 100%; align-items: center; justify-content: center">
+		<a-spin :spinning="spinning">
+			<a-empty v-if="resources.length <= 0" />
+		</a-spin>
+		<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"
@@ -76,7 +79,6 @@
 				@change="onChange"
 			/>
 		</div>
-		<div style="height: 20px"></div>
 	</div>
 </template>
 
@@ -102,6 +104,7 @@
 	})
 	const searchKeyword = ref('')
 	const resources = ref([])
+	const spinning = ref(false)
 	const selectTab = (key) => {
 		if (key == 'latest') {
 			tabKey.value = 0
@@ -134,6 +137,7 @@
 	}
 
 	const getList = () => {
+		spinning.value = true
 		list({ ...currentPage, ...queryData.value })
 			.then(async (res) => {
 				if (res.code == 200) {
@@ -154,6 +158,9 @@
 			.catch((err) => {
 				console.log(err)
 			})
+			.finally(() => {
+				spinning.value = false
+			})
 	}
 
 	const upLoadList = (data) => {

src/views/student/classCollect/index.vue

@@ -47,7 +47,14 @@
 				</a-card>
 			</a-col>
 		</a-row>
-		<div style="display: flex; width: 100%; align-items: center; justify-content: center" class="mt-4">
+		<a-spin :spinning="spinning">
+			<a-empty v-if="listData.length <= 0" />
+		</a-spin>
+		<div
+			style="display: flex; width: 100%; align-items: center; justify-content: center"
+			class="mt-4"
+			v-if="listData.length > 0"
+		>
 			<a-pagination
 				v-model:current="pagination.current"
 				v-model:pageSize="pagination.size"
@@ -64,12 +71,14 @@
 	import sysConfig from '@/config/index'
 	const router = useRouter()
 	const listData = ref([])
+	const spinning = ref(false)
 	const pagination = ref({
 		current: 1,
 		pageSize: 10,
 		total: 0
 	})
 	const getList = () => {
+		spinning.value = true
 		classCentre
 			.classCollectList({
 				current: pagination.value.current,
@@ -89,6 +98,9 @@
 				listData.value = data.records
 				pagination.value.total = data.total
 			})
+			.finally(() => {
+				spinning.value = false
+			})
 	}
 	const onChange = (page, pageSize) => {
 		pagination.value.current = page