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

feat(contact): 重构“联系我们”页面及表单交互体验

Browse Source 
- 重新设计页面布局，增加顶部横幅及联系方式版块
- 优化在线咨询表单，增加字段并调整样式和验证规则
- 替换旧的提交逻辑为新异步模拟提交，提示更友好
- 移除旧二维码和联系卡片，增加温馨提示信息
- 添加详细样式，提升页面视觉效果和响应式布局
- 更新会员服务联系信息区，增加按钮链接和服务时间
- 会员服务列表使用模拟数据，支持按类型过滤展示
- 登录页左侧风格调整，突出广西决策咨询中心品牌形象
- 修改数值统计及底部版权声明，更新背景渐变颜色和按钮样式
This commit is contained in:
赵忠林
2026-04-26 01:46:24 +08:00
parent 72f5025979
commit b334ad75cd
3 changed files with 396 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

496
app/pages/contact.vue
View File

@@ -1,228 +1,328 @@
<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>
<div class="contact-page">
<div class="contact-banner">
<div class="mx-auto max-w-screen-xl px-4 py-16 text-center">
<h1 class="banner-title">联系我们</h1>
<p class="banner-desc">广西决策咨询中心期待与您交流合作</p>
</div>
</div>
<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"
<div class="mx-auto max-w-screen-xl px-4 py-12">
<a-row :gutter="[48, 48]">
<!-- 左侧：联系信息 -->
<a-col :xs="24" :md="8">
<div class="contact-info">
<h2 class="info-title">联系信息</h2>
<div class="info-item">
<div class="info-icon">📍</div>
<div class="info-content">
<div class="info-label">办公地址</div>
<div class="info-value">广西·南宁·良庆区 五象大道401号 五象航洋城3号楼</div>
</div>
</div>
<div class="info-item">
<div class="info-icon">📞</div>
<div class="info-content">
<div class="info-label">联系电话</div>
<div class="info-value">0771-5386339</div>
</div>
</div>
<div class="info-item">
<div class="info-icon">📧</div>
<div class="info-content">
<div class="info-label">电子邮箱</div>
<div class="info-value">gxjzxzx@126.com</div>
</div>
</div>
<div class="info-item">
<div class="info-icon">⏰</div>
<div class="info-content">
<div class="info-label">服务时间</div>
<div class="info-value">周一至周五 9:00-17:00</div>
</div>
</div>
<div class="info-item">
<div class="info-icon">📮</div>
<div class="info-content">
<div class="info-label">邮政编码</div>
<div class="info-value">530200</div>
</div>
</div>
<div class="info-divider"></div>
<div class="social-section">
<div class="social-title">关注我们</div>
<div class="social-items">
<a-tooltip title="微信公众号">
<div class="social-item">📱</div>
</a-tooltip>
</div>
</div>
</div>
</a-col>
<!-- 右侧：咨询表单 -->
<a-col :xs="24" :md="16">
<div class="contact-form-panel">
<h2 class="form-title">在线咨询</h2>
<p class="form-desc">请填写您的咨询内容，我们将尽快与您联系</p>
<a-form
layout="vertical"
:model="form"
:rules="rules"
class="contact-form"
>
<a-row :gutter="16">
<a-col :xs="24" :md="12">
<a-form-item label="姓名" name="name">
<a-input v-model:value="form.name" placeholder="请输入您的姓名" size="large" />
</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="请输入联系电话" size="large" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :xs="24" :md="12">
<a-form-item label="单位/组织" name="organization">
<a-input v-model:value="form.organization" placeholder="请输入单位或组织名称" size="large" />
</a-form-item>
</a-col>
<a-col :xs="24" :md="12">
<a-form-item label="咨询类型" name="type">
<a-select v-model:value="form.type" placeholder="请选择咨询类型" size="large">
<a-select-option value="consult">咨询服务</a-select-option>
<a-select-option value="expert">专家申请</a-select-option>
<a-select-option value="member">会员申请</a-select-option>
<a-select-option value="cooperation">商务合作</a-select-option>
<a-select-option value="other">其他</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="咨询内容" name="content">
<a-textarea
v-model:value="form.content"
: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"
placeholder="请详细描述您的咨询内容..."
:maxlength="1000"
show-count
size="large"
/>
<div class="text-center">
<div class="text-sm font-medium text-gray-400">微信客服</div>
</div>
</div>
</a-form-item>
<!-- 微信公众号 -->
<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>
<a-form-item>
<a-space>
<a-button type="primary" size="large" @click="handleSubmit" :loading="submitting">
提交咨询
</a-button>
<a-button size="large" @click="handleReset">
重置
</a-button>
</a-space>
</a-form-item>
</a-form>
<!-- 小红书 -->
<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 class="form-tip">
💡 温馨提示：我们将在1-3个工作日内回复您的咨询，如有紧急事项请直接电话联系。
</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>
</a-col>
</a-row>
</div>
</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'
})
useHead({ title: '联系我们 - 广西决策咨询网' })
const submitting = ref(false)
const form = reactive({
name: '',
phone: '',
company: '',
delivery: undefined as undefined | 'saas' | 'private' | 'hybrid',
need: ''
organization: '',
type: undefined as string | undefined,
content: '',
})
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: '请填写需求描述' }]
name: [{ required: true, message: '请输入您的姓名' }],
phone: [{ required: true, message: '请输入联系电话' }],
content: [{ required: true, message: '请输入咨询内容' }],
}
const submitting = ref(false)
async function onSubmit() {
async function handleSubmit() {
if (!form.name || !form.phone || !form.content) {
message.warning('请填写必填项')
return
}
submitting.value = true
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 {
// TODO: 接入实际API提交咨询
// await submitContact(form)
await new Promise(resolve => setTimeout(resolve, 500))
message.success('咨询已提交，我们会尽快与您联系！')
handleReset()
} catch (e: any) {
message.error(e?.message || '提交失败')
} finally {
submitting.value = false
}
}
function reset() {
form.name = ''
form.phone = ''
form.company = ''
form.delivery = undefined
form.need = ''
function handleReset() {
Object.assign(form, {
name: '',
phone: '',
organization: '',
type: undefined,
content: '',
})
}
</script>
<style scoped>
.contact-banner {
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
color: #fff;
}
.banner-title {
font-size: 36px;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
}
.banner-desc {
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.contact-info {
background: #fff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
height: 100%;
}
.info-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin: 0 0 28px;
}
.info-item {
display: flex;
gap: 14px;
margin-bottom: 24px;
align-items: flex-start;
}
.info-icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 2px;
}
.info-content {
flex: 1;
}
.info-label {
font-size: 13px;
color: #9ca3af;
margin-bottom: 4px;
}
.info-value {
font-size: 15px;
color: #374151;
line-height: 1.6;
}
.info-divider {
height: 1px;
background: #f0f0f0;
margin: 24px 0;
}
.social-section {}
.social-title {
font-size: 14px;
color: #6b7280;
margin-bottom: 12px;
}
.social-items {
display: flex;
gap: 12px;
}
.social-item {
width: 40px;
height: 40px;
background: #f3f4f6;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: background 0.2s;
}
.social-item:hover {
background: #e5e7eb;
}
.contact-form-panel {
background: #fff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.form-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin: 0 0 8px;
}
.form-desc {
font-size: 14px;
color: #9ca3af;
margin: 0 0 28px;
}
.contact-form {}
.form-tip {
margin-top: 16px;
padding: 14px 16px;
background: #eff6ff;
border-radius: 10px;
font-size: 13px;
color: #3b82f6;
line-height: 1.6;
}
</style>