初始版本
This commit is contained in:
193
app/pages/about/index.vue
Normal file
193
app/pages/about/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="about-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">关于我们</h1>
|
||||
<p class="page-desc">广西决策咨询网 - 汇聚智慧,服务决策</p>
|
||||
</div>
|
||||
|
||||
<div class="about-nav">
|
||||
<a-space wrap>
|
||||
<a-button type="primary" @click="currentSection = 'intro'">学会简介</a-button>
|
||||
<a-button @click="currentSection = 'organization'">组织机构</a-button>
|
||||
<a-button @click="currentSection = 'charter'">学会章程</a-button>
|
||||
<a-button @click="currentSection = 'consultation'">咨询服务</a-button>
|
||||
<a-button @click="currentSection = 'join'">加入我们</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 学会简介 -->
|
||||
<div v-if="currentSection === 'intro'" class="content-section">
|
||||
<h2>学会简介</h2>
|
||||
<div class="content-body">
|
||||
<p>广西决策咨询网是由广西壮族自治区决策咨询委员会主管的专业决策咨询平台,致力于为各级政府和企业提供高质量的决策咨询服务。</p>
|
||||
<p>网站汇聚了区内外的知名专家学者,围绕经济社会发展中的重大问题开展研究,为科学决策提供参考依据。</p>
|
||||
<h3>主要职能</h3>
|
||||
<ul>
|
||||
<li>组织开展重大决策咨询课题研究</li>
|
||||
<li>为各级政府提供政策建议和咨询报告</li>
|
||||
<li>搭建专家学者交流合作平台</li>
|
||||
<li>推广决策咨询研究成果</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 组织机构 -->
|
||||
<div v-if="currentSection === 'organization'" class="content-section">
|
||||
<h2>组织机构</h2>
|
||||
<div class="content-body">
|
||||
<h3>顾问委员会</h3>
|
||||
<p>由区内外知名专家学者组成,为学会发展提供指导和咨询。</p>
|
||||
|
||||
<h3>理事会</h3>
|
||||
<p>负责学会日常运营管理,制定和执行各项决策。</p>
|
||||
|
||||
<h3>专家库</h3>
|
||||
<p>汇聚各领域专业人才,提供智力支持。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学会章程 -->
|
||||
<div v-if="currentSection === 'charter'" class="content-section">
|
||||
<h2>学会章程</h2>
|
||||
<div class="content-body">
|
||||
<h3>第一章 总则</h3>
|
||||
<p>广西决策咨询学会是由区内从事决策咨询研究的专家学者和实际工作者自愿组成的学术性、非营利性社会组织。</p>
|
||||
|
||||
<h3>第二章 业务范围</h3>
|
||||
<ul>
|
||||
<li>开展决策咨询理论研究</li>
|
||||
<li>组织学术交流活动</li>
|
||||
<li>提供决策咨询服务</li>
|
||||
<li>培养决策咨询人才</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 咨询服务 -->
|
||||
<div v-if="currentSection === 'consultation'" class="content-section">
|
||||
<h2>咨询服务</h2>
|
||||
<div class="content-body">
|
||||
<h3>服务内容</h3>
|
||||
<ul>
|
||||
<li><strong>政策研究:</strong>为各级政府提供政策研究和评估服务</li>
|
||||
<li><strong>规划咨询:</strong>区域规划、产业规划编制咨询</li>
|
||||
<li><strong>项目评估:</strong>重大投资项目可行性研究和评估</li>
|
||||
<li><strong>专题调研:</strong>根据需求开展专题调研</li>
|
||||
</ul>
|
||||
|
||||
<h3>联系方式</h3>
|
||||
<p>📞 联系电话:0771-1234567</p>
|
||||
<p>📧 电子邮箱:service@jczxw.org</p>
|
||||
<p>📍 地址:广西南宁市民族大道XX号</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加入我们 -->
|
||||
<div v-if="currentSection === 'join'" class="content-section">
|
||||
<h2>加入我们</h2>
|
||||
<div class="content-body">
|
||||
<p>我们热忱欢迎符合条件的专家学者和有志于决策咨询事业的各界人士加入我们的大家庭。</p>
|
||||
|
||||
<h3>入会资格</h3>
|
||||
<p>详见:<NuxtLink to="/about/join">入会指南</NuxtLink></p>
|
||||
|
||||
<div class="action-buttons">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({ title: '关于我们 - 决策咨询网' })
|
||||
|
||||
const route = useRoute()
|
||||
const currentSection = ref((route.query.section as string) || 'intro')
|
||||
|
||||
watch(() => route.query.section, (newSection) => {
|
||||
currentSection.value = (newSection as string) || 'intro'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.about-page {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about-nav {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.content-section h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
font-size: 15px;
|
||||
color: #4b5563;
|
||||
line-height: 1.8;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.content-section ul {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.content-section li {
|
||||
font-size: 15px;
|
||||
color: #4b5563;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
250
app/pages/about/join/enterprise.vue
Normal file
250
app/pages/about/join/enterprise.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="join-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">企业会员申请</h1>
|
||||
<p class="page-desc">加入我们,共同推动决策咨询事业发展</p>
|
||||
</div>
|
||||
|
||||
<div class="join-content">
|
||||
<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="join-form">
|
||||
<!-- 步骤1:填写信息 -->
|
||||
<div v-show="currentStep === 0">
|
||||
<h3 class="section-title">企业基本信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="企业名称" name="name" required>
|
||||
<a-input v-model:value="formData.name" placeholder="请输入企业名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="统一社会信用代码" name="creditCode">
|
||||
<a-input v-model:value="formData.creditCode" placeholder="请输入信用代码" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系人" name="contact" required>
|
||||
<a-input v-model:value="formData.contact" placeholder="请输入联系人姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
|
||||
</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-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="企业地址" name="address">
|
||||
<a-input v-model:value="formData.address" 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>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2:上传资料 -->
|
||||
<div v-show="currentStep === 1">
|
||||
<h3 class="section-title">资质证明材料</h3>
|
||||
<p class="section-desc">请上传以下材料,以便我们审核您的入会资格</p>
|
||||
|
||||
<a-form-item label="营业执照">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('license')">
|
||||
<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>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="企业简介">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('intro')">
|
||||
<a-button><UploadOutlined /> 上传企业简介</a-button>
|
||||
</a-upload>
|
||||
<div class="upload-hint">支持 PDF、Word 格式</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3:确认提交 -->
|
||||
<div v-show="currentStep === 2" class="confirm-section">
|
||||
<a-result
|
||||
title="确认提交申请"
|
||||
sub-title="请确认您填写的信息和上传的材料准确无误"
|
||||
>
|
||||
<template #icon>
|
||||
<CheckCircleOutlined style="font-size: 80px; color: #52c41a" />
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="primary" size="large" @click="handleSubmit" :loading="submitting">
|
||||
确认提交
|
||||
</a-button>
|
||||
</template>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
useHead({ title: '企业会员申请 - 决策咨询网' })
|
||||
|
||||
const currentStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
creditCode: '',
|
||||
contact: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
address: '',
|
||||
bio: '',
|
||||
license: '',
|
||||
idCard: '',
|
||||
intro: '',
|
||||
})
|
||||
|
||||
function beforeUpload(file: File) {
|
||||
const isLt10M = file.size / 1024 / 1024 < 10
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过 10MB')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function handleUpload(type: string) {
|
||||
return async (option: any) => {
|
||||
try {
|
||||
// TODO: 调用上传API
|
||||
option.onSuccess()
|
||||
message.success('上传成功')
|
||||
} catch {
|
||||
option.onError()
|
||||
message.error('上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (currentStep.value === 0) {
|
||||
if (!formData.name || !formData.contact || !formData.phone) {
|
||||
message.warning('请填写必填项')
|
||||
return
|
||||
}
|
||||
}
|
||||
currentStep.value++
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
// TODO: 调用API提交申请
|
||||
message.success('提交成功,请等待审核')
|
||||
navigateTo('/about/join')
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.join-page {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.join-content {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.steps-wrap {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: -10px 0 20px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.confirm-section {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.step-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
284
app/pages/about/join/personal.vue
Normal file
284
app/pages/about/join/personal.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="join-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">个人会员申请</h1>
|
||||
<p class="page-desc">加入我们,共同推动决策咨询事业发展</p>
|
||||
</div>
|
||||
|
||||
<div class="join-content">
|
||||
<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="join-form">
|
||||
<!-- 步骤1:填写信息 -->
|
||||
<div v-show="currentStep === 0">
|
||||
<h3 class="section-title">个人信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="姓名" name="name" required>
|
||||
<a-input v-model:value="formData.name" placeholder="请输入您的姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="性别" name="gender">
|
||||
<a-select v-model:value="formData.gender" placeholder="请选择">
|
||||
<a-select-option value="male">男</a-select-option>
|
||||
<a-select-option value="female">女</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="birthday">
|
||||
<a-date-picker v-model:value="formData.birthday" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学历" name="education">
|
||||
<a-select v-model:value="formData.education" placeholder="请选择">
|
||||
<a-select-option value="bachelor">本科</a-select-option>
|
||||
<a-select-option value="master">硕士</a-select-option>
|
||||
<a-select-option value="doctor">博士</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="title">
|
||||
<a-input v-model:value="formData.title" placeholder="如:教授、研究员" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="工作单位" name="organization">
|
||||
<a-input v-model:value="formData.organization" placeholder="请输入工作单位" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="研究方向/专业领域" name="researchArea">
|
||||
<a-input v-model:value="formData.researchArea" placeholder="请输入研究方向" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="个人简介" name="bio">
|
||||
<a-textarea v-model:value="formData.bio" :rows="4" placeholder="请简要介绍您的学术背景和工作经历" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2:上传资料 -->
|
||||
<div v-show="currentStep === 1">
|
||||
<h3 class="section-title">资质证明材料</h3>
|
||||
<p class="section-desc">请上传相关证明材料,以便我们审核您的入会资格</p>
|
||||
|
||||
<a-form-item label="身份证">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('idCard')">
|
||||
<a-button><UploadOutlined /> 上传身份证</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="学历/学位证明">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('diploma')">
|
||||
<a-button><UploadOutlined /> 上传学历证明</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="职称证明">
|
||||
<a-upload :before-upload="beforeUpload" :custom-request="handleUpload('certificate')">
|
||||
<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-upload>
|
||||
<div class="upload-hint">可上传多份材料,支持 JPG、PNG、PDF 格式</div>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3:确认提交 -->
|
||||
<div v-show="currentStep === 2" class="confirm-section">
|
||||
<a-result
|
||||
title="确认提交申请"
|
||||
sub-title="请确认您填写的信息和上传的材料准确无误"
|
||||
>
|
||||
<template #icon>
|
||||
<CheckCircleOutlined style="font-size: 80px; color: #52c41a" />
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="primary" size="large" @click="handleSubmit" :loading="submitting">
|
||||
确认提交
|
||||
</a-button>
|
||||
</template>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { message } from 'ant-design-vue'
|
||||
import { CheckCircleOutlined, UploadOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
useHead({ title: '个人会员申请 - 决策咨询网' })
|
||||
|
||||
const currentStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
gender: undefined,
|
||||
birthday: undefined,
|
||||
education: undefined,
|
||||
title: '',
|
||||
organization: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
researchArea: '',
|
||||
bio: '',
|
||||
idCard: '',
|
||||
diploma: '',
|
||||
certificate: '',
|
||||
achievements: [] as string[],
|
||||
})
|
||||
|
||||
function beforeUpload(file: File) {
|
||||
const isLt10M = file.size / 1024 / 1024 < 10
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过 10MB')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function handleUpload(type: string) {
|
||||
return async (option: any) => {
|
||||
try {
|
||||
// TODO: 调用上传API
|
||||
option.onSuccess()
|
||||
message.success('上传成功')
|
||||
} catch {
|
||||
option.onError()
|
||||
message.error('上传失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (currentStep.value === 0) {
|
||||
if (!formData.name || !formData.phone) {
|
||||
message.warning('请填写必填项')
|
||||
return
|
||||
}
|
||||
}
|
||||
currentStep.value++
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
submitting.value = true
|
||||
try {
|
||||
// TODO: 调用API提交申请
|
||||
message.success('提交成功,请等待审核')
|
||||
navigateTo('/about/join')
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.join-page {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.join-content {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.steps-wrap {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: -10px 0 20px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.confirm-section {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.step-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user