pc-10584/app/pages/contact/index.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">
      填写需求后我们将尽快联系你，为你对接供货报价、资质资料与合作方案（渠道/团购/企业采购/门店合作等）。
    </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>