gxwebsoft/tiantian-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化2

Browse Source
This commit is contained in:
赵忠林
2026-04-08 17:10:58 +08:00
commit 4986d90eb9
532 changed files with 112617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
app/pages/contact.vue Normal file
View File

@@ -0,0 +1,228 @@
<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>