商家加盟按钮
This commit is contained in:
WindowBird
parent
340e2f7659
commit
912da7bfd2
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user