diff --git a/src/components/CommunityRequest.vue b/src/components/CommunityRequest.vue
new file mode 100644
index 0000000..b9db782
--- /dev/null
+++ b/src/components/CommunityRequest.vue
@@ -0,0 +1,349 @@
+<template>
+  <div class="community-request-container">
+    <div class="request-card">
+      <h2 class="page-title">小区开通申请</h2>
+      
+      <form @submit.prevent="submitRequest" class="request-form">
+        <div class="form-group">
+          <label for="communityName">小区名称</label>
+          <input 
+            type="text" 
+            id="communityName" 
+            v-model="formData.communityName" 
+            placeholder="请输入小区名称" 
+            required
+          />
+        </div>
+        
+        <div class="form-group">
+          <label for="address">详细地址</label>
+          <textarea 
+            id="address" 
+            v-model="formData.address" 
+            placeholder="请输入详细地址信息，包括省市区、街道名称、门牌号等" 
+            required
+          ></textarea>
+        </div>
+        
+        <div class="form-actions">
+          <button type="button" class="btn-cancel" @click="goBack">取消</button>
+          <button type="submit" class="btn-submit" :disabled="isSubmitting">
+            {{ isSubmitting ? '提交中...' : '提交申请' }}
+          </button>
+        </div>
+      </form>
+    </div>
+    
+    <!-- 提交成功弹窗 -->
+    <div class="success-modal" v-if="showSuccessModal">
+      <div class="modal-content">
+        <div class="success-icon">✓</div>
+        <h3>申请提交成功</h3>
+        <p>我们将尽快处理您的小区开通申请</p>
+        <button @click="closeSuccessModal" class="btn-confirm">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import axios from 'axios'
+
+export default {
+  name: 'CommunityRequest',
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+    const isSubmitting = ref(false)
+    const showSuccessModal = ref(false)
+    const userId = ref('')
+    
+    const formData = reactive({
+      communityName: '',
+      address: ''
+    })
+    
+    onMounted(() => {
+      // 从URL获取userId
+      userId.value = route.query.userid || ''
+      
+      if (!userId.value) {
+        console.warn('未找到用户ID，可能影响提交功能')
+      }
+      
+      // 检测是否在小程序环境中
+      checkMiniProgramEnvironment()
+      
+      // 设置页面标题
+      document.title = '小区开通申请'
+    })
+    
+    const checkMiniProgramEnvironment = () => {
+      // 检测是否在微信小程序环境中
+      const ua = navigator.userAgent.toLowerCase()
+      const isMiniProgram = ua.indexOf('miniprogram') > -1 || window.__wxjs_environment === 'miniprogram'
+      
+      console.log('Is Mini Program:', isMiniProgram)
+    }
+    
+    const submitRequest = async () => {
+      try {
+        if (!userId.value) {
+          alert('缺少用户ID，无法提交申请')
+          return
+        }
+        
+        isSubmitting.value = true
+        
+        // 构建提交数据
+        const submitData = {
+          userId: userId.value,
+          communityName: formData.communityName,
+          address: formData.address
+        }
+        
+        // 这里替换为您的实际API接口
+        // const response = await axios.post('/api/community/request', submitData)
+        
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        
+        console.log('提交的数据:', submitData)
+        
+        // 显示成功弹窗
+        showSuccessModal.value = true
+      } catch (error) {
+        console.error('提交失败:', error)
+        alert('提交失败，请稍后重试')
+      } finally {
+        isSubmitting.value = false
+      }
+    }
+    
+    const closeSuccessModal = () => {
+      showSuccessModal.value = false
+      
+      // 返回上一页或小程序页面
+      goBack()
+    }
+    
+    const goBack = () => {
+      // 如果在小程序环境中，调用小程序的返回方法
+      if (window.wx && window.wx.miniProgram) {
+        window.wx.miniProgram.navigateBack({ delta: 1 })
+      } else {
+        // 否则使用路由返回
+        router.back()
+      }
+    }
+    
+    return {
+      formData,
+      isSubmitting,
+      showSuccessModal,
+      submitRequest,
+      closeSuccessModal,
+      goBack
+    }
+  }
+}
+</script>
+
+<style scoped>
+.community-request-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 15px;
+  background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
+}
+
+.request-card {
+  width: 100%;
+  max-width: 90%;
+  background-color: #FFFFFF;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 25px 20px;
+  margin-top: 20px;
+}
+
+.page-title {
+  font-size: 22px;
+  font-weight: bold;
+  color: #333333;
+  text-align: center;
+  margin-bottom: 25px;
+}
+
+.request-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333333;
+}
+
+.form-group input,
+.form-group textarea {
+  padding: 12px 15px;
+  border: 1px solid #DDDDDD;
+  border-radius: 8px;
+  font-size: 16px;
+  color: #333333;
+  background-color: #F9F9F9;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  border-color: #FFCC00;
+  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.2);
+  outline: none;
+}
+
+.form-group textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.btn-cancel,
+.btn-submit,
+.btn-confirm {
+  padding: 12px 25px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-cancel {
+  background-color: #F5F5F5;
+  color: #666666;
+  border: 1px solid #DDDDDD;
+}
+
+.btn-submit {
+  background-color: #FFCC00;
+  color: #333333;
+  border: none;
+}
+
+.btn-submit:disabled {
+  background-color: #FFE580;
+  cursor: not-allowed;
+}
+
+.btn-cancel:hover {
+  background-color: #EEEEEE;
+}
+
+.btn-submit:hover:not(:disabled) {
+  background-color: #FFD633;
+}
+
+/* 成功弹窗样式 */
+.success-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: #FFFFFF;
+  border-radius: 15px;
+  padding: 30px;
+  width: 80%;
+  max-width: 350px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.success-icon {
+  width: 60px;
+  height: 60px;
+  background-color: #FFCC00;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  color: white;
+  margin-bottom: 20px;
+}
+
+.modal-content h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+  color: #333333;
+}
+
+.modal-content p {
+  color: #666666;
+  margin-bottom: 25px;
+}
+
+.btn-confirm {
+  background-color: #FFCC00;
+  color: #333333;
+  border: none;
+  width: 100%;
+}
+
+.btn-confirm:hover {
+  background-color: #FFD633;
+}
+
+/* 响应式调整 */
+@media (max-width: 480px) {
+  .request-card {
+    padding: 20px 15px;
+  }
+  
+  .page-title {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .form-group label {
+    font-size: 15px;
+  }
+  
+  .form-group input,
+  .form-group textarea,
+  .btn-cancel,
+  .btn-submit {
+    padding: 10px 12px;
+    font-size: 15px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 2e9108a..3bfe979 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import PrivacyAgreement from '../components/PrivacyAgreement.vue'
 import UserAgreement from '../components/UserAgreement.vue'
 import Dashboard from '../components/Dashboard.vue'
 import HowToUse from '../components/HowToUse.vue'
+import CommunityRequest from '../components/CommunityRequest.vue'
 
 const routes = [
   {
@@ -36,6 +37,14 @@ const routes = [
     meta: {
       title: '代取快递服务流程'
     }
+  },
+  {
+    path: '/community-request',
+    name: 'CommunityRequest',
+    component: CommunityRequest,
+    meta: {
+      title: '小区开通申请'
+    }
   }
 ]