xlqx/app/components/MerchantForm.vue

<!-- 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 max-w-3xl mx-auto 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>