对接数据

pages/Home/views/List.vue

@@ -0,0 +1,70 @@
+<template>
+	<div v-loading.fullscreen.lock="fullscreenLoading">
+		<div class="tool-list">
+			<ToolList :list="categoryList" @tool-selected="scrollToTool"></ToolList>
+		</div>
+		<div class="line">
+		</div>
+		<div class="toolbar" v-for="tool in toolsGroup">
+			<Toolbar :tool="tool" :id="`tool-${tool.categoryName}`" :category-slug="tool.categorySlug || ''"></Toolbar>
+		</div>
+	</div>
+</template>
+
+<script>
+import Toolbar from "../components/Toolbar.vue";
+import ToolList from "../components/ToolList.vue";
+
+export default {
+	components: {ToolList, Toolbar},
+	data() {
+		return {
+			fullscreenLoading: false,
+			categoryList: [],
+			toolsGroup: [],
+		}
+	},
+	methods: {
+		scrollToTool(toolName) {
+			const target = document.getElementById(`tool-${toolName}`)
+			if (target) {
+				target.scrollIntoView({
+					behavior: 'smooth',
+					block: 'start'
+				})
+			}
+		},
+		// 获取分类列表
+		async getCategoryAsyncData() {
+			const {data: res} = await this.$api.tool.getCategoryList();
+			const {code, data} = res;
+			if (code === 0 && data.list) {
+				this.categoryList = data.list;
+			}
+		},
+		// 获取分类分组的工具列表
+		async getToolsGroupAsyncData() {
+			const {data: res} = await this.$api.tool.getToolByCategory({limit: 8});
+			const {code, data} = res;
+			if (code === 0 && data.list) {
+				this.toolsGroup = data.list;
+			}
+		},
+		async onLoad() {
+			this.fullscreenLoading = true;
+			await this.getCategoryAsyncData();
+			await this.getToolsGroupAsyncData();
+			this.fullscreenLoading = false;
+		}
+	},
+	created() {
+		this.onLoad();
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.tool-list {
+	margin: 60px 0;
+}
+</style>

pages/Home/views/ViewMore.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="content" v-loading.fullscreen.lock="fullscreenLoading">
+		<div class="tag-item" v-if="tagName">
+			{{tagName}}
+		</div>
+		<div class="item-card">
+			<ToolItemCard v-for="(item, index) in toolList" :key="index" :config="item" :category-slug="category_slug" />
+		</div>
+	</div>
+</template>
+
+<script>
+import ToolItemCard from "~/pages/Home/components/ToolItemCard.vue";
+
+export default {
+	components: {
+		ToolItemCard,
+	},
+	data() {
+		return {
+			tagName: '',
+			toolList: [],
+			category_slug: '',
+			fullscreenLoading: false,
+		}
+	},
+	methods: {
+		// 按分类获取工具列表
+		async getToolsByTag(slug) {
+			if (slug) {
+				this.fullscreenLoading = true;
+				const params = {categorySlug: slug};
+				const {data: res} = await this.$api.tool.getToolsList(params);
+				const {code, data} = res;
+				if (code === 0 && data.list) {
+					this.toolList = data.list;
+				}
+				this.fullscreenLoading = false;
+			}
+		}
+	},
+	watch: {
+		// 监听路由变化
+		'$route'(to) {
+			const slug = to.query.category_slug;
+			if (slug) {
+				this.category_slug = slug;
+				this.getToolsByTag(slug);
+			}
+		}
+	},
+	mounted() {
+		// 组件挂载时也检查一次路由参数
+		const slug = this.$route.query.category_slug;
+		if (slug) {
+			this.category_slug = slug;
+			this.getToolsByTag(slug);
+		}
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.content {
+	padding-top: 60px;
+	padding-bottom: 100px;
+	.tag-item {
+		display: inline-block;
+		padding: 10px;
+		border-radius: 12px;
+		font-family: 'Poppins-SemiBold', sans-serif;
+		color: #fff;
+		font-weight: 600;
+		background: $header-backgroungd;
+	}
+	.item-card {
+		display: grid;
+		gap: 20px;
+		grid-template-columns: repeat(4, 1fr);
+		margin-top: 30px;
+
+		.card-caontainer {
+			background: #FFFFFF;
+			box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
+			border-radius: 8px;
+			padding: 16px;
+			border: 1px solid #E2E8F0;
+
+			.title {
+				display: flex;
+				align-items: center;
+
+				span {
+					color: $main-font-color;
+					font-size: $big-font-size;
+					font-weight: 600;
+					font-family: 'Poppins-SemiBold', serif;
+				}
+			}
+
+			.text {
+				color: $grey-color;
+				font-family: 'Poppins-Regular', serif;
+				// line-height: 30px;
+			}
+		}
+	}
+}
+</style>