更新首页
This commit is contained in:
+120
-199
@@ -1,10 +1,9 @@
|
||||
<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><NuxtLink to="/expert">专家库</NuxtLink></a-breadcrumb-item>
|
||||
<a-breadcrumb-item>专家详情</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
||||
@@ -12,9 +11,12 @@
|
||||
<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">
|
||||
@@ -22,8 +24,8 @@
|
||||
<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-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">
|
||||
@@ -46,34 +48,29 @@
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 专家详情 -->
|
||||
<a-col :xs="24" :lg="17">
|
||||
<div class="expert-content-card">
|
||||
<a-tabs v-model:activeKey="activeTab">
|
||||
<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>
|
||||
<ul class="achievement-list">
|
||||
<li v-for="(item, idx) in expert.achievements" :key="idx">{{ item }}</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="section-title mt-6">荣誉奖项</h3>
|
||||
<div class="honors-grid">
|
||||
<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="暂无文章" />
|
||||
<a-empty description="暂无相关文章" />
|
||||
</div>
|
||||
<div class="article-list">
|
||||
<div
|
||||
@@ -97,15 +94,20 @@
|
||||
|
||||
<a-tab-pane key="research" tab="研究成果">
|
||||
<div class="tab-content">
|
||||
<div v-if="expert.researchResults && expert.researchResults.length">
|
||||
<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>
|
||||
<span class="research-year">{{ result.year || '-' }}</span>
|
||||
<div class="research-content">
|
||||
<h4>{{ result.title }}</h4>
|
||||
<p>{{ result.description }}</p>
|
||||
<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>
|
||||
@@ -120,6 +122,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getSiteExpert, pageSiteArticles, type SiteExpert } from '@/api/site'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -127,75 +130,46 @@ const expertId = computed(() => route.params.id as string)
|
||||
|
||||
const loading = ref(true)
|
||||
const activeTab = ref('intro')
|
||||
const expert = ref<any>({})
|
||||
const expertArticles = ref<any[]>([])
|
||||
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?.name || '专家详情'} - 决策咨询网`),
|
||||
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 {
|
||||
// TODO: 接入实际API
|
||||
expert.value = {
|
||||
id: expertId.value,
|
||||
name: '张教授',
|
||||
avatar: `https://picsum.photos/200/200?random=${expertId.value}`,
|
||||
title: '研究员/教授',
|
||||
organization: '广西社会科学院',
|
||||
researchArea: '区域经济、数字经济、产业政策',
|
||||
education: '经济学博士',
|
||||
joinTime: '2022-06-15',
|
||||
introduction: '张教授长期从事区域经济和产业政策研究，主持多项国家级和省部级科研项目，发表学术论文80余篇，著有《广西经济发展战略研究》等专著，是广西省级决策咨询委员会专家委员。',
|
||||
achievements: [
|
||||
'主持国家社科基金重点项目"面向东盟的广西产业协同发展研究"',
|
||||
'参与编制《广西"十四五"经济发展规划》',
|
||||
'提出"广西向海经济发展战略"并获省政府采纳',
|
||||
'为南宁、柳州、桂林等城市提供产业规划咨询服务',
|
||||
],
|
||||
honors: [
|
||||
'广西优秀专家',
|
||||
'省级社科研究成果一等奖',
|
||||
'国务院政府特殊津贴享受者',
|
||||
'广西"十百千"人才',
|
||||
],
|
||||
researchResults: [
|
||||
{
|
||||
year: '2024',
|
||||
title: '广西数字经济与传统产业融合研究',
|
||||
description: '发表于《经济学研究》，探讨数字技术赋能广西传统制造业转型升级路径。'
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
title: '面向东盟的广西跨境产业协同模式研究',
|
||||
description: '国家社科基金资助项目结项报告，构建"中国-东盟产业链合作新模式"理论框架。'
|
||||
},
|
||||
{
|
||||
year: '2022',
|
||||
title: '西部陆海新通道经济带产业布局优化',
|
||||
description: '广西社科规划重点课题，提出沿线城市产业差异化发展建议。'
|
||||
},
|
||||
]
|
||||
}
|
||||
expertArticles.value = [
|
||||
{
|
||||
id: 1,
|
||||
title: '张教授：关于广西产业升级的几点建议',
|
||||
overview: '从经济发展规律角度分析广西产业转型升级面临的机遇与挑战，提出针对性建议...',
|
||||
date: '2024-12-10',
|
||||
image: 'https://picsum.photos/120/80?random=1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '数字经济时代广西制造业高质量发展路径探析',
|
||||
overview: '以数字化转型为切入点，系统梳理广西制造业现状，提出差异化发展策略...',
|
||||
date: '2024-10-28',
|
||||
image: 'https://picsum.photos/120/80?random=2'
|
||||
}
|
||||
]
|
||||
} catch (e: any) {
|
||||
message.error('加载失败')
|
||||
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
|
||||
}
|
||||
@@ -205,13 +179,17 @@ function handleConsult() {
|
||||
message.info('请先联系我们预约咨询服务')
|
||||
}
|
||||
|
||||
function goArticle(item: any) {
|
||||
function goArticle(item: { id: number }) {
|
||||
router.push(`/article/${item.id}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadExpert()
|
||||
})
|
||||
|
||||
watch(expertId, () => {
|
||||
loadExpert()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -258,112 +236,87 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.expert-name {
|
||||
font-size: 24px;
|
||||
margin: 0 0 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.expert-title-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 16px;
|
||||
padding: 6px 16px;
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
font-size: 13px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 8px;
|
||||
color: #2563eb;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.expert-org {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.expert-info-list {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
text-align: left;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
width: 65px;
|
||||
flex-shrink: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
flex: 1;
|
||||
color: #1f2937;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.expert-content-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e3a5f;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #1e3a5f;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 15px;
|
||||
color: #4b5563;
|
||||
line-height: 2;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.achievement-list {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.achievement-list li {
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
line-height: 2;
|
||||
margin: 4px 0;
|
||||
color: #475569;
|
||||
line-height: 1.9;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.honors-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.honor-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fef3c7;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #92400e;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.honor-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
@@ -375,30 +328,14 @@ onMounted(() => {
|
||||
.article-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
background: #f9fafb;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
background: #eff6ff;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
width: 100px;
|
||||
height: 68px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.article-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
@@ -406,72 +343,56 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
color: #1f2937;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.4;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.article-overview {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.research-item {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.research-item:last-child {
|
||||
border-bottom: none;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px dashed #e5e7eb;
|
||||
}
|
||||
|
||||
.research-year {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: #1e3a5f;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.research-content h4 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
color: #1f2937;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.research-content p {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
color: #6b7280;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.attachment-list a {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 0;
|
||||
padding: 28px 0;
|
||||
}
|
||||
|
||||
.mt-4 { margin-top: 16px; }
|
||||
.mt-6 { margin-top: 24px; }
|
||||
</style>
|
||||
|
||||
+435
-86
@@ -1,103 +1,274 @@
|
||||
<template>
|
||||
<div class="expert-apply-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">专家申请</h1>
|
||||
<p class="page-desc">成为平台认证专家，展示研究成果，分享专业观点</p>
|
||||
<h1 class="page-title">专家申请备案</h1>
|
||||
<p class="page-desc">请按备案表要求填写个人信息并上传证明材料</p>
|
||||
</div>
|
||||
|
||||
<div class="apply-form-wrap">
|
||||
<a-steps :current="currentStep" class="steps-wrap">
|
||||
<a-step title="填写信息" />
|
||||
<a-step title="上传资料" />
|
||||
<a-step title="提交审核" />
|
||||
</a-steps>
|
||||
<div class="expert-apply-layout">
|
||||
<ExpertNavSidebar />
|
||||
|
||||
<div class="apply-form-wrap">
|
||||
<a-steps :current="currentStep" class="steps-wrap">
|
||||
<a-step title="填写信息" />
|
||||
<a-step title="上传材料" />
|
||||
<a-step title="确认提交" />
|
||||
</a-steps>
|
||||
|
||||
<a-form :model="formData" layout="vertical" class="apply-form">
|
||||
<div v-show="currentStep === 0">
|
||||
<h3 class="section-title">备案信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="姓名" required>
|
||||
<a-input v-model:value="formData.name" placeholder="请输入姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="出生日期">
|
||||
<a-date-picker v-model:value="formData.birthDate" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="性别">
|
||||
<a-select v-model:value="formData.gender" placeholder="请选择">
|
||||
<a-select-option value="男">男</a-select-option>
|
||||
<a-select-option value="女">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="apply-form"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div v-show="currentStep === 0">
|
||||
<h3 class="section-title">基本信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="姓名" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入您的姓名" />
|
||||
<a-col :span="8">
|
||||
<a-form-item label="民族">
|
||||
<a-select v-model:value="formData.ethnicity" placeholder="请选择民族">
|
||||
<a-select-option v-for="item in ethnicityOptions" :key="item" :value="item">
|
||||
{{ item }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="职称/职务" name="title">
|
||||
<a-input v-model:value="formData.title" placeholder="如：教授、研究员" />
|
||||
<a-col :span="8">
|
||||
<a-form-item label="政治面貌">
|
||||
<a-select v-model:value="formData.politicalStatus" placeholder="请选择政治面貌">
|
||||
<a-select-option v-for="item in politicalStatusOptions" :key="item" :value="item">
|
||||
{{ item }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="国籍">
|
||||
<a-select v-model:value="formData.nationality" placeholder="请选择国籍">
|
||||
<a-select-option v-for="item in nationalityOptions" :key="item" :value="item">
|
||||
{{ item }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="工作单位" name="organization">
|
||||
<a-input v-model:value="formData.organization" placeholder="请输入您的工作单位" />
|
||||
<a-col :span="8">
|
||||
<a-form-item label="文化程度">
|
||||
<a-select v-model:value="formData.education" placeholder="请选择文化程度">
|
||||
<a-select-option v-for="item in educationOptions" :key="item" :value="item">
|
||||
{{ item }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="研究领域" name="researchArea">
|
||||
<a-input v-model:value="formData.researchArea" placeholder="请输入您的研究领域" />
|
||||
<a-col :span="8">
|
||||
<a-form-item label="社团职务">
|
||||
<a-input v-model:value="formData.societyPosition" placeholder="请输入社团职务" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="社团专兼职">
|
||||
<a-radio-group v-model:value="formData.societyEmploymentType">
|
||||
<a-radio :value="0">专职</a-radio>
|
||||
<a-radio :value="1">兼职</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
<a-col :span="8">
|
||||
<a-form-item label="职称">
|
||||
<a-input v-model:value="formData.title" placeholder="请输入职称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系电话" name="phone">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="身份证号">
|
||||
<a-input v-model:value="formData.idCardNumber" placeholder="请输入身份证号" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="联系电话" required>
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="个人简介" name="bio">
|
||||
<a-textarea v-model:value="formData.bio" :rows="4" placeholder="请简要介绍您的学术背景和工作经历" />
|
||||
<a-form-item label="住址">
|
||||
<a-input v-model:value="formData.address" placeholder="请输入住址" />
|
||||
</a-form-item>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="工作单位">
|
||||
<a-input v-model:value="formData.organization" placeholder="请输入工作单位" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="工作职务">
|
||||
<a-input v-model:value="formData.workDuty" placeholder="请输入工作职务" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="其他社会职务">
|
||||
<a-input v-model:value="formData.otherSocialPosition" placeholder="请输入其他社会职务" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="研究领域">
|
||||
<a-input v-model:value="formData.researchArea" placeholder="请输入研究领域" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="担任其他社团职务">
|
||||
<a-radio-group v-model:value="formData.hasOtherSocietyPosition">
|
||||
<a-radio :value="0">否</a-radio>
|
||||
<a-radio :value="1">是</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="在职国家工作人员">
|
||||
<a-radio-group v-model:value="formData.isPublicServant">
|
||||
<a-radio :value="0">否</a-radio>
|
||||
<a-radio :value="1">是</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="离退休干部">
|
||||
<a-radio-group v-model:value="formData.isRetired">
|
||||
<a-radio :value="0">否</a-radio>
|
||||
<a-radio :value="1">是</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="工作单位类型">
|
||||
<a-select v-model:value="formData.unitType" placeholder="请选择">
|
||||
<a-select-option value="行政机关">行政机关</a-select-option>
|
||||
<a-select-option value="事业单位">事业单位</a-select-option>
|
||||
<a-select-option value="国有企业">国有企业</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="工作单位级别">
|
||||
<a-select v-model:value="formData.unitLevel" placeholder="请选择">
|
||||
<a-select-option value="省部级及以上">省部级及以上</a-select-option>
|
||||
<a-select-option value="地厅级">地厅级</a-select-option>
|
||||
<a-select-option value="县处级">县处级</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="邮箱">
|
||||
<a-input v-model:value="formData.email" placeholder="选填，便于联系" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="主要工作简历">
|
||||
<div class="experience-list">
|
||||
<div v-for="(item, index) in formData.workExperience" :key="index" class="experience-row">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="8">
|
||||
<a-input v-model:value="item.period" placeholder="何年月至何年月" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<a-input v-model:value="item.organization" placeholder="在何地何单位" />
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-button danger @click="removeWorkExperience(index)">删除</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-button block @click="addWorkExperience">新增一行</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="主要研究成果">
|
||||
<a-textarea
|
||||
v-model:value="formData.mainResearchAchievements"
|
||||
:rows="6"
|
||||
placeholder="请输入主要研究成果"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="个人简介">
|
||||
<a-textarea v-model:value="formData.bio" :rows="4" placeholder="可补充个人简介" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 上传资料 -->
|
||||
<div v-show="currentStep === 1">
|
||||
<h3 class="section-title">资质证明材料</h3>
|
||||
<p class="section-desc">请上传相关证明材料，以便我们审核您的专家资质</p>
|
||||
<h3 class="section-title">附件材料</h3>
|
||||
<p class="section-desc">请按备案表要求上传申请表及相关证明材料</p>
|
||||
|
||||
<a-form-item label="个人简历">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('resume')">
|
||||
<a-button><UploadOutlined /> 上传简历</a-button>
|
||||
<div class="materials-tip">
|
||||
<div>附件：身份证、学位证、职称证书，研究成果证明（课题合同、结题证书、获奖证书、其他证明）。</div>
|
||||
<a-button type="link" @click="navigateTo('/expert/downloads')">前往资料下载</a-button>
|
||||
</div>
|
||||
|
||||
<a-form-item label="专家申请备案表">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('applicationForm')">
|
||||
<a-button><UploadOutlined /> 上传备案表</a-button>
|
||||
</a-upload>
|
||||
<div class="upload-hint">支持 PDF、Word 格式，不超过 10MB</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="职称/学历证明">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('certificate')">
|
||||
<a-button><UploadOutlined /> 上传证明</a-button>
|
||||
<a-form-item label="身份证">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('idCard')">
|
||||
<a-button><UploadOutlined /> 上传身份证</a-button>
|
||||
</a-upload>
|
||||
<div class="upload-hint">支持 JPG、PNG、PDF 格式</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="研究成果或获奖证明">
|
||||
<a-form-item label="学位证">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('degreeCertificate')">
|
||||
<a-button><UploadOutlined /> 上传学位证</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="职称证书">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('titleCertificate')">
|
||||
<a-button><UploadOutlined /> 上传职称证书</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="研究成果证明">
|
||||
<a-upload multiple :before-upload="beforeUpload" :custom-request="handleUpload('achievements')">
|
||||
<a-button><UploadOutlined /> 上传材料</a-button>
|
||||
<a-button><UploadOutlined /> 上传证明材料</a-button>
|
||||
</a-upload>
|
||||
<div class="upload-hint">可上传多份材料</div>
|
||||
<div class="upload-hint">可上传多份材料，支持 PDF、Word、图片格式，不超过 10MB</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 确认提交 -->
|
||||
<div v-show="currentStep === 2" class="confirm-section">
|
||||
<a-result
|
||||
title="确认提交申请"
|
||||
sub-title="请确认您填写的信息和上传的材料准确无误"
|
||||
>
|
||||
<a-result title="确认提交申请" sub-title="请确认信息和材料准确无误">
|
||||
<template #icon>
|
||||
<CheckCircleOutlined style="font-size: 80px; color: #52c41a" />
|
||||
</template>
|
||||
@@ -109,43 +280,166 @@
|
||||
</a-result>
|
||||
</div>
|
||||
|
||||
<!-- 步骤按钮 -->
|
||||
<div class="step-actions">
|
||||
<a-button v-if="currentStep > 0" @click="currentStep--">上一步</a-button>
|
||||
<a-button v-if="currentStep < 2" type="primary" @click="handleNext">下一步</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
<div class="step-actions">
|
||||
<a-button v-if="currentStep > 0" @click="currentStep--">上一步</a-button>
|
||||
<a-button v-if="currentStep < 2" type="primary" @click="handleNext">下一步</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs, { type Dayjs } from 'dayjs'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
|
||||
import ExpertNavSidebar from '@/components/ExpertNavSidebar.vue'
|
||||
import { submitSiteExpertApplication, uploadSiteExpertFile } from '@/api/site'
|
||||
|
||||
useHead({ title: '专家申请 - 决策咨询网' })
|
||||
useHead({ title: '专家申请备案 - 决策咨询网' })
|
||||
|
||||
type UploadRequestOption = {
|
||||
file: File
|
||||
onSuccess: (response?: unknown) => void
|
||||
onError: (error?: unknown) => void
|
||||
}
|
||||
|
||||
type WorkExperienceItem = {
|
||||
period: string
|
||||
organization: string
|
||||
}
|
||||
|
||||
const currentStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
|
||||
const ethnicityOptions = [
|
||||
'汉族',
|
||||
'壮族',
|
||||
'满族',
|
||||
'回族',
|
||||
'苗族',
|
||||
'维吾尔族',
|
||||
'土家族',
|
||||
'彝族',
|
||||
'蒙古族',
|
||||
'藏族',
|
||||
'布依族',
|
||||
'侗族',
|
||||
'瑶族',
|
||||
'朝鲜族',
|
||||
'白族',
|
||||
'哈尼族',
|
||||
'哈萨克族',
|
||||
'黎族',
|
||||
'傣族',
|
||||
'畲族',
|
||||
'傈僳族',
|
||||
'仡佬族',
|
||||
'东乡族',
|
||||
'高山族',
|
||||
'拉祜族',
|
||||
'水族',
|
||||
'佤族',
|
||||
'纳西族',
|
||||
'羌族',
|
||||
'土族',
|
||||
'仫佬族',
|
||||
'锡伯族',
|
||||
'柯尔克孜族',
|
||||
'达斡尔族',
|
||||
'景颇族',
|
||||
'毛南族',
|
||||
'撒拉族',
|
||||
'布朗族',
|
||||
'塔吉克族',
|
||||
'阿昌族',
|
||||
'普米族',
|
||||
'鄂温克族',
|
||||
'怒族',
|
||||
'京族',
|
||||
'基诺族',
|
||||
'德昂族',
|
||||
'保安族',
|
||||
'俄罗斯族',
|
||||
'裕固族',
|
||||
'乌孜别克族',
|
||||
'门巴族',
|
||||
'鄂伦春族',
|
||||
'独龙族',
|
||||
'塔塔尔族',
|
||||
'赫哲族',
|
||||
'珞巴族'
|
||||
]
|
||||
|
||||
const politicalStatusOptions = [
|
||||
'中共党员',
|
||||
'中共预备党员',
|
||||
'共青团员',
|
||||
'民革党员',
|
||||
'民盟盟员',
|
||||
'民建会员',
|
||||
'民进会员',
|
||||
'农工党党员',
|
||||
'致公党党员',
|
||||
'九三学社社员',
|
||||
'台盟盟员',
|
||||
'无党派人士',
|
||||
'群众'
|
||||
]
|
||||
|
||||
const educationOptions = [
|
||||
'高中及以下',
|
||||
'中专',
|
||||
'大专',
|
||||
'本科',
|
||||
'硕士研究生',
|
||||
'博士研究生',
|
||||
'博士后'
|
||||
]
|
||||
|
||||
const nationalityOptions = [
|
||||
'中国',
|
||||
'中国香港',
|
||||
'中国澳门',
|
||||
'中国台湾',
|
||||
'其他'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
birthDate: undefined as Dayjs | undefined,
|
||||
gender: '',
|
||||
ethnicity: ethnicityOptions[0],
|
||||
politicalStatus: '',
|
||||
nationality: nationalityOptions[0],
|
||||
education: '',
|
||||
societyPosition: '',
|
||||
societyEmploymentType: 0,
|
||||
title: '',
|
||||
idCardNumber: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
organization: '',
|
||||
workDuty: '',
|
||||
otherSocialPosition: '',
|
||||
hasOtherSocietyPosition: 0,
|
||||
isPublicServant: 0,
|
||||
unitType: '',
|
||||
unitLevel: '',
|
||||
isRetired: 0,
|
||||
researchArea: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
bio: '',
|
||||
resume: '',
|
||||
certificate: '',
|
||||
workExperience: [{ period: '', organization: '' }] as WorkExperienceItem[],
|
||||
mainResearchAchievements: '',
|
||||
applicationForm: '',
|
||||
idCard: '',
|
||||
degreeCertificate: '',
|
||||
titleCertificate: '',
|
||||
achievements: [] as string[],
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入姓名' }],
|
||||
email: [{ required: true, type: 'email', message: '请输入正确的邮箱' }],
|
||||
}
|
||||
|
||||
function beforeUpload(file: File) {
|
||||
const isLt10M = file.size / 1024 / 1024 < 10
|
||||
if (!isLt10M) {
|
||||
@@ -155,28 +449,42 @@ function beforeUpload(file: File) {
|
||||
return true
|
||||
}
|
||||
|
||||
function addWorkExperience() {
|
||||
formData.workExperience.push({ period: '', organization: '' })
|
||||
}
|
||||
|
||||
function removeWorkExperience(index: number) {
|
||||
if (formData.workExperience.length === 1) {
|
||||
formData.workExperience[0] = { period: '', organization: '' }
|
||||
return
|
||||
}
|
||||
formData.workExperience.splice(index, 1)
|
||||
}
|
||||
|
||||
function handleUpload(type: string) {
|
||||
return async (option: any) => {
|
||||
return async (option: UploadRequestOption) => {
|
||||
try {
|
||||
const form = new FormData()
|
||||
form.append('file', option.file)
|
||||
// TODO: 调用上传API
|
||||
// const res = await uploadFile(form)
|
||||
// if (type === 'resume') formData.resume = res.url
|
||||
// if (type === 'certificate') formData.certificate = res.url
|
||||
option.onSuccess()
|
||||
const data = await uploadSiteExpertFile(form)
|
||||
if (type === 'achievements') {
|
||||
formData.achievements.push(data.path)
|
||||
} else {
|
||||
formData[type as Exclude<keyof typeof formData, 'achievements' | 'workExperience' | 'birthDate'>] = data.path as never
|
||||
}
|
||||
option.onSuccess(data)
|
||||
message.success('上传成功')
|
||||
} catch (e) {
|
||||
option.onError()
|
||||
message.error('上传失败')
|
||||
} catch (e: unknown) {
|
||||
option.onError(e)
|
||||
message.error(e instanceof Error ? e.message : '上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (currentStep.value === 0) {
|
||||
if (!formData.name || !formData.email) {
|
||||
message.warning('请填写必填项')
|
||||
if (!formData.name.trim() || !formData.phone.trim()) {
|
||||
message.warning('请至少填写姓名和联系电话')
|
||||
return
|
||||
}
|
||||
}
|
||||
@@ -186,12 +494,15 @@ function handleNext() {
|
||||
async function handleSubmit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
// TODO: 调用API提交申请
|
||||
// await submitExpertApplication(formData)
|
||||
await submitSiteExpertApplication({
|
||||
...formData,
|
||||
birthDate: formData.birthDate ? dayjs(formData.birthDate).format('YYYY-MM-DD') : '',
|
||||
workExperience: formData.workExperience.filter((item) => item.period || item.organization),
|
||||
})
|
||||
message.success('提交成功，请等待审核')
|
||||
navigateTo('/expert')
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '提交失败')
|
||||
} catch (e: unknown) {
|
||||
message.error(e instanceof Error ? e.message : '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -200,7 +511,7 @@ async function handleSubmit() {
|
||||
|
||||
<style scoped>
|
||||
.expert-apply-page {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
@@ -223,7 +534,15 @@ async function handleSubmit() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.expert-apply-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.apply-form-wrap {
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
@@ -247,6 +566,30 @@ async function handleSubmit() {
|
||||
margin: -10px 0 20px;
|
||||
}
|
||||
|
||||
.materials-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding: 14px 16px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #dbeafe;
|
||||
border-radius: 12px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.experience-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.experience-row {
|
||||
padding: 12px 14px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
@@ -265,4 +608,10 @@ async function handleSubmit() {
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.expert-apply-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<ModuleEntryDetailPage :config="pageConfig" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ModuleEntryDetailPage from '@/components/ModuleEntryDetailPage.vue'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'blank'
|
||||
})
|
||||
|
||||
const pageConfig = {
|
||||
title: '专家资料下载',
|
||||
baseRoute: '/expert/downloads',
|
||||
showImage: false,
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<ModuleEntryListPage :config="pageConfig" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ModuleEntryListPage from '@/components/ModuleEntryListPage.vue'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'blank'
|
||||
})
|
||||
|
||||
const pageConfig = {
|
||||
type: 'expert_download',
|
||||
title: '专家资料下载',
|
||||
description: '',
|
||||
baseRoute: '/expert/downloads',
|
||||
showImage: false,
|
||||
sidebarNavKey: 'expert',
|
||||
}
|
||||
</script>
|
||||
+475
-108
@@ -1,99 +1,267 @@
|
||||
<template>
|
||||
<div class="expert-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">专家资讯</h1>
|
||||
<p class="page-desc">汇聚各领域权威专家，提供专业视角与研究成果</p>
|
||||
<h1 class="page-title">{{ currentTitle }}</h1>
|
||||
<p class="page-desc">{{ currentDesc }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<div class="category-tabs">
|
||||
<a-radio-group v-model:value="activeType" button-style="solid" @change="handleTypeChange">
|
||||
<a-radio-button value="">全部</a-radio-button>
|
||||
<a-radio-button value="view">专家视点</a-radio-button>
|
||||
<a-radio-button value="dynamic">专家动态</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div class="expert-layout">
|
||||
<aside class="category-sidebar">
|
||||
<div class="category-sidebar-title">专家资讯</div>
|
||||
<NuxtLink
|
||||
v-for="item in expertNavItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="category-item"
|
||||
:class="{ active: isNavActive(item.to) }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</aside>
|
||||
|
||||
<!-- 专家/文章列表 -->
|
||||
<div class="expert-list">
|
||||
<div v-for="item in items" :key="item.id" class="expert-item" @click="handleView(item)">
|
||||
<div class="expert-avatar" v-if="item.avatar">
|
||||
<img :src="item.avatar" :alt="item.expertName" />
|
||||
<main class="expert-content">
|
||||
<div class="toolbar">
|
||||
<a-input-search
|
||||
v-model:value="keywords"
|
||||
:placeholder="showArticleList ? '搜索文章标题 / 摘要' : '搜索姓名 / 单位 / 研究领域'"
|
||||
class="toolbar-search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<a-button type="primary" @click="navigateTo('/expert/apply')">专家申请</a-button>
|
||||
</div>
|
||||
<div class="expert-default-avatar" v-else>{{ item.expertName?.charAt(0) }}</div>
|
||||
<div class="expert-content">
|
||||
<h3 class="expert-title">{{ item.title }}</h3>
|
||||
<div class="expert-meta">
|
||||
<span class="meta-item">{{ item.expertName }}</span>
|
||||
<span class="meta-item">{{ item.expertTitle }}</span>
|
||||
<span class="meta-item">{{ item.publishTime }}</span>
|
||||
|
||||
<div v-if="loading" class="loading-placeholder">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
|
||||
<template v-else-if="showArticleList">
|
||||
<div class="content-summary">
|
||||
<span>{{ currentTitle }}</span>
|
||||
<span>共 {{ total }} 篇文章</span>
|
||||
</div>
|
||||
|
||||
<div class="article-list">
|
||||
<div v-for="item in articles" :key="item.id" class="article-item" @click="handleArticleView(item)">
|
||||
<div v-if="item.image" class="article-thumb">
|
||||
<img :src="item.image" :alt="item.title" />
|
||||
</div>
|
||||
<div class="article-main">
|
||||
<h3 class="article-title">{{ item.title }}</h3>
|
||||
<p class="article-overview">{{ item.overview }}</p>
|
||||
<div class="article-meta">
|
||||
<span>{{ item.source }}</span>
|
||||
<span>{{ item.publishTime }}</span>
|
||||
<span v-if="item.views">浏览 {{ item.views }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!articles.length" class="empty-placeholder">
|
||||
<a-empty description="暂无内容" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="expert-grid">
|
||||
<div v-for="item in experts" :key="item.expertId" class="expert-card" @click="handleView(item)">
|
||||
<div class="expert-avatar-wrap">
|
||||
<img v-if="item.avatar" :src="item.avatar" :alt="item.name" class="expert-avatar" />
|
||||
<div v-else class="expert-avatar-placeholder">{{ item.name?.charAt(0) }}</div>
|
||||
</div>
|
||||
<h3 class="expert-name">{{ item.name }}</h3>
|
||||
<div class="expert-title">{{ item.title || '未填写职称' }}</div>
|
||||
<div class="expert-org">{{ item.organization || '未填写单位' }}</div>
|
||||
<p class="expert-research">{{ item.researchArea || '未填写研究领域' }}</p>
|
||||
<div class="expert-meta">
|
||||
<span>{{ item.education || '学历未填写' }}</span>
|
||||
<span>{{ item.joinTime || '待补充' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!experts.length" class="empty-placeholder">
|
||||
<a-empty description="暂无专家数据" />
|
||||
</div>
|
||||
<p class="expert-overview">{{ item.overview }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading-placeholder">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && items.length === 0" class="empty-placeholder">
|
||||
<a-empty description="暂无内容" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrap" v-if="total > pageSize">
|
||||
<a-pagination
|
||||
v-model:current="currentPage"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
<div class="pagination-wrap" v-if="total > pageSize">
|
||||
<a-pagination
|
||||
v-model:current="currentPage"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
useHead({ title: '专家资讯 - 决策咨询网' })
|
||||
import { mainNav } from '@/config/nav'
|
||||
import { pageSiteArticles, pageSiteExperts, resolveSiteAssetUrl, type SiteArticle, type SiteExpert } from '@/api/site'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const activeType = ref((useRoute().query.type as string) || '')
|
||||
const route = useRoute()
|
||||
const type = computed(() => (route.query.type as string) || '')
|
||||
const keywords = ref((route.query.keyword as string) || '')
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(12)
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const items = ref<any[]>([])
|
||||
const experts = ref<SiteExpert[]>([])
|
||||
const articles = ref<ArticleItem[]>([])
|
||||
const showArticleList = computed(() => ['view', 'dynamic'].includes(type.value))
|
||||
const expertNavItems = computed(() => mainNav.find((item) => item.key === 'expert')?.children || [])
|
||||
const currentTitle = computed(() => {
|
||||
if (type.value === 'view') return '专家视点'
|
||||
if (type.value === 'dynamic') return '专家动态'
|
||||
return '专家库'
|
||||
})
|
||||
const currentDesc = computed(() => {
|
||||
if (type.value === 'view') return '聚合专家研究观点与专业观察'
|
||||
if (type.value === 'dynamic') return '展示专家动态、活动资讯与相关报道'
|
||||
return '汇聚各领域认证专家，展示研究方向与专业背景'
|
||||
})
|
||||
|
||||
type ArticleItem = {
|
||||
id: number
|
||||
title: string
|
||||
overview: string
|
||||
image: string
|
||||
source: string
|
||||
publishTime: string
|
||||
views: number
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: computed(() => {
|
||||
if (type.value === 'view') {
|
||||
return '专家视点 - 决策咨询网'
|
||||
}
|
||||
if (type.value === 'dynamic') {
|
||||
return '专家动态 - 决策咨询网'
|
||||
}
|
||||
return '专家库 - 决策咨询网'
|
||||
})
|
||||
})
|
||||
|
||||
function isNavActive(to: string) {
|
||||
if (to === '/expert') {
|
||||
return route.path === '/expert' && !type.value
|
||||
}
|
||||
if (to.startsWith('/expert?type=')) {
|
||||
return route.path === '/expert' && type.value === to.split('type=')[1]
|
||||
}
|
||||
return route.path === to
|
||||
}
|
||||
|
||||
async function loadExperts() {
|
||||
if (showArticleList.value) {
|
||||
return
|
||||
}
|
||||
|
||||
async function loadItems() {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: 接入实际API
|
||||
} catch (e: any) {
|
||||
message.error('加载失败')
|
||||
const data = await pageSiteExperts({
|
||||
page: currentPage.value,
|
||||
limit: pageSize.value,
|
||||
keywords: keywords.value || undefined,
|
||||
})
|
||||
experts.value = data.list || []
|
||||
total.value = data.count || 0
|
||||
} catch (e: unknown) {
|
||||
message.error(e instanceof Error ? e.message : '加载失败')
|
||||
experts.value = []
|
||||
total.value = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleTypeChange() {
|
||||
function normalizeArticle(item: SiteArticle): ArticleItem {
|
||||
return {
|
||||
id: item.articleId || item.id,
|
||||
title: item.title,
|
||||
overview: item.overview || '暂无摘要',
|
||||
image: resolveSiteAssetUrl(item.image),
|
||||
source: item.source || '广西决策咨询网',
|
||||
publishTime: item.publishTime || item.createTime || '',
|
||||
views: Number(item.views || item.actualViews || 0),
|
||||
}
|
||||
}
|
||||
|
||||
async function loadArticles() {
|
||||
if (!showArticleList.value) {
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await pageSiteArticles({
|
||||
page: currentPage.value,
|
||||
limit: pageSize.value,
|
||||
keywords: keywords.value || undefined,
|
||||
category: 'expert',
|
||||
type: type.value,
|
||||
})
|
||||
articles.value = (data.list || []).map(normalizeArticle)
|
||||
total.value = data.count || 0
|
||||
} catch (e: unknown) {
|
||||
message.error(e instanceof Error ? e.message : '加载失败')
|
||||
articles.value = []
|
||||
total.value = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function loadCurrentData() {
|
||||
if (showArticleList.value) {
|
||||
loadArticles()
|
||||
return
|
||||
}
|
||||
loadExperts()
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
currentPage.value = 1
|
||||
loadItems()
|
||||
router.replace({
|
||||
query: {
|
||||
...(type.value ? { type: type.value } : {}),
|
||||
...(keywords.value ? { keyword: keywords.value } : {}),
|
||||
},
|
||||
})
|
||||
loadCurrentData()
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
currentPage.value = page
|
||||
loadItems()
|
||||
loadCurrentData()
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
function handleView(item: any) {
|
||||
router.push(`/expert/${item.id}`)
|
||||
function handleView(item: SiteExpert) {
|
||||
router.push(`/expert/${item.expertId}`)
|
||||
}
|
||||
|
||||
function handleArticleView(item: ArticleItem) {
|
||||
router.push(`/article/${item.id}`)
|
||||
}
|
||||
|
||||
watch(() => route.query.keyword, (value) => {
|
||||
keywords.value = (value as string) || ''
|
||||
currentPage.value = 1
|
||||
loadCurrentData()
|
||||
})
|
||||
|
||||
watch(() => route.query.type, () => {
|
||||
currentPage.value = 1
|
||||
loadCurrentData()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadItems()
|
||||
loadCurrentData()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -106,7 +274,7 @@ onMounted(() => {
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
@@ -122,92 +290,291 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
.expert-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.expert-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.expert-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.expert-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.expert-avatar,
|
||||
.expert-default-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
.category-sidebar {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #edf2f7;
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.expert-avatar img {
|
||||
.category-sidebar-title {
|
||||
padding: 14px 18px;
|
||||
background: #1e3a5f;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: block;
|
||||
padding: 13px 18px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.category-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.category-item:hover,
|
||||
.category-item.active {
|
||||
background: #eff6ff;
|
||||
color: #1e3a5f;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.expert-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.toolbar-search {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.content-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
color: #1e3a5f;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.content-summary span:last-child {
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.article-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
padding: 18px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #edf2f7;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.article-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.expert-default-avatar {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
.article-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
margin: 0 0 8px;
|
||||
color: #1f2937;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.article-overview {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expert-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.expert-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px 20px;
|
||||
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.expert-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.expert-avatar-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.expert-avatar,
|
||||
.expert-avatar-placeholder {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.expert-avatar {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.expert-avatar-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1e3a5f, #3498db);
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.expert-content {
|
||||
flex: 1;
|
||||
.expert-name {
|
||||
margin: 0 0 8px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.expert-title,
|
||||
.expert-org,
|
||||
.expert-research,
|
||||
.expert-meta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.expert-title {
|
||||
font-size: 18px;
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expert-org {
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expert-research {
|
||||
min-height: 44px;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.expert-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expert-overview {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.loading-placeholder,
|
||||
.empty-placeholder {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
margin-top: 40px;
|
||||
margin-top: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.expert-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.category-sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.expert-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.toolbar-search {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.article-thumb {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.expert-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user