商家加盟表单抽离
This commit is contained in:
WindowBird
parent
30a780a854
commit
73fd9c4dd8
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
189
app/components/MerchantForm.vue
Normal file
189
app/components/MerchantForm.vue
Normal file
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user