赵忠林
682e264a6f
- 移除经营范围按钮，精简导航栏 - 实现文章标题链接功能，提升用户体验 - 添加商品详情页面包屑导航，支持分类跳转 - 引入配送管理相关页面（区域、接单台、配送员、派单） - 替换控制台布局为站点头部和底部组件 - 重构商品分类页面，集成CMS导航功能 - 新增文章详情页面，支持多种访问方式 - 删除已迁移的创建应用和空应用页面 - 优化样式和组件导入，提升代码质量
312 lines
12 KiB
Vue
312 lines
12 KiB
Vue
<template>
|
||
<div class="mx-auto max-w-screen-xl px-4 py-12">
|
||
<a-typography-title :level="1" class="!mb-2">招商加盟</a-typography-title>
|
||
<a-typography-paragraph class="!text-gray-600 !mb-8">
|
||
诚邀区域合作伙伴与渠道经销商，共同拓展市场。我们提供稳定供应链、合规资质支持与运营赋能，
|
||
帮助你更快落地、更稳增长。
|
||
</a-typography-paragraph>
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<a-col :xs="24" :lg="14">
|
||
<a-card title="合作优势">
|
||
<a-list size="small" :data-source="advantages">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item class="list-item">{{ item }}</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
</a-card>
|
||
|
||
<a-card class="mt-6" title="合作模式">
|
||
<a-row :gutter="[16, 16]">
|
||
<a-col v-for="mode in modes" :key="mode.title" :xs="24" :md="8">
|
||
<div class="mode-card">
|
||
<div class="mode-title">{{ mode.title }}</div>
|
||
<div class="mode-desc">{{ mode.desc }}</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card class="mt-6" title="扶持政策（示例）">
|
||
<a-row :gutter="[16, 16]">
|
||
<a-col v-for="s in supports" :key="s.title" :xs="24" :md="12">
|
||
<a-statistic :title="s.title" :value="s.value" />
|
||
<div class="support-desc">{{ s.desc }}</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-alert
|
||
class="mt-4"
|
||
show-icon
|
||
type="info"
|
||
message="实际政策以对接沟通为准，我们会根据城市、渠道资源与团队情况给出更匹配的方案。"
|
||
/>
|
||
</a-card>
|
||
|
||
<a-card class="mt-6" title="加盟流程">
|
||
<a-steps :current="0" size="small" direction="vertical">
|
||
<a-step title="提交意向" description="填写基本信息、合作类型与所在区域" />
|
||
<a-step title="电话沟通" description="了解资源与目标，确认合作方向" />
|
||
<a-step title="资质审核" description="身份证明/营业执照/场地等（按合作类型）" />
|
||
<a-step title="签约与培训" description="合同签署、产品与运营培训" />
|
||
<a-step title="开业/启动" description="物料支持、营销支持与持续复盘" />
|
||
</a-steps>
|
||
</a-card>
|
||
|
||
<a-card class="mt-6" title="常见问题">
|
||
<a-collapse accordion>
|
||
<a-collapse-panel key="q1" header="需要门店吗？">
|
||
<a-typography-paragraph class="!mb-0">
|
||
不强制。可按你的资源选择渠道分销、团购/企业客户、或门店零售等模式，我们会给出落地建议。
|
||
</a-typography-paragraph>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="q2" header="是否有区域保护？">
|
||
<a-typography-paragraph class="!mb-0">
|
||
可根据区域与合作层级协商设置，原则上以“可持续经营、避免恶性竞争”为目标。
|
||
</a-typography-paragraph>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="q3" header="多久可以启动？">
|
||
<a-typography-paragraph class="!mb-0">
|
||
资料齐全且沟通确认后，一般 3-7 个工作日可完成签约与基础培训，具体以项目复杂度为准。
|
||
</a-typography-paragraph>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<a-col :xs="24" :lg="10">
|
||
<a-card title="加盟申请">
|
||
<a-form ref="formRef" layout="vertical" :model="form" :rules="rules" @finish="onSubmit">
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="姓名" name="name">
|
||
<a-input v-model:value="form.name" placeholder="请填写联系人姓名" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="手机号" name="phone">
|
||
<a-input v-model:value="form.phone" placeholder="请填写手机号" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="意向城市" name="city">
|
||
<a-input v-model:value="form.city" placeholder="例如：南宁/柳州/桂林" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="合作类型" name="cooperationType">
|
||
<a-select v-model:value="form.cooperationType" placeholder="请选择">
|
||
<a-select-option value="area">区域合伙人</a-select-option>
|
||
<a-select-option value="dealer">渠道经销</a-select-option>
|
||
<a-select-option value="group">团购/企业客户</a-select-option>
|
||
<a-select-option value="store">门店加盟</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="从业经验" name="experience">
|
||
<a-select v-model:value="form.experience" placeholder="请选择">
|
||
<a-select-option value="0">无</a-select-option>
|
||
<a-select-option value="1-3">1-3年</a-select-option>
|
||
<a-select-option value="3-5">3-5年</a-select-option>
|
||
<a-select-option value="5+">5年以上</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="预算范围" name="budget">
|
||
<a-select v-model:value="form.budget" placeholder="请选择（可选）" allow-clear>
|
||
<a-select-option value="lt3">3万以内</a-select-option>
|
||
<a-select-option value="3-10">3-10万</a-select-option>
|
||
<a-select-option value="10-30">10-30万</a-select-option>
|
||
<a-select-option value="gt30">30万以上</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-form-item label="资源/诉求说明" name="need">
|
||
<a-textarea
|
||
v-model:value="form.need"
|
||
:rows="5"
|
||
placeholder="例如：已有门店/渠道资源、可覆盖区域、预计月销量、期望合作政策等"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-space>
|
||
<a-button type="primary" html-type="submit" :loading="submitting">提交申请</a-button>
|
||
<a-button :disabled="submitting" @click="reset">重置</a-button>
|
||
</a-space>
|
||
</a-form>
|
||
</a-card>
|
||
|
||
<a-card class="mt-6" title="填写建议">
|
||
<a-list size="small" :data-source="tips">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>{{ item }}</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
<a-alert class="mt-4" show-icon type="success" message="我们将尽快与你联系沟通合作细节。" />
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
import type { FormInstance } from 'ant-design-vue'
|
||
import { addCmsOrder } from '@/api/cms/cmsOrder'
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
import { COMPANY } from '@/config/company'
|
||
|
||
usePageSeo({
|
||
title: '招商加盟',
|
||
description: `${COMPANY.projectName} 招商加盟：区域合伙人、渠道经销、团购/企业客户与门店合作。`,
|
||
path: '/join'
|
||
})
|
||
|
||
const advantages = [
|
||
'合规资质与经营范围清晰，合作沟通更高效',
|
||
'稳定供货与品控管理，支持标准化交付',
|
||
'市场物料与活动打法沉淀，降低试错成本',
|
||
'培训与运营辅导，帮助门店/渠道快速起量',
|
||
'数字化工具支持（选品、下单、对账等）',
|
||
'持续复盘与长期支持，陪跑成长'
|
||
]
|
||
|
||
const modes = [
|
||
{ title: '区域合伙人', desc: '负责区域招商与渠道拓展，获取更高合作权益与支持。' },
|
||
{ title: '渠道经销', desc: '适合批发商/渠道商/社区团购，走量稳定、周转快。' },
|
||
{ title: '门店加盟', desc: '适合零售门店，提供选品建议、陈列物料与运营培训。' }
|
||
]
|
||
|
||
const supports = [
|
||
{ title: '培训赋能', value: '1v1', desc: '产品知识/动销话术/活动策略与执行清单' },
|
||
{ title: '选品建议', value: '定制', desc: '按城市与客群定制类目结构与爆品组合' },
|
||
{ title: '运营陪跑', value: '持续', desc: '启动期跟进复盘，关键节点协助优化' },
|
||
{ title: '物料支持', value: '可配', desc: '海报、价签、活动页等物料统一输出' }
|
||
]
|
||
|
||
const tips = [
|
||
'请尽量写清楚：所在城市/可覆盖区域。',
|
||
'说明你的资源：门店数量、渠道类型、团购社群、企业客户等。',
|
||
'如果方便，可补充预估销量/团队人数/启动时间。'
|
||
]
|
||
|
||
const form = reactive({
|
||
name: '',
|
||
phone: '',
|
||
city: '',
|
||
cooperationType: undefined as undefined | 'area' | 'dealer' | 'group' | 'store',
|
||
experience: undefined as undefined | '0' | '1-3' | '3-5' | '5+',
|
||
budget: undefined as undefined | 'lt3' | '3-10' | '10-30' | 'gt30',
|
||
need: ''
|
||
})
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const submitting = ref(false)
|
||
|
||
const rules = {
|
||
name: [{ required: true, message: '请填写姓名' }],
|
||
phone: [{ required: true, message: '请填写手机号' }],
|
||
city: [{ required: true, message: '请填写意向城市' }],
|
||
cooperationType: [{ required: true, message: '请选择合作类型' }],
|
||
experience: [{ required: true, message: '请选择从业经验' }],
|
||
need: [{ required: true, message: '请填写资源/诉求说明' }]
|
||
}
|
||
|
||
function labelCooperationType(value?: typeof form.cooperationType) {
|
||
if (value === 'area') return '区域合伙人'
|
||
if (value === 'dealer') return '渠道经销'
|
||
if (value === 'group') return '团购/企业客户'
|
||
if (value === 'store') return '门店加盟'
|
||
return '未选择'
|
||
}
|
||
|
||
function labelBudget(value?: typeof form.budget) {
|
||
if (value === 'lt3') return '3万以内'
|
||
if (value === '3-10') return '3-10万'
|
||
if (value === '10-30') return '10-30万'
|
||
if (value === 'gt30') return '30万以上'
|
||
return '未填写'
|
||
}
|
||
|
||
async function onSubmit() {
|
||
if (submitting.value) return
|
||
submitting.value = true
|
||
try {
|
||
const content = [
|
||
`姓名：${form.name || '-'}`,
|
||
`手机号：${form.phone || '-'}`,
|
||
`意向城市：${form.city || '-'}`,
|
||
`合作类型：${labelCooperationType(form.cooperationType)}`,
|
||
`从业经验：${form.experience || '-'}`,
|
||
`预算范围：${labelBudget(form.budget)}`,
|
||
'',
|
||
'资源/诉求说明：',
|
||
form.need || '-'
|
||
].join('\n')
|
||
|
||
const resMessage = await addCmsOrder({
|
||
title: `招商加盟 - ${form.city || ''}${form.name ? `-${form.name}` : ''}`.trim(),
|
||
type: 2, // 2 留言
|
||
channel: 0, // 0 网站
|
||
realName: form.name,
|
||
phone: form.phone,
|
||
content
|
||
})
|
||
|
||
message.success(resMessage || '已提交，我们会尽快与你联系。')
|
||
reset()
|
||
} catch (err: unknown) {
|
||
const errMsg = err instanceof Error ? err.message : '提交失败，请稍后重试。'
|
||
message.error(errMsg)
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function reset() {
|
||
formRef.value?.resetFields()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.list-item {
|
||
padding: 6px 0;
|
||
color: rgba(0, 0, 0, 0.75);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.mode-card {
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
border-radius: 10px;
|
||
padding: 14px;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.01);
|
||
}
|
||
|
||
.mode-title {
|
||
font-weight: 700;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
}
|
||
|
||
.mode-desc {
|
||
margin-top: 6px;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.support-desc {
|
||
margin-top: 6px;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|