商家加盟按钮-优化样式

app/components/ContactFloatingButton.vue

@@ -1,6 +1,6 @@
 <!-- components/ContactFloatingButton.vue -->
 <template>
-  <div class="fixed  right-3 lg:right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
+  <div class="fixed  right-2 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',
@@ -11,20 +11,21 @@
           color="neutral" label="商家加盟"
           variant="subtle"/>
       <template #content>
-        <div class="w-70 lg:w-80 h-120 lg:h-160 p-4 bg-white rounded-lg shadow-xl overflow-y-auto">
+        <div class="w-75 lg:w-100 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>
+          <h3 class="text-lg font-semibold mb-1 text-gray-800">商家加盟申请</h3>
           <UForm 
             ref="formRef"
             :state="formState" 
+            class="space-y-4 w-full"
             @submit="onSubmit"
-            class="space-y-4"
           >
             <UFormGroup label="姓名" name="name" required>
               <UInput 
                 v-model="formState.name" 
                 placeholder="请输入您的姓名"
                 size="md"
+                class="w-full mb-2"
               />
             </UFormGroup>
 
@@ -32,16 +33,18 @@
               <UInput 
                 v-model="formState.mobile" 
                 type="tel"
-                placeholder="请输入手机号"
+                placeholder="请输入您的手机号"
                 size="md"
+                class="w-full mb-2"
               />
             </UFormGroup>
 
             <UFormGroup label="城市" name="city" required>
               <UInput 
                 v-model="formState.city" 
-                placeholder="请输入所在城市"
+                placeholder="请输入您的意向合作城市"
                 size="md"
+                class="w-full mb-2"
               />
             </UFormGroup>
 
@@ -71,9 +74,10 @@
             <UFormGroup label="留言内容" name="content" required>
               <UTextarea 
                 v-model="formState.content" 
-                placeholder="请输入您的留言"
+                placeholder="请输入您想要了解的信息"
                 :rows="3"
                 size="md"
+                class="w-full mt-1"
               />
             </UFormGroup>
 
@@ -99,13 +103,6 @@
             </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="">
@@ -120,10 +117,9 @@
 import { ref, reactive } from 'vue'
 import { submitMchApply, type MchApplyParams } from '~/config/api'
 
+const toast = useToast()
 const formRef = ref()
 const isSubmitting = ref(false)
-const alertMessage = ref('')
-const alertType = ref<'success' | 'error'>('success')
 
 const formState = reactive<MchApplyParams>({
   name: '',
@@ -133,15 +129,13 @@ const formState = reactive<MchApplyParams>({
   city: ''
 })
 
-const showAlert = (message: string, type: 'success' | 'error' = 'success') => {
+const showToast = (title: string, type: 'success' | 'error' = 'success') => {
-  alertMessage.value = message
+  toast.add({
-  alertType.value = type
+    title,
-  // 3秒后自动关闭成功提示
+    color: type === 'success' ? 'success' : 'error',
-  if (type === 'success') {
+    icon: type === 'success' ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle',
-    setTimeout(() => {
+
-      alertMessage.value = ''
+  })
-    }, 3000)
-  }
 }
 
 const resetForm = () => {
@@ -150,31 +144,30 @@ const resetForm = () => {
   formState.content = ''
   formState.hasDevice = 0
   formState.city = ''
-  alertMessage.value = ''
   formRef.value?.clear()
 }
 
 const validateForm = (): boolean => {
   if (!formState.name.trim()) {
-    showAlert('请输入姓名', 'error')
+    showToast('请输入姓名', 'error')
     return false
   }
   if (!formState.mobile.trim()) {
-    showAlert('请输入手机号', 'error')
+    showToast('请输入手机号', 'error')
     return false
   }
   // 简单的手机号验证
   const mobileRegex = /^1[3-9]\d{9}$/
   if (!mobileRegex.test(formState.mobile)) {
-    showAlert('请输入正确的手机号', 'error')
+    showToast('请输入正确的手机号', 'error')
     return false
   }
   if (!formState.city.trim()) {
-    showAlert('请输入所在城市', 'error')
+    showToast('请输入所在城市', 'error')
     return false
   }
   if (!formState.content.trim()) {
-    showAlert('请输入留言内容', 'error')
+    showToast('请输入留言内容', 'error')
     return false
   }
   return true
@@ -186,20 +179,19 @@ const onSubmit = async () => {
   }
 
   isSubmitting.value = true
-  alertMessage.value = ''
 
   try {
     const response = await submitMchApply(formState)
     
     if (response.code === 200) {
-      showAlert('申请提交成功！我们会尽快与您联系。', 'success')
+      showToast('申请提交成功！我们会尽快与您联系。', 'success')
       resetForm()
     } else {
-      showAlert(response.msg || '提交失败，请稍后重试', 'error')
+      showToast(response.msg || '提交失败，请稍后重试', 'error')
     }
   } catch (error) {
     console.error('提交申请失败:', error)
-    showAlert('提交失败，请检查网络连接后重试', 'error')
+    showToast('提交失败，请检查网络连接后重试', 'error')
   } finally {
     isSubmitting.value = false
   }