添加移动端商户加盟界面

app/pages/merchantFranchise/index.vue

@@ -0,0 +1,181 @@
+<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
+  }
+}
+</script>
+
+<template>
+  <div class="w-full   p-4 bg-white rounded-lg shadow-xl ">
+    <img src="https://api.ccttiot.com/image-1762158125769.png" alt="">
+    <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"
+    >
+      <UFormGroup label="姓名" name="name" required>
+        <UInput
+            v-model="formState.name"
+            placeholder="请输入您的姓名"
+            size="md"
+            class="w-full mb-2"
+        />
+      </UFormGroup>
+
+      <UFormGroup label="手机号" name="mobile" required>
+        <UInput
+            v-model="formState.mobile"
+            type="tel"
+            placeholder="请输入您的手机号"
+            size="md"
+            class="w-full mb-2"
+        />
+      </UFormGroup>
+
+      <UFormGroup label="城市" name="city" required>
+        <UInput
+            v-model="formState.city"
+            placeholder="请输入您的意向合作城市"
+            size="md"
+            class="w-full mb-2"
+        />
+      </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"
+            class="w-full mt-1"
+        />
+      </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>
+
+      </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>
+
+<style scoped>
+
+</style>