update

2025-03-04 11:52:11 +08:00 · 2025-03-04 11:52:11 +08:00 · ce3fed4040
commit ce3fed4040
parent 07aa07bbb7
2 changed files with 305 additions and 147 deletions
--- a/src/components/CommunityRequest.vue
+++ b/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>
-        <h3>申请提交成功</h3>
-        <p>我们将尽快处理您的小区开通申请</p>
-        <button @click="closeSuccessModal" class="btn-confirm">确定</button>
+        <div class="modal-icon" :class="{ 'success-icon': isSuccess, 'error-icon': !isSuccess }">
+          <span v-if="isSuccess">✓</span>
+          <span v-else>!</span>
+        </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，无法提交申请')
-          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 {
--- a/src/components/PartnerRequest.vue
+++ b/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" 
-            id="phone" 
-            v-model="formData.phone" 
-            placeholder="请输入您的联系电话" 
+            type="text" 
+            id="phoneCode" 
+            v-model="formData.phone_code" 
+            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>
-        <h3>申请提交成功</h3>
-        <p>我们将尽快审核您的合伙人申请</p>
-        <button @click="closeSuccessModal" class="btn-confirm">确定</button>
+        <div class="modal-icon" :class="{ 'success-icon': isSuccess, 'error-icon': !isSuccess }">
+          <span v-if="isSuccess">✓</span>
+          <span v-else>!</span>
+        </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) => {
-        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 {

 <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-submit,
-.btn-confirm {
-  padding: 12px 25px;
+.btn-cancel, .btn-submit {
+  flex: 1;
+  padding: 12px 15px;
  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;
-  bottom: 0;
+  width: 100%;
+  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>