对接数据

pages/AIHub/AITools.vue

@@ -1,125 +1,92 @@
 <template>
-	<div class="tools-container">
-		<div class="card" v-for="item in 6">
-			<div class="left">
-				<img src="" />
-			</div>
-			<div class="right">
-				<div>
-					<div class="title-text">
-						AI Diagnostic Tool Analyzes 10M+ Medical Images with 99.5% Accuracy
-					</div>
-					<div class="content-text">
-						Revolutionary AI system detects diseases from X-rays, MRIs, and CT scans using a database of 10
-						million annotated images, supporting early diagnosis in 150 countries.
-					</div>
-				</div>
-
-				<div class="bottom-info">
-					<div class="first">
-						<div>
-							<img src="/logo/logo_xs.png" />
-							<span>AI toolkit</span>
-						</div>
-
-						<div class="praise">
-							<img src="/logo/praise.png" />
-							<span>{{praise_count}}</span>
-						</div>
-					</div>
-
-					<div class="time">
-						<img src="/logo/clock.png" />
-						<span>2025-07-12</span>
-					</div>
-				</div>
-			</div>
+	<div class="tools-container" v-loading.fullscreen.lock="fullscreenLoading">
+		<div class="input">
+			<SearchInput v-model="searchText" placeholder="Please enter the key words" @search="handleTextSearch" />
 		</div>
-		<div>
+		<div class="list">
+			<ListCardItem v-for="it in articleList" :key="it.id" :item="it" type="tool" />
+		</div>
+		<div class="pagination-wrapper">
 			<Pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" />
-			
 		</div>
 	</div>
 </template>
 
 <script>
+	import ListCardItem from "@/pages/AIHub/components/ListCardItem.vue";
+
 	export default {
+		components: {
+			ListCardItem,
+		},
 		data() {
 			return {
-				praise_count: 12,
 				currentPage: 1,
-				totalPages: 10, // 假设总页数为 10
+				totalPages: 1,
+				pageSize: 10,
+				articleList: [],
+				searchText: '',
+				total: 0,
+				fullscreenLoading: false,
+			}
+		},
+		watch: {
+			total() {
+				this.calculateTotalPages();
+			},
+			pageSize() {
+				this.calculateTotalPages();
 			}
 		},
 		methods: {
+			// 模糊搜索
+			async handleTextSearch() {
+				await this.getArticleListData(this.currentPage, this.pageSize, this.searchText);
+			},
+			calculateTotalPages() {
+				// 否则向上取整计算总页数
+				this.totalPages = this.total === 0 ? 1 : Math.ceil(this.total / this.pageSize);
+			},
 			handlePageChange(pageNumber) {
 				this.currentPage = pageNumber;
-				
+				this.getArticleListData(pageNumber, this.pageSize);
 			},
+			// 获取文章列表
+			async getArticleListData(page = 1, limit = 10, searchText) {
+				const params = {page, limit, articleType: 'tool', title: searchText};
+				if (!searchText) {
+					delete params.title;
+				}
+				this.fullscreenLoading = true;
+				const {data: res} = await this.$api.article.getArticleList(params);
+				const {code, data} = res;
+				if (code === 0 && data.list) {
+					this.articleList = data.list;
+					this.total = data.total;
+					this.calculateTotalPages();
+				}
+				this.fullscreenLoading = false;
+			},
+		},
+		mounted() {
+			this.getArticleListData(this.currentPage, this.pageSize);
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.card {
-		background: $white;
-		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
-		border-radius: 12px;
-		padding: 40px 30px;
-		display: flex;
-		margin-bottom: 30px;
-		gap: 30px;
-	}
-
-	.left {
-		img {
-			width: 440px;
-			height: 220px;
-			border-radius: 6px;
-		}
-
-	}
-
-	.bottom-info,
-	.right {
-		display: flex;
-		justify-content: space-between;
-
-	}
-
-	.right {
-		flex-direction: column;
-
-		.title-text {
-			margin-bottom: 14px;
-			font-weight: 600;
-			font-size: $normal-font-size;
-			color: #3A4A65;
-		}
-
-		.content-text {
-			font-weight: 400;
-			font-size: $mid-font-size;
-			color: $grey-color;
-		}
-	}
-
-	.bottom-info {
-		color: #C8CFD7;
-		font-size: 15px;
-
-		.first {
-			width: 30%;
-			display: flex;
-			justify-content: space-between
-		}
-
-		img {
-			margin-right: 8px
-		}
-
-		div {
-			@include display-flex;
-		}
+.input {
+	display: flex;
+	justify-content: flex-end;
+	.input-container {
+		margin-top: 100px;
+		margin-bottom: 60px;
 	}
+}
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: 30px;
+	margin-bottom: 60px;
+}
 </style>