赵忠林
1362f3007f
- 添加表单引用并集成 CMS 订单提交 API - 将交付方式选项更改为业务类型（售前咨询、售后服务、留意反馈） - 实现表单提交加载状态和防重复提交功能 - 添加异步提交处理和错误捕获机制 - 集成 CMS 订单创建功能并优化提交流程 - 使用表单实例重置字段替代手动清空
161 lines
5.5 KiB
Vue
161 lines
5.5 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">
|
||
填写需求后我们将尽快联系你，为你规划产品套餐、交付开通链路与部署方案（SaaS/私有化）。
|
||
</a-typography-paragraph>
|
||
|
||
<a-row :gutter="[24, 24]">
|
||
<a-col :xs="24" :lg="14">
|
||
<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="company">
|
||
<a-input v-model:value="form.company" placeholder="请填写公司或团队名称" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="业务类型" name="delivery">
|
||
<a-select v-model:value="form.delivery" placeholder="请选择">
|
||
<a-select-option value="saas">售前咨询</a-select-option>
|
||
<a-select-option value="private">售后服务</a-select-option>
|
||
<a-select-option value="hybrid">留意反馈</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-col>
|
||
|
||
<a-col :xs="24" :lg="10">
|
||
<a-card title="咨询内容建议">
|
||
<a-list :data-source="tips" size="small">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>{{ item }}</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
<div class="mt-6">
|
||
<a-alert
|
||
show-icon
|
||
type="info"
|
||
message="如需更快响应，可在需求描述中留下可联系时间段。"
|
||
/>
|
||
</div>
|
||
</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'
|
||
|
||
usePageSeo({
|
||
title: '联系我们 - 预约演示 / 私有化部署 / 产品开通',
|
||
description: '预约演示与咨询：SaaS 平台、私有化部署、模板/插件市场与支付即开通业务链路。',
|
||
path: '/contact'
|
||
})
|
||
|
||
const form = reactive({
|
||
name: '',
|
||
phone: '',
|
||
company: '',
|
||
delivery: undefined as undefined | 'saas' | 'private' | 'hybrid',
|
||
need: ''
|
||
})
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const submitting = ref(false)
|
||
|
||
const rules = {
|
||
name: [{ required: true, message: '请填写姓名' }],
|
||
phone: [{ required: true, message: '请填写手机号' }],
|
||
company: [{ required: true, message: '请填写公司/团队' }],
|
||
need: [{ required: true, message: '请填写需求描述' }]
|
||
}
|
||
|
||
const tips = [
|
||
'你希望售卖哪些产品（官网/电商/小程序/门户等）？',
|
||
'是否需要模板/插件市场（购买、授权、更新）？',
|
||
'是否需要“支付即开通”（自动创建租户/初始化模块与数据）？',
|
||
'交付方式：SaaS 或私有化部署？是否有合规要求？'
|
||
]
|
||
|
||
async function onSubmit() {
|
||
if (submitting.value) return
|
||
submitting.value = true
|
||
try {
|
||
const deliveryLabel =
|
||
form.delivery === 'saas'
|
||
? 'SaaS（云端）'
|
||
: form.delivery === 'private'
|
||
? '私有化部署'
|
||
: form.delivery === 'hybrid'
|
||
? '混合部署'
|
||
: '未选择'
|
||
|
||
const content = [
|
||
`姓名：${form.name || '-'}`,
|
||
`手机号：${form.phone || '-'}`,
|
||
`公司/团队：${form.company || '-'}`,
|
||
`交付方式：${deliveryLabel}`,
|
||
'',
|
||
'需求描述：',
|
||
form.need || '-'
|
||
].join('\n')
|
||
|
||
const resMessage = await addCmsOrder({
|
||
title: `合作咨询 - ${form.company || form.name || '未命名'}`,
|
||
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>
|