From 73fd9c4dd85c02d59e1d681c2e60954735cdcfdc Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 4 Nov 2025 15:32:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=AE=B6=E5=8A=A0=E7=9B=9F=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ContactFloatingButton.vue | 176 +--------------------
 app/components/MerchantForm.vue          | 189 +++++++++++++++++++++++
 app/pages/merchantFranchise/index.vue    | 175 +--------------------
 3 files changed, 194 insertions(+), 346 deletions(-)
 create mode 100644 app/components/MerchantForm.vue

diff --git a/app/components/ContactFloatingButton.vue b/app/components/ContactFloatingButton.vue
index 4c78e68..360fa26 100644
--- a/app/components/ContactFloatingButton.vue
+++ b/app/components/ContactFloatingButton.vue
@@ -19,98 +19,8 @@
           label="商家加盟"
           variant="subtle"/>
       <template #content>
-        <div class="w-75 lg:w-100 h-120 lg:h-160 p-4 bg-white rounded-lg shadow-xl overflow-y-auto hidden lg:block">
-          <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
-          <h3 class="text-lg font-semibold my-4 text-gray-800">商家加盟申请</h3>
-          <UForm 
-            ref="formRef"
-            :state="formState" 
-            class="space-y-4 w-full"
-            @submit="onSubmit"
-
-          >
-            <UFormGroup label="姓名" name="name" required>
-              <UInput 
-                v-model="formState.name" 
-                placeholder="请输入您的姓名"
-                size="md"
-                class="w-full mb-5"
-              />
-            </UFormGroup>
-
-            <UFormGroup label="手机号" name="mobile" required>
-              <UInput 
-                v-model="formState.mobile" 
-                type="tel"
-                placeholder="请输入您的手机号"
-                size="md"
-                class="w-full mb-5"
-              />
-            </UFormGroup>
-
-            <UFormGroup label="城市" name="city" required>
-              <UInput 
-                v-model="formState.city" 
-                placeholder="请输入您的意向合作城市"
-                size="md"
-                class="w-full mb-5"
-              />
-            </UFormGroup>
-
-            <UFormGroup label="是否有设备" name="hasDevice">
-              <div class="flex gap-4 mb-5">
-                <label class="flex items-center gap-2 cursor-pointer">
-                  <input 
-                    type="radio" 
-                    v-model="formState.hasDevice" 
-                    :value="1"
-                    class="w-4 h-4 text-primary"
-                  />
-                  <span class="text-sm">有设备</span>
-                </label>
-                <label class="flex items-center gap-2 cursor-pointer">
-                  <input 
-                    type="radio" 
-                    v-model="formState.hasDevice" 
-                    :value="0"
-                    class="w-4 h-4 text-primary"
-                  />
-                  <span class="text-sm">无设备</span>
-                </label>
-              </div>
-            </UFormGroup>
-
-            <UFormGroup label="留言内容" name="content" required>
-              <UTextarea 
-                v-model="formState.content" 
-                placeholder="请输入您想要了解的信息"
-                :rows="3"
-                size="md"
-                class="w-full mb-5"
-              />
-            </UFormGroup>
-
-
-            <div class="flex gap-2  ">
-              <UButton
-
-                type="submit" 
-                :loading="isSubmitting"
-                :disabled="isSubmitting"
-                class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center rounded-full"
-                size="xl"
-
-              >
-                {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
-              </UButton>
-
-            </div>
-          </UForm>
-
-          <img class="mt-2" src="https://api.ccttiot.com/image-1762158608753.png" alt="">
-          <img src="https://api.ccttiot.com/image-1762159041739.png" alt="">
-          <img src="https://api.ccttiot.com/image-1762159105486.png" alt="">
-          <img src="https://api.ccttiot.com/image-1762158699504.png" alt="">
+        <div class="w-75 lg:w-100 h-120 lg:h-160 overflow-y-auto hidden lg:block">
+          <MerchantForm container-class="p-4 bg-white rounded-lg shadow-xl" />
         </div>
       </template>
       </UPopover>
@@ -131,86 +41,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { submitMchApply, type MchApplyParams } from '~/config/api'
-
-const toast = useToast()
-const formRef = ref()
-const isSubmitting = ref(false)
-
-const formState = reactive<MchApplyParams>({
-  name: '',
-  mobile: '',
-  content: '',
-  hasDevice: 0,
-  city: ''
-})
-
-const showToast = (title: string, type: 'success' | 'error' = 'success') => {
-  toast.add({
-    title,
-    color: type === 'success' ? 'success' : 'error',
-    icon: type === 'success' ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle',
-  })
-}
-
-const resetForm = () => {
-  formState.name = ''
-  formState.mobile = ''
-  formState.content = ''
-  formState.hasDevice = 0
-  formState.city = ''
-  formRef.value?.clear()
-}
-
-const validateForm = (): boolean => {
-  if (!formState.name.trim()) {
-    showToast('请输入姓名', 'error')
-    return false
-  }
-  if (!formState.mobile.trim()) {
-    showToast('请输入手机号', 'error')
-    return false
-  }
-  // 简单的手机号验证
-  const mobileRegex = /^1[3-9]\d{9}$/
-  if (!mobileRegex.test(formState.mobile)) {
-    showToast('请输入正确的手机号', 'error')
-    return false
-  }
-  if (!formState.city.trim()) {
-    showToast('请输入所在城市', 'error')
-    return false
-  }
-  if (!formState.content.trim()) {
-    showToast('请输入留言内容', 'error')
-    return false
-  }
-  return true
-}
-
-const onSubmit = async () => {
-  if (!validateForm()) {
-    return
-  }
-
-  isSubmitting.value = true
-
-  try {
-    const response = await submitMchApply(formState)
-    
-    if (response.code === 200) {
-      showToast('申请提交成功！我们会尽快与您联系。', 'success')
-      resetForm()
-    } else {
-      showToast(response.msg || '提交失败，请稍后重试', 'error')
-    }
-  } catch (error) {
-    console.error('提交申请失败:', error)
-    showToast('提交失败，请检查网络连接后重试', 'error')
-  } finally {
-    isSubmitting.value = false
-  }
-}
+// 表单逻辑已抽离到 MerchantForm 组件
 </script>
 
diff --git a/app/components/MerchantForm.vue b/app/components/MerchantForm.vue
new file mode 100644
index 0000000..563354a
--- /dev/null
+++ b/app/components/MerchantForm.vue
@@ -0,0 +1,189 @@
+<!-- components/MerchantForm.vue -->
+<template>
+  <div :class="containerClass">
+    <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
+    <h3 class="text-lg font-semibold my-4 text-gray-800">商家加盟申请</h3>
+    <UForm 
+      ref="formRef"
+      :state="formState" 
+      class="space-y-4 w-full"
+      @submit="onSubmit"
+    >
+      <UFormGroup label="姓名" name="name" required>
+        <UInput 
+          v-model="formState.name" 
+          placeholder="请输入您的姓名"
+          size="md"
+          class="w-full mb-5"
+        />
+      </UFormGroup>
+
+      <UFormGroup label="手机号" name="mobile" required>
+        <UInput 
+          v-model="formState.mobile" 
+          type="tel"
+          placeholder="请输入您的手机号"
+          size="md"
+          class="w-full mb-5"
+        />
+      </UFormGroup>
+
+      <UFormGroup label="城市" name="city" required>
+        <UInput 
+          v-model="formState.city" 
+          placeholder="请输入您的意向合作城市"
+          size="md"
+          class="w-full mb-5"
+        />
+      </UFormGroup>
+
+      <UFormGroup label="是否有设备" name="hasDevice">
+        <div class="flex gap-4 mb-5">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input 
+              type="radio" 
+              v-model="formState.hasDevice" 
+              :value="1"
+              class="w-4 h-4 text-primary"
+            />
+            <span class="text-sm">有设备</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input 
+              type="radio" 
+              v-model="formState.hasDevice" 
+              :value="0"
+              class="w-4 h-4 text-primary"
+            />
+            <span class="text-sm">无设备</span>
+          </label>
+        </div>
+      </UFormGroup>
+
+      <UFormGroup label="留言内容" name="content" required>
+        <UTextarea 
+          v-model="formState.content" 
+          placeholder="请输入您想要了解的信息"
+          :rows="3"
+          size="md"
+          class="w-full mb-5"
+        />
+      </UFormGroup>
+
+      <div class="flex gap-2">
+        <UButton
+          type="submit" 
+          :loading="isSubmitting"
+          :disabled="isSubmitting"
+          class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center rounded-full"
+          size="xl"
+        >
+          {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
+        </UButton>
+      </div>
+    </UForm>
+
+    <img class="mt-2" src="https://api.ccttiot.com/image-1762158608753.png" alt="">
+    <img src="https://api.ccttiot.com/image-1762159041739.png" alt="">
+    <img src="https://api.ccttiot.com/image-1762159105486.png" alt="">
+    <img src="https://api.ccttiot.com/image-1762158699504.png" alt="">
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { submitMchApply, type MchApplyParams } from '~/config/api'
+
+interface Props {
+  containerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  containerClass: 'w-full p-4 bg-white rounded-lg shadow-xl mb-16'
+})
+
+const toast = useToast()
+const formRef = ref()
+const isSubmitting = ref(false)
+
+const formState = reactive<MchApplyParams>({
+  name: '',
+  mobile: '',
+  content: '',
+  hasDevice: 0,
+  city: ''
+})
+
+const showToast = (title: string, type: 'success' | 'error' = 'success') => {
+  toast.add({
+    title,
+    color: type === 'success' ? 'success' : 'error',
+    icon: type === 'success' ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle',
+  })
+}
+
+const resetForm = () => {
+  formState.name = ''
+  formState.mobile = ''
+  formState.content = ''
+  formState.hasDevice = 0
+  formState.city = ''
+  formRef.value?.clear()
+}
+
+const validateForm = (): boolean => {
+  if (!formState.name.trim()) {
+    showToast('请输入姓名', 'error')
+    return false
+  }
+  if (!formState.mobile.trim()) {
+    showToast('请输入手机号', 'error')
+    return false
+  }
+  // 简单的手机号验证
+  const mobileRegex = /^1[3-9]\d{9}$/
+  if (!mobileRegex.test(formState.mobile)) {
+    showToast('请输入正确的手机号', 'error')
+    return false
+  }
+  if (!formState.city.trim()) {
+    showToast('请输入所在城市', 'error')
+    return false
+  }
+  if (!formState.content.trim()) {
+    showToast('请输入留言内容', 'error')
+    return false
+  }
+  return true
+}
+
+const onSubmit = async () => {
+  if (!validateForm()) {
+    return
+  }
+
+  isSubmitting.value = true
+
+  try {
+    const response = await submitMchApply(formState)
+    
+    if (response.code === 200) {
+      showToast('申请提交成功！我们会尽快与您联系。', 'success')
+      resetForm()
+    } else {
+      showToast(response.msg || '提交失败，请稍后重试', 'error')
+    }
+  } catch (error) {
+    console.error('提交申请失败:', error)
+    showToast('提交失败，请检查网络连接后重试', 'error')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// 暴露 resetForm 方法，以便父组件调用
+defineExpose({
+  resetForm
+})
+</script>
+
diff --git a/app/pages/merchantFranchise/index.vue b/app/pages/merchantFranchise/index.vue
index cf43cdd..90ca904 100644
--- a/app/pages/merchantFranchise/index.vue
+++ b/app/pages/merchantFranchise/index.vue
@@ -1,180 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { submitMchApply, type MchApplyParams } from '~/config/api'
-
-const toast = useToast()
-const formRef = ref()
-const isSubmitting = ref(false)
-
-const formState = reactive<MchApplyParams>({
-  name: '',
-  mobile: '',
-  content: '',
-  hasDevice: 0,
-  city: ''
-})
-
-const showToast = (title: string, type: 'success' | 'error' = 'success') => {
-  toast.add({
-    title,
-    color: type === 'success' ? 'success' : 'error',
-    icon: type === 'success' ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle',
-
-  })
-}
-
-const resetForm = () => {
-  formState.name = ''
-  formState.mobile = ''
-  formState.content = ''
-  formState.hasDevice = 0
-  formState.city = ''
-  formRef.value?.clear()
-}
-
-const validateForm = (): boolean => {
-  if (!formState.name.trim()) {
-    showToast('请输入姓名', 'error')
-    return false
-  }
-  if (!formState.mobile.trim()) {
-    showToast('请输入手机号', 'error')
-    return false
-  }
-  // 简单的手机号验证
-  const mobileRegex = /^1[3-9]\d{9}$/
-  if (!mobileRegex.test(formState.mobile)) {
-    showToast('请输入正确的手机号', 'error')
-    return false
-  }
-  if (!formState.city.trim()) {
-    showToast('请输入所在城市', 'error')
-    return false
-  }
-  if (!formState.content.trim()) {
-    showToast('请输入留言内容', 'error')
-    return false
-  }
-  return true
-}
-
-const onSubmit = async () => {
-  if (!validateForm()) {
-    return
-  }
-
-  isSubmitting.value = true
-
-  try {
-    const response = await submitMchApply(formState)
-
-    if (response.code === 200) {
-      showToast('申请提交成功！我们会尽快与您联系。', 'success')
-      resetForm()
-    } else {
-      showToast(response.msg || '提交失败，请稍后重试', 'error')
-    }
-  } catch (error) {
-    console.error('提交申请失败:', error)
-    showToast('提交失败，请检查网络连接后重试', 'error')
-  } finally {
-    isSubmitting.value = false
-  }
-}
+// 表单逻辑已抽离到 MerchantForm 组件
 </script>
 
 <template>
-  <div class="w-full   p-4 bg-white rounded-lg shadow-xl mb-16">
-    <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
-    <h3 class="text-lg font-semibold my-4 text-gray-800">商家加盟申请</h3>
-    <UForm
-        ref="formRef"
-        :state="formState"
-        class="space-y-4 w-full"
-        @submit="onSubmit"
-
-    >
-      <UFormGroup label="姓名" name="name" required>
-        <UInput
-            v-model="formState.name"
-            placeholder="请输入您的姓名"
-            size="md"
-            class="w-full mb-5"
-        />
-      </UFormGroup>
-
-      <UFormGroup label="手机号" name="mobile" required>
-        <UInput
-            v-model="formState.mobile"
-            type="tel"
-            placeholder="请输入您的手机号"
-            size="md"
-            class="w-full mb-5"
-        />
-      </UFormGroup>
-
-      <UFormGroup label="城市" name="city" required>
-        <UInput
-            v-model="formState.city"
-            placeholder="请输入您的意向合作城市"
-            size="md"
-            class="w-full mb-5"
-        />
-      </UFormGroup>
-
-      <UFormGroup label="是否有设备" name="hasDevice">
-        <div class="flex gap-4 mb-5">
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-                type="radio"
-                v-model="formState.hasDevice"
-                :value="1"
-                class="w-4 h-4 text-primary"
-            />
-            <span class="text-sm">有设备</span>
-          </label>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-                type="radio"
-                v-model="formState.hasDevice"
-                :value="0"
-                class="w-4 h-4 text-primary"
-            />
-            <span class="text-sm">无设备</span>
-          </label>
-        </div>
-      </UFormGroup>
-
-      <UFormGroup label="留言内容" name="content" required>
-        <UTextarea
-            v-model="formState.content"
-            placeholder="请输入您想要了解的信息"
-            :rows="3"
-            size="md"
-            class="w-full mb-5"
-        />
-      </UFormGroup>
-
-
-      <div class="flex gap-2  ">
-        <UButton
-            type="submit"
-            :loading="isSubmitting"
-            :disabled="isSubmitting"
-            class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center rounded-full"
-            size="xl"
-        >
-          {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
-        </UButton>
-
-      </div>
-    </UForm>
-
-    <img class="mt-2" src="https://api.ccttiot.com/image-1762158608753.png" alt="">
-    <img src="https://api.ccttiot.com/image-1762159041739.png" alt="">
-    <img src="https://api.ccttiot.com/image-1762159105486.png" alt="">
-    <img src="https://api.ccttiot.com/image-1762158699504.png" alt="">
-  </div>
+  <MerchantForm />
 </template>
 
 <style scoped>