229 lines
9.4 KiB
Vue
229 lines
9.4 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 layout="vertical" :model="form" :rules="rules" @finish="onSubmit">
|
||
<a-form-item label="需求描述" name="need">
|
||
<a-textarea
|
||
v-model:value="form.need"
|
||
:rows="5"
|
||
placeholder="例如：参考美宜佳小程序，开发一套连锁便利店点餐/会员/配送小程序；需要商品管理、订单、优惠券、会员积分等功能；门店数量约 50 家；希望 SaaS 部署，1 个月内上线"
|
||
/>
|
||
</a-form-item>
|
||
<a-row :gutter="16">
|
||
<a-col :xs="24" :md="24">
|
||
<a-form-item label="单位名称" name="company">
|
||
<a-input v-model:value="form.company" placeholder="请填写公司名称单位名称" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="24">
|
||
<a-form-item label="手机号" name="phone">
|
||
<a-input v-model:value="form.phone" placeholder="请填写手机号" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="24">
|
||
<a-form-item label="姓名" name="name">
|
||
<a-input v-model:value="form.name" placeholder="请填写联系人姓名" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="16">
|
||
<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">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-space>
|
||
<a-button type="primary" html-type="submit" :loading="submitting">提交</a-button>
|
||
<a-button @click="reset" :disabled="submitting">重置</a-button>
|
||
</a-space>
|
||
</a-form>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<a-col :xs="24" :lg="10">
|
||
<div class="flex flex-col gap-4">
|
||
|
||
<!-- 二维码矩阵 -->
|
||
<a-card :bordered="false" class="shadow-sm">
|
||
<template #title>
|
||
<span class="font-semibold text-base">扫码联系 / 关注我们</span>
|
||
</template>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<!-- 客户经理微信 -->
|
||
<div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-blue-200 hover:bg-blue-50/40 transition-colors">
|
||
<a-image
|
||
src="https://developer-1251422153.cos.ap-guangzhou.myqcloud.com/10001/20210519/60e1528c8a0f13a6bc0b537e99bddbb5.png"
|
||
alt="客户经理微信二维码"
|
||
:width="96"
|
||
:height="96"
|
||
class="rounded-lg border border-gray-200 object-cover"
|
||
/>
|
||
<div class="text-center">
|
||
<div class="text-sm font-medium text-gray-400">微信客服</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信公众号 -->
|
||
<div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-green-200 hover:bg-green-50/40 transition-colors">
|
||
<a-image
|
||
src="https://oss.wsdns.cn/20260328/72d21dc85f1a47d8a8d6e1f0082b8ce8.jpg?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
|
||
alt="微信公众号二维码"
|
||
:width="96"
|
||
:height="96"
|
||
class="rounded-lg border border-gray-200 object-cover"
|
||
/>
|
||
<div class="text-center">
|
||
<div class="text-sm font-medium text-gray-400">微信公众号</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小红书 -->
|
||
<div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-red-200 hover:bg-red-50/40 transition-colors">
|
||
<a-image
|
||
src="https://oss.wsdns.cn/20260328/fce4bf99a5844baca70f17d4af678293.png?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
|
||
alt="小红书二维码"
|
||
:width="96"
|
||
:height="96"
|
||
class="rounded-lg border border-gray-200 object-cover"
|
||
/>
|
||
<div class="text-center">
|
||
<div class="text-sm font-medium text-gray-400">小红书</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业微信 -->
|
||
<div class="flex flex-col items-center gap-1 rounded-xl border border-gray-100 bg-gray-50 p-4 hover:border-teal-200 hover:bg-teal-50/40 transition-colors">
|
||
<a-image
|
||
src="https://oss.wsdns.cn/20260328/71d4100fea834953b13a1e11903e6e68.png?x-oss-process=image/resize,m_fixed,w_400/quality,Q_90"
|
||
alt="企业微信二维码"
|
||
:width="96"
|
||
:height="96"
|
||
class="rounded-lg border border-gray-200 object-cover"
|
||
/>
|
||
<div class="text-center">
|
||
<div class="text-sm font-medium text-gray-400">企业微信</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <a-alert-->
|
||
<!-- show-icon-->
|
||
<!-- type="info"-->
|
||
<!-- class="mt-4"-->
|
||
<!-- message="如需更快响应，可添加客户经理微信直接沟通。"-->
|
||
<!-- />-->
|
||
</a-card>
|
||
|
||
|
||
<!-- 联系方式卡片 -->
|
||
<a-card :bordered="false" class="shadow-sm">
|
||
<template #title>
|
||
<span class="font-semibold text-base">联系我们</span>
|
||
</template>
|
||
|
||
<!-- 工作时间 -->
|
||
<div class="flex items-center gap-3 py-3 border-b border-gray-100">
|
||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-green-50 text-green-500 text-xl">🕘</div>
|
||
<div>
|
||
<div class="text-xs text-gray-400 mb-0.5">工作时间</div>
|
||
<div class="text-sm text-gray-700">周一至周六 · 09:00 – 18:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 邮箱 -->
|
||
<div class="flex items-center gap-3 py-3 border-b border-gray-100">
|
||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-purple-50 text-purple-500 text-xl">✉️</div>
|
||
<div>
|
||
<div class="text-xs text-gray-400 mb-0.5">商务邮箱</div>
|
||
<a href="mailto:hi@websoft.top" class="text-sm text-gray-700 hover:text-blue-600 transition-colors">170083662@qq.com</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地址 -->
|
||
<!-- <div class="flex items-center gap-3 py-3">-->
|
||
<!-- <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-orange-50 text-orange-500 text-xl">📍</div>-->
|
||
<!-- <div>-->
|
||
<!-- <div class="text-xs text-gray-400 mb-0.5">公司地址</div>-->
|
||
<!-- <div class="text-sm text-gray-700">广东省广州市天河区</div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</a-card>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
import { submitContactLead } from '@/api/cms/cmsContactLead'
|
||
|
||
usePageSeo({
|
||
title: '联系我们 - 预约演示 / 私有化部署 / 产品开通',
|
||
description: '预约演示与咨询：SaaS 平台、私有化部署、模板/插件市场与支付即开通业务链路。',
|
||
path: '/contact'
|
||
})
|
||
|
||
const form = reactive({
|
||
name: '',
|
||
phone: '',
|
||
company: '',
|
||
delivery: undefined as undefined | 'saas' | 'private' | 'hybrid',
|
||
need: ''
|
||
})
|
||
|
||
const rules = {
|
||
name: [{ required: true, message: '请填写姓名' }],
|
||
phone: [
|
||
{ required: true, message: '请填写手机号' },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号' }
|
||
],
|
||
company: [{ required: true, message: '请填写公司/团队' }],
|
||
need: [{ required: true, message: '请填写需求描述' }]
|
||
}
|
||
|
||
const submitting = ref(false)
|
||
|
||
async function onSubmit() {
|
||
try {
|
||
submitting.value = true
|
||
await submitContactLead({
|
||
...form,
|
||
source: typeof window !== 'undefined' ? window.location.href : '/contact'
|
||
})
|
||
message.success('提交成功！我们会在 1 个工作日内联系您 🎉')
|
||
reset()
|
||
}
|
||
catch (err: any) {
|
||
message.error(err?.message || '提交失败，请稍后重试或直接联系我们')
|
||
}
|
||
finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function reset() {
|
||
form.name = ''
|
||
form.phone = ''
|
||
form.company = ''
|
||
form.delivery = undefined
|
||
form.need = ''
|
||
}
|
||
</script>
|
||
|