feat(contact): 更新联系页面表单功能

- 添加表单引用并集成 CMS 订单提交 API
- 将交付方式选项更改为业务类型（售前咨询、售后服务、留意反馈）
- 实现表单提交加载状态和防重复提交功能
- 添加异步提交处理和错误捕获机制
- 集成 CMS 订单创建功能并优化提交流程
- 使用表单实例重置字段替代手动清空

app/pages/contact.vue

@@ -8,7 +8,7 @@
     <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 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">
@@ -29,11 +29,11 @@
                 </a-form-item>
               </a-col>
               <a-col :xs="24" :md="12">
-                <a-form-item label="交付方式" name="delivery">
+                <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="saas">售前咨询</a-select-option>
-                    <a-select-option value="private">私有化部署</a-select-option>
+                    <a-select-option value="private">售后服务</a-select-option>
-                    <a-select-option value="hybrid">混合部署</a-select-option>
+                    <a-select-option value="hybrid">留意反馈</a-select-option>
                   </a-select>
                 </a-form-item>
               </a-col>
@@ -48,8 +48,8 @@
             </a-form-item>
 
             <a-space>
-              <a-button type="primary" html-type="submit">提交</a-button>
+              <a-button type="primary" html-type="submit" :loading="submitting">提交</a-button>
-              <a-button @click="reset">重置</a-button>
+              <a-button :disabled="submitting" @click="reset">重置</a-button>
             </a-space>
           </a-form>
         </a-card>
@@ -77,6 +77,8 @@
 
 <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({
@@ -93,6 +95,9 @@ const form = reactive({
   need: ''
 })
 
+const formRef = ref<FormInstance>()
+const submitting = ref(false)
+
 const rules = {
   name: [{ required: true, message: '请填写姓名' }],
   phone: [{ required: true, message: '请填写手机号' }],
@@ -107,17 +112,49 @@ const tips = [
   '交付方式：SaaS 或私有化部署？是否有合规要求？'
 ]
 
-function onSubmit() {
+async function onSubmit() {
-  message.success('已提交，我们会尽快联系你（当前为演示表单，可接入你的工单/线索接口）。')
+  if (submitting.value) return
-  reset()
+  submitting.value = true
+  try {
+    const deliveryLabel =
+      form.delivery === 'saas'
+        ? 'SaaS（云端）'
+        : form.delivery === 'private'
+          ? '私有化部署'
+          : form.delivery === 'hybrid'
+            ? '混合部署'
+            : '未选择'
+
+    const content = [
+      `姓名：${form.name || '-'}`,
+      `手机号：${form.phone || '-'}`,
+      `公司/团队：${form.company || '-'}`,
+      `交付方式：${deliveryLabel}`,
+      '',
+      '需求描述：',
+      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() {
-  form.name = ''
+  formRef.value?.resetFields()
-  form.phone = ''
-  form.company = ''
-  form.delivery = undefined
-  form.need = ''
 }
 </script>
-