92 lines
1.8 KiB
Vue
92 lines
1.8 KiB
Vue
<template>
|
|
<div class="content" v-loading.fullscreen.lock="fullscreenLoading">
|
|
<div class="tag-item" v-if="tagName">
|
|
{{tagName}}
|
|
</div>
|
|
<div class="item-card" v-if="toolList && toolList.length">
|
|
<div class="item" v-for="(item, index) in toolList" :key="index">
|
|
<ToolItemCard :config="item" :category-slug="category_slug" />
|
|
</div>
|
|
</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;
|
|
|
|
.item {
|
|
min-height: 110px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|