71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<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>
|