diff --git a/src/components/CommunityRequest.vue b/src/components/CommunityRequest.vue index c926a33..b34eb16 100644 --- a/src/components/CommunityRequest.vue +++ b/src/components/CommunityRequest.vue @@ -32,13 +32,16 @@ - -
+ +
-
✓
-

申请提交成功

-

我们将尽快处理您的小区开通申请

- +
+ ✓ + ! +
+

{{ modalTitle }}

+

{{ modalMessage }}

+
@@ -55,7 +58,12 @@ export default { const router = useRouter() const route = useRoute() const isSubmitting = ref(false) - const showSuccessModal = ref(false) + // 替换 showSuccessModal 为更通用的 showModal + const showModal = ref(false) + // 添加状态标志和消息内容 + const isSuccess = ref(true) + const modalTitle = ref('') + const modalMessage = ref('') const userId = ref('') const lastTouchEnd = ref(0) @@ -128,41 +136,67 @@ export default { } const submitRequest = async () => { + if (isSubmitting.value) return + + isSubmitting.value = true + try { - if (!userId.value) { - alert('缺少用户ID，无法提交申请') - return - } - - isSubmitting.value = true - - // 构建提交数据，添加 user_id - const submitData = { - user_id: userId.value, + // 构建请求数据 - 使用正确的参数格式 + const requestData = { + user_id: userId.value || 0, community_name: formData.communityName, community_address: formData.address } - // 使用 apiClient 而不是 axios - const response = await apiClient.post('/api/feedback/community-apply', submitData) + // 发送请求 + const response = await apiClient.post('/api/feedback/community-apply', requestData) - console.log('提交成功:', response.data) - - // 显示成功弹窗 - showSuccessModal.value = true + // 检查返回的状态码 + if (response.data && response.data.code === 200) { + console.log('申请提交成功:', response.data) + + // 显示成功弹窗 + isSuccess.value = true + modalTitle.value = '申请提交成功' + modalMessage.value = '我们将尽快审核您的小区开通申请' + showModal.value = true + + // 重置表单 + formData.communityName = '' + formData.address = '' + } else { + // 显示错误弹窗 + const errorMessage = response.data?.message || '提交失败，请稍后重试' + console.error('提交申请失败:', errorMessage) + + isSuccess.value = false + modalTitle.value = '提交失败' + modalMessage.value = errorMessage + showModal.value = true + } } catch (error) { - console.error('提交失败:', error) - alert('提交失败，请稍后重试') + console.error('提交申请失败:', error) + + // 尝试从错误响应中获取详细信息 + const errorMessage = error.response?.data?.message || '提交失败，请稍后重试' + + isSuccess.value = false + modalTitle.value = '提交失败' + modalMessage.value = errorMessage + showModal.value = true } finally { isSubmitting.value = false } } - const closeSuccessModal = () => { - showSuccessModal.value = false + // 替换 closeSuccessModal 为更通用的 closeModal + const closeModal = () => { + showModal.value = false - // 返回上一页或小程序页面 - goBack() + // 如果是成功状态，关闭弹窗后返回上一页 + if (isSuccess.value) { + goBack() + } } const goBack = () => { @@ -178,9 +212,12 @@ export default { return { formData, isSubmitting, - showSuccessModal, + showModal, + isSuccess, + modalTitle, + modalMessage, submitRequest, - closeSuccessModal, + closeModal, goBack, handleTouchStart } @@ -307,13 +344,13 @@ export default { background-color: #FFD633; } -/* 成功弹窗样式 */ -.success-modal { +/* 添加模态弹窗样式 */ +.modal { position: fixed; top: 0; left: 0; - right: 0; - bottom: 0; + width: 100%; + height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; @@ -333,10 +370,9 @@ export default { align-items: center; } -.success-icon { +.modal-icon { width: 60px; height: 60px; - background-color: #FFCC00; border-radius: 50%; display: flex; justify-content: center; @@ -346,6 +382,14 @@ export default { margin-bottom: 20px; } +.success-icon { + background-color: #FFCC00; +} + +.error-icon { + background-color: #FF6B6B; +} + .modal-content h3 { font-size: 20px; margin-bottom: 10px; @@ -361,7 +405,13 @@ export default { background-color: #FFCC00; color: #333333; border: none; + border-radius: 8px; + padding: 12px 15px; width: 100%; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.3s; } .btn-confirm:hover { diff --git a/src/components/PartnerRequest.vue b/src/components/PartnerRequest.vue index 6ab3880..5595f9d 100644 --- a/src/components/PartnerRequest.vue +++ b/src/components/PartnerRequest.vue @@ -15,13 +15,34 @@
+
+ + +
+
+ +
+
@@ -74,13 +95,16 @@ - -
+ +
-
✓
-

申请提交成功

-

我们将尽快审核您的合伙人申请

- +
+ ✓ + ! +
+

{{ modalTitle }}

+

{{ modalMessage }}

+
@@ -97,14 +121,19 @@ export default { const router = useRouter() const route = useRoute() const isSubmitting = ref(false) - const showSuccessModal = ref(false) + const showModal = ref(false) + const isSuccess = ref(true) + const modalTitle = ref('') + const modalMessage = ref('') const userId = ref('') const lastTouchEnd = ref(0) + const cooldown = ref(0) const formData = reactive({ name: '', phone: '', - partnerType: 'community', // 默认选择小区服务商 + phone_code: '', + partnerType: 'community', serviceArea: '' }) @@ -130,90 +159,121 @@ export default { lastTouchEnd.value = now } - const handleTouchMove = (event) => { - if (event.touches.length > 1) { - event.preventDefault() - } - } + document.addEventListener('touchend', handleTouchEnd) - document.addEventListener('touchend', handleTouchEnd, { passive: false }) - document.addEventListener('touchmove', handleTouchMove, { passive: false }) - - // 保存引用以便在组件卸载时移除 - window._partnerRequestTouchHandlers = { - handleTouchEnd, - handleTouchMove - } + onBeforeUnmount(() => { + document.removeEventListener('touchend', handleTouchEnd) + document.title = '蜂快到家' + }) }) - onBeforeUnmount(() => { - // 移除事件监听器 - if (window._partnerRequestTouchHandlers) { - document.removeEventListener('touchend', window._partnerRequestTouchHandlers.handleTouchEnd) - document.removeEventListener('touchmove', window._partnerRequestTouchHandlers.handleTouchMove) - delete window._partnerRequestTouchHandlers - } - }) - - const handleTouchStart = (event) => { - // 防止双击缩放 - if (event.touches.length > 1) { - event.preventDefault() - } - } - const checkMiniProgramEnvironment = () => { - // 检测是否在微信小程序环境中 - const ua = navigator.userAgent.toLowerCase() - const isMiniProgram = ua.indexOf('miniprogram') > -1 || window.__wxjs_environment === 'miniprogram' + // 检查是否在微信小程序环境中 + const userAgent = navigator.userAgent.toLowerCase() + const isWechatMiniProgram = /miniprogram/.test(userAgent) || window.__wxjs_environment === 'miniprogram' - console.log('Is Mini Program:', isMiniProgram) + console.log('是否在小程序环境中:', isWechatMiniProgram) } const selectPartnerType = (type) => { formData.partnerType = type - // 切换类型时清空服务区域 - formData.serviceArea = '' + } + + const sendVerificationCode = async () => { + // 验证手机号格式 + if (!/^1[3-9]\d{9}$/.test(formData.phone)) { + alert('请输入正确的手机号码') + return + } + + try { + // 发送验证码请求 + await apiClient.post('/api/user/send-code', { + phone: formData.phone + }) + + // 设置倒计时 + cooldown.value = 60 + const timer = setInterval(() => { + cooldown.value-- + if (cooldown.value <= 0) { + clearInterval(timer) + } + }, 1000) + + alert('验证码已发送，请注意查收') + } catch (error) { + console.error('发送验证码失败:', error) + alert('发送验证码失败，请稍后重试') + } } const submitRequest = async () => { + if (isSubmitting.value) return + + isSubmitting.value = true + try { - if (!userId.value) { - alert('缺少用户ID，无法提交申请') - return - } - - isSubmitting.value = true - - // 构建提交数据，添加 user_id - const submitData = { - user_id: userId.value, + // 构建请求数据 + const requestData = { + user_id: userId.value || 0, name: formData.name, phone: formData.phone, + phone_code: formData.phone_code, type: formData.partnerType, service_target: formData.serviceArea } - // 使用 apiClient 而不是 axios - const response = await apiClient.post('/api/feedback/partner-apply', submitData) + // 发送请求 + const response = await apiClient.post('/api/feedback/partner-apply', requestData) - console.log('提交成功:', response.data) - - // 显示成功弹窗 - showSuccessModal.value = true + // 检查返回的状态码 + if (response.data && response.data.code === 200) { + console.log('申请提交成功:', response.data) + + // 显示成功弹窗 + isSuccess.value = true + modalTitle.value = '申请提交成功' + modalMessage.value = '我们将尽快处理您的合伙人申请' + showModal.value = true + + // 重置表单 + formData.name = '' + formData.phone = '' + formData.phone_code = '' + formData.serviceArea = '' + } else { + // 显示错误弹窗 + const errorMessage = response.data?.message || '提交失败，请稍后重试' + console.error('提交申请失败:', errorMessage) + + isSuccess.value = false + modalTitle.value = '提交失败' + modalMessage.value = errorMessage + showModal.value = true + } } catch (error) { - console.error('提交失败:', error) - alert('提交失败，请稍后重试') + console.error('提交申请失败:', error) + + // 尝试从错误响应中获取详细信息 + const errorMessage = error.response?.data?.message || '提交失败，请稍后重试' + + isSuccess.value = false + modalTitle.value = '提交失败' + modalMessage.value = errorMessage + showModal.value = true } finally { isSubmitting.value = false } } - const closeSuccessModal = () => { - showSuccessModal.value = false + const closeModal = () => { + showModal.value = false - // 返回上一页或小程序页面 - goBack() + // 如果是成功状态，关闭弹窗后返回上一页 + if (isSuccess.value) { + goBack() + } } const goBack = () => { @@ -226,15 +286,27 @@ export default { } } + const handleTouchStart = (event) => { + // 防止iOS双击缩放 + if (event.touches.length > 1) { + event.preventDefault() + } + } + return { formData, isSubmitting, - showSuccessModal, + showModal, + isSuccess, + modalTitle, + modalMessage, + selectPartnerType, submitRequest, - closeSuccessModal, + closeModal, goBack, handleTouchStart, - selectPartnerType + sendVerificationCode, + cooldown } } } @@ -242,21 +314,15 @@ export default { \ No newline at end of file