loading/empty

src/views/resourceCenter/components/Correlation.vue

@@ -8,6 +8,9 @@
 					<span style="color: #1890ff">课程</span>
 				</div>
 			</div>
+			<a-spin :spinning="spinning">
+				<a-empty v-if="recommendations.length <= 0" />
+			</a-spin>
 			<div
 				v-for="(item, index) in recommendations"
 				:key="index"
@@ -64,19 +67,18 @@
 		size: 6
 	})
 	const recommendations = ref([])
+	const spinning = ref(false)
 	const getList = () => {
+		spinning.value = true
 		list(currentPage)
 			.then((res) => {
 				if (res.code == 200) {
 					recommendations.value = res.data.records
 					currentPage.current = res.data.current
-					// "size": 20,
-					//                 "current": 1,
-					//   "pages": 1
 				}
 			})
-			.catch((err) => {
-				console.log(err)
+			.finally(() => {
+				spinning.value = false
 			})
 	}
 	onMounted(() => {

src/views/resourceCenter/components/SidebarRecommend.vue

@@ -8,6 +8,9 @@
 					<span style="color: #1890ff">推荐</span>
 				</div>
 			</div>
+			<a-spin :spinning="spinning">
+				<a-empty v-if="recommendations.length <= 0" />
+			</a-spin>
 			<div
 				v-for="(item, index) in recommendations"
 				:key="index"
@@ -20,8 +23,8 @@
 					:style="{
 						backgroundSize: 'cover',
 						backgroundPosition: 'center',
-						borderRadius:'4px',
-						overflow:'hidden',
+						borderRadius: '4px',
+						overflow: 'hidden',
 						backgroundImage:
 							'url(' +
 							(item.coverImagePath != '' && sysConfig.FILE_URL + item.coverImagePath
@@ -30,7 +33,7 @@
 							')'
 					}"
 				></div>
-				<div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px;flex:1;">
+				<div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 10px; flex: 1">
 					<span style="font-weight: bold; margin-top: 5px" class="single-line">{{ item.fileName }}</span>
 					<div style="display: flex; justify-content: space-between; align-items: space-between">
 						<div style="display: flex; justify-content: center; align-items: center">
@@ -63,30 +66,22 @@
 		current: 1,
 		size: 6
 	})
-	const recommendations = ref([
-		// { id: '1', title: '资源名称', time: '05-22', look: '10000' },
-		// { id: '2', title: '资源名称', time: '05-22', look: '10000' },
-		// { id: '3', title: '资源名称', time: '05-22', look: '10000' },
-		// { id: '4', title: '资源名称', time: '05-22', look: '10000' },
-		// { id: '5', title: '资源名称', time: '05-22', look: '10000' },
-		// { id: '6', title: '资源名称', time: '05-22', look: '10000' }
-	])
+	const recommendations = ref([])
+	const spinning = ref(false)
 
 	// 更多数据...
 
 	const getList = () => {
+		spinning.value = true
 		list(currentPage)
 			.then((res) => {
 				if (res.code == 200) {
 					recommendations.value = res.data.records
 					currentPage.current = res.data.current
-					// "size": 20,
-					//                 "current": 1,
-					//   "pages": 1
 				}
 			})
-			.catch((err) => {
-				console.log(err)
+			.finally(() => {
+				spinning.value = false
 			})
 	}
 

src/views/resourceDetails/components/TallList.vue

@@ -3,7 +3,7 @@
 		<a-card class="flex-3 mr-3">
 			<div class="tallList">
 				<div>
-					<span style="font-weight: bold;">发表评论</span>
+					<span style="font-weight: bold">发表评论</span>
 					<span class="tallListInfo ml-3">文明上网理性发言,请遵守评论服务协议</span>
 				</div>
 				<div class="mt-3">
@@ -40,6 +40,9 @@
 					<span style="font-size: 20px; font-weight: bold">同类型资源</span>
 				</div>
 				<div style="display: flex; flex-direction: column; padding: 10px">
+					<a-spin :spinning="spinning">
+						<a-empty v-if="equalList.length <= 0" />
+					</a-spin>
 					<EqualItem
 						v-for="(item, index) in equalList"
 						:key="index"
@@ -80,7 +83,7 @@
 		current: 1,
 		size: 6
 	})
-
+	const spinning = ref(false)
 	const emit = defineEmits(['selectTab'])
 	const tabKey = ref(0)
 	const total = ref(0)
@@ -98,7 +101,6 @@
 	const getList = () => {
 		list(currentPage)
 			.then((res) => {
-				console.log('下面列表获取', res)
 				if (res.code == 200) {
 					equalList.value = res.data.records
 					currentPage.current = res.data.current
@@ -161,6 +163,7 @@
 	}
 
 	const getPageCommentNew = (data) => {
+		spinning.value = true
 		list({ ...currentPage, ...data })
 			.then((res) => {
 				if (res.code == 200) {
@@ -171,6 +174,9 @@
 			.catch((err) => {
 				console.log(err)
 			})
+			.finally(() => {
+				spinning.value = false
+			})
 	}
 	const onGetPageCommentNew = (data) => {
 		getPageCommentNew(data)