Cheng Zhou
79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<div class="page">
|
|
<el-card v-loading="loading">
|
|
<div class="header">
|
|
<div>
|
|
<h3>{{ item?.question }}</h3>
|
|
<el-tag size="small">{{ item?.version ? "v" + item.version : "" }}</el-tag>
|
|
</div>
|
|
<div>
|
|
<el-tag type="info">{{ categoryName }}</el-tag>
|
|
<el-tag :type="item?.is_active ? 'success' : 'info'" class="ml-8">
|
|
{{ item?.is_active ? "启用" : "停用" }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-divider />
|
|
<div class="content">
|
|
<pre>{{ item?.answer }}</pre>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
import { fetchFaqItem, fetchFaqCategories } from "../api/faqs";
|
|
|
|
const route = useRoute();
|
|
const item = ref<any>(null);
|
|
const loading = ref(false);
|
|
const categories = ref<any[]>([]);
|
|
|
|
const categoryName = computed(() => {
|
|
const cat = categories.value.find((c) => c.id === item.value?.category_id);
|
|
return cat ? cat.name : item.value?.category_id;
|
|
});
|
|
|
|
const loadData = async () => {
|
|
const id = route.params.itemId as string;
|
|
loading.value = true;
|
|
try {
|
|
const [{ data: catData }, { data: faqData }] = await Promise.all([
|
|
fetchFaqCategories(),
|
|
fetchFaqItem(id),
|
|
]);
|
|
categories.value = catData.items || catData || [];
|
|
item.value = faqData;
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.response?.data?.message || "加载失败");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
padding: 16px;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.content {
|
|
white-space: pre-wrap;
|
|
line-height: 1.6;
|
|
}
|
|
.ml-8 {
|
|
margin-left: 8px;
|
|
}
|
|
</style>
|