update

src/components/CommunityRequest.vue

@@ -32,13 +32,16 @@
       </form>
     </div>
     
-    <!-- 提交成功弹窗 -->
+    <!-- 将成功弹窗改为通用模态弹窗 -->
-    <div class="success-modal" v-if="showSuccessModal">
+    <div class="modal" v-if="showModal">
       <div class="modal-content">
-        <div class="success-icon">✓</div>
+        <div class="modal-icon" :class="{ 'success-icon': isSuccess, 'error-icon': !isSuccess }">
-        <h3>申请提交成功</h3>
+          <span v-if="isSuccess">✓</span>
-        <p>我们将尽快处理您的小区开通申请</p>
+          <span v-else>!</span>
-        <button @click="closeSuccessModal" class="btn-confirm">确定</button>
+        </div>
+        <h3>{{ modalTitle }}</h3>
+        <p>{{ modalMessage }}</p>
+        <button @click="closeModal" class="btn-confirm">确定</button>
       </div>
     </div>
   </div>
@@ -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，无法提交申请')
+        const requestData = {
-          return
+          user_id: userId.value || 0,
-        }
-        
-        isSubmitting.value = true
-        
-        // 构建提交数据，添加 user_id
-        const submitData = {
-          user_id: userId.value,
           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)
+        // 检查返回的状态码
-        
+        if (response.data && response.data.code === 200) {
-        // 显示成功弹窗
+          console.log('申请提交成功:', response.data)
-        showSuccessModal.value = true
+          
+          // 显示成功弹窗
+          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)
+        console.error('提交申请失败:', error)
-        alert('提交失败，请稍后重试')
+        
+        // 尝试从错误响应中获取详细信息
+        const errorMessage = error.response?.data?.message || '提交失败，请稍后重试'
+        
+        isSuccess.value = false
+        modalTitle.value = '提交失败'
+        modalMessage.value = errorMessage
+        showModal.value = true
       } finally {
         isSubmitting.value = false
       }
     }
     
-    const closeSuccessModal = () => {
+    // 替换 closeSuccessModal 为更通用的 closeModal
-      showSuccessModal.value = false
+    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;
+  width: 100%;
-  bottom: 0;
+  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 {

src/components/PartnerRequest.vue

@@ -15,13 +15,34 @@
         
         <div class="form-group">
           <label for="phone">您的电话</label>
+          <div class="phone-input-group">
+            <input 
+              type="tel" 
+              id="phone" 
+              v-model="formData.phone" 
+              placeholder="请输入您的联系电话" 
+              required
+              pattern="[0-9]{11}"
+            />
+            <button 
+              type="button" 
+              class="btn-send-code" 
+              @click="sendVerificationCode" 
+              :disabled="cooldown > 0"
+            >
+              {{ cooldown > 0 ? `${cooldown}秒后重发` : '发送验证码' }}
+            </button>
+          </div>
+        </div>
+        
+        <div class="form-group">
+          <label for="phoneCode">验证码</label>
           <input 
-            type="tel" 
+            type="text" 
-            id="phone" 
+            id="phoneCode" 
-            v-model="formData.phone" 
+            v-model="formData.phone_code" 
-            placeholder="请输入您的联系电话" 
+            placeholder="请输入短信验证码" 
             required
-            pattern="[0-9]{11}"
           />
         </div>
         
@@ -74,13 +95,16 @@
       </form>
     </div>
     
-    <!-- 提交成功弹窗 -->
+    <!-- 成功弹窗 -->
-    <div class="success-modal" v-if="showSuccessModal">
+    <div class="modal" v-if="showModal">
       <div class="modal-content">
-        <div class="success-icon">✓</div>
+        <div class="modal-icon" :class="{ 'success-icon': isSuccess, 'error-icon': !isSuccess }">
-        <h3>申请提交成功</h3>
+          <span v-if="isSuccess">✓</span>
-        <p>我们将尽快审核您的合伙人申请</p>
+          <span v-else>!</span>
-        <button @click="closeSuccessModal" class="btn-confirm">确定</button>
+        </div>
+        <h3>{{ modalTitle }}</h3>
+        <p>{{ modalMessage }}</p>
+        <button @click="closeModal" class="btn-confirm">确定</button>
       </div>
     </div>
   </div>
@@ -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) => {
+      document.addEventListener('touchend', handleTouchEnd)
-        if (event.touches.length > 1) {
-          event.preventDefault()
-        }
-      }
       
-      document.addEventListener('touchend', handleTouchEnd, { passive: false })
+      onBeforeUnmount(() => {
-      document.addEventListener('touchmove', handleTouchMove, { passive: false })
+        document.removeEventListener('touchend', handleTouchEnd)
-      
+        document.title = '蜂快到家'
-      // 保存引用以便在组件卸载时移除
+      })
-      window._partnerRequestTouchHandlers = {
-        handleTouchEnd,
-        handleTouchMove
-      }
     })
     
-    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 userAgent = navigator.userAgent.toLowerCase()
-      const isMiniProgram = ua.indexOf('miniprogram') > -1 || window.__wxjs_environment === 'miniprogram'
+      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，无法提交申请')
+        const requestData = {
-          return
+          user_id: userId.value || 0,
-        }
-        
-        isSubmitting.value = true
-        
-        // 构建提交数据，添加 user_id
-        const submitData = {
-          user_id: userId.value,
           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)
+        // 检查返回的状态码
-        
+        if (response.data && response.data.code === 200) {
-        // 显示成功弹窗
+          console.log('申请提交成功:', response.data)
-        showSuccessModal.value = true
+          
+          // 显示成功弹窗
+          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)
+        console.error('提交申请失败:', error)
-        alert('提交失败，请稍后重试')
+        
+        // 尝试从错误响应中获取详细信息
+        const errorMessage = error.response?.data?.message || '提交失败，请稍后重试'
+        
+        isSuccess.value = false
+        modalTitle.value = '提交失败'
+        modalMessage.value = errorMessage
+        showModal.value = true
       } finally {
         isSubmitting.value = false
       }
     }
     
-    const closeSuccessModal = () => {
+    const closeModal = () => {
-      showSuccessModal.value = false
+      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 {
 
 <style scoped>
 .partner-request-container {
-  /* 添加触摸相关样式 */
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: manipulation;
-  
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 15px;
+  justify-content: flex-start;
+  padding: 20px 15px 30px;
   background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
+  position: relative;
+  overflow: hidden;
 }
 
 .request-card {
@@ -269,11 +335,11 @@ export default {
 }
 
 .page-title {
-  font-size: 22px;
+  font-size: 24px;
   font-weight: bold;
   color: #333333;
-  text-align: center;
   margin-bottom: 25px;
+  text-align: center;
 }
 
 .request-form {
@@ -310,6 +376,39 @@ export default {
   outline: none;
 }
 
+/* 手机号输入组样式 */
+.phone-input-group {
+  display: flex;
+  gap: 10px;
+}
+
+.phone-input-group input {
+  flex: 1;
+}
+
+.btn-send-code {
+  padding: 0 15px;
+  background-color: #FFCC00;
+  color: #333333;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.3s;
+}
+
+.btn-send-code:hover {
+  background-color: #FFD633;
+}
+
+.btn-send-code:disabled {
+  background-color: #DDDDDD;
+  color: #999999;
+  cursor: not-allowed;
+}
+
 /* 合伙类型选择器样式 */
 .partner-type-selector {
   display: flex;
@@ -363,25 +462,25 @@ export default {
 
 .form-actions {
   display: flex;
-  justify-content: space-between;
+  gap: 15px;
   margin-top: 10px;
 }
 
-.btn-cancel,
+.btn-cancel, .btn-submit {
-.btn-submit,
+  flex: 1;
-.btn-confirm {
+  padding: 12px 15px;
-  padding: 12px 25px;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
+  text-align: center;
 }
 
 .btn-cancel {
-  background-color: #F5F5F5;
+  background-color: #F2F2F2;
   color: #666666;
-  border: 1px solid #DDDDDD;
+  border: none;
 }
 
 .btn-submit {
@@ -390,26 +489,27 @@ export default {
   border: none;
 }
 
-.btn-submit:disabled {
-  background-color: #FFE580;
-  cursor: not-allowed;
-}
-
 .btn-cancel:hover {
-  background-color: #EEEEEE;
+  background-color: #E6E6E6;
 }
 
-.btn-submit:hover:not(:disabled) {
+.btn-submit:hover {
   background-color: #FFD633;
 }
 
+.btn-submit:disabled {
+  background-color: #DDDDDD;
+  color: #999999;
+  cursor: not-allowed;
+}
+
 /* 成功弹窗样式 */
-.success-modal {
+.modal {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
-  bottom: 0;
+  height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
@@ -429,10 +529,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;
@@ -442,6 +541,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;
@@ -457,7 +564,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 {
@@ -486,17 +599,12 @@ export default {
     font-size: 15px;
   }
   
-  .partner-type-selector {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
   .partner-type-option {
     padding: 10px 12px;
   }
   
   .option-label {
-    font-size: 15px;
+    font-size: 14px;
   }
 }
 </style>