更新首页
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="downloads-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">入会资料下载</h1>
|
||||
<p class="page-desc">下载企业会员、个人会员入会申请材料，完成填写盖章或签字后上传审核</p>
|
||||
</div>
|
||||
|
||||
<div class="downloads-grid">
|
||||
<div v-for="item in downloadItems" :key="item.title" class="download-card">
|
||||
<div class="download-icon">{{ item.icon }}</div>
|
||||
<div class="download-body">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.desc }}</p>
|
||||
<div class="download-tags">
|
||||
<a-tag v-for="tag in item.tags" :key="tag" color="blue">{{ tag }}</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="download-actions">
|
||||
<a-button type="primary" ghost @click="handleDownload(item.title)">下载模板</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-section">
|
||||
<h2>资格审核与资料上传</h2>
|
||||
<p>请选择对应身份进入申请系统，填写表单并上传盖章或签字后的申请表及证明材料。</p>
|
||||
<div class="review-actions">
|
||||
<a-button type="primary" size="large" @click="navigateTo('/about/join/enterprise')">企业会员申请</a-button>
|
||||
<a-button size="large" @click="navigateTo('/about/join/personal')">个人会员申请</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
useHead({ title: '入会资料下载 - 决策咨询网' })
|
||||
|
||||
const downloadItems = [
|
||||
{
|
||||
icon: '🏢',
|
||||
title: '企业会员入会申请表',
|
||||
desc: '适用于企业会员入会申请，需填写完整信息并加盖单位公章后上传。',
|
||||
tags: ['企业会员', '盖章上传'],
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
title: '个人会员入会申请表',
|
||||
desc: '适用于个人会员入会申请，需本人签字后连同证明材料一并提交审核。',
|
||||
tags: ['个人会员', '签字上传'],
|
||||
},
|
||||
{
|
||||
icon: '📋',
|
||||
title: '学会章程与入会须知',
|
||||
desc: '提交申请前请先阅读章程与入会须知，确认资格条件与资料清单。',
|
||||
tags: ['章程', '资格说明'],
|
||||
},
|
||||
]
|
||||
|
||||
function handleDownload(name: string) {
|
||||
message.info(`资料「${name}」下载功能待接入实际文件，当前已预留下载入口`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.downloads-page {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 64px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
font-size: 15px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.downloads-grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.download-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.download-body h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.download-body p {
|
||||
margin: 0 0 12px;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.download-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.download-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.review-section {
|
||||
margin-top: 32px;
|
||||
padding: 32px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.review-section h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.review-section p {
|
||||
margin: 0 0 20px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.review-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.download-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.download-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -65,6 +65,17 @@
|
||||
<h3 class="section-title">资质证明材料</h3>
|
||||
<p class="section-desc">请上传以下材料，以便我们审核您的入会资格</p>
|
||||
|
||||
<div class="materials-tip">
|
||||
<div>企业会员需提交：入会申请表（加盖公章）、营业执照、法人身份证、企业简介。</div>
|
||||
<a-button type="link" @click="navigateTo('/about/join/downloads')">前往资料下载</a-button>
|
||||
</div>
|
||||
|
||||
<a-form-item label="入会申请表（加盖公章）">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('applicationForm')">
|
||||
<a-button><UploadOutlined /> 上传申请表</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="营业执照">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('license')">
|
||||
<a-button><UploadOutlined /> 上传营业执照</a-button>
|
||||
@@ -115,9 +126,22 @@
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
|
||||
import { submitSiteJoinApplication, uploadSiteJoinApplicationFile } from '@/api/site'
|
||||
|
||||
useHead({ title: '企业会员申请 - 决策咨询网' })
|
||||
|
||||
type UploadRequestOption = {
|
||||
file: File
|
||||
onSuccess: (response?: unknown) => void
|
||||
onError: (error?: unknown) => void
|
||||
}
|
||||
|
||||
type UploadResult = {
|
||||
path: string
|
||||
url: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const currentStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
|
||||
@@ -129,6 +153,7 @@ const formData = reactive({
|
||||
email: '',
|
||||
address: '',
|
||||
bio: '',
|
||||
applicationForm: '',
|
||||
license: '',
|
||||
idCard: '',
|
||||
intro: '',
|
||||
@@ -144,14 +169,17 @@ function beforeUpload(file: File) {
|
||||
}
|
||||
|
||||
function handleUpload(type: string) {
|
||||
return async (option: any) => {
|
||||
return async (option: UploadRequestOption) => {
|
||||
try {
|
||||
// TODO: 调用上传API
|
||||
option.onSuccess()
|
||||
const form = new FormData()
|
||||
form.append('file', option.file)
|
||||
const data = await uploadSiteJoinApplicationFile(form)
|
||||
formData[type as keyof typeof formData] = data.path
|
||||
option.onSuccess(data)
|
||||
message.success('上传成功')
|
||||
} catch {
|
||||
option.onError()
|
||||
message.error('上传失败')
|
||||
} catch (e: unknown) {
|
||||
option.onError(e)
|
||||
message.error(e instanceof Error ? e.message : '上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -169,11 +197,14 @@ function handleNext() {
|
||||
async function handleSubmit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
// TODO: 调用API提交申请
|
||||
await submitSiteJoinApplication({
|
||||
type: 'enterprise',
|
||||
...formData,
|
||||
})
|
||||
message.success('提交成功，请等待审核')
|
||||
navigateTo('/about/join')
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '提交失败')
|
||||
} catch (e: unknown) {
|
||||
message.error(e instanceof Error ? e.message : '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -229,6 +260,19 @@ 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;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="join-entry-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">加入我们</h1>
|
||||
<p class="page-desc">请选择企业会员或个人会员申请入口，按要求提交资料审核</p>
|
||||
</div>
|
||||
|
||||
<div class="join-cards">
|
||||
<div class="join-card enterprise-card">
|
||||
<div class="join-card-icon">🏢</div>
|
||||
<h3>企业会员申请</h3>
|
||||
<p>适用于依法注册、具有法人资格的企事业单位。</p>
|
||||
<ul>
|
||||
<li>填写企业备案信息</li>
|
||||
<li>上传申请表、营业执照等材料</li>
|
||||
<li>提交后等待后台审核</li>
|
||||
</ul>
|
||||
<a-button type="primary" block size="large" @click="navigateTo('/about/join/enterprise')">
|
||||
进入企业会员申请
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="join-card personal-card">
|
||||
<div class="join-card-icon">👤</div>
|
||||
<h3>个人会员申请</h3>
|
||||
<p>适用于具备相应专业背景、认同学会章程的个人申请者。</p>
|
||||
<ul>
|
||||
<li>填写个人备案信息</li>
|
||||
<li>上传签字申请表及证明材料</li>
|
||||
<li>提交后等待后台审核</li>
|
||||
</ul>
|
||||
<a-button block size="large" @click="navigateTo('/about/join/personal')">
|
||||
进入个人会员申请
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry-actions">
|
||||
<a-button @click="navigateTo('/about/join/downloads')">资料下载</a-button>
|
||||
<a-button @click="navigateTo('/about')">返回关于我们</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({ title: '加入我们 - 决策咨询网' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.join-entry-page {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 64px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.join-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.join-card {
|
||||
padding: 28px;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.join-card-icon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.join-card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 22px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.join-card p {
|
||||
margin: 0 0 16px;
|
||||
color: #6b7280;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.join-card ul {
|
||||
margin: 0 0 20px;
|
||||
padding-left: 20px;
|
||||
color: #475569;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.join-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -89,6 +89,23 @@
|
||||
<h3 class="section-title">资质证明材料</h3>
|
||||
<p class="section-desc">请上传相关证明材料，以便我们审核您的入会资格</p>
|
||||
|
||||
<div class="materials-tip">
|
||||
<div>个人会员需提交：入会申请表（签字）、简介、研究成果、职称证书、学历证书、身份证、研究成果或获奖证明。</div>
|
||||
<a-button type="link" @click="navigateTo('/about/join/downloads')">前往资料下载</a-button>
|
||||
</div>
|
||||
|
||||
<a-form-item label="入会申请表（签字）">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('applicationForm')">
|
||||
<a-button><UploadOutlined /> 上传申请表</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="个人简介">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('profile')">
|
||||
<a-button><UploadOutlined /> 上传简介</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="身份证">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('idCard')">
|
||||
<a-button><UploadOutlined /> 上传身份证</a-button>
|
||||
@@ -143,25 +160,41 @@
|
||||
</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 { submitSiteJoinApplication, uploadSiteJoinApplicationFile } from '@/api/site'
|
||||
|
||||
useHead({ title: '个人会员申请 - 决策咨询网' })
|
||||
|
||||
type UploadRequestOption = {
|
||||
file: File
|
||||
onSuccess: (response?: unknown) => void
|
||||
onError: (error?: unknown) => void
|
||||
}
|
||||
|
||||
type UploadResult = {
|
||||
path: string
|
||||
url: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const currentStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
gender: undefined,
|
||||
birthday: undefined,
|
||||
education: undefined,
|
||||
gender: undefined as string | undefined,
|
||||
birthday: undefined as Dayjs | undefined,
|
||||
education: undefined as string | undefined,
|
||||
title: '',
|
||||
organization: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
researchArea: '',
|
||||
bio: '',
|
||||
applicationForm: '',
|
||||
profile: '',
|
||||
idCard: '',
|
||||
diploma: '',
|
||||
certificate: '',
|
||||
@@ -178,14 +211,21 @@ function beforeUpload(file: File) {
|
||||
}
|
||||
|
||||
function handleUpload(type: string) {
|
||||
return async (option: any) => {
|
||||
return async (option: UploadRequestOption) => {
|
||||
try {
|
||||
// TODO: 调用上传API
|
||||
option.onSuccess()
|
||||
const form = new FormData()
|
||||
form.append('file', option.file)
|
||||
const data = await uploadSiteJoinApplicationFile(form)
|
||||
if (type === 'achievements') {
|
||||
formData.achievements.push(data.path)
|
||||
} else {
|
||||
formData[type as Exclude<keyof typeof formData, 'achievements' | 'birthday'>] = data.path as never
|
||||
}
|
||||
option.onSuccess(data)
|
||||
message.success('上传成功')
|
||||
} catch {
|
||||
option.onError()
|
||||
message.error('上传失败')
|
||||
} catch (e: unknown) {
|
||||
option.onError(e)
|
||||
message.error(e instanceof Error ? e.message : '上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -203,11 +243,29 @@ function handleNext() {
|
||||
async function handleSubmit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
// TODO: 调用API提交申请
|
||||
await submitSiteJoinApplication({
|
||||
type: 'personal',
|
||||
name: formData.name,
|
||||
gender: formData.gender,
|
||||
birthday: formData.birthday ? dayjs(formData.birthday).format('YYYY-MM-DD') : '',
|
||||
education: formData.education,
|
||||
title: formData.title,
|
||||
organization: formData.organization,
|
||||
phone: formData.phone,
|
||||
email: formData.email,
|
||||
researchArea: formData.researchArea,
|
||||
bio: formData.bio,
|
||||
applicationForm: formData.applicationForm,
|
||||
profile: formData.profile,
|
||||
idCard: formData.idCard,
|
||||
diploma: formData.diploma,
|
||||
certificate: formData.certificate,
|
||||
achievements: formData.achievements,
|
||||
})
|
||||
message.success('提交成功，请等待审核')
|
||||
navigateTo('/about/join')
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '提交失败')
|
||||
} catch (e: unknown) {
|
||||
message.error(e instanceof Error ? e.message : '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -263,6 +321,19 @@ 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;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
|
||||
Reference in New Issue
Block a user