feat(router): 更新路由结构并优化页面组件
- 移除经营范围按钮,精简导航栏 - 实现文章标题链接功能,提升用户体验 - 添加商品详情页面包屑导航,支持分类跳转 - 引入配送管理相关页面(区域、接单台、配送员、派单) - 替换控制台布局为站点头部和底部组件 - 重构商品分类页面,集成CMS导航功能 - 新增文章详情页面,支持多种访问方式 - 删除已迁移的创建应用和空应用页面 - 优化样式和组件导入,提升代码质量
This commit is contained in:
167
app/pages/contact/index.vue
Normal file
167
app/pages/contact/index.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<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-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="consultType">
|
||||
<a-select v-model:value="form.consultType" placeholder="请选择">
|
||||
<a-select-option value="cooperation">合作咨询</a-select-option>
|
||||
<a-select-option value="purchase">企业采购</a-select-option>
|
||||
<a-select-option value="dealer">渠道经销</a-select-option>
|
||||
<a-select-option value="service">技术服务</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="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: '合作咨询与采购对接:供货报价、资质资料、配送方案与长期合作建议。',
|
||||
path: '/contact'
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
consultType: undefined as undefined | 'cooperation' | 'purchase' | 'dealer' | 'service' | 'other',
|
||||
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 = [
|
||||
'合作方向:渠道经销/团购/企业采购/门店合作/技术服务?',
|
||||
'所在城市与可覆盖区域(渠道/门店/客户类型)?',
|
||||
'预计需求规模与周期(首批/月度/长期)?',
|
||||
'资质与结算:是否需要资质文件、开票类型与账期?',
|
||||
'交付与配送:自提/同城/快递/冷链,期望时效?'
|
||||
]
|
||||
|
||||
async function onSubmit() {
|
||||
if (submitting.value) return
|
||||
submitting.value = true
|
||||
try {
|
||||
const consultTypeLabel =
|
||||
form.consultType === 'cooperation'
|
||||
? '合作咨询'
|
||||
: form.consultType === 'purchase'
|
||||
? '企业采购'
|
||||
: form.consultType === 'dealer'
|
||||
? '渠道经销'
|
||||
: form.consultType === 'service'
|
||||
? '技术服务'
|
||||
: form.consultType === 'other'
|
||||
? '其他'
|
||||
: '未选择'
|
||||
|
||||
const content = [
|
||||
`姓名:${form.name || '-'}`,
|
||||
`手机号:${form.phone || '-'}`,
|
||||
`公司/团队:${form.company || '-'}`,
|
||||
`咨询方向:${consultTypeLabel}`,
|
||||
'',
|
||||
'需求描述:',
|
||||
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>
|
||||
Reference in New Issue
Block a user