76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<div class="help-center">
|
|
<div class="category-list">
|
|
<div
|
|
v-for="cat in categoryList"
|
|
:key="cat.id"
|
|
:class="['category-item', { active: selectedCategoryId === cat.id }]"
|
|
@click="selectCategory(cat.id)"
|
|
>
|
|
{{ cat.name }}
|
|
</div>
|
|
</div>
|
|
<div class="document-list">
|
|
<div
|
|
v-for="doc in documentList"
|
|
:key="doc.id"
|
|
class="document-item"
|
|
@click="goToDetail(doc.id)"
|
|
>
|
|
<span class="doc-title">{{ doc.title }}</span>
|
|
<span class="doc-date">{{ doc.createTime }}</span>
|
|
</div>
|
|
<div v-if="documentList.length === 0" class="empty">暂无文档</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/pages/index/api/help';
|
|
|
|
export default {
|
|
name: 'HelpCenter',
|
|
data() {
|
|
return {
|
|
categoryList: [],
|
|
selectedCategoryId: null,
|
|
documentList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadCategoryList()
|
|
this.loadDocumentList()
|
|
},
|
|
methods: {
|
|
async loadCategoryList() {
|
|
const res = await api.getCategoryList()
|
|
this.categoryList = res.data
|
|
},
|
|
async loadDocumentList() {
|
|
const res = await api.getDocumentList({ status: 1 })
|
|
this.documentList = res.data
|
|
},
|
|
async selectCategory(categoryId) {
|
|
this.selectedCategoryId = categoryId
|
|
const res = await api.getDocumentList({ categoryId, status: 1 })
|
|
this.documentList = res.data
|
|
},
|
|
goToDetail(id) {
|
|
this.$router.push(`/help/${id}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.help-center { padding: 20px; }
|
|
.category-list { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
|
|
.category-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; background: #f5f5f5; }
|
|
.category-item.active { background: #0052d9; color: #fff; }
|
|
.document-list { display: flex; flex-direction: column; gap: 10px; }
|
|
.document-item { padding: 12px; border: 1px solid #e5e5e5; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; }
|
|
.document-item:hover { background: #f5f5f5; }
|
|
.doc-title { font-size: 14px; }
|
|
.doc-date { font-size: 12px; color: #999; }
|
|
.empty { text-align: center; padding: 40px; color: #999; }
|
|
</style> |