399 lines
10 KiB
Vue
399 lines
10 KiB
Vue
<template>
|
|
<div class="expert-detail-page">
|
|
<div class="mx-auto max-w-screen-xl px-4 py-8">
|
|
<a-breadcrumb class="mb-6">
|
|
<a-breadcrumb-item><NuxtLink to="/">首页</NuxtLink></a-breadcrumb-item>
|
|
<a-breadcrumb-item><NuxtLink to="/expert">专家库</NuxtLink></a-breadcrumb-item>
|
|
<a-breadcrumb-item>专家详情</a-breadcrumb-item>
|
|
</a-breadcrumb>
|
|
|
|
<div v-if="loading">
|
|
<a-skeleton active avatar :paragraph="{ rows: 6 }" />
|
|
</div>
|
|
|
|
<div v-else-if="!expert.expertId">
|
|
<a-result status="404" title="专家不存在" sub-title="您查找的专家不存在或尚未通过审核" />
|
|
</div>
|
|
|
|
<div v-else>
|
|
<a-row :gutter="[32, 24]">
|
|
<a-col :xs="24" :lg="7">
|
|
<div class="expert-card">
|
|
<div class="expert-avatar-wrapper">
|
|
<img v-if="expert.avatar" :src="expert.avatar" :alt="expert.name" class="expert-avatar" />
|
|
<div v-else class="expert-avatar-placeholder">{{ expert.name?.charAt(0) }}</div>
|
|
</div>
|
|
<h2 class="expert-name">{{ expert.name }}</h2>
|
|
<div class="expert-title-tag">{{ expert.title || '未填写职称/职务' }}</div>
|
|
<div class="expert-org">{{ expert.organization || '未填写工作单位' }}</div>
|
|
|
|
<div class="expert-info-list">
|
|
<div class="info-item" v-if="expert.researchArea">
|
|
<span class="info-label">研究领域</span>
|
|
<span class="info-value">{{ expert.researchArea }}</span>
|
|
</div>
|
|
<div class="info-item" v-if="expert.education">
|
|
<span class="info-label">学历</span>
|
|
<span class="info-value">{{ expert.education }}</span>
|
|
</div>
|
|
<div class="info-item" v-if="expert.joinTime">
|
|
<span class="info-label">入库时间</span>
|
|
<span class="info-value">{{ expert.joinTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a-button type="primary" block size="large" class="mt-4" @click="handleConsult">
|
|
预约咨询
|
|
</a-button>
|
|
</div>
|
|
</a-col>
|
|
|
|
<a-col :xs="24" :lg="17">
|
|
<div class="expert-content-card">
|
|
<a-tabs v-model:active-key="activeTab">
|
|
<a-tab-pane key="intro" tab="专家简介">
|
|
<div class="tab-content">
|
|
<h3 class="section-title">个人简介</h3>
|
|
<p class="intro-text">{{ expert.introduction || '暂无简介' }}</p>
|
|
|
|
<h3 class="section-title mt-6">荣誉奖项</h3>
|
|
<div v-if="expert.honors?.length" class="honors-grid">
|
|
<div v-for="(honor, idx) in expert.honors" :key="idx" class="honor-item">
|
|
<span class="honor-icon">🏆</span>
|
|
<span>{{ honor }}</span>
|
|
</div>
|
|
</div>
|
|
<a-empty v-else description="暂无荣誉奖项" />
|
|
</div>
|
|
</a-tab-pane>
|
|
|
|
<a-tab-pane key="articles" tab="专家文章">
|
|
<div class="tab-content">
|
|
<div v-if="expertArticles.length === 0" class="empty-state">
|
|
<a-empty description="暂无相关文章" />
|
|
</div>
|
|
<div class="article-list">
|
|
<div
|
|
v-for="item in expertArticles"
|
|
:key="item.id"
|
|
class="article-item"
|
|
@click="goArticle(item)"
|
|
>
|
|
<div class="article-thumb" v-if="item.image">
|
|
<img :src="item.image" :alt="item.title" />
|
|
</div>
|
|
<div class="article-info">
|
|
<h4 class="article-title">{{ item.title }}</h4>
|
|
<p class="article-overview">{{ item.overview }}</p>
|
|
<span class="article-date">{{ item.date }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
|
|
<a-tab-pane key="research" tab="研究成果">
|
|
<div class="tab-content">
|
|
<div v-if="expert.researchResults?.length">
|
|
<div v-for="(result, idx) in expert.researchResults" :key="idx" class="research-item">
|
|
<span class="research-year">{{ result.year || '-' }}</span>
|
|
<div class="research-content">
|
|
<h4>{{ result.title || '未命名成果' }}</h4>
|
|
<p>{{ result.description || '暂无描述' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="achievementFiles.length" class="attachment-list">
|
|
<a v-for="(file, idx) in achievementFiles" :key="idx" :href="file" target="_blank" rel="noreferrer">
|
|
📎 {{ fileNameOf(file) }}
|
|
</a>
|
|
</div>
|
|
<a-empty v-else description="暂无研究成果" />
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { message } from 'ant-design-vue'
|
|
import { getSiteExpert, pageSiteArticles, type SiteExpert } from '@/api/site'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const expertId = computed(() => route.params.id as string)
|
|
|
|
const loading = ref(true)
|
|
const activeTab = ref('intro')
|
|
const expert = ref<SiteExpert | Record<string, never>>({})
|
|
const expertArticles = ref<Array<{ id: number; title: string; overview: string; date: string; image?: string }>>([])
|
|
|
|
const achievementFiles = computed(() => {
|
|
const value = (expert.value as SiteExpert).achievements
|
|
return Array.isArray(value) ? value : []
|
|
})
|
|
|
|
useHead({
|
|
title: computed(() => `${(expert.value as SiteExpert)?.name || '专家详情'} - 决策咨询网`),
|
|
})
|
|
|
|
function fileNameOf(url: string) {
|
|
const parts = url.split('/')
|
|
return decodeURIComponent(parts[parts.length - 1] || url)
|
|
}
|
|
|
|
async function loadExpert() {
|
|
loading.value = true
|
|
try {
|
|
const data = await getSiteExpert(expertId.value)
|
|
expert.value = data
|
|
|
|
const articlePage = await pageSiteArticles({
|
|
page: 1,
|
|
limit: 6,
|
|
category: 'expert',
|
|
keywords: data.name,
|
|
})
|
|
expertArticles.value = (articlePage.list || []).map((item) => ({
|
|
id: item.articleId || item.id,
|
|
title: item.title,
|
|
overview: item.overview || '暂无摘要',
|
|
date: item.publishTime || item.createTime || '',
|
|
image: item.image,
|
|
}))
|
|
} catch (e: unknown) {
|
|
expert.value = {}
|
|
expertArticles.value = []
|
|
message.error(e instanceof Error ? e.message : '加载失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function handleConsult() {
|
|
message.info('请先联系我们预约咨询服务')
|
|
}
|
|
|
|
function goArticle(item: { id: number }) {
|
|
router.push(`/article/${item.id}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadExpert()
|
|
})
|
|
|
|
watch(expertId, () => {
|
|
loadExpert()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.expert-detail-page {
|
|
background: #f5f7fa;
|
|
min-height: 60vh;
|
|
}
|
|
|
|
.expert-card {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 32px 24px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
position: sticky;
|
|
top: 80px;
|
|
}
|
|
|
|
.expert-avatar-wrapper {
|
|
margin: 0 auto 16px;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.expert-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid #e8f0fe;
|
|
}
|
|
|
|
.expert-avatar-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #1e3a5f, #3498db);
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.expert-name {
|
|
margin: 0 0 8px;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.expert-title-tag {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
background: #eff6ff;
|
|
color: #2563eb;
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.expert-org {
|
|
color: #6b7280;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.expert-info-list {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.info-label {
|
|
color: #64748b;
|
|
}
|
|
|
|
.info-value {
|
|
color: #1f2937;
|
|
text-align: right;
|
|
}
|
|
|
|
.expert-content-card {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.intro-text {
|
|
color: #475569;
|
|
line-height: 1.9;
|
|
margin: 0;
|
|
}
|
|
|
|
.honors-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.honor-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.honor-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.article-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.article-item {
|
|
display: flex;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.article-thumb img {
|
|
width: 120px;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.article-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.article-title {
|
|
margin: 0 0 8px;
|
|
color: #1f2937;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.article-overview {
|
|
margin: 0 0 8px;
|
|
color: #6b7280;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.article-date {
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.research-item {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr;
|
|
gap: 16px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px dashed #e5e7eb;
|
|
}
|
|
|
|
.research-year {
|
|
color: #2563eb;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.research-content h4 {
|
|
margin: 0 0 8px;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.research-content p {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.attachment-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.attachment-list a {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 28px 0;
|
|
}
|
|
</style>
|