From 912da7bfd25eb26578d3beb6258003c05f9b984f Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 3 Nov 2025 16:39:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=AE=B6=E5=8A=A0=E7=9B=9F=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ContactFloatingButton.vue | 203 ++++++++++++++++++++++-
 app/config/api.ts                        |  36 ++++
 2 files changed, 231 insertions(+), 8 deletions(-)

diff --git a/app/components/ContactFloatingButton.vue b/app/components/ContactFloatingButton.vue
index 40be96a..d81f48e 100644
--- a/app/components/ContactFloatingButton.vue
+++ b/app/components/ContactFloatingButton.vue
@@ -1,21 +1,208 @@
 <!-- components/ContactFloatingButton.vue -->
 <template>
-  <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
-    <UPopover mode="click">
+  <div class="fixed  right-3 lg:right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
+    <UPopover mode="click" :popper="{ placement: 'left-start'  }"    :content="{
+      align: 'center',
+      side: 'left',
+      sideOffset: 8
+    }" >
       <UButton
           class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
-          color="neutral" label="联系客服"
+          color="neutral" label="商家加盟"
           variant="subtle"/>
       <template #content>
-        <div class="w-64 overflow-hidden transition-all duration-300 ease-out;">
-          <img
-              alt="QRCode"
-              class="w-full h-auto border-4 border-white rounded-lg shadow-xl"
-              src="/img/QRCode.png"
+        <div class="w-70 lg:w-80 h-120 lg:h-160 p-4 bg-white rounded-lg shadow-xl overflow-y-auto">
+          <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
+          <h3 class="text-lg font-semibold mb-4 text-gray-800">商家加盟申请</h3>
+          <UForm 
+            ref="formRef"
+            :state="formState" 
+            @submit="onSubmit"
+            class="space-y-4"
           >
+            <UFormGroup label="姓名" name="name" required>
+              <UInput 
+                v-model="formState.name" 
+                placeholder="请输入您的姓名"
+                size="md"
+              />
+            </UFormGroup>
+
+            <UFormGroup label="手机号" name="mobile" required>
+              <UInput 
+                v-model="formState.mobile" 
+                type="tel"
+                placeholder="请输入手机号"
+                size="md"
+              />
+            </UFormGroup>
+
+            <UFormGroup label="城市" name="city" required>
+              <UInput 
+                v-model="formState.city" 
+                placeholder="请输入所在城市"
+                size="md"
+              />
+            </UFormGroup>
+
+            <UFormGroup label="是否有设备" name="hasDevice">
+              <div class="flex gap-4">
+                <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"
+              />
+            </UFormGroup>
+
+
+            <div class="flex gap-2 pt-2 ">
+              <UButton 
+                type="submit" 
+                :loading="isSubmitting"
+                :disabled="isSubmitting"
+                class="flex-1 bg-primary hover:bg-primary-600 justify-center items-center"
+                size="md"
+              >
+                {{ isSubmitting ? '提交中...' : '马上加盟 立即挣钱' }}
+              </UButton>
+              <UButton 
+                type="button"
+                variant="outline"
+                @click="resetForm"
+                size="md"
+              >
+                重置
+              </UButton>
+            </div>
+          </UForm>
+
+          <UAlert
+            v-if="alertMessage"
+            :color="alertType"
+            :title="alertMessage"
+            class="mt-4"
+            @close="alertMessage = ''"
+          />
+          <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>
     </UPopover>
   </div>
 </template>
 
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { submitMchApply, type MchApplyParams } from '~/config/api'
+
+const formRef = ref()
+const isSubmitting = ref(false)
+const alertMessage = ref('')
+const alertType = ref<'success' | 'error'>('success')
+
+const formState = reactive<MchApplyParams>({
+  name: '',
+  mobile: '',
+  content: '',
+  hasDevice: 0,
+  city: ''
+})
+
+const showAlert = (message: string, type: 'success' | 'error' = 'success') => {
+  alertMessage.value = message
+  alertType.value = type
+  // 3秒后自动关闭成功提示
+  if (type === 'success') {
+    setTimeout(() => {
+      alertMessage.value = ''
+    }, 3000)
+  }
+}
+
+const resetForm = () => {
+  formState.name = ''
+  formState.mobile = ''
+  formState.content = ''
+  formState.hasDevice = 0
+  formState.city = ''
+  alertMessage.value = ''
+  formRef.value?.clear()
+}
+
+const validateForm = (): boolean => {
+  if (!formState.name.trim()) {
+    showAlert('请输入姓名', 'error')
+    return false
+  }
+  if (!formState.mobile.trim()) {
+    showAlert('请输入手机号', 'error')
+    return false
+  }
+  // 简单的手机号验证
+  const mobileRegex = /^1[3-9]\d{9}$/
+  if (!mobileRegex.test(formState.mobile)) {
+    showAlert('请输入正确的手机号', 'error')
+    return false
+  }
+  if (!formState.city.trim()) {
+    showAlert('请输入所在城市', 'error')
+    return false
+  }
+  if (!formState.content.trim()) {
+    showAlert('请输入留言内容', 'error')
+    return false
+  }
+  return true
+}
+
+const onSubmit = async () => {
+  if (!validateForm()) {
+    return
+  }
+
+  isSubmitting.value = true
+  alertMessage.value = ''
+
+  try {
+    const response = await submitMchApply(formState)
+    
+    if (response.code === 200) {
+      showAlert('申请提交成功！我们会尽快与您联系。', 'success')
+      resetForm()
+    } else {
+      showAlert(response.msg || '提交失败，请稍后重试', 'error')
+    }
+  } catch (error) {
+    console.error('提交申请失败:', error)
+    showAlert('提交失败，请检查网络连接后重试', 'error')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
diff --git a/app/config/api.ts b/app/config/api.ts
index e9b9f1c..a8f5153 100644
--- a/app/config/api.ts
+++ b/app/config/api.ts
@@ -189,3 +189,39 @@ export async function getArticleDetail(id: string): Promise<Article | null> {
   }
 }
 
+/**
+ * 商家加盟申请数据类型定义
+ */
+export interface MchApplyParams {
+  name: string
+  mobile: string
+  content: string
+  hasDevice: number
+  city: string
+}
+
+/**
+ * 提交商家加盟申请
+ * @param params 申请参数
+ * @returns Promise<ApiResponse<any>> 返回申请结果
+ */
+export async function submitMchApply(params: MchApplyParams): Promise<ApiResponse<any>> {
+  try {
+    const response = await $fetch<ApiResponse<any>>(
+      `${API_BASE_URL}/app/mchApply`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: params,
+      }
+    )
+
+    return response
+  } catch (error) {
+    console.error('提交商家加盟申请时发生错误:', error)
+    throw error
+  }
+}
+