diff --git a/api/apartment.js b/api/apartment.js
index be6491e..657adaf 100644
--- a/api/apartment.js
+++ b/api/apartment.js
@@ -6,7 +6,7 @@ import { get, post, put, del } from '../utils/request.js'
 
 export default {
   /**
-   * 获取公寓列表
+   * 获取公寓列表（分页）
    * @param {Object} params - 查询参数
    * @param {number} params.page - 页码
    * @param {number} params.pageSize - 每页数量
@@ -17,6 +17,15 @@ export default {
     return get('/apartments', params)
   },
 
+  /**
+   * 获取公寓列表（全部）
+   * @param {Object} params - 查询参数
+   * @returns {Promise}
+   */
+  list(params = {}) {
+    return get('/apartments/list', params)
+  },
+
   /**
    * 获取公寓详情
    * @param {number} id - 公寓ID
diff --git a/api/bill.js b/api/bill.js
index 8fd820c..f8ec5e5 100644
--- a/api/bill.js
+++ b/api/bill.js
@@ -10,11 +10,22 @@ export default {
    * @param {Object} params - 查询参数
    * @param {number} params.page - 页码
    * @param {number} params.pageSize - 每页数量
-   * @param {string} params.month - 月份筛选
-   * @param {string} params.status - 状态筛选
+   * @param {string} params.type - 类型筛选 income/expense
+   * @param {string} params.status - 状态筛选 unpaid/partial/paid/cancelled
+   * @param {string} params.startDate - 开始日期
+   * @param {string} params.endDate - 结束日期
    * @returns {Promise}
    */
   getList(params = {}) {
+    return get('/bills/list', params)
+  },
+
+  /**
+   * 获取所有账单（与Web端兼容的别名方法）
+   * @param {Object} params - 查询参数
+   * @returns {Promise}
+   */
+  getAll(params = {}) {
     return get('/bills', params)
   },
 
diff --git a/api/renter.js b/api/renter.js
index faa4b9c..7810fb5 100644
--- a/api/renter.js
+++ b/api/renter.js
@@ -11,9 +11,10 @@ export default {
    * @param {number} params.page - 页码
    * @param {number} params.pageSize - 每页数量
    * @param {string} params.keyword - 搜索关键词
+   * @param {string} params.status - 状态
    * @returns {Promise}
    */
-  getList(params = {}) {
+  getAll(params = {}) {
     return get('/renters', params)
   },
 
diff --git a/api/room.js b/api/room.js
index 8994f5e..53e1429 100644
--- a/api/room.js
+++ b/api/room.js
@@ -6,7 +6,7 @@ import { get, post, put, del } from '../utils/request.js'
 
 export default {
   /**
-   * 获取房间列表
+   * 获取房间列表（分页）
    * @param {Object} params - 查询参数
    * @param {number} params.apartmentId - 公寓ID
    * @param {string} params.status - 房间状态
@@ -16,6 +16,17 @@ export default {
     return get('/rooms', params)
   },
 
+  /**
+   * 获取房间列表（全部）
+   * @param {Object} params - 查询参数
+   * @param {number} params.apartmentId - 公寓ID
+   * @param {string} params.status - 房间状态
+   * @returns {Promise}
+   */
+  list(params = {}) {
+    return get('/rooms/list', params)
+  },
+
   /**
    * 获取房间详情
    * @param {number} id - 房间ID
diff --git a/pages/add-record/add-record.vue b/pages/add-record/add-record.vue
index 88753ce..c681df2 100644
--- a/pages/add-record/add-record.vue
+++ b/pages/add-record/add-record.vue
@@ -1,239 +1,353 @@
 <template>
   <view class="add-record-page">
-    <!-- 自定义导航栏 -->
+    <!-- 顶部导航 -->
     <view class="custom-nav safe-area-top">
       <view class="nav-content">
-        <view class="nav-btn" @click="goBack">
+        <view class="nav-btn back-btn" @click="goBack">
           <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
         </view>
         <text class="nav-title">办理入住</text>
-        <view class="nav-btn" @click="saveRental">
-          <text class="save-text">提交</text>
-        </view>
+        <view class="nav-btn placeholder"></view>
       </view>
     </view>
 
     <!-- 表单内容 -->
-    <scroll-view scroll-y class="form-content">
-      <!-- 步骤指示器 -->
-      <view class="step-indicator">
-        <view class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
-          <view class="step-num">1</view>
-          <text class="step-text">选择房间</text>
-        </view>
-        <view class="step-line" :class="{ active: currentStep >= 2 }"></view>
-        <view class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
-          <view class="step-num">2</view>
-          <text class="step-text">租客信息</text>
-        </view>
-        <view class="step-line" :class="{ active: currentStep >= 3 }"></view>
-        <view class="step-item" :class="{ active: currentStep >= 3 }">
-          <view class="step-num">3</view>
-          <text class="step-text">合同信息</text>
-        </view>
-      </view>
-
-      <!-- 步骤1：选择房间 -->
-      <view v-if="currentStep === 1" class="step-panel">
-        <view class="panel-title">选择公寓</view>
-        <view class="apartment-list">
-          <view 
-            v-for="apt in apartments" 
-            :key="apt.id"
-            class="apartment-card"
-            :class="{ active: selectedApartmentId === apt.id }"
-            @click="selectApartment(apt.id)"
-          >
-            <view class="apt-header">
-              <text class="apt-name">{{apt.name}}</text>
-              <uni-icons v-if="selectedApartmentId === apt.id" type="checkmarkempty" size="20" color="#409EFF"></uni-icons>
+    <scroll-view scroll-y class="form-scroll" :scroll-into-view="scrollIntoView" scroll-with-animation>
+      <view class="form-container">
+        <!-- 房间信息卡片 -->
+        <view class="section-card" id="section-room">
+          <view class="section-header">
+            <view class="section-icon room-icon">
+              <uni-icons type="home-filled" size="20" color="#FFFFFF"></uni-icons>
             </view>
-            <text class="apt-address">{{apt.address || '暂无地址'}}</text>
-            <view class="apt-stats">
-              <text>空房 {{apt.emptyCount || 0}}间</text>
-              <text class="divider">|</text>
-              <text>共 {{apt.roomCount || 0}}间</text>
+            <text class="section-title">房间信息</text>
+            <text class="section-badge" v-if="form.roomId">已选择</text>
+          </view>
+          
+          <!-- 公寓选择 -->
+          <view class="form-group">
+            <text class="group-label">选择公寓 <text class="required">*</text></text>
+            <view class="apartment-selector">
+              <scroll-view scroll-x class="apartment-scroll" show-scrollbar="false">
+                <view class="apartment-list">
+                  <view
+                    v-for="apt in apartments"
+                    :key="apt.id"
+                    class="apartment-item"
+                    :class="{ active: selectedApartmentId === apt.id }"
+                    @click="selectApartment(apt.id)"
+                  >
+                    <view class="apt-content">
+                      <text class="apt-name">{{apt.name}}</text>
+                    </view>
+                    <view class="apt-check" v-if="selectedApartmentId === apt.id">
+                      <uni-icons type="checkmarkempty" size="14" color="#FFFFFF"></uni-icons>
+                    </view>
+                  </view>
+                </view>
+              </scroll-view>
             </view>
           </view>
-        </view>
 
-        <view class="panel-title" v-if="selectedApartmentId">选择房间</view>
-        <view class="room-grid" v-if="selectedApartmentId">
-          <view 
-            v-for="room in availableRooms" 
-            :key="room.id"
-            class="room-item"
-            :class="{ active: form.roomId === room.id }"
-            @click="selectRoom(room)"
-          >
-            <text class="room-num">{{room.roomNumber}}</text>
-            <text class="room-price">¥{{room.rent || 0}}/月</text>
-            <text class="room-area" v-if="room.area">{{room.area}}m²</text>
-          </view>
-          <view v-if="availableRooms.length === 0" class="empty-tip">
-            <text>该公寓暂无空房</text>
-          </view>
-        </view>
-
-        <button class="btn-next" :disabled="!form.roomId" @click="nextStep">下一步</button>
-      </view>
-
-      <!-- 步骤2：租客信息 -->
-      <view v-if="currentStep === 2" class="step-panel">
-        <view class="panel-title">租客信息</view>
-        <view class="form-card">
-          <view class="form-item">
-            <text class="form-label">租客姓名 <text class="required">*</text></text>
-            <input 
-              type="text" 
-              v-model="form.renterName" 
-              placeholder="请输入租客姓名"
-              class="form-input"
-              maxlength="20"
-            />
-          </view>
-          <view class="form-item">
-            <text class="form-label">联系电话</text>
-            <input 
-              type="number" 
-              v-model="form.renterPhone" 
-              placeholder="请输入联系电话（选填）"
-              class="form-input"
-              maxlength="11"
-            />
-          </view>
-          <view class="form-item">
-            <text class="form-label">身份证号</text>
-            <input 
-              type="idcard" 
-              v-model="form.renterIdCard" 
-              placeholder="请输入身份证号（选填）"
-              class="form-input"
-              maxlength="18"
-            />
-          </view>
-        </view>
-
-        <view class="btn-group">
-          <button class="btn-prev" @click="prevStep">上一步</button>
-          <button class="btn-next" :disabled="!form.renterName" @click="nextStep">下一步</button>
-        </view>
-      </view>
-
-      <!-- 步骤3：合同信息 -->
-      <view v-if="currentStep === 3" class="step-panel">
-        <view class="panel-title">合同信息</view>
-        <view class="form-card">
-          <view class="form-item">
-            <text class="form-label">付租方式 <text class="required">*</text></text>
-            <view class="radio-group">
+          <!-- 房间选择 -->
+          <view class="form-group" v-if="selectedApartmentId">
+            <text class="group-label">选择房间 <text class="required">*</text></text>
+            <view class="room-grid">
               <view 
-                v-for="type in paymentTypes" 
-                :key="type.value"
-                class="radio-item"
-                :class="{ active: form.paymentType === type.value }"
-                @click="selectPaymentType(type.value)"
+                v-for="room in availableRooms" 
+                :key="room.id"
+                class="room-card"
+                :class="{ active: form.roomId === room.id }"
+                @click="selectRoom(room)"
               >
-                <text>{{type.label}}</text>
+                <view class="room-header">
+                  <text class="room-number">{{room.roomNumber}}</text>
+                  <view class="room-check" v-if="form.roomId === room.id">
+                    <uni-icons type="checkmarkempty" size="12" color="#FFFFFF"></uni-icons>
+                  </view>
+                </view>
+                <view class="room-info">
+                  <text class="room-price">¥{{room.rent || 0}}<text class="price-unit">/月</text></text>
+                  <text class="room-area" v-if="room.area">{{room.area}}m²</text>
+                </view>
+              </view>
+              <view v-if="availableRooms.length === 0" class="empty-rooms">
+                <uni-icons type="info-filled" size="32" color="#CBD5E1"></uni-icons>
+                <text>该公寓暂无空房</text>
               </view>
             </view>
           </view>
+        </view>
 
-          <view class="form-item">
-            <text class="form-label">租期 <text class="required">*</text></text>
-            <view class="period-selector">
-              <view class="period-options">
-                <view 
-                  v-for="period in periodOptions" 
-                  :key="period.value"
-                  class="period-item"
-                  :class="{ active: leasePeriod === period.value }"
-                  @click="selectPeriod(period.value)"
-                >
-                  <text>{{period.label}}</text>
+        <!-- 租客信息卡片 -->
+        <view class="section-card" id="section-renter">
+          <view class="section-header">
+            <view class="section-icon renter-icon">
+              <uni-icons type="person-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">租客信息</text>
+          </view>
+          
+          <view class="form-group">
+            <text class="group-label">租客姓名 <text class="required">*</text></text>
+            <view class="input-wrapper">
+              <uni-icons type="person" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+              <input 
+                type="text" 
+                v-model="form.renterName" 
+                placeholder="请输入租客姓名"
+                class="form-input"
+                maxlength="20"
+              />
+            </view>
+          </view>
+
+          <view class="form-row">
+            <view class="form-group half">
+              <text class="group-label">联系电话</text>
+              <view class="input-wrapper">
+                <uni-icons type="phone-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+                <input 
+                  type="number" 
+                  v-model="form.renterPhone" 
+                  placeholder="选填"
+                  class="form-input"
+                  maxlength="11"
+                />
+              </view>
+            </view>
+            <view class="form-group half">
+              <text class="group-label">身份证号</text>
+              <view class="input-wrapper">
+                <uni-icons type="wallet-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+                <input 
+                  type="idcard" 
+                  v-model="form.renterIdCard" 
+                  placeholder="选填"
+                  class="form-input"
+                  maxlength="18"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 合同信息卡片 -->
+        <view class="section-card" id="section-contract">
+          <view class="section-header">
+            <view class="section-icon contract-icon">
+              <uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">合同信息</text>
+          </view>
+
+          <!-- 付租方式 -->
+          <view class="form-group">
+            <text class="group-label">付租方式 <text class="required">*</text></text>
+            <view class="payment-grid">
+              <view 
+                v-for="type in paymentTypes" 
+                :key="type.value"
+                class="payment-item"
+                :class="{ active: form.paymentType === type.value }"
+                @click="selectPaymentType(type.value)"
+              >
+                <text class="payment-label">{{type.label}}</text>
+                <text class="payment-desc">{{type.desc}}</text>
+                <view class="payment-indicator" v-if="form.paymentType === type.value">
+                  <uni-icons type="checkmarkempty" size="12" color="#FFFFFF"></uni-icons>
                 </view>
               </view>
             </view>
           </view>
 
-          <view class="form-item">
-            <text class="form-label">开始日期 <text class="required">*</text></text>
-            <picker mode="date" :value="form.startDate" @change="onStartDateChange">
-              <view class="picker-value">
-                <text>{{form.startDate || '请选择开始日期'}}</text>
-                <uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
+          <!-- 租期 -->
+          <view class="form-group">
+            <text class="group-label">租期 <text class="required">*</text></text>
+            <view class="period-scroll">
+              <scroll-view scroll-x show-scrollbar="false">
+                <view class="period-list">
+                  <view 
+                    v-for="period in periodOptions" 
+                    :key="period.value"
+                    class="period-tag"
+                    :class="{ active: leasePeriod === period.value }"
+                    @click="selectPeriod(period.value)"
+                  >
+                    {{period.label}}
+                  </view>
+                </view>
+              </scroll-view>
+            </view>
+          </view>
+
+          <!-- 日期选择 -->
+          <view class="form-row">
+            <view class="form-group half">
+              <text class="group-label">开始日期 <text class="required">*</text></text>
+              <picker mode="date" :value="form.startDate" @change="onStartDateChange">
+                <view class="picker-box">
+                  <text class="picker-text" :class="{ placeholder: !form.startDate }">{{form.startDate || '请选择'}}</text>
+                  <uni-icons type="calendar" size="18" color="#64748B"></uni-icons>
+                </view>
+              </picker>
+            </view>
+            <view class="form-group half">
+              <text class="group-label">结束日期</text>
+              <view class="static-box">
+                <text class="static-text">{{form.endDate || '自动计算'}}</text>
+                <uni-icons type="calendar-filled" size="18" color="#CBD5E1"></uni-icons>
               </view>
-            </picker>
+            </view>
           </view>
 
-          <view class="form-item">
-            <text class="form-label">结束日期</text>
-            <view class="static-value">{{form.endDate || '自动计算'}}</view>
+          <!-- 金额信息 -->
+          <view class="form-row">
+            <view class="form-group half">
+              <text class="group-label">{{form.paymentType === 'yearly' ? '年租金' : '月租金'}} <text class="required">*</text></text>
+              <view class="input-wrapper money">
+                <text class="currency">¥</text>
+                <input 
+                  type="digit" 
+                  v-model="form.rent" 
+                  :placeholder="form.paymentType === 'yearly' ? '年租金' : '月租金'"
+                  class="form-input"
+                />
+              </view>
+            </view>
+            <view class="form-group half">
+              <text class="group-label">押金</text>
+              <view class="input-wrapper money">
+                <text class="currency">¥</text>
+                <input 
+                  type="digit" 
+                  v-model="form.deposit" 
+                  placeholder="押金金额"
+                  class="form-input"
+                />
+              </view>
+            </view>
           </view>
 
-          <view class="form-item">
-            <text class="form-label">{{form.paymentType === 'monthly' ? '月租金' : '年租金'}} <text class="required">*</text></text>
-            <input 
-              type="digit" 
-              v-model="form.rent" 
-              :placeholder="form.paymentType === 'monthly' ? '请输入月租金' : '请输入年租金'"
-              class="form-input"
-            />
-            <text class="input-suffix">元</text>
+          <!-- 经办人 -->
+          <view class="form-group">
+            <text class="group-label">经办人</text>
+            <view class="input-wrapper">
+              <uni-icons type="personadd-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+              <input 
+                type="text" 
+                v-model="form.operator" 
+                placeholder="请输入经办人"
+                class="form-input"
+                maxlength="20"
+              />
+            </view>
           </view>
+        </view>
 
-          <view class="form-item">
-            <text class="form-label">押金</text>
-            <input 
-              type="digit" 
-              v-model="form.deposit" 
-              placeholder="请输入押金金额"
-              class="form-input"
-            />
-            <text class="input-suffix">元</text>
+        <!-- 水电表读数卡片 -->
+        <view class="section-card" id="section-meter">
+          <view class="section-header">
+            <view class="section-icon meter-icon">
+              <uni-icons type="settings-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">水电表读数</text>
+            <text class="section-hint">选填</text>
           </view>
-
-          <view class="form-item">
-            <text class="form-label">水表起始读数</text>
-            <input 
-              type="digit" 
-              v-model="form.waterStartReading" 
-              placeholder="请输入水表起始读数（选填）"
-              class="form-input"
-            />
-            <text class="input-suffix">吨</text>
+          
+          <view class="meter-grid">
+            <view class="meter-item">
+              <view class="meter-icon-box water">
+                <uni-icons type="info-filled" size="24" color="#3B82F6"></uni-icons>
+              </view>
+              <view class="meter-content">
+                <text class="meter-label">水表起始读数</text>
+                <view class="meter-input-box">
+                  <input 
+                    type="digit" 
+                    v-model="form.waterStartReading" 
+                    placeholder="0"
+                    class="meter-input"
+                  />
+                  <text class="meter-unit">吨</text>
+                </view>
+              </view>
+            </view>
+            <view class="meter-item">
+              <view class="meter-icon-box electric">
+                <uni-icons type="info-filled" size="24" color="#F59E0B"></uni-icons>
+              </view>
+              <view class="meter-content">
+                <text class="meter-label">电表起始读数</text>
+                <view class="meter-input-box">
+                  <input 
+                    type="digit" 
+                    v-model="form.electricStartReading" 
+                    placeholder="0"
+                    class="meter-input"
+                  />
+                  <text class="meter-unit">度</text>
+                </view>
+              </view>
+            </view>
           </view>
+        </view>
 
-          <view class="form-item">
-            <text class="form-label">电表起始读数</text>
-            <input 
-              type="digit" 
-              v-model="form.electricStartReading" 
-              placeholder="请输入电表起始读数（选填）"
-              class="form-input"
-            />
-            <text class="input-suffix">度</text>
+        <!-- 备注卡片 -->
+        <view class="section-card" id="section-remark">
+          <view class="section-header">
+            <view class="section-icon remark-icon">
+              <uni-icons type="chatbubble-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">备注信息</text>
+            <text class="section-hint">选填</text>
           </view>
-
-          <view class="form-item">
-            <text class="form-label">备注</text>
-            <textarea 
-              v-model="form.remark" 
-              placeholder="请输入备注信息（选填）"
+          <view class="textarea-wrapper">
+            <textarea
+              v-model="form.remark"
+              placeholder="添加备注信息..."
               class="form-textarea"
               maxlength="200"
             />
+            <text class="char-count">{{form.remark.length}}/200</text>
           </view>
         </view>
 
-        <view class="btn-group">
-          <button class="btn-prev" @click="prevStep">上一步</button>
-          <button class="btn-submit" :loading="submitLoading" @click="submitForm">确认办理</button>
+        <!-- 提交按钮 -->
+        <view class="submit-section">
+          <button
+            class="submit-btn"
+            :class="{ active: canSubmit, loading: submitLoading }"
+            :disabled="!canSubmit || submitLoading"
+            @click="submitForm"
+          >
+            <text v-if="!submitLoading">确认办理</text>
+            <view v-else class="btn-loading">
+              <view class="loading-dot"></view>
+              <view class="loading-dot"></view>
+              <view class="loading-dot"></view>
+            </view>
+          </button>
         </view>
-      </view>
 
-      <view class="safe-area-bottom" style="height: 40rpx;"></view>
+        <!-- 底部安全区域 -->
+        <view class="safe-area-bottom" style="height: 160rpx;"></view>
+      </view>
     </scroll-view>
+
+    <!-- 成功弹窗 -->
+    <view class="success-modal" v-if="showSuccess" @click="closeSuccess">
+      <view class="success-content" @click.stop>
+        <view class="success-icon">
+          <view class="success-circle">
+            <uni-icons type="checkmarkempty" size="48" color="#FFFFFF"></uni-icons>
+          </view>
+        </view>
+        <text class="success-title">办理成功</text>
+        <text class="success-desc">租客入住登记已完成</text>
+        <button class="success-btn" @click="closeSuccess">确定</button>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -245,8 +359,9 @@
   export default {
     data() {
       return {
-        currentStep: 1,
         submitLoading: false,
+        showSuccess: false,
+        scrollIntoView: '',
         apartments: [],
         rooms: [],
         selectedApartmentId: null,
@@ -261,15 +376,14 @@
           endDate: '',
           rent: '',
           deposit: '',
+          operator: '',
           waterStartReading: '',
           electricStartReading: '',
           remark: ''
         },
         paymentTypes: [
-          { label: '月租', value: 'monthly' },
-          { label: '季租', value: 'quarterly' },
-          { label: '半年租', value: 'half_year' },
-          { label: '年租', value: 'yearly' }
+          { label: '月租', value: 'monthly', desc: '每月支付' },
+          { label: '年租', value: 'yearly', desc: '每年支付' }
         ]
       }
     },
@@ -279,31 +393,23 @@
       },
       periodOptions() {
         if (this.form.paymentType === 'monthly') {
-          return Array.from({ length: 12 }, (_, i) => ({
+          return Array.from({ length: 24 }, (_, i) => ({
             label: `${i + 1}个月`,
             value: i + 1
           }))
-        } else if (this.form.paymentType === 'quarterly') {
-          return Array.from({ length: 4 }, (_, i) => ({
-            label: `${i + 1}个季度`,
-            value: i + 1
-          }))
-        } else if (this.form.paymentType === 'half_year') {
-          return Array.from({ length: 2 }, (_, i) => ({
-            label: `${i + 1}个半年`,
-            value: i + 1
-          }))
         } else {
-          return Array.from({ length: 5 }, (_, i) => ({
+          return Array.from({ length: 10 }, (_, i) => ({
             label: `${i + 1}年`,
             value: i + 1
           }))
         }
+      },
+      canSubmit() {
+        return this.form.roomId && this.form.renterName.trim() && this.form.startDate && this.form.rent
       }
     },
     onLoad(options) {
       this.loadApartments()
-      // 设置默认开始日期为今天
       this.form.startDate = this.formatDate(new Date())
       if (options.roomId) {
         this.preSelectRoom(options.roomId)
@@ -324,7 +430,7 @@
     methods: {
       async loadApartments() {
         try {
-          const res = await apartmentApi.getList({ pageSize: 999 })
+          const res = await apartmentApi.list()
           if (res.data) {
             this.apartments = res.data
           }
@@ -332,10 +438,10 @@
           console.error('加载公寓列表失败:', error)
         }
       },
-      
+
       async loadRooms(apartmentId) {
         try {
-          const res = await roomApi.getList({ apartmentId, pageSize: 999 })
+          const res = await roomApi.list({ apartmentId })
           if (res.data) {
             this.rooms = res.data
           }
@@ -353,7 +459,6 @@
             await this.loadRooms(room.apartmentId)
             this.form.roomId = roomId
             this.form.rent = room.rent || ''
-            this.currentStep = 2
           }
         } catch (error) {
           console.error('加载房间详情失败:', error)
@@ -388,56 +493,17 @@
         const startDate = new Date(this.form.startDate)
         const endDate = new Date(startDate)
         
-        switch(this.form.paymentType) {
-          case 'monthly':
-            endDate.setMonth(endDate.getMonth() + this.leasePeriod)
-            break
-          case 'quarterly':
-            endDate.setMonth(endDate.getMonth() + (this.leasePeriod * 3))
-            break
-          case 'half_year':
-            endDate.setMonth(endDate.getMonth() + (this.leasePeriod * 6))
-            break
-          case 'yearly':
-            endDate.setFullYear(endDate.getFullYear() + this.leasePeriod)
-            break
+        if (this.form.paymentType === 'monthly') {
+          endDate.setMonth(endDate.getMonth() + this.leasePeriod)
+        } else {
+          endDate.setFullYear(endDate.getFullYear() + this.leasePeriod)
         }
         
         this.form.endDate = this.formatDate(endDate)
       },
       
-      nextStep() {
-        if (this.currentStep < 3) {
-          this.currentStep++
-        }
-      },
-      
-      prevStep() {
-        if (this.currentStep > 1) {
-          this.currentStep--
-        }
-      },
-      
       async submitForm() {
-        // 表单验证
-        if (!this.form.roomId) {
-          uni.showToast({ title: '请选择房间', icon: 'none' })
-          this.currentStep = 1
-          return
-        }
-        if (!this.form.renterName.trim()) {
-          uni.showToast({ title: '请输入租客姓名', icon: 'none' })
-          this.currentStep = 2
-          return
-        }
-        if (!this.form.startDate) {
-          uni.showToast({ title: '请选择开始日期', icon: 'none' })
-          return
-        }
-        if (!this.form.rent) {
-          uni.showToast({ title: '请输入租金', icon: 'none' })
-          return
-        }
+        if (!this.canSubmit) return
         
         this.submitLoading = true
         try {
@@ -451,21 +517,14 @@
             endDate: this.form.endDate,
             rent: parseFloat(this.form.rent),
             deposit: parseFloat(this.form.deposit) || 0,
+            operator: this.form.operator.trim() || null,
             waterStartReading: this.form.waterStartReading ? parseFloat(this.form.waterStartReading) : null,
             electricStartReading: this.form.electricStartReading ? parseFloat(this.form.electricStartReading) : null,
             remark: this.form.remark.trim() || null
           }
           
           await rentalApi.createWithRenter(submitData)
-          
-          uni.showToast({
-            title: '办理入住成功',
-            icon: 'success'
-          })
-          
-          setTimeout(() => {
-            uni.switchTab({ url: '/pages/properties/properties' })
-          }, 1500)
+          this.showSuccess = true
         } catch (error) {
           console.error('办理入住失败:', error)
           uni.showToast({
@@ -477,25 +536,18 @@
         }
       },
       
+      closeSuccess() {
+        this.showSuccess = false
+        uni.switchTab({ url: '/pages/properties/properties' })
+      },
+      
       formatDate(date) {
         const d = new Date(date)
         return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
       },
       
       goBack() {
-        if (this.currentStep > 1) {
-          this.prevStep()
-        } else {
-          uni.navigateBack()
-        }
-      },
-      
-      saveRental() {
-        if (this.currentStep < 3) {
-          this.nextStep()
-        } else {
-          this.submitForm()
-        }
+        uni.navigateBack()
       }
     }
   }
@@ -504,22 +556,27 @@
 <style scoped>
   .add-record-page {
     min-height: 100vh;
-    background: #F8FAFC;
+    background: linear-gradient(180deg, #F0F7FF 0%, #F8FAFC 200rpx);
     display: flex;
     flex-direction: column;
   }
 
   /* 导航栏 */
   .custom-nav {
-    background: #FFFFFF;
-    border-bottom: 2rpx solid #F1F5F9;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20rpx);
+    border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+    position: sticky;
+    top: 0;
+    z-index: 100;
   }
 
   .nav-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 20rpx 32rpx;
+    padding: 16rpx 24rpx;
+    height: 96rpx;
   }
 
   .nav-btn {
@@ -529,6 +586,11 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
+    transition: all 0.2s ease;
+  }
+
+  .back-btn:active {
+    background: rgba(37, 99, 235, 0.1);
   }
 
   .nav-title {
@@ -537,146 +599,222 @@
     color: #1E293B;
   }
 
-  .save-text {
-    font-size: 28rpx;
-    color: #409EFF;
-    font-weight: 600;
+  .placeholder {
+    width: 72rpx;
   }
 
-  /* 表单内容 */
-  .form-content {
+  /* 表单滚动区 */
+  .form-scroll {
     flex: 1;
-    padding: 24rpx 32rpx;
   }
 
-  /* 步骤指示器 */
-  .step-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .form-container {
+    padding: 32rpx;
+  }
+
+  /* 页面标题 */
+  .page-header {
     margin-bottom: 40rpx;
-    padding: 24rpx;
-    background: #FFFFFF;
-    border-radius: 16rpx;
   }
 
-  .step-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8rpx;
-  }
-
-  .step-num {
-    width: 48rpx;
-    height: 48rpx;
-    border-radius: 50%;
-    background: #E4E7ED;
-    color: #909399;
-    font-size: 24rpx;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .step-item.active .step-num {
-    background: #409EFF;
-    color: #FFFFFF;
-  }
-
-  .step-item.completed .step-num {
-    background: #67C23A;
-    color: #FFFFFF;
-  }
-
-  .step-text {
-    font-size: 22rpx;
-    color: #909399;
-  }
-
-  .step-item.active .step-text {
-    color: #409EFF;
-    font-weight: 500;
-  }
-
-  .step-line {
-    width: 80rpx;
-    height: 2rpx;
-    background: #E4E7ED;
-    margin: 0 16rpx;
-    margin-bottom: 30rpx;
-  }
-
-  .step-line.active {
-    background: #409EFF;
-  }
-
-  /* 步骤面板 */
-  .step-panel {
-    animation: fadeIn 0.3s ease;
-  }
-
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateX(20rpx); }
-    to { opacity: 1; transform: translateX(0); }
-  }
-
-  .panel-title {
-    font-size: 30rpx;
-    font-weight: 600;
-    color: #1E293B;
-    margin-bottom: 20rpx;
-  }
-
-  /* 公寓列表 */
-  .apartment-list {
-    margin-bottom: 32rpx;
-  }
-
-  .apartment-card {
-    background: #FFFFFF;
-    border-radius: 16rpx;
-    padding: 24rpx;
-    margin-bottom: 16rpx;
-    border: 2rpx solid transparent;
-  }
-
-  .apartment-card.active {
-    border-color: #409EFF;
-    background: #F0F9FF;
-  }
-
-  .apt-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12rpx;
-  }
-
-  .apt-name {
-    font-size: 30rpx;
-    font-weight: 600;
-    color: #1E293B;
-  }
-
-  .apt-address {
-    font-size: 24rpx;
-    color: #909399;
-    margin-bottom: 12rpx;
+  .header-title {
     display: block;
+    font-size: 44rpx;
+    font-weight: 700;
+    color: #1E293B;
+    margin-bottom: 12rpx;
   }
 
-  .apt-stats {
-    display: flex;
-    align-items: center;
-    gap: 16rpx;
-    font-size: 24rpx;
+  .header-subtitle {
+    font-size: 28rpx;
     color: #64748B;
   }
 
-  .apt-stats .divider {
-    color: #E4E7ED;
+  /* 卡片样式 */
+  .section-card {
+    background: #FFFFFF;
+    border-radius: 28rpx;
+    padding: 32rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+    border: 1rpx solid rgba(226, 232, 240, 0.5);
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-bottom: 28rpx;
+  }
+
+  .section-icon {
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 14rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .room-icon { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }
+  .renter-icon { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
+  .contract-icon { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); }
+  .meter-icon { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
+  .remark-icon { background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%); }
+
+  .section-title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #1E293B;
+    flex: 1;
+  }
+
+  .section-badge {
+    font-size: 22rpx;
+    color: #10B981;
+    background: rgba(16, 185, 129, 0.1);
+    padding: 6rpx 16rpx;
+    border-radius: 20rpx;
+  }
+
+  .section-hint {
+    font-size: 24rpx;
+    color: #94A3B8;
+  }
+
+  /* 表单组 */
+  .form-group {
+    margin-bottom: 28rpx;
+  }
+
+  .form-group:last-child {
+    margin-bottom: 0;
+  }
+
+  .form-row {
+    display: flex;
+    gap: 24rpx;
+  }
+
+  .form-group.half {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  .group-label {
+    display: block;
+    font-size: 26rpx;
+    color: #475569;
+    margin-bottom: 16rpx;
+    font-weight: 500;
+  }
+
+  .required {
+    color: #EF4444;
+  }
+
+  /* 输入框 */
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 0 24rpx;
+    height: 88rpx;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+  }
+
+  .input-wrapper:focus-within {
+    background: #FFFFFF;
+    border-color: #3B82F6;
+    box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
+  }
+
+  .input-icon {
+    margin-right: 16rpx;
+  }
+
+  .form-input {
+    flex: 1;
+    height: 100%;
+    font-size: 30rpx;
+    color: #1E293B;
+    background: transparent;
+  }
+
+  .input-wrapper.money {
+    padding-left: 32rpx;
+  }
+
+  .currency {
+    font-size: 32rpx;
+    color: #3B82F6;
+    font-weight: 600;
+    margin-right: 12rpx;
+  }
+
+  /* 公寓选择器 */
+  .apartment-selector {
+    margin: 0 -32rpx;
+    padding: 0 32rpx;
+  }
+
+  .apartment-scroll {
+    width: 100%;
+  }
+
+  .apartment-list {
+    display: flex;
+    gap: 16rpx;
+    padding-bottom: 8rpx;
+  }
+
+  .apartment-item {
+    flex-shrink: 0;
+    min-width: 200rpx;
+    background: #F8FAFC;
+    border-radius: 20rpx;
+    padding: 20rpx 24rpx;
+    border: 2rpx solid transparent;
+    position: relative;
+    transition: all 0.2s ease;
+  }
+
+  .apartment-item.active {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    border-color: #3B82F6;
+  }
+
+  .apt-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+
+  .apt-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #1E293B;
+  }
+
+  .apt-count {
+    font-size: 22rpx;
+    color: #64748B;
+  }
+
+  .apt-check {
+    position: absolute;
+    top: -8rpx;
+    right: -8rpx;
+    width: 32rpx;
+    height: 32rpx;
+    background: #3B82F6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.4);
   }
 
   /* 房间网格 */
@@ -684,194 +822,468 @@
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16rpx;
-    margin-bottom: 40rpx;
   }
 
-  .room-item {
-    background: #FFFFFF;
-    border-radius: 12rpx;
+  .room-card {
+    background: #F8FAFC;
+    border-radius: 20rpx;
     padding: 20rpx;
-    text-align: center;
-    border: 2rpx solid #E4E7ED;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
   }
 
-  .room-item.active {
-    border-color: #409EFF;
-    background: #F0F9FF;
+  .room-card.active {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    border-color: #3B82F6;
   }
 
-  .room-num {
-    display: block;
+  .room-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12rpx;
+  }
+
+  .room-number {
     font-size: 32rpx;
     font-weight: 700;
     color: #1E293B;
-    margin-bottom: 8rpx;
+  }
+
+  .room-check {
+    width: 28rpx;
+    height: 28rpx;
+    background: #3B82F6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .room-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
   }
 
   .room-price {
-    display: block;
-    font-size: 24rpx;
-    color: #F56C6C;
-    margin-bottom: 4rpx;
+    font-size: 26rpx;
+    color: #EF4444;
+    font-weight: 600;
+  }
+
+  .price-unit {
+    font-size: 20rpx;
+    font-weight: 400;
   }
 
   .room-area {
+    font-size: 22rpx;
+    color: #94A3B8;
+  }
+
+  .empty-rooms {
+    grid-column: span 3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48rpx;
+    color: #94A3B8;
+    font-size: 26rpx;
+    gap: 16rpx;
+  }
+
+  /* 付租方式 */
+  .payment-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16rpx;
+  }
+
+  .payment-item {
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 20rpx 12rpx;
+    text-align: center;
+    border: 2rpx solid transparent;
+    position: relative;
+    transition: all 0.2s ease;
+  }
+
+  .payment-item.active {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    border-color: #3B82F6;
+  }
+
+  .payment-label {
+    display: block;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #1E293B;
+    margin-bottom: 4rpx;
+  }
+
+  .payment-desc {
     display: block;
     font-size: 20rpx;
-    color: #909399;
+    color: #64748B;
   }
 
-  .empty-tip {
-    grid-column: span 3;
-    text-align: center;
-    padding: 48rpx;
-    color: #909399;
+  .payment-item.active .payment-label {
+    color: #3B82F6;
+  }
+
+  .payment-indicator {
+    position: absolute;
+    top: 8rpx;
+    right: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+    background: #3B82F6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 租期选择 */
+  .period-scroll {
+    margin: 0 -32rpx;
+    padding: 0 32rpx;
+  }
+
+  .period-list {
+    display: flex;
+    gap: 12rpx;
+    padding-bottom: 8rpx;
+  }
+
+  .period-tag {
+    flex-shrink: 0;
+    padding: 16rpx 28rpx;
+    background: #F8FAFC;
+    border-radius: 12rpx;
     font-size: 26rpx;
+    color: #475569;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
   }
 
-  /* 表单卡片 */
-  .form-card {
-    background: #FFFFFF;
+  .period-tag.active {
+    background: #3B82F6;
+    color: #FFFFFF;
+    border-color: #3B82F6;
+  }
+
+  /* 日期选择 */
+  .picker-box, .static-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #F8FAFC;
     border-radius: 16rpx;
     padding: 0 24rpx;
-    margin-bottom: 40rpx;
+    height: 88rpx;
   }
 
-  .form-item {
-    padding: 24rpx 0;
-    border-bottom: 2rpx solid #F1F5F9;
-    position: relative;
-  }
-
-  .form-item:last-child {
-    border-bottom: none;
-  }
-
-  .form-label {
-    display: block;
-    font-size: 26rpx;
-    color: #64748B;
-    margin-bottom: 16rpx;
-  }
-
-  .required {
-    color: #F56C6C;
-  }
-
-  .form-input {
-    width: 100%;
-    height: 60rpx;
+  .picker-text {
     font-size: 30rpx;
     color: #1E293B;
   }
 
-  .input-suffix {
-    position: absolute;
-    right: 0;
-    bottom: 36rpx;
+  .picker-text.placeholder {
+    color: #94A3B8;
+  }
+
+  .static-text {
+    font-size: 30rpx;
+    color: #64748B;
+  }
+
+  /* 水电表 */
+  .meter-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+  }
+
+  .meter-item {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    background: #F8FAFC;
+    border-radius: 20rpx;
+    padding: 20rpx 24rpx;
+  }
+
+  .meter-icon-box {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .meter-icon-box.water { background: rgba(59, 130, 246, 0.1); }
+  .meter-icon-box.electric { background: rgba(245, 158, 11, 0.1); }
+
+  .meter-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .meter-label {
     font-size: 28rpx;
-    color: #909399;
+    color: #475569;
+  }
+
+  .meter-input-box {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+  }
+
+  .meter-input {
+    width: 120rpx;
+    height: 56rpx;
+    background: #FFFFFF;
+    border-radius: 12rpx;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1E293B;
+    border: 2rpx solid #E2E8F0;
+  }
+
+  .meter-unit {
+    font-size: 24rpx;
+    color: #64748B;
+  }
+
+  /* 备注 */
+  .textarea-wrapper {
+    position: relative;
   }
 
   .form-textarea {
     width: 100%;
-    height: 160rpx;
+    height: 180rpx;
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 24rpx;
     font-size: 30rpx;
     color: #1E293B;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
   }
 
-  .picker-value {
+  .form-textarea:focus {
+    background: #FFFFFF;
+    border-color: #3B82F6;
+  }
+
+  .char-count {
+    position: absolute;
+    bottom: 16rpx;
+    right: 20rpx;
+    font-size: 22rpx;
+    color: #94A3B8;
+  }
+
+  /* 提交按钮区域 */
+  .submit-section {
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+  }
+
+  .submit-section .submit-btn {
+    width: 100%;
+    height: 96rpx;
+    background: #CBD5E1;
+    border-radius: 48rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+    transition: all 0.3s ease;
+  }
+
+  .submit-section .submit-btn.active {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.35);
+  }
+
+  .submit-section .submit-btn.active:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+  }
+
+  /* 底部提交栏 */
+  .submit-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20rpx);
+    border-top: 1rpx solid rgba(226, 232, 240, 0.6);
+    padding: 20rpx 32rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    z-index: 100;
+  }
+
+  .submit-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 30rpx;
-    color: #1E293B;
-  }
-
-  .static-value {
-    font-size: 30rpx;
-    color: #909399;
-  }
-
-  /* 单选组 */
-  .radio-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16rpx;
-  }
-
-  .radio-item {
-    padding: 16rpx 32rpx;
-    background: #F5F7FA;
-    border-radius: 8rpx;
-    font-size: 28rpx;
-    color: #606266;
-  }
-
-  .radio-item.active {
-    background: #409EFF;
-    color: #FFFFFF;
-  }
-
-  /* 租期选择 */
-  .period-options {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12rpx;
-  }
-
-  .period-item {
-    padding: 12rpx 24rpx;
-    background: #F5F7FA;
-    border-radius: 8rpx;
-    font-size: 26rpx;
-    color: #606266;
-  }
-
-  .period-item.active {
-    background: #409EFF;
-    color: #FFFFFF;
-  }
-
-  /* 按钮 */
-  .btn-next {
-    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
-    color: #FFFFFF;
-    font-size: 30rpx;
-    font-weight: 600;
-    padding: 28rpx;
-    border-radius: 16rpx;
-    border: none;
-  }
-
-  .btn-next[disabled] {
-    opacity: 0.5;
-  }
-
-  .btn-group {
-    display: flex;
     gap: 24rpx;
   }
 
-  .btn-prev {
-    flex: 1;
-    background: #F5F7FA;
-    color: #606266;
+  .submit-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
+  }
+
+  .info-label {
+    font-size: 22rpx;
+    color: #94A3B8;
+  }
+
+  .info-value {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #10B981;
+  }
+
+  .info-value.incomplete {
+    color: #F59E0B;
+  }
+
+  .submit-btn {
+    min-width: 240rpx;
+    height: 88rpx;
+    background: #CBD5E1;
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 30rpx;
     font-weight: 600;
-    padding: 28rpx;
-    border-radius: 16rpx;
+    color: #FFFFFF;
+    border: none;
+    transition: all 0.3s ease;
+  }
+
+  .submit-btn.active {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.35);
+  }
+
+  .submit-btn.active:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+  }
+
+  .btn-loading {
+    display: flex;
+    gap: 12rpx;
+    align-items: center;
+  }
+
+  .loading-dot {
+    width: 12rpx;
+    height: 12rpx;
+    background: #FFFFFF;
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite both;
+  }
+
+  .loading-dot:nth-child(1) { animation-delay: -0.32s; }
+  .loading-dot:nth-child(2) { animation-delay: -0.16s; }
+
+  @keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+  }
+
+  /* 成功弹窗 */
+  .success-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+  }
+
+  .success-content {
+    background: #FFFFFF;
+    border-radius: 32rpx;
+    padding: 56rpx 64rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: scaleIn 0.3s ease;
+  }
+
+  .success-icon {
+    margin-bottom: 32rpx;
+  }
+
+  .success-circle {
+    width: 120rpx;
+    height: 120rpx;
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.35);
+  }
+
+  .success-title {
+    font-size: 40rpx;
+    font-weight: 700;
+    color: #1E293B;
+    margin-bottom: 12rpx;
+  }
+
+  .success-desc {
+    font-size: 28rpx;
+    color: #64748B;
+    margin-bottom: 40rpx;
+  }
+
+  .success-btn {
+    width: 320rpx;
+    height: 88rpx;
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    border-radius: 44rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #FFFFFF;
     border: none;
   }
 
-  .btn-submit {
-    flex: 2;
-    background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
-    color: #FFFFFF;
-    font-size: 30rpx;
-    font-weight: 600;
-    padding: 28rpx;
-    border-radius: 16rpx;
-    border: none;
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.9); }
+    to { opacity: 1; transform: scale(1); }
   }
 </style>
diff --git a/pages/apartment-add/apartment-add.vue b/pages/apartment-add/apartment-add.vue
index b6998c0..3b765c4 100644
--- a/pages/apartment-add/apartment-add.vue
+++ b/pages/apartment-add/apartment-add.vue
@@ -30,85 +30,33 @@
             />
           </view>
           <view class="form-item">
-            <text class="item-label">公寓地址</text>
+            <text class="item-label">地址</text>
             <input 
               type="text" 
               v-model="form.address" 
-              placeholder="请输入公寓地址"
+              placeholder="请输入地址"
               class="item-input"
             />
           </view>
-          <view class="form-item">
-            <text class="item-label">负责人</text>
-            <input 
-              type="text" 
-              v-model="form.manager" 
-              placeholder="请输入负责人姓名"
-              class="item-input"
-            />
-          </view>
-          <view class="form-item">
-            <text class="item-label">联系电话</text>
-            <input 
-              type="number" 
-              v-model="form.phone" 
-              placeholder="请输入联系电话"
-              class="item-input"
-              maxlength="11"
-            />
-          </view>
-        </view>
-      </view>
-
-      <!-- 状态设置 -->
-      <view class="form-section">
-        <view class="section-title">状态设置</view>
-        <view class="form-card">
-          <view class="form-item">
-            <text class="item-label">运营状态</text>
-            <view class="status-options">
-              <view 
-                v-for="(option, index) in statusOptions" 
-                :key="index"
-                class="status-option"
-                :class="{ active: form.status === option.value }"
-                @click="form.status = option.value"
-              >
-                <text>{{option.label}}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <!-- 备注 -->
-      <view class="form-section">
-        <view class="section-title">备注信息</view>
-        <view class="form-card">
-          <view class="form-item">
+          <view class="form-item textarea-item">
+            <text class="item-label">描述</text>
             <textarea 
-              v-model="form.remark" 
-              placeholder="请输入备注信息（选填）"
+              v-model="form.description" 
+              placeholder="请输入描述"
               class="remark-input"
-              maxlength="200"
+              maxlength="500"
             />
-            <text class="word-count">{{form.remark.length}}/200</text>
           </view>
         </view>
       </view>
 
-      <!-- 删除按钮（编辑模式） -->
-      <view v-if="isEdit" class="delete-section">
-        <button class="delete-btn" @click="confirmDelete">删除公寓</button>
-      </view>
-
       <view class="safe-area-bottom" style="height: 40rpx;"></view>
     </scroll-view>
   </view>
 </template>
 
 <script>
-  import { apartmentApi } from '../../api/index.js'
+  import { apartmentApi } from '@/api/index.js'
 
   export default {
     data() {
@@ -118,38 +66,31 @@
         form: {
           name: '',
           address: '',
-          manager: '',
-          phone: '',
-          status: 'active',
-          remark: ''
-        },
-        statusOptions: [
-          { label: '运营中', value: 'active' },
-          { label: '已停用', value: 'inactive' },
-          { label: '装修中', value: 'renovating' }
-        ]
+          description: ''
+        }
       }
     },
     onLoad(options) {
-      if (options.id) {
+      // 判断是否为编辑模式
+      if (options.mode === 'edit' && options.id) {
         this.isEdit = true
         this.apartmentId = options.id
-        this.loadApartmentDetail(options.id)
+        this.loadApartmentDetail()
       }
     },
     methods: {
-      async loadApartmentDetail(id) {
+      // 加载公寓详情（编辑模式）
+      async loadApartmentDetail() {
         try {
           uni.showLoading({ title: '加载中...' })
-          const res = await apartmentApi.getDetail(id)
-          const data = res.data || {}
+          const res = await apartmentApi.getDetail(this.apartmentId)
+          const data = res.data
+          
+          // 填充表单数据
           this.form = {
             name: data.name || '',
             address: data.address || '',
-            manager: data.manager || '',
-            phone: data.phone || '',
-            status: data.status || 'active',
-            remark: data.remark || ''
+            description: data.description || ''
           }
         } catch (error) {
           uni.showToast({ title: '加载失败', icon: 'none' })
@@ -168,9 +109,11 @@
           uni.showLoading({ title: '保存中...' })
           
           if (this.isEdit) {
+            // 编辑模式
             await apartmentApi.update(this.apartmentId, this.form)
-            uni.showToast({ title: '更新成功', icon: 'success' })
+            uni.showToast({ title: '修改成功', icon: 'success' })
           } else {
+            // 添加模式
             await apartmentApi.create(this.form)
             uni.showToast({ title: '添加成功', icon: 'success' })
           }
@@ -179,35 +122,8 @@
             uni.navigateBack()
           }, 1500)
         } catch (error) {
-          uni.showToast({ title: '保存失败', icon: 'none' })
-        } finally {
-          uni.hideLoading()
-        }
-      },
-
-      confirmDelete() {
-        uni.showModal({
-          title: '确认删除',
-          content: '删除后无法恢复，确定要删除该公寓吗？',
-          confirmColor: '#EF4444',
-          success: (res) => {
-            if (res.confirm) {
-              this.deleteApartment()
-            }
-          }
-        })
-      },
-
-      async deleteApartment() {
-        try {
-          uni.showLoading({ title: '删除中...' })
-          await apartmentApi.delete(this.apartmentId)
-          uni.showToast({ title: '删除成功', icon: 'success' })
-          setTimeout(() => {
-            uni.navigateBack()
-          }, 1500)
-        } catch (error) {
-          uni.showToast({ title: '删除失败', icon: 'none' })
+          const msg = error.data && error.data.message
+          uni.showToast({ title: msg || (this.isEdit ? '修改失败' : '添加失败'), icon: 'none' })
         } finally {
           uni.hideLoading()
         }
@@ -305,11 +221,21 @@
     border-bottom: none;
   }
 
+  .textarea-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .item-label {
     width: 160rpx;
     font-size: 30rpx;
     color: #1E293B;
     font-weight: 500;
+    flex-shrink: 0;
+  }
+
+  .textarea-item .item-label {
+    margin-bottom: 16rpx;
   }
 
   .item-label.required::after {
@@ -325,26 +251,6 @@
     text-align: right;
   }
 
-  .status-options {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    gap: 16rpx;
-  }
-
-  .status-option {
-    padding: 12rpx 24rpx;
-    border-radius: 8rpx;
-    background: #F1F5F9;
-    font-size: 26rpx;
-    color: #64748B;
-  }
-
-  .status-option.active {
-    background: #DBEAFE;
-    color: #2563EB;
-  }
-
   .remark-input {
     width: 100%;
     height: 200rpx;
@@ -352,31 +258,4 @@
     color: #1E293B;
     line-height: 1.6;
   }
-
-  .word-count {
-    position: absolute;
-    right: 32rpx;
-    bottom: 24rpx;
-    font-size: 24rpx;
-    color: #94A3B8;
-  }
-
-  /* 删除区域 */
-  .delete-section {
-    margin-top: 48rpx;
-  }
-
-  .delete-btn {
-    width: 100%;
-    height: 96rpx;
-    background: #FEE2E2;
-    color: #EF4444;
-    font-size: 32rpx;
-    font-weight: 600;
-    border-radius: 16rpx;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 </style>
diff --git a/pages/apartments/apartments.vue b/pages/apartments/apartments.vue
index efabe18..bfa705f 100644
--- a/pages/apartments/apartments.vue
+++ b/pages/apartments/apartments.vue
@@ -84,8 +84,8 @@
               <text class="stat-value rented">{{item.rentedCount || 0}}</text>
             </view>
             <view class="room-stat">
-              <text class="stat-label">月租</text>
-              <text class="stat-value">¥{{item.monthlyIncome || 0}}</text>
+              <text class="stat-label">预订</text>
+              <text class="stat-value">{{item.bookedCount || 0}}</text>
             </view>
           </view>
 
@@ -100,6 +100,10 @@
                 <uni-icons type="home-filled" size="16" color="#64748B"></uni-icons>
                 <text>房源</text>
               </view>
+              <view class="action-btn delete" @click.stop="deleteApartment(item)">
+                <uni-icons type="trash" size="16" color="#EF4444"></uni-icons>
+                <text class="delete-text">删除</text>
+              </view>
             </view>
           </view>
         </view>
@@ -123,7 +127,7 @@
 </template>
 
 <script>
-  import { apartmentApi, roomApi } from '../../api/index.js'
+  import { apartmentApi, statisticsApi } from '../../api/index.js'
 
   export default {
     data() {
@@ -154,25 +158,45 @@
         this.isLoading = true
 
         try {
-          // 加载公寓列表
-          const res = await apartmentApi.list({
-            keyword: this.searchKeyword,
+          // 加载公寓列表 - 与web端保持一致，使用getAll（即getList）
+          const res = await apartmentApi.getList({
+            name: this.searchKeyword,
             page: this.page,
             pageSize: this.pageSize
           })
 
-          const apartments = res.data || []
+          // 适配分页数据格式: { data: { list: [], total: n, page: n, pageSize: n } }
+          const apartments = res.data.list || []
+          const total = res.data.total || 0
           
-          // 加载每个公寓的房间统计
-          for (let apt of apartments) {
-            try {
-              const roomRes = await roomApi.list({ apartmentId: apt.id })
-              const rooms = roomRes.data || []
-              apt.roomCount = rooms.length
-              apt.emptyCount = rooms.filter(r => r.status === 'empty').length
-              apt.rentedCount = rooms.filter(r => r.status === 'rented').length
-            } catch (e) {
-              console.error('加载房间统计失败:', e)
+          // 加载公寓房间状态统计
+          try {
+            const statsRes = await statisticsApi.getApartmentRoomStatusStats()
+            const apartmentStats = statsRes.data || []
+            
+            // 将统计数据合并到公寓列表中
+            for (let apt of apartments) {
+              const stat = apartmentStats.find(s => s.apartmentId === apt.id)
+              if (stat) {
+                apt.roomCount = stat.total || 0
+                apt.emptyCount = stat.empty || 0
+                apt.rentedCount = stat.rented || 0
+                apt.bookedCount = stat.reserved || 0
+              } else {
+                apt.roomCount = 0
+                apt.emptyCount = 0
+                apt.rentedCount = 0
+                apt.bookedCount = 0
+              }
+            }
+          } catch (e) {
+            console.error('加载房间统计失败:', e)
+            // 统计接口失败时，设置默认值
+            for (let apt of apartments) {
+              apt.roomCount = 0
+              apt.emptyCount = 0
+              apt.rentedCount = 0
+              apt.bookedCount = 0
             }
           }
 
@@ -182,11 +206,13 @@
             this.apartmentList = [...this.apartmentList, ...apartments]
           }
 
-          this.hasMore = apartments.length >= this.pageSize
+          // 根据total判断是否还有更多数据
+          this.hasMore = this.apartmentList.length < total
           
           // 更新统计
           this.updateStats()
         } catch (error) {
+          console.error('加载公寓列表失败:', error)
           uni.showToast({ title: '加载失败', icon: 'none' })
         } finally {
           this.isLoading = false
@@ -242,6 +268,31 @@
         })
       },
 
+      deleteApartment(item) {
+        uni.showModal({
+          title: '确认删除',
+          content: `确定要删除公寓"${item.name}"吗？`,
+          confirmColor: '#EF4444',
+          success: async (res) => {
+            if (res.confirm) {
+              try {
+                uni.showLoading({ title: '删除中...' })
+                await apartmentApi.delete(item.id)
+                uni.showToast({ title: '删除成功', icon: 'success' })
+                // 刷新列表
+                this.page = 1
+                this.loadData()
+              } catch (error) {
+                const msg = error.data && error.data.message
+                uni.showToast({ title: msg || '删除失败', icon: 'none' })
+              } finally {
+                uni.hideLoading()
+              }
+            }
+          }
+        })
+      },
+
       goBack() {
         uni.navigateBack()
       },
@@ -492,6 +543,14 @@
     color: #64748B;
   }
 
+  .action-btn.delete {
+    color: #EF4444;
+  }
+
+  .action-btn.delete .delete-text {
+    color: #EF4444;
+  }
+
   /* 空状态 */
   .empty-state {
     display: flex;
diff --git a/pages/bill-add/bill-add.vue b/pages/bill-add/bill-add.vue
index 82793f3..1a30e62 100644
--- a/pages/bill-add/bill-add.vue
+++ b/pages/bill-add/bill-add.vue
@@ -18,10 +18,10 @@
       <!-- 类型选择 -->
       <view class="type-section">
         <view class="type-tabs">
-          <view class="type-tab" :class="{ active: form.type === 'income' }" @click="form.type = 'income'">
+          <view class="type-tab" :class="{ active: form.type === 'income' }" @click="switchType('income')">
             <text>收入</text>
           </view>
-          <view class="type-tab" :class="{ active: form.type === 'expense' }" @click="form.type = 'expense'">
+          <view class="type-tab" :class="{ active: form.type === 'expense' }" @click="switchType('expense')">
             <text>支出</text>
           </view>
         </view>
@@ -39,13 +39,6 @@
       <!-- 表单信息 -->
       <view class="form-section">
         <view class="form-card">
-          <view class="form-item" @click="selectRoom">
-            <text class="item-label">关联房间</text>
-            <view class="item-value">
-              <text :class="{ placeholder: !selectedRoom }">{{selectedRoom ? selectedRoom.roomNumber : '请选择房间'}}</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-          </view>
           <view class="form-item" @click="selectCategory">
             <text class="item-label required">收支类目</text>
             <view class="item-value">
@@ -53,6 +46,20 @@
               <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
             </view>
           </view>
+          <view class="form-item" @click="selectRoom">
+            <text class="item-label">关联房间</text>
+            <view class="item-value">
+              <text :class="{ placeholder: !selectedRoom }">{{selectedRoom ? selectedRoom.roomNumber : '请选择房间'}}</text>
+              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
+            </view>
+          </view>
+          <view class="form-item" @click="selectRental" :class="{ disabled: !form.roomId }">
+            <text class="item-label">关联租约</text>
+            <view class="item-value">
+              <text :class="{ placeholder: !selectedRental }">{{selectedRental ? selectedRental.tenantName : (form.roomId ? '请选择租约' : '请先选择房间')}}</text>
+              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
+            </view>
+          </view>
           <view class="form-item" @click="selectDate">
             <text class="item-label required">账单日期</text>
             <view class="item-value">
@@ -60,6 +67,13 @@
               <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
             </view>
           </view>
+          <view class="form-item" @click="selectBillMonth">
+            <text class="item-label">账单月份</text>
+            <view class="item-value">
+              <text :class="{ placeholder: !form.billMonth }">{{form.billMonth || '请选择账单月份'}}</text>
+              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
+            </view>
+          </view>
           <view class="form-item">
             <text class="item-label">备注</text>
             <input type="text" v-model="form.remark" placeholder="请输入备注" class="item-input"/>
@@ -73,7 +87,7 @@
 </template>
 
 <script>
-  import { billApi, roomApi } from '../../api/index.js'
+  import { billApi, roomApi, rentalApi, settingApi } from '../../api/index.js'
 
   export default {
     data() {
@@ -81,54 +95,124 @@
         form: {
           type: 'income',
           receivableAmount: '',
-          roomId: '',
+          roomId: null,
+          rentalId: null,
           category: '',
           billDate: this.formatDate(new Date()),
+          billMonth: '',
           remark: ''
         },
         selectedRoom: null,
-        categories: [
-          { code: 'rent', name: '租金', type: 'income' },
-          { code: 'deposit', name: '押金', type: 'income' },
-          { code: 'water', name: '水费', type: 'income' },
-          { code: 'electricity', name: '电费', type: 'income' },
-          { code: 'maintenance', name: '维修费', type: 'expense' },
-          { code: 'property', name: '物业费', type: 'expense' },
-          { code: 'other', name: '其他', type: 'all' }
-        ]
+        selectedRental: null,
+        rooms: [],
+        roomRentals: [],
+        incomeCategories: [],
+        expenseCategories: []
       }
     },
+    onLoad() {
+      this.loadRooms()
+      this.loadCategories()
+      // 设置默认账单日期为本月最后一天
+      const today = new Date()
+      const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0)
+      this.form.billDate = this.formatDate(lastDay)
+      // 设置默认账单月份为当前月份
+      this.form.billMonth = this.formatMonth(today)
+    },
     methods: {
-      async selectRoom() {
+      // 切换类型
+      switchType(type) {
+        this.form.type = type
+        this.form.category = ''
+      },
+
+      // 加载类目列表
+      async loadCategories() {
         try {
-          const res = await roomApi.list()
-          const rooms = res.data || []
-          if (rooms.length === 0) {
-            uni.showToast({ title: '暂无房间数据', icon: 'none' })
-            return
-          }
-          const roomList = rooms.map(r => r.roomNumber)
-          uni.showActionSheet({
-            itemList: roomList,
-            success: (res) => {
-              this.selectedRoom = rooms[res.tapIndex]
-              this.form.roomId = this.selectedRoom.id
-            }
-          })
+          const res = await settingApi.getCategories()
+          const categories = res.data || []
+          this.incomeCategories = categories.filter(c => c.type === 'income')
+          this.expenseCategories = categories.filter(c => c.type === 'expense')
         } catch (error) {
-          uni.showToast({ title: '加载房间失败', icon: 'none' })
+          console.error('加载类目列表失败:', error)
         }
       },
-      selectCategory() {
-        const filteredCategories = this.categories.filter(c => c.type === this.form.type || c.type === 'all')
-        const categoryList = filteredCategories.map(c => c.name)
+
+      // 加载房间列表
+      async loadRooms() {
+        try {
+          const res = await roomApi.list()
+          this.rooms = res.data || []
+        } catch (error) {
+          uni.showToast({ title: '加载房间列表失败', icon: 'none' })
+        }
+      },
+
+      // 加载房间租约列表
+      async loadRoomRentals(roomId) {
+        try {
+          const res = await rentalApi.getAll({ roomId, status: 'active' })
+          this.roomRentals = res.data || []
+        } catch (error) {
+          console.error('加载租约列表失败:', error)
+        }
+      },
+
+      async selectRoom() {
+        if (this.rooms.length === 0) {
+          uni.showToast({ title: '暂无房间数据', icon: 'none' })
+          return
+        }
+        const roomList = this.rooms.map(r => (r.apartmentName || '') + ' - ' + r.roomNumber)
         uni.showActionSheet({
-          itemList: categoryList,
+          itemList: roomList,
           success: (res) => {
-            this.form.category = filteredCategories[res.tapIndex].code
+            this.selectedRoom = this.rooms[res.tapIndex]
+            this.form.roomId = this.selectedRoom.id
+            // 清空租约选择
+            this.selectedRental = null
+            this.form.rentalId = null
+            // 加载该房间的租约
+            this.loadRoomRentals(this.form.roomId)
           }
         })
       },
+
+      selectCategory() {
+        const categories = this.form.type === 'income' ? this.incomeCategories : this.expenseCategories
+        if (categories.length === 0) {
+          uni.showToast({ title: '暂无类目数据', icon: 'none' })
+          return
+        }
+        const categoryList = categories.map(c => c.name)
+        uni.showActionSheet({
+          itemList: categoryList,
+          success: (res) => {
+            this.form.category = categories[res.tapIndex].code
+          }
+        })
+      },
+
+      selectRental() {
+        if (!this.form.roomId) {
+          uni.showToast({ title: '请先选择房间', icon: 'none' })
+          return
+        }
+        if (this.roomRentals.length === 0) {
+          uni.showToast({ title: '该房间暂无租约', icon: 'none' })
+          return
+        }
+        const rentalList = this.roomRentals.map(r => r.tenantName + ' (' + r.startDate + ' 至 ' + r.endDate + ')')
+        uni.showActionSheet({
+          itemList: rentalList,
+          success: (res) => {
+            this.selectedRental = this.roomRentals[res.tapIndex]
+            this.form.rentalId = this.selectedRental.id
+          }
+        })
+      },
+
       selectDate() {
         uni.showActionSheet({
           itemList: ['今天', '昨天', '自定义'],
@@ -150,7 +234,32 @@
           }
         })
       },
+
+      selectBillMonth() {
+        // 使用日期选择器选择月份
+        const today = new Date()
+        const currentYear = today.getFullYear()
+        const years = [currentYear - 1, currentYear, currentYear + 1].map(String)
+        const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+
+        uni.showActionSheet({
+          itemList: years,
+          title: '选择年份',
+          success: (yearRes) => {
+            const selectedYear = years[yearRes.tapIndex]
+            uni.showActionSheet({
+              itemList: months.map(m => selectedYear + '-' + m),
+              title: '选择月份',
+              success: (monthRes) => {
+                this.form.billMonth = selectedYear + '-' + months[monthRes.tapIndex]
+              }
+            })
+          }
+        })
+      },
+
       async save() {
+        // 表单验证
         if (!this.form.receivableAmount || parseFloat(this.form.receivableAmount) <= 0) {
           uni.showToast({ title: '请输入金额', icon: 'none' })
           return
@@ -159,9 +268,18 @@
           uni.showToast({ title: '请选择类目', icon: 'none' })
           return
         }
+        if (!this.form.billDate) {
+          uni.showToast({ title: '请选择账单日期', icon: 'none' })
+          return
+        }
+
         try {
           uni.showLoading({ title: '保存中...' })
-          await billApi.create(this.form)
+          const data = {
+            ...this.form,
+            receivableAmount: parseFloat(this.form.receivableAmount)
+          }
+          await billApi.create(data)
           uni.showToast({ title: '保存成功', icon: 'success' })
           setTimeout(() => { uni.navigateBack() }, 1500)
         } catch (error) {
@@ -170,12 +288,20 @@
           uni.hideLoading()
         }
       },
+
       goBack() { uni.navigateBack() },
+
       formatDate(date) {
         return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
       },
+
+      formatMonth(date) {
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
+      },
+
       getCategoryText(code) {
-        const category = this.categories.find(c => c.code === code)
+        const allCategories = [...this.incomeCategories, ...this.expenseCategories]
+        const category = allCategories.find(c => c.code === code)
         return category ? category.name : code
       }
     }
@@ -204,6 +330,7 @@
   .form-card { background: #FFFFFF; border-radius: 24rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
   .form-item { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid #F8FAFC; }
   .form-item:last-child { border-bottom: none; }
+  .form-item.disabled { opacity: 0.6; }
   .item-label { font-size: 30rpx; color: #1E293B; font-weight: 500; }
   .item-label.required::after { content: '*'; color: #EF4444; margin-left: 8rpx; }
   .item-value { display: flex; align-items: center; gap: 16rpx; font-size: 30rpx; color: #1E293B; }
diff --git a/pages/bills/bills.vue b/pages/bills/bills.vue
index 9ea63ff..c8fd148 100644
--- a/pages/bills/bills.vue
+++ b/pages/bills/bills.vue
@@ -17,29 +17,32 @@
     <scroll-view scroll-y class="page-content" @scrolltolower="loadMore">
       <!-- 筛选栏 -->
       <view class="filter-section">
-        <view class="filter-tabs">
-          <view v-for="(tab, index) in filterTabs" :key="index" class="filter-tab" :class="{ active: currentFilter === tab.value }" @click="switchFilter(tab.value)">
-            <text>{{tab.label}}</text>
+        <view class="filter-row">
+          <view class="filter-label">类型:</view>
+          <view class="filter-options">
+            <view v-for="(tab, index) in typeTabs" :key="index" class="filter-option" :class="{ active: searchForm.type === tab.value }" @click="switchTypeFilter(tab.value)">
+              <text>{{tab.label}}</text>
+            </view>
           </view>
         </view>
-      </view>
-
-      <!-- 统计概览 -->
-      <view class="stats-section">
-        <view class="stats-card">
-          <view class="stat-item">
-            <text class="stat-label">应收总额</text>
-            <text class="stat-value">¥{{stats.totalReceivable}}</text>
+        <view class="filter-row">
+          <view class="filter-label">状态:</view>
+          <view class="filter-options">
+            <view v-for="(tab, index) in statusTabs" :key="index" class="filter-option" :class="{ active: searchForm.status === tab.value }" @click="switchStatusFilter(tab.value)">
+              <text>{{tab.label}}</text>
+            </view>
           </view>
-          <view class="stat-divider"></view>
-          <view class="stat-item">
-            <text class="stat-label">实收总额</text>
-            <text class="stat-value received">¥{{stats.totalReceived}}</text>
-          </view>
-          <view class="stat-divider"></view>
-          <view class="stat-item">
-            <text class="stat-label">待收金额</text>
-            <text class="stat-value pending">¥{{stats.totalPending}}</text>
+        </view>
+        <view class="filter-row">
+          <view class="filter-label">日期:</view>
+          <view class="date-picker-group">
+            <picker mode="date" :value="searchForm.startDate" @change="onStartDateChange">
+              <view class="date-picker">{{searchForm.startDate || '开始日期'}}</view>
+            </picker>
+            <text class="date-separator">至</text>
+            <picker mode="date" :value="searchForm.endDate" @change="onEndDateChange">
+              <view class="date-picker">{{searchForm.endDate || '结束日期'}}</view>
+            </picker>
           </view>
         </view>
       </view>
@@ -63,14 +66,20 @@
               </view>
               <view class="type-info">
                 <text class="type-name">{{getCategoryText(item.category)}}</text>
-                <text class="type-room">{{item.roomNumber || '-'}} · {{item.renterName || '-'}}</text>
+                <text class="type-tag" :class="item.type">{{item.type === 'income' ? '收入' : '支出'}}</text>
               </view>
             </view>
             <view class="bill-amount">
               <text class="amount" :class="item.type">{{item.type === 'income' ? '+' : '-'}}¥{{item.receivableAmount}}</text>
-              <text class="received" v-if="item.receivedAmount > 0">实收: ¥{{item.receivedAmount}}</text>
             </view>
           </view>
+          <view class="bill-remark" v-if="item.remark">
+            <text class="remark-label">备注:</text>
+            <text class="remark-content">{{item.remark}}</text>
+          </view>
+          <view class="bill-footer">
+            <text class="create-time">创建时间: {{item.createTime}}</text>
+          </view>
         </view>
       </view>
 
@@ -85,31 +94,45 @@
 </template>
 
 <script>
-  import { billApi } from '../../api/index.js'
+  import { billApi, settingApi } from '../../api/index.js'
 
   export default {
     data() {
       return {
-        currentFilter: 'all',
-        filterTabs: [
-          { label: '全部', value: 'all' },
+        typeTabs: [
+          { label: '全部', value: '' },
           { label: '收入', value: 'income' },
-          { label: '支出', value: 'expense' },
-          { label: '未收', value: 'unpaid' }
+          { label: '支出', value: 'expense' }
         ],
+        statusTabs: [
+          { label: '全部', value: '' },
+          { label: '未收', value: 'unpaid' },
+          { label: '部分收款', value: 'partial' },
+          { label: '已收清', value: 'paid' },
+          { label: '已取消', value: 'cancelled' }
+        ],
+        searchForm: {
+          type: '',
+          status: '',
+          startDate: '',
+          endDate: ''
+        },
         billList: [],
         isLoading: false,
         page: 1,
         pageSize: 10,
         hasMore: true,
+        total: 0,
         stats: {
           totalReceivable: '0.00',
           totalReceived: '0.00',
           totalPending: '0.00'
-        }
+        },
+        categoryMap: {}
       }
     },
     onLoad() {
+      this.loadCategories()
       this.loadData()
     },
     onShow() {
@@ -120,22 +143,24 @@
         if (this.isLoading) return
         this.isLoading = true
         try {
-          const params = { page: this.page, pageSize: this.pageSize }
-          if (this.currentFilter !== 'all') {
-            if (this.currentFilter === 'unpaid') {
-              params.status = 'unpaid'
-            } else {
-              params.type = this.currentFilter
-            }
+          const params = {
+            page: this.page,
+            pageSize: this.pageSize,
+            type: this.searchForm.type,
+            status: this.searchForm.status,
+            startDate: this.searchForm.startDate,
+            endDate: this.searchForm.endDate
           }
-          const res = await billApi.list(params)
-          const list = res.data || []
+          const res = await billApi.getAll(params)
+          // 适配分页数据格式: { data: { list: [], total: n, page: n, pageSize: n } }
+          const list = res.data?.list || []
+          this.total = res.data?.total || 0
           if (this.page === 1) {
             this.billList = list
           } else {
             this.billList = [...this.billList, ...list]
           }
-          this.hasMore = list.length >= this.pageSize
+          this.hasMore = this.billList.length < this.total
           this.updateStats()
         } catch (error) {
           uni.showToast({ title: '加载失败', icon: 'none' })
@@ -162,8 +187,33 @@
           this.loadData()
         }
       },
-      switchFilter(value) {
-        this.currentFilter = value
+      switchTypeFilter(value) {
+        this.searchForm.type = value
+        this.page = 1
+        this.loadData()
+      },
+      switchStatusFilter(value) {
+        this.searchForm.status = value
+        this.page = 1
+        this.loadData()
+      },
+      onStartDateChange(e) {
+        this.searchForm.startDate = e.detail.value
+        this.page = 1
+        this.loadData()
+      },
+      onEndDateChange(e) {
+        this.searchForm.endDate = e.detail.value
+        this.page = 1
+        this.loadData()
+      },
+      resetSearch() {
+        this.searchForm = {
+          type: '',
+          status: '',
+          startDate: '',
+          endDate: ''
+        }
         this.page = 1
         this.loadData()
       },
@@ -175,12 +225,26 @@
       },
       goBack() { uni.navigateBack() },
       getStatusText(status) {
-        const texts = { 'paid': '已付清', 'partial': '部分付款', 'unpaid': '未付款' }
+        const texts = { 'paid': '已收清', 'partial': '部分收款', 'unpaid': '未收', 'cancelled': '已取消' }
         return texts[status] || status
       },
+      // 加载类目列表
+      async loadCategories() {
+        try {
+          const res = await settingApi.getCategories()
+          const categories = res.data || []
+          // 构建 code -> name 的映射
+          const map = {}
+          categories.forEach(cat => {
+            map[cat.code] = cat.name
+          })
+          this.categoryMap = map
+        } catch (error) {
+          console.error('加载类目列表失败:', error)
+        }
+      },
       getCategoryText(category) {
-        const texts = { 'rent': '租金', 'deposit': '押金', 'water': '水费', 'electricity': '电费', 'maintenance': '维修费', 'property': '物业费', 'other': '其他' }
-        return texts[category] || category || '其他'
+        return this.categoryMap[category] || category || '其他'
       }
     }
   }
@@ -194,10 +258,16 @@
   .nav-title { font-size: 36rpx; font-weight: 700; color: #1E293B; }
   .nav-actions { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
   .page-content { flex: 1; padding: 24rpx 32rpx; }
-  .filter-section { margin-bottom: 24rpx; }
-  .filter-tabs { display: flex; gap: 16rpx; }
-  .filter-tab { padding: 16rpx 32rpx; background: #FFFFFF; border-radius: 12rpx; font-size: 28rpx; color: #64748B; }
-  .filter-tab.active { background: #2563EB; color: #FFFFFF; }
+  .filter-section { margin-bottom: 24rpx; background: #FFFFFF; border-radius: 24rpx; padding: 24rpx; }
+  .filter-row { display: flex; align-items: center; margin-bottom: 20rpx; }
+  .filter-row:last-child { margin-bottom: 0; }
+  .filter-label { font-size: 26rpx; color: #64748B; min-width: 80rpx; }
+  .filter-options { display: flex; flex-wrap: wrap; gap: 12rpx; flex: 1; }
+  .filter-option { padding: 12rpx 24rpx; background: #F1F5F9; border-radius: 8rpx; font-size: 24rpx; color: #64748B; }
+  .filter-option.active { background: #2563EB; color: #FFFFFF; }
+  .date-picker-group { display: flex; align-items: center; gap: 16rpx; flex: 1; }
+  .date-picker { padding: 12rpx 20rpx; background: #F1F5F9; border-radius: 8rpx; font-size: 24rpx; color: #64748B; min-width: 160rpx; text-align: center; }
+  .date-separator { font-size: 24rpx; color: #94A3B8; }
   .stats-section { margin-bottom: 24rpx; }
   .stats-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
   .stat-item { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
@@ -223,13 +293,19 @@
   .type-icon.expense { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
   .type-info { display: flex; flex-direction: column; gap: 8rpx; }
   .type-name { font-size: 30rpx; font-weight: 600; color: #1E293B; }
-  .type-room { font-size: 24rpx; color: #64748B; }
+  .type-tag { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 8rpx; margin-top: 4rpx; }
+  .type-tag.income { background: #DCFCE7; color: #16A34A; }
+  .type-tag.expense { background: #FEE2E2; color: #DC2626; }
   .bill-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 8rpx; }
   .amount { font-size: 36rpx; font-weight: 700; }
-  .amount.income { color: #667eea; }
-  .amount.expense { color: #f5576c; }
-  .received { font-size: 24rpx; color: #94A3B8; }
+  .amount.income { color: #16A34A; }
+  .amount.expense { color: #DC2626; }
+  .bill-remark { margin-top: 20rpx; padding-top: 20rpx; border-top: 2rpx solid #F1F5F9; display: flex; gap: 8rpx; }
+  .remark-label { font-size: 24rpx; color: #64748B; flex-shrink: 0; }
+  .remark-content { font-size: 24rpx; color: #1E293B; flex: 1; word-break: break-all; }
+  .bill-footer { margin-top: 16rpx; }
+  .create-time { font-size: 22rpx; color: #94A3B8; }
   .empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0; }
   .empty-text { font-size: 28rpx; color: #94A3B8; margin-bottom: 32rpx; }
-  .add-btn { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFFFFF; font-size: 28rpx; padding: 24rpx 64rpx; border-radius: 16rpx; border: none; }
+  .add-btn { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFFFFF; font-size: 26rpx; padding: 16rpx 40rpx; border-radius: 12rpx; border: none; }
 </style>
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 011a0c3..3899b75 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -3,24 +3,26 @@
     <!-- 顶部欢迎区 -->
     <view class="welcome-section">
       <view class="welcome-content">
-        <text class="welcome-title">欢迎使用租房管理系统</text>
-        <text class="welcome-date">{{currentDate}}</text>
+        <view class="user-info">
+          <text class="welcome-title">欢迎使用租房管理系统</text>
+          <text class="welcome-date">{{currentDate}}</text>
+        </view>
       </view>
       <view class="quick-actions">
-        <view class="action-btn" @click="navigateTo('/pages/property-add/property-add')">
+        <view class="action-btn" @click="navigateTo('/pages/apartment-add/apartment-add')">
           <uni-icons type="plus-filled" size="20" color="#FFFFFF"></uni-icons>
-          <text>添加房源</text>
+          <text>添加公寓</text>
         </view>
-        <view class="action-btn secondary" @click="navigateTo('/pages/bills/bills')">
-          <uni-icons type="wallet-filled" size="20" color="#2563EB"></uni-icons>
-          <text>账单管理</text>
+        <view class="action-btn secondary" @click="navigateTo('/pages/bill-add/bill-add')">
+          <uni-icons type="wallet-filled" size="20" color="#667eea"></uni-icons>
+          <text>添加账单</text>
         </view>
       </view>
     </view>
 
     <!-- 核心KPI卡片区 -->
     <view class="kpi-section">
-      <view class="kpi-card kpi-primary" @click="navigateTo('/pages/properties/properties')">
+      <view class="kpi-card kpi-primary" @click="navigateTo('/pages/apartments/apartments')">
         <view class="kpi-icon">
           <uni-icons type="home-filled" size="28" color="#FFFFFF"></uni-icons>
         </view>
@@ -58,6 +60,51 @@
       </view>
     </view>
 
+    <!-- 功能模块网格 -->
+    <view class="module-section">
+      <view class="section-header">
+        <text class="section-title">功能模块</text>
+      </view>
+      <view class="module-grid">
+        <view class="module-item" @click="navigateTo('/pages/apartments/apartments')">
+          <view class="module-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+            <uni-icons type="home-filled" size="28" color="#FFFFFF"></uni-icons>
+          </view>
+          <text class="module-name">公寓管理</text>
+        </view>
+        <view class="module-item" @click="navigateTo('/pages/renters/renters')">
+          <view class="module-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+            <uni-icons type="person-filled" size="28" color="#FFFFFF"></uni-icons>
+          </view>
+          <text class="module-name">租客管理</text>
+        </view>
+        <view class="module-item" @click="navigateTo('/pages/rentals/rentals')">
+          <view class="module-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+            <uni-icons type="paperclip" size="28" color="#FFFFFF"></uni-icons>
+          </view>
+          <text class="module-name">租赁管理</text>
+        </view>
+        <view class="module-item" @click="navigateTo('/pages/bills/bills')">
+          <view class="module-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+            <uni-icons type="wallet-filled" size="28" color="#FFFFFF"></uni-icons>
+          </view>
+          <text class="module-name">账单管理</text>
+        </view>
+        <view class="module-item" @click="navigateTo('/pages/meter-readings/meter-readings')">
+          <view class="module-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
+            <uni-icons type="settings-filled" size="28" color="#667eea"></uni-icons>
+          </view>
+          <text class="module-name">抄表管理</text>
+        </view>
+        <view class="module-item" @click="navigateTo('/pages/billing/billing-center')">
+          <view class="module-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
+            <uni-icons type="vip-filled" size="28" color="#e67e22"></uni-icons>
+          </view>
+          <text class="module-name">计费中心</text>
+        </view>
+      </view>
+    </view>
+
     <!-- 房间状态分布 -->
     <view class="status-section">
       <view class="section-header">
@@ -142,9 +189,12 @@
 
     <!-- 预警提醒区 -->
     <view class="alert-section">
+      <view class="section-header">
+        <text class="section-title">预警提醒</text>
+      </view>
       <view class="alert-card alert-warning" @click="navigateToRentals('soon_expire')">
         <view class="alert-icon">
-          <uni-icons type="clock-filled" size="24" color="#E6A23C"></uni-icons>
+          <uni-icons type="notification-filled" size="24" color="#E6A23C"></uni-icons>
           <view v-if="soonExpireRoomCount > 0" class="badge">{{soonExpireRoomCount}}</view>
         </view>
         <view class="alert-content">
@@ -213,38 +263,7 @@
       </view>
     </view>
 
-    <!-- 快捷功能入口 -->
-    <view class="quick-menu">
-      <view class="menu-title">快捷功能</view>
-      <view class="menu-grid">
-        <view class="menu-item" @click="navigateTo('/pages/rental-add/rental-add')">
-          <view class="menu-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
-            <uni-icons type="plus-filled" size="24" color="#FFFFFF"></uni-icons>
-          </view>
-          <text>办理入住</text>
-        </view>
-        <view class="menu-item" @click="navigateTo('/pages/tenants/tenants')">
-          <view class="menu-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
-            <uni-icons type="person-filled" size="24" color="#FFFFFF"></uni-icons>
-          </view>
-          <text>租客管理</text>
-        </view>
-        <view class="menu-item" @click="navigateTo('/pages/rentals/rentals')">
-          <view class="menu-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
-            <uni-icons type="list-filled" size="24" color="#FFFFFF"></uni-icons>
-          </view>
-          <text>租赁记录</text>
-        </view>
-        <view class="menu-item" @click="navigateTo('/pages/stats/stats')">
-          <view class="menu-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
-            <uni-icons type="chart-filled" size="24" color="#FFFFFF"></uni-icons>
-          </view>
-          <text>收支统计</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="safe-area-bottom" style="height: 40rpx;"></view>
+      <view class="safe-area-bottom" style="height: 40rpx;"></view>
   </view>
 </template>
 
@@ -266,7 +285,8 @@
         monthlyReceivable: 0,
         monthlyReceived: 0,
         unpaidBillCount: 0,
-        apartmentHouseStats: []
+        apartmentHouseStats: [],
+        isLoading: false
       }
     },
     computed: {
@@ -280,7 +300,10 @@
       this.loadData()
     },
     onShow() {
-      this.loadData()
+      // 避免与onLoad重复加载，使用延迟确保onLoad先执行
+      setTimeout(() => {
+        this.loadData()
+      }, 100)
     },
     onPullDownRefresh() {
       this.loadData().finally(() => {
@@ -299,6 +322,10 @@
       },
       
       async loadData() {
+        // 防止重复加载
+        if (this.isLoading) return
+        
+        this.isLoading = true
         try {
           await Promise.all([
             this.loadDashboardStats(),
@@ -307,6 +334,8 @@
           ])
         } catch (error) {
           console.error('加载数据失败:', error)
+        } finally {
+          this.isLoading = false
         }
       },
       
@@ -321,8 +350,6 @@
           this.rentedRoomCount = data.rentedRoomCount || 0
           this.soonExpireRoomCount = data.soonExpireRoomCount || 0
           this.expiredRoomCount = data.expiredRoomCount || 0
-          this.monthlyReceivable = data.monthlyReceivable || 0
-          this.monthlyReceived = data.monthlyReceived || 0
         } catch (error) {
           console.error('加载仪表盘数据失败:', error)
         }
@@ -341,13 +368,24 @@
         try {
           const res = await billApi.getStatistics()
           const data = res.data || {}
+
+          // 适配API返回的数据结构
+          const summary = data.summary || {}
           const statusList = data.status || []
+
+          // 计算未收账单数量（unpaid + partial）
           this.unpaidBillCount = statusList
             .filter(item => item.status === 'unpaid' || item.status === 'partial')
             .reduce((sum, item) => sum + (item.count || 0), 0)
+
+          // 从summary获取应收实收数据
+          this.monthlyReceivable = parseFloat(summary.totalReceivable) || 0
+          this.monthlyReceived = parseFloat(summary.totalReceived) || 0
         } catch (error) {
           console.error('加载账单统计失败:', error)
           this.unpaidBillCount = 0
+          this.monthlyReceivable = 0
+          this.monthlyReceived = 0
         }
       },
       
@@ -403,7 +441,7 @@
 <style scoped>
   .home-page {
     min-height: 100vh;
-    background: #F8FAFC;
+    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
     padding-bottom: 40rpx;
   }
 
@@ -411,13 +449,21 @@
   .welcome-section {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     padding: 40rpx 32rpx;
-    border-radius: 0 0 32rpx 32rpx;
+    border-radius: 0 0 40rpx 40rpx;
+    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
   }
 
   .welcome-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
     margin-bottom: 32rpx;
   }
 
+  .user-info {
+    flex: 1;
+  }
+
   .welcome-title {
     display: block;
     font-size: 40rpx;
@@ -429,7 +475,7 @@
   .welcome-date {
     display: block;
     font-size: 26rpx;
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(255, 255, 255, 0.85);
   }
 
   .quick-actions {
@@ -443,15 +489,26 @@
     align-items: center;
     justify-content: center;
     gap: 12rpx;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.25);
     padding: 24rpx;
     border-radius: 16rpx;
+    backdrop-filter: blur(10rpx);
+    transition: all 0.3s ease;
+  }
+
+  .action-btn:active {
+    transform: scale(0.98);
+    background: rgba(255, 255, 255, 0.35);
   }
 
   .action-btn.secondary {
     background: #FFFFFF;
   }
 
+  .action-btn.secondary:active {
+    background: #F8FAFC;
+  }
+
   .action-btn text {
     font-size: 28rpx;
     color: #FFFFFF;
@@ -459,7 +516,7 @@
   }
 
   .action-btn.secondary text {
-    color: #2563EB;
+    color: #667eea;
   }
 
   /* KPI卡片区 */
@@ -467,8 +524,8 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20rpx;
-    padding: 24rpx 32rpx;
-    margin-top: -20rpx;
+    padding: 32rpx;
+    margin-top: 0;
   }
 
   .kpi-card {
@@ -477,7 +534,13 @@
     padding: 28rpx;
     border-radius: 20rpx;
     background: #FFFFFF;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+  }
+
+  .kpi-card:active {
+    transform: translateY(-4rpx);
+    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
   }
 
   .kpi-icon {
@@ -491,19 +554,19 @@
   }
 
   .kpi-primary .kpi-icon {
-    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }
 
   .kpi-success .kpi-icon {
-    background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
   }
 
   .kpi-warning .kpi-icon {
-    background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   }
 
   .kpi-info .kpi-icon {
-    background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   }
 
   .kpi-content {
@@ -524,15 +587,6 @@
     color: #64748B;
   }
 
-  /* 状态分布区 */
-  .status-section {
-    background: #FFFFFF;
-    margin: 0 32rpx 24rpx;
-    padding: 28rpx;
-    border-radius: 20rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-  }
-
   .section-header {
     display: flex;
     justify-content: space-between;
@@ -551,12 +605,59 @@
     color: #94A3B8;
   }
 
-  .refresh-btn {
+  /* 功能模块网格 */
+  .module-section {
+    background: #FFFFFF;
+    margin: 0 32rpx 24rpx;
+    padding: 28rpx;
+    border-radius: 20rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  }
+
+  .module-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24rpx;
+  }
+
+  .module-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12rpx;
+    padding: 20rpx 12rpx;
+    border-radius: 16rpx;
+    transition: all 0.3s ease;
+  }
+
+  .module-item:active {
+    background: #F8FAFC;
+    transform: scale(0.95);
+  }
+
+  .module-icon {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 28rpx;
     display: flex;
     align-items: center;
-    gap: 8rpx;
+    justify-content: center;
+    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
+  }
+
+  .module-name {
     font-size: 26rpx;
-    color: #409EFF;
+    font-weight: 600;
+    color: #1E293B;
+  }
+
+  /* 状态分布区 */
+  .status-section {
+    background: #FFFFFF;
+    margin: 0 32rpx 24rpx;
+    padding: 28rpx;
+    border-radius: 20rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
   }
 
   .status-list {
@@ -569,6 +670,11 @@
     display: flex;
     align-items: center;
     gap: 16rpx;
+    padding: 12rpx 0;
+  }
+
+  .status-item:active {
+    opacity: 0.7;
   }
 
   .status-info {
@@ -611,7 +717,7 @@
   .progress-fill {
     height: 100%;
     border-radius: 6rpx;
-    transition: width 0.3s ease;
+    transition: width 0.5s ease;
   }
 
   .status-count {
@@ -624,8 +730,7 @@
 
   /* 预警提醒区 */
   .alert-section {
-    padding: 0 32rpx;
-    margin-bottom: 24rpx;
+    margin: 0 32rpx 24rpx;
   }
 
   .alert-card {
@@ -637,6 +742,11 @@
     margin-bottom: 20rpx;
     box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
     border-left: 8rpx solid transparent;
+    transition: all 0.3s ease;
+  }
+
+  .alert-card:active {
+    transform: translateX(8rpx);
   }
 
   .alert-warning {
@@ -718,6 +828,18 @@
     box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
   }
 
+  .refresh-btn {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    font-size: 26rpx;
+    color: #409EFF;
+  }
+
+  .refresh-btn:active {
+    opacity: 0.7;
+  }
+
   .apartment-list {
     display: flex;
     flex-direction: column;
@@ -759,11 +881,16 @@
   }
 
   .stat-tag {
-    padding: 8rpx 16rpx;
+    padding: 10rpx 18rpx;
     background: #F3F4F6;
     border-radius: 8rpx;
     font-size: 22rpx;
     color: #9CA3AF;
+    transition: all 0.2s ease;
+  }
+
+  .stat-tag:active {
+    transform: scale(0.95);
   }
 
   .stat-tag.active {
@@ -785,47 +912,4 @@
     background: #FEE2E2;
     color: #DC2626;
   }
-
-  /* 快捷菜单 */
-  .quick-menu {
-    background: #FFFFFF;
-    margin: 0 32rpx;
-    padding: 28rpx;
-    border-radius: 20rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-  }
-
-  .menu-title {
-    font-size: 32rpx;
-    font-weight: 700;
-    color: #1E293B;
-    margin-bottom: 24rpx;
-  }
-
-  .menu-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20rpx;
-  }
-
-  .menu-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12rpx;
-  }
-
-  .menu-icon {
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .menu-item text {
-    font-size: 24rpx;
-    color: #64748B;
-  }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index 217cbea..04182a9 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -1,266 +1,140 @@
 <template>
   <view class="profile-page">
-    <!-- 用户信息卡片 -->
-    <view class="user-card">
-      <view class="user-bg"></view>
-      <view class="user-content">
-        <view class="user-avatar" @click="editAvatar">
-          <image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
-          <view v-else class="avatar-placeholder">
+    <!-- 顶部用户信息卡片 - 简洁现代风格 -->
+    <view class="profile-header">
+      <view class="header-bg">
+        <view class="bg-circle circle-1"></view>
+        <view class="bg-circle circle-2"></view>
+      </view>
+      
+      <view class="header-content">
+        <!-- 左侧：用户信息 -->
+        <view class="user-info-section">
+          <view class="user-avatar">
             <text class="avatar-text">{{getAvatarText(userInfo.nickname)}}</text>
           </view>
-          <view class="edit-badge">
-            <uni-icons type="camera-filled" size="16" color="#FFFFFF"></uni-icons>
+          <view class="user-details">
+            <text class="user-name">{{userInfo.nickname || '未设置昵称'}}</text>
+            <text class="user-phone">{{maskPhone(userInfo.phone)}}</text>
+            <view class="user-badge">
+              <uni-icons type="vip" size="12" color="#F59E0B"></uni-icons>
+              <text>房东版</text>
+            </view>
           </view>
         </view>
-        <view class="user-info" @click="editProfile">
-          <text class="user-name">{{userInfo.nickname || '未设置昵称'}}</text>
-          <text class="user-phone">{{maskPhone(userInfo.phone)}}</text>
-          <view class="edit-hint">
-            <uni-icons type="compose" size="12" color="rgba(255,255,255,0.6)"></uni-icons>
-            <text>点击编辑资料</text>
-          </view>
-        </view>
-        <view class="user-level">
-          <view class="level-badge">
-            <uni-icons type="vip-filled" size="16" color="#F59E0B"></uni-icons>
-            <text>房东版</text>
-          </view>
+        
+        <!-- 右侧：编辑按钮 -->
+        <view class="edit-btn" @click="editProfile">
+          <uni-icons type="compose" size="18" color="#667eea"></uni-icons>
         </view>
       </view>
     </view>
 
-    <scroll-view scroll-y class="page-content" @scrolltolower="loadMoreStats">
-      <!-- 数据概览 -->
-      <view class="stats-section">
-        <view class="stats-card">
-          <view class="stat-item" @click="navigateTo('/pages/apartments/apartments')">
-            <text class="stat-num">{{userStats.apartments}}</text>
-            <text class="stat-label">公寓</text>
+    <!-- 主体内容 -->
+    <scroll-view scroll-y class="content-area">
+      <!-- 计费中心 -->
+      <view class="section-card">
+        <view class="card-title">计费中心</view>
+        <view class="menu-list">
+          <view class="menu-item" @click="navigateTo('/pages/billing/billing-center')">
+            <view class="menu-icon primary">
+              <uni-icons type="vip" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="menu-label">我的套餐</text>
+            <view class="menu-extra">
+              <text class="status-tag" :class="billingStatusClass">{{billingStatusText}}</text>
+            </view>
+            <uni-icons type="right" size="14" color="#94A3B8"></uni-icons>
           </view>
-          <view class="stat-divider"></view>
-          <view class="stat-item" @click="navigateTo('/pages/rooms/rooms')">
-            <text class="stat-num">{{userStats.rooms}}</text>
-            <text class="stat-label">房源</text>
+          
+          <view class="menu-item" @click="navigateTo('/pages/billing/order-list')">
+            <view class="menu-icon success">
+              <uni-icons type="list" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="menu-label">我的订单</text>
+            <uni-icons type="right" size="14" color="#94A3B8"></uni-icons>
           </view>
-          <view class="stat-divider"></view>
-          <view class="stat-item" @click="navigateTo('/pages/renters/renters')">
-            <text class="stat-num">{{userStats.renters}}</text>
-            <text class="stat-label">租客</text>
-          </view>
-          <view class="stat-divider"></view>
-          <view class="stat-item" @click="navigateTo('/pages/rentals/rentals')">
-            <text class="stat-num">{{userStats.rentals}}</text>
-            <text class="stat-label">租约</text>
+          
+          <view class="menu-item" @click="navigateTo('/pages/billing/payment-record')">
+            <view class="menu-icon info">
+              <uni-icons type="wallet" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="menu-label">支付记录</text>
+            <uni-icons type="right" size="14" color="#94A3B8"></uni-icons>
           </view>
         </view>
       </view>
 
-      <!-- 快捷操作 -->
-      <view class="quick-actions">
-        <view class="action-grid">
-          <view class="action-item" @click="navigateTo('/pages/add-record/add-record')">
-            <view class="action-icon add">
-              <uni-icons type="plus-filled" size="28" color="#FFFFFF"></uni-icons>
+      <!-- 系统设置 -->
+      <view class="section-card">
+        <view class="card-title">系统设置</view>
+        <view class="menu-list">
+          <view class="menu-item" @click="navigateTo('/pages/settings/settings')">
+            <view class="menu-icon setting">
+              <uni-icons type="gear" size="20" color="#FFFFFF"></uni-icons>
             </view>
-            <text class="action-text">新增租约</text>
+            <text class="menu-label">账号设置</text>
+            <uni-icons type="right" size="14" color="#94A3B8"></uni-icons>
           </view>
-          <view class="action-item" @click="navigateTo('/pages/room-add/room-add')">
-            <view class="action-icon room">
-              <uni-icons type="home-filled" size="28" color="#FFFFFF"></uni-icons>
+          
+          <view class="menu-item" @click="navigateTo('/pages/settings/categories')">
+            <view class="menu-icon category">
+              <uni-icons type="folder-add" size="20" color="#FFFFFF"></uni-icons>
             </view>
-            <text class="action-text">添加房源</text>
+            <text class="menu-label">收支类目</text>
+            <uni-icons type="right" size="14" color="#94A3B8"></uni-icons>
           </view>
-          <view class="action-item" @click="navigateTo('/pages/bills/bills')">
-            <view class="action-icon bill">
-              <uni-icons type="wallet-filled" size="28" color="#FFFFFF"></uni-icons>
+          
+          <view class="menu-item" @click="showAbout">
+            <view class="menu-icon about">
+              <uni-icons type="info" size="20" color="#FFFFFF"></uni-icons>
             </view>
-            <text class="action-text">记一笔</text>
-          </view>
-          <view class="action-item" @click="navigateTo('/pages/stats/stats')">
-            <view class="action-icon stats">
-              <uni-icons type="chart-filled" size="28" color="#FFFFFF"></uni-icons>
-            </view>
-            <text class="action-text">收支统计</text>
-          </view>
-        </view>
-      </view>
-
-      <!-- 功能菜单 -->
-      <view class="menu-section">
-        <view class="menu-group">
-          <view class="menu-title">财务管理</view>
-          <view class="menu-list">
-            <view class="menu-item" @click="navigateTo('/pages/bills/bills')">
-              <view class="menu-icon bill">
-                <uni-icons type="list" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">账单管理</text>
-              <view class="menu-extra" v-if="userStats.unpaidBills > 0">
-                <text class="badge">{{userStats.unpaidBills}}</text>
-              </view>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/rentals/rentals')">
-              <view class="menu-icon contract">
-                <uni-icons type="compose" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">租约管理</text>
-              <view class="menu-extra" v-if="userStats.expiringRentals > 0">
-                <text class="badge orange">{{userStats.expiringRentals}}</text>
-              </view>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/meter-readings/meter-readings')">
-              <view class="menu-icon meter">
-                <uni-icons type="settings-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">抄表记录</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-          </view>
-        </view>
-
-        <view class="menu-group">
-          <view class="menu-title">房源管理</view>
-          <view class="menu-list">
-            <view class="menu-item" @click="navigateTo('/pages/apartments/apartments')">
-              <view class="menu-icon property">
-                <uni-icons type="home-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">公寓管理</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/rooms/rooms')">
-              <view class="menu-icon room">
-                <uni-icons type="shop-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">房源管理</text>
-              <view class="menu-extra">
-                <text class="extra-text">{{userStats.emptyRooms}}间空房</text>
-              </view>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/renters/renters')">
-              <view class="menu-icon tenant">
-                <uni-icons type="personadd-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">租客管理</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-          </view>
-        </view>
-
-        <view class="menu-group">
-          <view class="menu-title">计费中心</view>
-          <view class="menu-list">
-            <view class="menu-item" @click="navigateTo('/pages/billing/billing-center')">
-              <view class="menu-icon billing">
-                <uni-icons type="vip-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">我的套餐</text>
-              <view class="menu-extra">
-                <text class="billing-status" :class="billingStatusClass">{{billingStatusText}}</text>
-              </view>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/billing/order-list')">
-              <view class="menu-icon order">
-                <uni-icons type="list-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">我的订单</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/billing/payment-record')">
-              <view class="menu-icon payment">
-                <uni-icons type="wallet-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">支付记录</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-          </view>
-        </view>
-
-        <view class="menu-group">
-          <view class="menu-title">系统设置</view>
-          <view class="menu-list">
-            <view class="menu-item" @click="navigateTo('/pages/settings/settings')">
-              <view class="menu-icon setting">
-                <uni-icons type="gear-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">账号设置</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="navigateTo('/pages/settings/categories')">
-              <view class="menu-icon category">
-                <uni-icons type="folder-add-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">收支类目</text>
-              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-            </view>
-            <view class="menu-item" @click="showAbout">
-              <view class="menu-icon about">
-                <uni-icons type="info-filled" size="24" color="#FFFFFF"></uni-icons>
-              </view>
-              <text class="menu-text">关于我们</text>
-              <view class="menu-extra">
-                <text class="version">v{{version}}</text>
-                <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
-              </view>
+            <text class="menu-label">关于我们</text>
+            <view class="menu-extra">
+              <text class="version-text">v{{version}}</text>
             </view>
+            <uni-icons type="right" size="14" color="#94A3B8"></uni-icons>
           </view>
         </view>
       </view>
 
       <!-- 退出登录 -->
-      <view class="logout-section">
+      <view class="logout-area">
         <button class="logout-btn" @click="logout">退出登录</button>
       </view>
 
-      <view class="safe-area-bottom" style="height: 40rpx;"></view>
+      <view class="safe-area-bottom"></view>
     </scroll-view>
   </view>
 </template>
 
 <script>
-  import { apartmentApi, roomApi, renterApi, rentalApi, billApi, billingApi } from '../../api/index.js'
+  import { billingApi } from '../../api/index.js'
 
   export default {
     data() {
       return {
         userInfo: {},
-        userStats: {
-          apartments: 0,
-          rooms: 0,
-          renters: 0,
-          rentals: 0,
-          emptyRooms: 0,
-          unpaidBills: 0,
-          expiringRentals: 0
-        },
         billingInfo: null,
-        version: '1.0.0',
-        isLoading: false
+        version: '1.0.0'
       }
     },
     onLoad() {
       this.loadUserInfo()
-      this.loadUserStats()
       this.loadBillingInfo()
     },
     onShow() {
       this.loadUserInfo()
-      this.loadUserStats()
       this.loadBillingInfo()
     },
     onPullDownRefresh() {
-      this.loadUserStats().finally(() => {
+      this.loadBillingInfo().finally(() => {
         uni.stopPullDownRefresh()
       })
     },
     computed: {
       billingStatusText() {
-        if (!this.billingInfo) return '加载中...'
+        if (!this.billingInfo) return '加载中'
         const status = this.billingInfo.billingStatus
         if (status === 'trial_active') return '试用期'
         if (status === 'paid_active') return '付费期'
@@ -270,9 +144,9 @@
       billingStatusClass() {
         if (!this.billingInfo) return ''
         const status = this.billingInfo.billingStatus
-        if (status === 'trial_active') return 'trial'
-        if (status === 'paid_active') return 'active'
-        if (status === 'trial_expired' || status === 'paid_expired') return 'expired'
+        if (status === 'trial_active') return 'status-trial'
+        if (status === 'paid_active') return 'status-active'
+        if (status === 'trial_expired' || status === 'paid_expired') return 'status-expired'
         return ''
       }
     },
@@ -283,55 +157,6 @@
         this.userInfo = userInfo
       },
 
-      // 加载用户统计数据
-      async loadUserStats() {
-        if (this.isLoading) return
-        this.isLoading = true
-
-        try {
-          // 并行加载所有统计数据
-          const [apartmentRes, roomRes, renterRes, rentalRes, billRes] = await Promise.all([
-            apartmentApi.list(),
-            roomApi.list(),
-            renterApi.list(),
-            rentalApi.list(),
-            billApi.list({ status: 'unpaid' })
-          ])
-
-          const apartments = apartmentRes.data || []
-          const rooms = roomRes.data || []
-          const renters = renterRes.data || []
-          const rentals = rentalRes.data || []
-          const unpaidBills = billRes.data || []
-
-          // 计算空房数量
-          const emptyRooms = rooms.filter(r => r.status === 'empty').length
-
-          // 计算即将到期的租约（30天内）
-          const now = new Date()
-          const thirtyDaysLater = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)
-          const expiringRentals = rentals.filter(r => {
-            if (r.status !== 'active') return false
-            const endDate = new Date(r.endDate)
-            return endDate <= thirtyDaysLater && endDate >= now
-          }).length
-
-          this.userStats = {
-            apartments: apartments.length,
-            rooms: rooms.length,
-            renters: renters.length,
-            rentals: rentals.length,
-            emptyRooms,
-            unpaidBills: unpaidBills.length,
-            expiringRentals
-          }
-        } catch (error) {
-          console.error('加载统计数据失败:', error)
-        } finally {
-          this.isLoading = false
-        }
-      },
-
       // 获取头像文字
       getAvatarText(nickname) {
         if (!nickname) return '用'
@@ -344,47 +169,10 @@
         return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
       },
 
-      // 编辑头像
-      editAvatar() {
-        uni.showActionSheet({
-          itemList: ['拍照', '从相册选择'],
-          success: (res) => {
-            const sourceType = res.tapIndex === 0 ? ['camera'] : ['album']
-            uni.chooseImage({
-              count: 1,
-              sourceType,
-              success: (res) => {
-                this.uploadAvatar(res.tempFilePaths[0])
-              }
-            })
-          }
-        })
-      },
-
-      // 上传头像
-      async uploadAvatar(filePath) {
-        uni.showLoading({ title: '上传中...' })
-        try {
-          // 这里应该调用实际上传接口
-          // const uploadRes = await uploadFile(filePath)
-          // this.userInfo.avatar = uploadRes.url
-
-          // 模拟上传成功
-          this.userInfo.avatar = filePath
-          uni.setStorageSync('userInfo', this.userInfo)
-
-          uni.showToast({ title: '头像更新成功', icon: 'success' })
-        } catch (error) {
-          uni.showToast({ title: '上传失败', icon: 'none' })
-        } finally {
-          uni.hideLoading()
-        }
-      },
-
       // 编辑个人资料
       editProfile() {
         uni.navigateTo({
-          url: '/pages/profile-edit/profile-edit'
+          url: '/pages/settings/settings'
         })
       },
 
@@ -417,11 +205,6 @@
         })
       },
 
-      // 加载更多统计
-      loadMoreStats() {
-        // 可以在这里加载更多历史统计数据
-      },
-
       // 加载计费信息
       async loadBillingInfo() {
         try {
@@ -440,283 +223,166 @@
 <style scoped>
   .profile-page {
     min-height: 100vh;
-    background: #F8FAFC;
+    background: #F1F5F9;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    max-width: 100vw;
-    overflow-x: hidden;
   }
 
-  /* 用户卡片 */
-  .user-card {
+  /* 顶部 Header - 简洁现代风格 */
+  .profile-header {
     position: relative;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 40rpx 32rpx 80rpx;
-    border-radius: 0 0 40rpx 40rpx;
-    width: 100%;
-    box-sizing: border-box;
+    padding: 60rpx 32rpx 40rpx;
+    border-radius: 0 0 32rpx 32rpx;
   }
 
-  .user-bg {
+  .header-bg {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
-    border-radius: 0 0 40rpx 40rpx;
+    border-radius: 0 0 32rpx 32rpx;
   }
 
-  .user-bg::before {
-    content: '';
+  .bg-circle {
     position: absolute;
-    width: 400rpx;
-    height: 400rpx;
-    background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
-    top: -100rpx;
-    right: -100rpx;
+    background: rgba(255, 255, 255, 0.08);
   }
 
-  .user-bg::after {
-    content: '';
-    position: absolute;
+  .circle-1 {
     width: 300rpx;
     height: 300rpx;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 50%;
-    bottom: -50rpx;
-    left: -50rpx;
+    top: -100rpx;
+    right: -80rpx;
   }
 
-  .user-content {
+  .circle-2 {
+    width: 200rpx;
+    height: 200rpx;
+    bottom: -60rpx;
+    left: -60rpx;
+  }
+
+  .header-content {
     position: relative;
     z-index: 1;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
   }
 
+  .user-info-section {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+  }
+
   .user-avatar {
-    position: relative;
-    width: 160rpx;
-    height: 160rpx;
+    width: 120rpx;
+    height: 120rpx;
     border-radius: 50%;
-    overflow: hidden;
-    border: 6rpx solid rgba(255, 255, 255, 0.3);
-    margin-bottom: 24rpx;
-  }
-
-  .user-avatar image {
-    width: 100%;
-    height: 100%;
-  }
-
-  .avatar-placeholder {
-    width: 100%;
-    height: 100%;
     background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10rpx);
     display: flex;
     align-items: center;
     justify-content: center;
+    border: 4rpx solid rgba(255, 255, 255, 0.3);
   }
 
   .avatar-text {
-    font-size: 64rpx;
+    font-size: 48rpx;
     font-weight: 700;
     color: #FFFFFF;
   }
 
-  .edit-badge {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 48rpx;
-    height: 48rpx;
-    background: #667eea;
+  .user-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+
+  .user-name {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #FFFFFF;
+  }
+
+  .user-phone {
+    font-size: 26rpx;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .user-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6rpx;
+    background: rgba(255, 255, 255, 0.2);
+    padding: 6rpx 16rpx;
+    border-radius: 20rpx;
+    align-self: flex-start;
+  }
+
+  .user-badge text {
+    font-size: 22rpx;
+    color: #FFFFFF;
+    font-weight: 500;
+  }
+
+  .edit-btn {
+    width: 72rpx;
+    height: 72rpx;
+    background: rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 4rpx solid #FFFFFF;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
   }
 
-  .user-info {
-    text-align: center;
-    margin-bottom: 16rpx;
+  .edit-btn:active {
+    transform: scale(0.95);
+    opacity: 0.9;
   }
 
-  .user-name {
-    display: block;
-    font-size: 40rpx;
-    font-weight: 700;
-    color: #FFFFFF;
-    margin-bottom: 8rpx;
-  }
-
-  .user-phone {
-    display: block;
-    font-size: 26rpx;
-    color: rgba(255, 255, 255, 0.8);
-    margin-bottom: 8rpx;
-  }
-
-  .edit-hint {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8rpx;
-    font-size: 22rpx;
-    color: rgba(255, 255, 255, 0.6);
-  }
-
-  .level-badge {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
-    background: rgba(255, 255, 255, 0.2);
-    padding: 12rpx 24rpx;
-    border-radius: 30rpx;
-    font-size: 24rpx;
-    color: #FFFFFF;
-  }
-
-  /* 页面内容 */
-  .page-content {
+  /* 内容区域 */
+  .content-area {
     flex: 1;
-    padding: 0 32rpx;
-    margin-top: -50rpx;
-    width: 100%;
-    box-sizing: border-box;
+    padding: 24rpx;
   }
 
-  /* 统计区域 */
-  .stats-section {
-    margin-bottom: 32rpx;
-  }
-
-  .stats-card {
+  /* 卡片样式 */
+  .section-card {
     background: #FFFFFF;
     border-radius: 24rpx;
-    padding: 32rpx 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
-  }
-
-  .stat-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0 16rpx;
-  }
-
-  .stat-num {
-    font-size: 40rpx;
-    font-weight: 700;
-    color: #667eea;
-    margin-bottom: 8rpx;
-  }
-
-  .stat-label {
-    font-size: 24rpx;
-    color: #64748B;
-  }
-
-  .stat-divider {
-    width: 2rpx;
-    height: 60rpx;
-    background: #E2E8F0;
-  }
-
-  /* 快捷操作 */
-  .quick-actions {
-    margin-bottom: 32rpx;
-  }
-
-  .action-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 24rpx;
-    background: #FFFFFF;
-    border-radius: 24rpx;
-    padding: 32rpx 24rpx;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
-  }
-
-  .action-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16rpx;
-  }
-
-  .action-icon {
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 24rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .action-icon.add {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  }
-
-  .action-icon.room {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  }
-
-  .action-icon.bill {
-    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-  }
-
-  .action-icon.stats {
-    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  }
-
-  .action-text {
-    font-size: 24rpx;
-    color: #1E293B;
-    font-weight: 500;
-  }
-
-  /* 菜单区域 */
-  .menu-section {
-    margin-bottom: 32rpx;
-  }
-
-  .menu-group {
+    padding: 28rpx;
     margin-bottom: 24rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
   }
 
-  .menu-title {
+  .card-title {
     font-size: 28rpx;
     font-weight: 600;
-    color: #94A3B8;
-    margin-bottom: 16rpx;
-    padding-left: 16rpx;
+    color: #1E293B;
+    margin-bottom: 24rpx;
+    padding-left: 8rpx;
   }
 
+  /* 菜单列表 */
   .menu-list {
-    background: #FFFFFF;
-    border-radius: 24rpx;
-    overflow: hidden;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
   }
 
   .menu-item {
     display: flex;
     align-items: center;
-    padding: 28rpx 32rpx;
-    border-bottom: 2rpx solid #F8FAFC;
-  }
-
-  .menu-item:last-child {
-    border-bottom: none;
+    padding: 24rpx 20rpx;
+    border-radius: 12rpx;
+    transition: all 0.2s ease;
   }
 
   .menu-item:active {
@@ -724,86 +390,41 @@
   }
 
   .menu-icon {
-    width: 56rpx;
-    height: 56rpx;
+    width: 64rpx;
+    height: 64rpx;
     border-radius: 14rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 24rpx;
+    margin-right: 20rpx;
+    flex-shrink: 0;
   }
 
-  .menu-icon.bill {
+  .menu-icon.primary {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }
 
-  .menu-icon.contract {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  .menu-icon.success {
+    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
   }
 
-  .menu-icon.meter {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  }
-
-  .menu-icon.property {
-    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-  }
-
-  .menu-icon.room {
-    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  }
-
-  .menu-icon.tenant {
-    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+  .menu-icon.info {
+    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
   }
 
   .menu-icon.setting {
-    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
   }
 
   .menu-icon.category {
-    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
   }
 
   .menu-icon.about {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
   }
 
-  .menu-icon.billing {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  }
-
-  .menu-icon.order {
-    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-  }
-
-  .menu-icon.payment {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  }
-
-  .billing-status {
-    font-size: 24rpx;
-    padding: 6rpx 16rpx;
-    border-radius: 8rpx;
-    font-weight: 500;
-  }
-
-  .billing-status.trial {
-    background: #FEF3C7;
-    color: #D97706;
-  }
-
-  .billing-status.active {
-    background: #D1FAE5;
-    color: #059669;
-  }
-
-  .billing-status.expired {
-    background: #FEE2E2;
-    color: #DC2626;
-  }
-
-  .menu-text {
+  .menu-label {
     flex: 1;
     font-size: 30rpx;
     color: #1E293B;
@@ -811,50 +432,45 @@
   }
 
   .menu-extra {
-    display: flex;
-    align-items: center;
-    gap: 16rpx;
     margin-right: 16rpx;
   }
 
-  .extra-text {
-    font-size: 26rpx;
-    color: #667eea;
+  .status-tag {
+    font-size: 22rpx;
+    padding: 6rpx 16rpx;
+    border-radius: 8rpx;
     font-weight: 500;
   }
 
-  .badge {
-    min-width: 36rpx;
-    height: 36rpx;
-    background: #EF4444;
-    color: #FFFFFF;
-    font-size: 20rpx;
-    font-weight: 600;
-    border-radius: 18rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10rpx;
+  .status-trial {
+    background: #FEF3C7;
+    color: #D97706;
   }
 
-  .badge.orange {
-    background: #F59E0B;
+  .status-active {
+    background: #D1FAE5;
+    color: #059669;
   }
 
-  .version {
-    font-size: 26rpx;
+  .status-expired {
+    background: #FEE2E2;
+    color: #DC2626;
+  }
+
+  .version-text {
+    font-size: 24rpx;
     color: #94A3B8;
   }
 
   /* 退出登录 */
-  .logout-section {
-    margin-bottom: 32rpx;
+  .logout-area {
+    margin-top: 32rpx;
   }
 
   .logout-btn {
     width: 100%;
     height: 96rpx;
-    background: #FEE2E2;
+    background: #FFFFFF;
     color: #EF4444;
     font-size: 32rpx;
     font-weight: 600;
@@ -863,9 +479,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
   }
 
   .logout-btn:active {
-    background: #FECACA;
+    background: #FEF2F2;
+  }
+
+  .safe-area-bottom {
+    height: 40rpx;
   }
 </style>
diff --git a/pages/properties/properties.vue b/pages/properties/properties.vue
index 92dc83d..532dc55 100644
--- a/pages/properties/properties.vue
+++ b/pages/properties/properties.vue
@@ -3,11 +3,8 @@
     <!-- 自定义导航栏 -->
     <view class="custom-nav safe-area-top">
       <view class="nav-content">
-        <text class="nav-title">房态管理</text>
+        <text class="nav-title">房态图</text>
         <view class="nav-actions">
-          <view class="nav-btn" @click="showFilter">
-            <uni-icons type="settings-filled" size="22" color="#1E293B"></uni-icons>
-          </view>
           <view class="nav-btn primary" @click="addProperty">
             <uni-icons type="plus" size="22" color="#FFFFFF"></uni-icons>
           </view>
@@ -16,8 +13,8 @@
     </view>
 
     <!-- 公寓选择器 -->
-    <view class="apartment-tabs" v-if="apartments.length > 0">
-      <scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
+    <view class="apartment-section-header" v-if="apartments.length > 0">
+      <scroll-view scroll-x class="apartment-tabs" show-scrollbar="false">
         <view 
           v-for="(apt, index) in apartments" 
           :key="index"
@@ -27,28 +24,53 @@
         >
           <text class="tab-name">{{apt.name}}</text>
           <text class="tab-count">{{apt.roomCount}}间</text>
-          <view v-if="selectedApartmentId === apt.id" class="tab-indicator"></view>
         </view>
       </scroll-view>
     </view>
 
-    <!-- 状态筛选 -->
-    <view class="status-filter">
-      <view 
-        v-for="(filter, index) in statusFilters" 
-        :key="index"
-        class="filter-item"
-        :class="{ active: currentFilter === filter.value }"
-        @click="setFilter(filter.value)"
-      >
-        <view class="filter-dot" :style="{ background: filter.color }"></view>
-        <text>{{filter.label}}</text>
-        <text class="filter-count">({{getStatusCount(filter.value)}})</text>
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <view class="search-input-wrapper">
+        <uni-icons type="search" size="18" color="#909399"></uni-icons>
+        <input 
+          class="search-input" 
+          type="text" 
+          v-model="searchKeyword" 
+          placeholder="搜索房间号" 
+          confirm-type="search"
+          @confirm="onSearch"
+        />
+        <uni-icons v-if="searchKeyword" type="clear" size="16" color="#909399" @click="clearSearch"></uni-icons>
       </view>
     </view>
 
-    <!-- 房间网格 -->
-    <scroll-view scroll-y class="room-grid" @scrolltolower="loadMore" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
+    <!-- 状态图例 -->
+    <view class="status-legend">
+      <view class="legend-scroll">
+        <view 
+          v-for="(filter, index) in statusFilters" 
+          :key="index"
+          class="legend-item"
+          :class="{ active: currentFilter === filter.value }"
+          @click="setFilter(filter.value)"
+        >
+          <view class="legend-dot" :style="{ background: filter.color }"></view>
+          <text class="legend-text">{{filter.label}}</text>
+          <text class="legend-count">{{getStatusCount(filter.value)}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 房间列表 -->
+    <scroll-view
+      scroll-y
+      class="room-list"
+      @scrolltolower="loadMore"
+      refresher-enabled
+      :refresher-triggered="isRefreshing"
+      @refresherrefresh="onRefresh"
+    >
+      <!-- 空状态 -->
       <view v-if="filteredRooms.length === 0 && !isLoading" class="empty-state">
         <view class="empty-icon">
           <uni-icons type="home-filled" size="80" color="#CBD5E1"></uni-icons>
@@ -58,90 +80,62 @@
         <button class="empty-btn" @click="addRoom">添加房间</button>
       </view>
 
-      <view v-else class="grid-content">
-        <view 
-          v-for="(room, index) in filteredRooms" 
+      <!-- 房间卡片网格 -->
+      <view v-else class="room-grid">
+        <view
+          v-for="(room, index) in filteredRooms"
           :key="index"
           class="room-card"
-          :class="room.status"
+          :class="getRoomStatusClass(room)"
           @click="handleRoomClick(room)"
         >
-          <view class="room-header">
-            <text class="room-number">{{room.roomNumber}}</text>
-            <view class="room-status-badge" :style="{ background: getStatusColor(room.status) }">
-              {{getStatusText(room.status)}}
-            </view>
-          </view>
-          
+          <text class="room-number">{{room.roomNumber}}</text>
           <view class="room-info">
-            <view class="info-row">
-              <text class="info-label">面积</text>
-              <text class="info-value">{{room.area || '--'}} m²</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">租金</text>
-              <text class="info-value price">¥{{room.rent || 0}}/月</text>
-            </view>
-          </view>
-
-          <view class="room-footer" v-if="room.renterName">
-            <view class="renter-info">
-              <uni-icons type="person" size="14" color="#64748B"></uni-icons>
-              <text class="renter-name">{{room.renterName}}</text>
-            </view>
-            <view class="expire-tag" v-if="room.isExpiringSoon">
-              <uni-icons type="clock" size="12" color="#F56C6C"></uni-icons>
-              <text>{{room.remainingDays}}天到期</text>
-            </view>
-          </view>
-
-          <view class="room-actions" @click.stop>
-            <view v-if="room.status === 'empty'" class="action-btn rent" @click="rentRoom(room)">
-              <text>出租</text>
-            </view>
-            <view v-if="room.status === 'empty'" class="action-btn reserve" @click="reserveRoom(room)">
-              <text>预订</text>
-            </view>
-            <view v-if="room.status === 'reserved'" class="action-btn confirm" @click="confirmRent(room)">
-              <text>确认入住</text>
-            </view>
-            <view v-if="room.status === 'rented'" class="action-btn bill" @click="createBill(room)">
-              <text>记账</text>
-            </view>
+            <text class="room-price" v-if="room.monthlyPrice">¥{{room.monthlyPrice}}/月</text>
+            <text class="room-tenant" v-if="room.renterName">{{room.renterName}}</text>
+            <text class="room-date" v-if="room.endDate">{{formatDate(room.endDate)}}到期</text>
           </view>
+          <view class="room-status-tag">{{getRoomStatusText(room)}}</view>
         </view>
       </view>
 
       <uni-load-more v-if="filteredRooms.length > 0" :status="loadStatus"></uni-load-more>
-      <view class="safe-area-bottom" style="height: 40rpx;"></view>
-    </scroll-view>
 
-    <!-- 底部统计栏 -->
-    <view class="bottom-stats">
-      <view class="stat-item">
-        <text class="stat-value">{{currentApartmentStats.total}}</text>
-        <text class="stat-label">总房间</text>
+      <!-- 底部统计栏 -->
+      <view class="bottom-stats">
+        <view class="stats-content">
+          <view class="stat-item">
+            <text class="stat-value">{{currentApartmentStats.total}}</text>
+            <text class="stat-label">总房间</text>
+          </view>
+          <view class="stat-divider"></view>
+          <view class="stat-item">
+            <text class="stat-value" style="color: #67C23A;">{{currentApartmentStats.rented}}</text>
+            <text class="stat-label">在租</text>
+          </view>
+          <view class="stat-divider"></view>
+          <view class="stat-item">
+            <text class="stat-value" style="color: #909399;">{{currentApartmentStats.empty}}</text>
+            <text class="stat-label">空房</text>
+          </view>
+          <view class="stat-divider"></view>
+          <view class="stat-item highlight">
+            <text class="stat-value" style="color: #409EFF;">{{currentApartmentStats.occupancyRate}}%</text>
+            <text class="stat-label">出租率</text>
+          </view>
+        </view>
       </view>
-      <view class="stat-item">
-        <text class="stat-value" style="color: #67C23A;">{{currentApartmentStats.rented}}</text>
-        <text class="stat-label">在租</text>
-      </view>
-      <view class="stat-item">
-        <text class="stat-value" style="color: #909399;">{{currentApartmentStats.empty}}</text>
-        <text class="stat-label">空房</text>
-      </view>
-      <view class="stat-item">
-        <text class="stat-value" style="color: #409EFF;">{{currentApartmentStats.occupancyRate}}%</text>
-        <text class="stat-label">出租率</text>
-      </view>
-    </view>
+
+      <view class="safe-area-bottom" style="height: 120rpx;"></view>
+    </scroll-view>
   </view>
 </template>
 
 <script>
   import apartmentApi from '@/api/apartment.js'
   import roomApi from '@/api/room.js'
-  
+  import statisticsApi from '@/api/statistics.js'
+
   export default {
     data() {
       return {
@@ -150,38 +144,46 @@
         apartments: [],
         selectedApartmentId: null,
         rooms: [],
+        apartmentStats: {}, // 公寓统计数据
         currentFilter: 'all',
         loadStatus: 'more',
         page: 1,
         pageSize: 20,
+        searchKeyword: '',
         statusFilters: [
           { label: '全部', value: 'all', color: '#409EFF' },
-          { label: '空房', value: 'empty', color: '#909399' },
-          { label: '已预订', value: 'reserved', color: '#E6A23C' },
-          { label: '在租', value: 'rented', color: '#67C23A' },
-          { label: '即将到期', value: 'soon_expire', color: '#F56C6C' },
-          { label: '已到期', value: 'expired', color: '#F56C6C' }
+          { label: '空置', value: 'empty', color: '#67C23A' },
+          { label: '已租', value: 'rented', color: '#409EFF' },
+          { label: '即将到期', value: 'soon_expire', color: '#E6A23C' },
+          { label: '已到期', value: 'expired', color: '#F56C6C' },
+          { label: '预定', value: 'reserved', color: '#909399' }
         ]
       }
     },
     computed: {
       filteredRooms() {
         let list = this.rooms
+        // 按状态筛选
         if (this.currentFilter !== 'all') {
           list = list.filter(room => room.status === this.currentFilter)
         }
+        // 按关键词搜索
+        if (this.searchKeyword.trim()) {
+          const keyword = this.searchKeyword.trim().toLowerCase()
+          list = list.filter(room => room.roomNumber.toLowerCase().includes(keyword))
+        }
         return list
       },
       currentApartmentStats() {
-        const apt = this.apartments.find(a => a.id === this.selectedApartmentId)
-        if (!apt) return { total: 0, rented: 0, empty: 0, occupancyRate: 0 }
         const total = this.rooms.length
         const rented = this.rooms.filter(r => r.status === 'rented').length
         const empty = this.rooms.filter(r => r.status === 'empty').length
+        const soonExpire = this.rooms.filter(r => r.status === 'soon_expire').length
         return {
           total,
           rented,
           empty,
+          soonExpire,
           occupancyRate: total > 0 ? Math.round((rented / total) * 100) : 0
         }
       }
@@ -197,13 +199,26 @@
     methods: {
       async loadApartments() {
         try {
-          const res = await apartmentApi.getList({ pageSize: 999 })
+          // 使用统计接口获取公寓列表及统计数据
+          const res = await statisticsApi.getApartmentRoomStatusStats()
           if (res.data) {
             this.apartments = res.data.map(apt => ({
-              id: apt.id,
-              name: apt.name,
-              roomCount: apt.roomCount || 0
+              id: apt.apartmentId,
+              name: apt.apartment,
+              roomCount: apt.total || 0
             }))
+            // 保存统计数据
+            this.apartmentStats = {}
+            res.data.forEach(apt => {
+              this.apartmentStats[apt.apartmentId] = {
+                total: apt.total || 0,
+                empty: apt.empty || 0,
+                rented: apt.rented || 0,
+                soonExpire: apt.soon_expire || 0,
+                expired: apt.expired || 0,
+                reserved: apt.reserved || 0
+              }
+            })
             if (this.apartments.length > 0 && !this.selectedApartmentId) {
               this.selectedApartmentId = this.apartments[0].id
               this.loadRooms()
@@ -218,24 +233,21 @@
         if (!this.selectedApartmentId) return
         this.isLoading = true
         try {
-          const res = await roomApi.getList({
-            apartmentId: this.selectedApartmentId,
-            page: this.page,
-            pageSize: this.pageSize
+          const res = await roomApi.list({
+            apartmentId: this.selectedApartmentId
           })
           if (res.data) {
             const list = res.data.map(room => ({
               id: room.id,
               roomNumber: room.roomNumber,
               area: room.area,
-              rent: room.rent,
+              monthlyPrice: room.rent || room.monthlyPrice,
               status: this.getRoomStatus(room),
+              rentalStatus: room.rentalStatus,
               renterName: room.Renter?.name,
               renterPhone: room.Renter?.phone,
               rentalId: room.Rental?.id,
-              endDate: room.Rental?.endDate,
-              isExpiringSoon: this.isExpiringSoon(room.Rental?.endDate),
-              remainingDays: this.getRemainingDays(room.Rental?.endDate)
+              endDate: room.Rental?.endDate
             }))
             if (this.page === 1) {
               this.rooms = list
@@ -253,31 +265,26 @@
       },
       
       getRoomStatus(room) {
-        if (!room.Rental) return 'empty'
-        const status = room.Rental.status
-        const endDate = new Date(room.Rental.endDate)
-        const now = new Date()
-        const daysUntilExpire = Math.ceil((endDate - now) / (1000 * 60 * 60 * 24))
-        
-        if (status === 'active') {
-          if (daysUntilExpire < 0) return 'expired'
-          if (daysUntilExpire <= 7) return 'soon_expire'
-          return 'rented'
+        // 与Web端Status.vue保持一致，直接使用room.status
+        return room.status || 'empty'
+      },
+
+      getRoomStatusClass(room) {
+        // 根据status和rentalStatus确定样式类，与Web端保持一致
+        if (room.status === 'empty') return 'status-empty'
+        if (room.status === 'rented') {
+          if (room.rentalStatus === 'expired') return 'status-expired'
+          if (room.rentalStatus === 'soon_expire') return 'status-soon-expire'
+          return 'status-rented'
         }
-        return status
+        if (room.status === 'reserved') return 'status-reserved'
+        return ''
       },
       
-      isExpiringSoon(endDate) {
-        if (!endDate) return false
-        const days = this.getRemainingDays(endDate)
-        return days >= 0 && days <= 7
-      },
-      
-      getRemainingDays(endDate) {
-        if (!endDate) return 0
-        const end = new Date(endDate)
-        const now = new Date()
-        return Math.ceil((end - now) / (1000 * 60 * 60 * 24))
+      formatDate(date) {
+        if (!date) return '-'
+        const d = new Date(date)
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
       },
       
       selectApartment(id) {
@@ -291,31 +298,54 @@
       },
       
       getStatusCount(status) {
-        if (status === 'all') return this.rooms.length
-        return this.rooms.filter(r => r.status === status).length
+        // 使用接口返回的统计数据
+        const stats = this.apartmentStats[this.selectedApartmentId]
+        if (!stats) return 0
+        if (status === 'all') return stats.total
+        const keyMap = {
+          'empty': 'empty',
+          'rented': 'rented',
+          'soon_expire': 'soonExpire',
+          'expired': 'expired',
+          'reserved': 'reserved'
+        }
+        return stats[keyMap[status]] || 0
       },
       
       getStatusColor(status) {
         const colors = {
-          empty: '#909399',
-          reserved: '#E6A23C',
-          rented: '#67C23A',
-          soon_expire: '#F56C6C',
-          expired: '#F56C6C'
+          empty: '#67C23A',
+          rented: '#409EFF',
+          soon_expire: '#E6A23C',
+          expired: '#F56C6C',
+          reserved: '#909399'
         }
         return colors[status] || '#909399'
       },
       
       getStatusText(status) {
+        // 保持与Web端一致的文本映射
         const texts = {
-          empty: '空房',
-          reserved: '已预订',
-          rented: '在租',
+          empty: '空置',
+          rented: '已租',
           soon_expire: '即将到期',
-          expired: '已到期'
+          expired: '已到期',
+          reserved: '预定'
         }
         return texts[status] || status
       },
+
+      getRoomStatusText(room) {
+        // 与Web端Status.vue#getRoomStatusText保持一致
+        if (room.status === 'empty') return '空置'
+        if (room.status === 'rented') {
+          if (room.rentalStatus === 'expired') return '已到期'
+          if (room.rentalStatus === 'soon_expire') return '即将到期'
+          return '已租'
+        }
+        if (room.status === 'reserved') return '预定'
+        return room.status
+      },
       
       handleRoomClick(room) {
         uni.navigateTo({
@@ -354,16 +384,8 @@
       },
       
       addProperty() {
-        uni.showActionSheet({
-          itemList: ['添加公寓', '添加房间'],
-          success: (res) => {
-            if (res.tapIndex === 0) {
-              uni.navigateTo({ url: '/pages/property-add/property-add' })
-            } else {
-              this.addRoom()
-            }
-          }
-        })
+        // 直接跳转到添加房间页面
+        this.addRoom()
       },
       
       addRoom() {
@@ -391,6 +413,15 @@
       
       showFilter() {
         uni.showToast({ title: '筛选功能', icon: 'none' })
+      },
+
+      onSearch() {
+        // 搜索时不需要重新加载数据，computed 会自动过滤
+        uni.showToast({ title: `搜索: ${this.searchKeyword}`, icon: 'none', duration: 1000 })
+      },
+
+      clearSearch() {
+        this.searchKeyword = ''
       }
     }
   }
@@ -399,16 +430,15 @@
 <style scoped>
   .properties-page {
     min-height: 100vh;
-    background: #F8FAFC;
+    background: #F5F7FA;
     display: flex;
     flex-direction: column;
-    padding-bottom: 120rpx;
   }
 
   /* 导航栏 */
   .custom-nav {
     background: #FFFFFF;
-    border-bottom: 2rpx solid #F1F5F9;
+    border-bottom: 1rpx solid #EBEEF5;
   }
 
   .nav-content {
@@ -421,7 +451,7 @@
   .nav-title {
     font-size: 36rpx;
     font-weight: 700;
-    color: #1E293B;
+    color: #303133;
   }
 
   .nav-actions {
@@ -436,21 +466,133 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background: #F8FAFC;
+    background: #F5F7FA;
+    transition: all 0.2s;
+  }
+
+  .nav-btn:active {
+    transform: scale(0.95);
+    background: #EBEEF5;
   }
 
   .nav-btn.primary {
-    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
+    background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
+    box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.3);
   }
 
-  /* 公寓标签 */
-  .apartment-tabs {
+  /* 统计概览卡片 */
+  .statistics-overview {
+    padding: 24rpx 32rpx;
     background: #FFFFFF;
-    padding: 20rpx 0;
-    border-bottom: 2rpx solid #F1F5F9;
   }
 
-  .tabs-scroll {
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16rpx;
+  }
+
+  .stat-card {
+    border-radius: 16rpx;
+    padding: 20rpx 12rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.1;
+    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 100%);
+  }
+
+  .stat-card.total {
+    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
+  }
+
+  .stat-card.empty {
+    background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%);
+    box-shadow: 0 4rpx 16rpx rgba(17, 153, 142, 0.3);
+  }
+
+  .stat-card.rented {
+    background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
+    box-shadow: 0 4rpx 16rpx rgba(79, 172, 254, 0.3);
+  }
+
+  .stat-card.soon-expire {
+    background: linear-gradient(135deg, #FA709A 0%, #FEE140 100%);
+    box-shadow: 0 4rpx 16rpx rgba(250, 112, 154, 0.3);
+  }
+
+  .stat-icon {
+    margin-bottom: 8rpx;
+    opacity: 0.9;
+  }
+
+  .stat-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .stat-number {
+    font-size: 36rpx;
+    font-weight: 700;
+    color: #FFFFFF;
+    line-height: 1.2;
+  }
+
+  .stat-label {
+    font-size: 22rpx;
+    color: rgba(255, 255, 255, 0.9);
+    margin-top: 4rpx;
+  }
+
+  /* 搜索栏 */
+  .search-bar {
+    background: #FFFFFF;
+    padding: 20rpx 32rpx;
+    border-bottom: 1rpx solid #EBEEF5;
+  }
+
+  .search-input-wrapper {
+    display: flex;
+    align-items: center;
+    background: #F5F7FA;
+    border-radius: 32rpx;
+    padding: 16rpx 24rpx;
+    gap: 16rpx;
+  }
+
+  .search-input {
+    flex: 1;
+    font-size: 28rpx;
+    color: #303133;
+    height: 40rpx;
+  }
+
+  .search-input::placeholder {
+    color: #909399;
+  }
+
+  /* 公寓选择器 */
+  .apartment-section-header {
+    background: #FFFFFF;
+    border-bottom: 1rpx solid #EBEEF5;
+    padding: 16rpx 0;
+  }
+
+  .apartment-tabs {
     white-space: nowrap;
     padding: 0 32rpx;
   }
@@ -461,74 +603,81 @@
     align-items: center;
     padding: 16rpx 32rpx;
     margin-right: 16rpx;
-    border-radius: 16rpx;
-    background: #F8FAFC;
-    position: relative;
+    border-radius: 12rpx;
+    background: #F5F7FA;
+    border: 2rpx solid transparent;
+    transition: all 0.2s;
   }
 
   .tab-item.active {
-    background: #EFF6FF;
+    background: #ECF5FF;
+    border-color: #409EFF;
   }
 
   .tab-name {
     font-size: 28rpx;
     font-weight: 600;
-    color: #1E293B;
+    color: #303133;
   }
 
   .tab-count {
     font-size: 22rpx;
-    color: #64748B;
+    color: #909399;
     margin-top: 4rpx;
   }
 
-  .tab-indicator {
-    position: absolute;
-    bottom: -20rpx;
-    width: 40rpx;
-    height: 4rpx;
-    background: #409EFF;
-    border-radius: 2rpx;
-  }
-
-  /* 状态筛选 */
-  .status-filter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16rpx;
-    padding: 24rpx 32rpx;
+  /* 状态图例 */
+  .status-legend {
     background: #FFFFFF;
+    padding: 20rpx 0;
+    border-bottom: 1rpx solid #EBEEF5;
   }
 
-  .filter-item {
+  .legend-scroll {
+    display: flex;
+    padding: 0 32rpx;
+    gap: 16rpx;
+    flex-wrap: wrap;
+  }
+
+  .legend-item {
     display: flex;
     align-items: center;
     gap: 8rpx;
     padding: 12rpx 20rpx;
-    background: #F8FAFC;
-    border-radius: 8rpx;
-    font-size: 24rpx;
-    color: #64748B;
+    background: #F5F7FA;
+    border-radius: 24rpx;
+    border: 2rpx solid transparent;
+    transition: all 0.2s;
   }
 
-  .filter-item.active {
-    background: #EFF6FF;
-    color: #409EFF;
+  .legend-item.active {
+    background: #ECF5FF;
+    border-color: #409EFF;
   }
 
-  .filter-dot {
-    width: 12rpx;
-    height: 12rpx;
+  .legend-dot {
+    width: 16rpx;
+    height: 16rpx;
     border-radius: 50%;
   }
 
-  .filter-count {
-    font-size: 22rpx;
-    color: #94A3B8;
+  .legend-text {
+    font-size: 24rpx;
+    color: #606266;
   }
 
-  /* 房间网格 */
-  .room-grid {
+  .legend-count {
+    font-size: 22rpx;
+    color: #909399;
+    background: #FFFFFF;
+    padding: 2rpx 10rpx;
+    border-radius: 10rpx;
+    margin-left: 4rpx;
+  }
+
+  /* 房间列表 */
+  .room-list {
     flex: 1;
     padding: 24rpx 32rpx;
   }
@@ -548,27 +697,30 @@
   .empty-title {
     font-size: 32rpx;
     font-weight: 600;
-    color: #1E293B;
+    color: #303133;
     margin-bottom: 12rpx;
   }
 
   .empty-desc {
     font-size: 26rpx;
-    color: #94A3B8;
+    color: #909399;
     margin-bottom: 40rpx;
   }
 
   .empty-btn {
-    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
+    background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
     color: #FFFFFF;
-    font-size: 30rpx;
-    font-weight: 600;
-    padding: 24rpx 60rpx;
-    border-radius: 16rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    padding: 16rpx 40rpx;
+    border-radius: 12rpx;
     border: none;
+    box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
+    line-height: 1.5;
   }
 
-  .grid-content {
+  /* 房间卡片网格 */
+  .room-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20rpx;
@@ -576,184 +728,131 @@
 
   .room-card {
     background: #FFFFFF;
-    border-radius: 20rpx;
+    border: 2rpx solid #EBEEF5;
+    border-radius: 16rpx;
     padding: 24rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-    border: 2rpx solid transparent;
+    transition: all 0.2s;
+    position: relative;
+    overflow: hidden;
+    min-height: 160rpx;
   }
 
-  .room-card.empty {
-    border-color: #E4E7ED;
+  .room-card:active {
+    transform: scale(0.98);
   }
 
-  .room-card.reserved {
-    border-color: #FDF6EC;
+  /* 状态样式 */
+  .room-card.status-empty {
+    border-color: #67C23A;
+    background: #F0F9FF;
+  }
+
+  .room-card.status-rented {
+    border-color: #409EFF;
+    background: #ECF5FF;
+  }
+
+  .room-card.status-soon-expire {
+    border-color: #E6A23C;
     background: #FDF6EC;
   }
 
-  .room-card.rented {
-    border-color: #F0F9EB;
-    background: #F0F9EB;
-  }
-
-  .room-card.soon_expire,
-  .room-card.expired {
-    border-color: #FEF0F0;
+  .room-card.status-expired {
+    border-color: #F56C6C;
     background: #FEF0F0;
   }
 
-  .room-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16rpx;
+  .room-card.status-reserved {
+    border-color: #909399;
+    background: #F4F4F5;
   }
 
   .room-number {
-    font-size: 36rpx;
+    font-size: 32rpx;
     font-weight: 700;
-    color: #1E293B;
-  }
-
-  .room-status-badge {
-    padding: 6rpx 16rpx;
-    border-radius: 8rpx;
-    font-size: 20rpx;
-    color: #FFFFFF;
-    font-weight: 500;
+    color: #303133;
+    margin-bottom: 12rpx;
+    display: block;
   }
 
   .room-info {
-    margin-bottom: 16rpx;
-  }
-
-  .info-row {
+    font-size: 24rpx;
+    color: #606266;
+    line-height: 1.6;
     display: flex;
-    justify-content: space-between;
-    margin-bottom: 8rpx;
+    flex-direction: column;
+    gap: 4rpx;
   }
 
-  .info-label {
-    font-size: 24rpx;
-    color: #909399;
-  }
-
-  .info-value {
-    font-size: 24rpx;
-    color: #1E293B;
-  }
-
-  .info-value.price {
+  .room-price {
     color: #F56C6C;
     font-weight: 600;
   }
 
-  .room-footer {
-    padding-top: 16rpx;
-    border-top: 2rpx solid #F1F5F9;
-    margin-bottom: 16rpx;
+  .room-tenant {
+    color: #409EFF;
   }
 
-  .renter-info {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
-    margin-bottom: 8rpx;
+  .room-date {
+    color: #909399;
   }
 
-  .renter-name {
-    font-size: 26rpx;
-    color: #1E293B;
-  }
-
-  .expire-tag {
-    display: flex;
-    align-items: center;
-    gap: 4rpx;
-    font-size: 22rpx;
-    color: #F56C6C;
-  }
-
-  .room-actions {
-    display: flex;
-    gap: 12rpx;
-  }
-
-  .action-btn {
-    flex: 1;
-    height: 56rpx;
-    border-radius: 8rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .action-btn text {
-    font-size: 24rpx;
+  .room-status-tag {
+    position: absolute;
+    top: 20rpx;
+    right: 20rpx;
+    font-size: 20rpx;
+    padding: 4rpx 12rpx;
+    border-radius: 20rpx;
+    background: rgba(255, 255, 255, 0.9);
+    color: #606266;
     font-weight: 500;
   }
 
-  .action-btn.rent {
-    background: #409EFF;
-  }
-
-  .action-btn.rent text {
-    color: #FFFFFF;
-  }
-
-  .action-btn.reserve {
-    background: #E6A23C;
-  }
-
-  .action-btn.reserve text {
-    color: #FFFFFF;
-  }
-
-  .action-btn.confirm {
-    background: #67C23A;
-  }
-
-  .action-btn.confirm text {
-    color: #FFFFFF;
-  }
-
-  .action-btn.bill {
-    background: #909399;
-  }
-
-  .action-btn.bill text {
-    color: #FFFFFF;
-  }
-
-  /* 底部统计 */
+  /* 底部统计栏 */
   .bottom-stats {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    background: #FFFFFF;
+    border-top: 1rpx solid #EBEEF5;
+    border-radius: 16rpx;
+    margin: 24rpx 0;
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+  }
+
+  .stats-content {
     display: flex;
     justify-content: space-around;
-    background: #FFFFFF;
+    align-items: center;
     padding: 20rpx 32rpx;
-    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-    border-top: 2rpx solid #F1F5F9;
-    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
   }
 
   .stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
+    flex: 1;
   }
 
-  .stat-value {
+  .stat-item.highlight {
+    background: linear-gradient(135deg, #ECF5FF 0%, #F5F7FA 100%);
+    border-radius: 12rpx;
+    padding: 12rpx 0;
+    margin: -12rpx 0;
+  }
+
+  .stat-divider {
+    width: 2rpx;
+    height: 40rpx;
+    background: #EBEEF5;
+  }
+
+  .bottom-stats .stat-value {
     font-size: 32rpx;
     font-weight: 700;
-    color: #1E293B;
+    color: #303133;
     margin-bottom: 4rpx;
   }
 
-  .stat-label {
+  .bottom-stats .stat-label {
     font-size: 22rpx;
     color: #909399;
   }
diff --git a/pages/rental-add/rental-add.vue b/pages/rental-add/rental-add.vue
index ebb0968..48e7ebb 100644
--- a/pages/rental-add/rental-add.vue
+++ b/pages/rental-add/rental-add.vue
@@ -1,987 +1,1372 @@
 <template>
-	<view class="rental-add-page">
-		<!-- 自定义导航栏 -->
-		<view class="custom-nav safe-area-top">
-			<view class="nav-content">
-				<view class="nav-btn" @click="goBack">
-					<uni-icons type="left" size="22" color="#1E293B"></uni-icons>
-				</view>
-				<text class="nav-title">{{isEdit ? '编辑租赁' : '新增租赁'}}</text>
-				<view class="nav-btn" @click="saveRental">
-					<text class="save-text">保存</text>
-				</view>
-			</view>
-		</view>
+  <view class="rental-add-page">
+    <!-- 顶部导航 -->
+    <view class="custom-nav safe-area-top">
+      <view class="nav-content">
+        <view class="nav-btn back-btn" @click="goBack">
+          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
+        </view>
+        <text class="nav-title">{{isEdit ? '编辑租赁' : '办理入住'}}</text>
+        <view class="nav-btn placeholder"></view>
+      </view>
+    </view>
 
-		<!-- 表单内容 -->
-		<scroll-view scroll-y class="form-content">
-			<!-- 步骤指示器 -->
-			<view class="step-indicator">
-				<view class="step-item" :class="{ active: currentStep >= 1 }">
-					<view class="step-num">1</view>
-					<text class="step-text">选择房源</text>
-				</view>
-				<view class="step-line" :class="{ active: currentStep >= 2 }"></view>
-				<view class="step-item" :class="{ active: currentStep >= 2 }">
-					<view class="step-num">2</view>
-					<text class="step-text">选择租客</text>
-				</view>
-				<view class="step-line" :class="{ active: currentStep >= 3 }"></view>
-				<view class="step-item" :class="{ active: currentStep >= 3 }">
-					<view class="step-num">3</view>
-					<text class="step-text">租赁信息</text>
-				</view>
-			</view>
+    <!-- 表单内容 -->
+    <scroll-view scroll-y class="form-scroll" :scroll-into-view="scrollIntoView" scroll-with-animation>
+      <view class="form-container">
+        <!-- 房间信息卡片 -->
+        <view class="section-card" id="section-room">
+          <view class="section-header">
+            <view class="section-icon room-icon">
+              <uni-icons type="home-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">房间信息</text>
+            <text class="section-badge" v-if="form.roomId">已选择</text>
+          </view>
+          
+          <!-- 公寓选择 -->
+          <view class="form-group">
+            <text class="group-label">选择公寓 <text class="required">*</text></text>
+            <view class="apartment-selector">
+              <scroll-view scroll-x class="apartment-scroll" show-scrollbar="false">
+                <view class="apartment-list">
+                  <view
+                    v-for="apt in apartments"
+                    :key="apt.id"
+                    class="apartment-item"
+                    :class="{ active: selectedApartmentId === apt.id }"
+                    @click="selectApartment(apt.id)"
+                  >
+                    <view class="apt-content">
+                      <text class="apt-name">{{apt.name}}</text>
+                    </view>
+                    <view class="apt-check" v-if="selectedApartmentId === apt.id">
+                      <uni-icons type="checkmarkempty" size="14" color="#FFFFFF"></uni-icons>
+                    </view>
+                  </view>
+                </view>
+              </scroll-view>
+            </view>
+          </view>
 
-			<!-- 步骤1：选择房源 -->
-			<view v-if="currentStep === 1" class="step-content">
-				<view class="section-title">选择公寓</view>
-				<view class="select-list">
-					<view 
-						v-for="item in apartments" 
-						:key="item.id"
-						class="select-item"
-						:class="{ active: form.apartmentId === item.id }"
-						@click="selectApartment(item)"
-					>
-						<text class="item-name">{{item.name}}</text>
-						<text class="item-address">{{item.address}}</text>
-						<uni-icons v-if="form.apartmentId === item.id" type="checkmarkempty" size="20" color="#2563EB"></uni-icons>
-					</view>
-				</view>
+          <!-- 房间选择 -->
+          <view class="form-group" v-if="selectedApartmentId">
+            <text class="group-label">选择房间 <text class="required">*</text></text>
+            <view class="room-grid">
+              <view 
+                v-for="room in availableRooms" 
+                :key="room.id"
+                class="room-card"
+                :class="{ active: form.roomId === room.id }"
+                @click="selectRoom(room)"
+              >
+                <view class="room-header">
+                  <text class="room-number">{{room.roomNumber}}</text>
+                  <view class="room-check" v-if="form.roomId === room.id">
+                    <uni-icons type="checkmarkempty" size="12" color="#FFFFFF"></uni-icons>
+                  </view>
+                </view>
+                <view class="room-info">
+                  <text class="room-price">¥{{room.rent || 0}}<text class="price-unit">/月</text></text>
+                  <text class="room-area" v-if="room.area">{{room.area}}m²</text>
+                </view>
+              </view>
+              <view v-if="availableRooms.length === 0" class="empty-rooms">
+                <uni-icons type="info-filled" size="32" color="#CBD5E1"></uni-icons>
+                <text>该公寓暂无空房</text>
+              </view>
+            </view>
+          </view>
+        </view>
 
-				<view class="section-title" v-if="form.apartmentId">选择房间</view>
-				<view class="select-list" v-if="form.apartmentId">
-					<view 
-						v-for="item in rooms" 
-						:key="item.id"
-						class="select-item"
-						:class="{ active: form.roomId === item.id, disabled: item.status === 'rented' }"
-						@click="selectRoom(item)"
-					>
-						<view class="item-info">
-							<text class="item-name">{{item.roomNumber}}</text>
-							<text class="item-status" :class="item.status">{{item.status === 'rented' ? '已出租' : '空置中'}}</text>
-						</view>
-						<uni-icons v-if="form.roomId === item.id" type="checkmarkempty" size="20" color="#2563EB"></uni-icons>
-					</view>
-					<view v-if="rooms.length === 0" class="empty-tip">该公寓暂无房间</view>
-				</view>
+        <!-- 租客信息卡片 -->
+        <view class="section-card" id="section-renter">
+          <view class="section-header">
+            <view class="section-icon renter-icon">
+              <uni-icons type="person-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">租客信息</text>
+          </view>
+          
+          <view class="form-group">
+            <text class="group-label">租客姓名 <text class="required">*</text></text>
+            <view class="input-wrapper">
+              <uni-icons type="person" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+              <input 
+                type="text" 
+                v-model="form.renterName" 
+                placeholder="请输入租客姓名"
+                class="form-input"
+                maxlength="20"
+              />
+            </view>
+          </view>
 
-				<button class="btn-next" :disabled="!form.roomId" @click="nextStep">下一步</button>
-			</view>
+          <view class="form-row">
+            <view class="form-group half">
+              <text class="group-label">联系电话</text>
+              <view class="input-wrapper">
+                <uni-icons type="phone-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+                <input 
+                  type="number" 
+                  v-model="form.renterPhone" 
+                  placeholder="选填"
+                  class="form-input"
+                  maxlength="11"
+                />
+              </view>
+            </view>
+            <view class="form-group half">
+              <text class="group-label">身份证号</text>
+              <view class="input-wrapper">
+                <uni-icons type="wallet-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+                <input 
+                  type="idcard" 
+                  v-model="form.renterIdCard" 
+                  placeholder="选填"
+                  class="form-input"
+                  maxlength="18"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
 
-			<!-- 步骤2：选择租客 -->
-			<view v-if="currentStep === 2" class="step-content">
-				<view class="section-title">选择租客</view>
-				<view class="search-bar">
-					<uni-icons type="search" size="18" color="#94A3B8"></uni-icons>
-					<input 
-						class="search-input" 
-						type="text" 
-						placeholder="搜索租客姓名或电话"
-						v-model="renterSearchKeyword"
-						@input="searchRenters"
-					/>
-				</view>
+        <!-- 合同信息卡片 -->
+        <view class="section-card" id="section-contract">
+          <view class="section-header">
+            <view class="section-icon contract-icon">
+              <uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">合同信息</text>
+          </view>
 
-				<view class="select-list">
-					<view 
-						v-for="item in renters" 
-						:key="item.id"
-						class="select-item renter-item"
-						:class="{ active: form.renterId === item.id }"
-						@click="selectRenter(item)"
-					>
-						<view class="renter-avatar">
-							<text>{{item.name.charAt(0)}}</text>
-						</view>
-						<view class="renter-info">
-							<text class="renter-name">{{item.name}}</text>
-							<text class="renter-phone">{{item.phone}}</text>
-						</view>
-						<uni-icons v-if="form.renterId === item.id" type="checkmarkempty" size="20" color="#2563EB"></uni-icons>
-					</view>
-				</view>
+          <!-- 付租方式 -->
+          <view class="form-group">
+            <text class="group-label">付租方式 <text class="required">*</text></text>
+            <view class="payment-grid">
+              <view 
+                v-for="type in paymentTypes" 
+                :key="type.value"
+                class="payment-item"
+                :class="{ active: form.paymentType === type.value }"
+                @click="selectPaymentType(type.value)"
+              >
+                <text class="payment-label">{{type.label}}</text>
+                <text class="payment-desc">{{type.desc}}</text>
+                <view class="payment-indicator" v-if="form.paymentType === type.value">
+                  <uni-icons type="checkmarkempty" size="12" color="#FFFFFF"></uni-icons>
+                </view>
+              </view>
+            </view>
+          </view>
 
-				<view class="divider">
-					<text>或</text>
-				</view>
+          <!-- 租期 -->
+          <view class="form-group" v-if="!isEdit">
+            <text class="group-label">租期 <text class="required">*</text></text>
+            <view class="period-scroll">
+              <scroll-view scroll-x show-scrollbar="false">
+                <view class="period-list">
+                  <view 
+                    v-for="period in periodOptions" 
+                    :key="period.value"
+                    class="period-tag"
+                    :class="{ active: leasePeriod === period.value }"
+                    @click="selectPeriod(period.value)"
+                  >
+                    {{period.label}}
+                  </view>
+                </view>
+              </scroll-view>
+            </view>
+          </view>
 
-				<button class="btn-add-renter" @click="showAddRenter = true">
-					<uni-icons type="plusempty" size="18" color="#2563EB"></uni-icons>
-					<text>添加新租客</text>
-				</button>
+          <!-- 日期选择 -->
+          <view class="form-row">
+            <view class="form-group half">
+              <text class="group-label">开始日期 <text class="required">*</text></text>
+              <picker mode="date" :value="form.startDate" @change="onStartDateChange">
+                <view class="picker-box">
+                  <text class="picker-text" :class="{ placeholder: !form.startDate }">{{form.startDate || '请选择'}}</text>
+                  <uni-icons type="calendar" size="18" color="#64748B"></uni-icons>
+                </view>
+              </picker>
+            </view>
+            <view class="form-group half">
+              <text class="group-label">结束日期 <text class="required">*</text></text>
+              <picker mode="date" :value="form.endDate" @change="onEndDateChange" v-if="isEdit">
+                <view class="picker-box">
+                  <text class="picker-text" :class="{ placeholder: !form.endDate }">{{form.endDate || '请选择'}}</text>
+                  <uni-icons type="calendar" size="18" color="#64748B"></uni-icons>
+                </view>
+              </picker>
+              <view class="static-box" v-else>
+                <text class="static-text">{{form.endDate || '自动计算'}}</text>
+                <uni-icons type="calendar-filled" size="18" color="#CBD5E1"></uni-icons>
+              </view>
+            </view>
+          </view>
 
-				<view class="btn-group">
-					<button class="btn-prev" @click="prevStep">上一步</button>
-					<button class="btn-next" :disabled="!form.renterId && !isNewRenter" @click="nextStep">下一步</button>
-				</view>
-			</view>
+          <!-- 金额信息 -->
+          <view class="form-row">
+            <view class="form-group half">
+              <text class="group-label">{{form.paymentType === 'yearly' ? '年租金' : '月租金'}} <text class="required">*</text></text>
+              <view class="input-wrapper money">
+                <text class="currency">¥</text>
+                <input 
+                  type="digit" 
+                  v-model="form.rent" 
+                  :placeholder="form.paymentType === 'yearly' ? '年租金' : '月租金'"
+                  class="form-input"
+                />
+              </view>
+            </view>
+            <view class="form-group half">
+              <text class="group-label">押金</text>
+              <view class="input-wrapper money">
+                <text class="currency">¥</text>
+                <input 
+                  type="digit" 
+                  v-model="form.deposit" 
+                  placeholder="押金金额"
+                  class="form-input"
+                />
+              </view>
+            </view>
+          </view>
 
-			<!-- 步骤3：租赁信息 -->
-			<view v-if="currentStep === 3" class="step-content">
-				<view class="section-title">租赁信息</view>
-				<view class="form-card">
-					<view class="form-item">
-						<text class="form-label">付租方式 <text class="required">*</text></text>
-						<picker mode="selector" :range="paymentTypeOptions" :value="paymentTypeIndex" @change="onPaymentTypeChange">
-							<view class="picker-value">
-								<text>{{form.paymentTypeText}}</text>
-								<uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
-							</view>
-						</picker>
-					</view>
+          <!-- 经办人 -->
+          <view class="form-group">
+            <text class="group-label">经办人</text>
+            <view class="input-wrapper">
+              <uni-icons type="personadd-filled" size="18" color="#94A3B8" class="input-icon"></uni-icons>
+              <input 
+                type="text" 
+                v-model="form.operator" 
+                placeholder="请输入经办人"
+                class="form-input"
+                maxlength="20"
+              />
+            </view>
+          </view>
+        </view>
 
-					<view class="form-item">
-						<text class="form-label">开始日期 <text class="required">*</text></text>
-						<picker mode="date" :value="form.startDate" @change="onStartDateChange">
-							<view class="picker-value">
-								<text>{{form.startDate || '请选择开始日期'}}</text>
-								<uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
-							</view>
-						</picker>
-					</view>
+        <!-- 水电表读数卡片 -->
+        <view class="section-card" id="section-meter">
+          <view class="section-header">
+            <view class="section-icon meter-icon">
+              <uni-icons type="settings-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">水电表读数</text>
+            <text class="section-hint">选填</text>
+          </view>
+          
+          <view class="meter-grid">
+            <view class="meter-item">
+              <view class="meter-icon-box water">
+                <uni-icons type="info-filled" size="24" color="#3B82F6"></uni-icons>
+              </view>
+              <view class="meter-content">
+                <text class="meter-label">水表起始读数</text>
+                <view class="meter-input-box">
+                  <input 
+                    type="digit" 
+                    v-model="form.waterStartReading" 
+                    placeholder="0"
+                    class="meter-input"
+                  />
+                  <text class="meter-unit">吨</text>
+                </view>
+              </view>
+            </view>
+            <view class="meter-item">
+              <view class="meter-icon-box electric">
+                <uni-icons type="info-filled" size="24" color="#F59E0B"></uni-icons>
+              </view>
+              <view class="meter-content">
+                <text class="meter-label">电表起始读数</text>
+                <view class="meter-input-box">
+                  <input 
+                    type="digit" 
+                    v-model="form.electricStartReading" 
+                    placeholder="0"
+                    class="meter-input"
+                  />
+                  <text class="meter-unit">度</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
 
-					<view class="form-item">
-						<text class="form-label">结束日期 <text class="required">*</text></text>
-						<picker mode="date" :value="form.endDate" @change="onEndDateChange">
-							<view class="picker-value">
-								<text>{{form.endDate || '请选择结束日期'}}</text>
-								<uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
-							</view>
-						</picker>
-					</view>
+        <!-- 备注卡片 -->
+        <view class="section-card" id="section-remark">
+          <view class="section-header">
+            <view class="section-icon remark-icon">
+              <uni-icons type="chatbubble-filled" size="20" color="#FFFFFF"></uni-icons>
+            </view>
+            <text class="section-title">备注信息</text>
+            <text class="section-hint">选填</text>
+          </view>
+          <view class="textarea-wrapper">
+            <textarea
+              v-model="form.remark"
+              placeholder="添加备注信息..."
+              class="form-textarea"
+              maxlength="200"
+            />
+            <text class="char-count">{{form.remark.length}}/200</text>
+          </view>
+        </view>
 
-					<view class="form-item">
-						<text class="form-label">月租金 <text class="required">*</text></text>
-						<input 
-							type="digit" 
-							v-model="form.rent" 
-							placeholder="请输入月租金"
-							class="form-input"
-						/>
-					</view>
+        <!-- 提交按钮 -->
+        <view class="submit-section">
+          <button
+            class="submit-btn"
+            :class="{ active: canSubmit, loading: submitLoading }"
+            :disabled="!canSubmit || submitLoading"
+            @click="submitForm"
+          >
+            <text v-if="!submitLoading">{{isEdit ? '保存修改' : '确认办理'}}</text>
+            <view v-else class="btn-loading">
+              <view class="loading-dot"></view>
+              <view class="loading-dot"></view>
+              <view class="loading-dot"></view>
+            </view>
+          </button>
+        </view>
 
-					<view class="form-item">
-						<text class="form-label">押金</text>
-						<input 
-							type="digit" 
-							v-model="form.deposit" 
-							placeholder="请输入押金金额"
-							class="form-input"
-						/>
-					</view>
+        <!-- 底部安全区域 -->
+        <view class="safe-area-bottom" style="height: 160rpx;"></view>
+      </view>
+    </scroll-view>
 
-					<view class="form-item">
-						<text class="form-label">水表起始读数</text>
-						<input 
-							type="digit" 
-							v-model="form.waterMeterStart" 
-							placeholder="请输入水表起始读数"
-							class="form-input"
-						/>
-					</view>
-
-					<view class="form-item">
-						<text class="form-label">电表起始读数</text>
-						<input 
-							type="digit" 
-							v-model="form.electricityMeterStart" 
-							placeholder="请输入电表起始读数"
-							class="form-input"
-						/>
-					</view>
-
-					<view class="form-item">
-						<text class="form-label">备注</text>
-						<textarea 
-							v-model="form.remark" 
-							placeholder="请输入备注（选填）"
-							class="form-textarea"
-						/>
-					</view>
-				</view>
-
-				<view class="btn-group">
-					<button class="btn-prev" @click="prevStep">上一步</button>
-					<button class="btn-submit" :loading="submitLoading" @click="submitForm">确认提交</button>
-				</view>
-			</view>
-
-			<view class="safe-area-bottom" style="height: 40rpx;"></view>
-		</scroll-view>
-
-		<!-- 添加新租客弹窗 -->
-		<uni-popup ref="addRenterPopup" type="center">
-			<view class="popup-content">
-				<view class="popup-header">
-					<text class="popup-title">添加新租客</text>
-					<uni-icons type="close" size="20" color="#94A3B8" @click="closeAddRenterPopup"></uni-icons>
-				</view>
-				<view class="popup-body">
-					<view class="form-item">
-						<text class="form-label">姓名 <text class="required">*</text></text>
-						<input 
-							type="text" 
-							v-model="newRenter.name" 
-							placeholder="请输入租客姓名"
-							class="form-input"
-						/>
-					</view>
-					<view class="form-item">
-						<text class="form-label">电话 <text class="required">*</text></text>
-						<input 
-							type="number" 
-							v-model="newRenter.phone" 
-							placeholder="请输入租客电话"
-							class="form-input"
-							maxlength="11"
-						/>
-					</view>
-					<view class="form-item">
-						<text class="form-label">身份证号</text>
-						<input 
-							type="idcard" 
-							v-model="newRenter.idCard" 
-							placeholder="请输入身份证号（选填）"
-							class="form-input"
-							maxlength="18"
-						/>
-					</view>
-				</view>
-				<view class="popup-footer">
-					<button class="btn-cancel" @click="closeAddRenterPopup">取消</button>
-					<button class="btn-confirm" @click="confirmAddRenter">确认添加</button>
-				</view>
-			</view>
-		</uni-popup>
-	</view>
+    <!-- 成功弹窗 -->
+    <view class="success-modal" v-if="showSuccess" @click="closeSuccess">
+      <view class="success-content" @click.stop>
+        <view class="success-icon">
+          <view class="success-circle">
+            <uni-icons type="checkmarkempty" size="48" color="#FFFFFF"></uni-icons>
+          </view>
+        </view>
+        <text class="success-title">{{isEdit ? '修改成功' : '办理成功'}}</text>
+        <text class="success-desc">{{isEdit ? '租赁信息已更新' : '租客入住登记已完成'}}</text>
+        <button class="success-btn" @click="closeSuccess">确定</button>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import rentalApi from '@/api/rental.js'
-	import apartmentApi from '@/api/apartment.js'
-	import roomApi from '@/api/room.js'
-	import renterApi from '@/api/renter.js'
-	
-	export default {
-		data() {
-			return {
-				isEdit: false,
-				rentalId: null,
-				currentStep: 1,
-				submitLoading: false,
-				apartments: [],
-				rooms: [],
-				renters: [],
-				renterSearchKeyword: '',
-				isNewRenter: false,
-				form: {
-					apartmentId: '',
-					roomId: '',
-					renterId: '',
-					paymentType: 'monthly',
-					paymentTypeText: '月租',
-					startDate: '',
-					endDate: '',
-					rent: '',
-					deposit: '',
-					waterMeterStart: '',
-					electricityMeterStart: '',
-					remark: ''
-				},
-				newRenter: {
-					name: '',
-					phone: '',
-					idCard: ''
-				},
-				paymentTypeOptions: ['月租', '季租', '半年租', '年租'],
-				paymentTypeMap: {
-					'月租': 'monthly',
-					'季租': 'quarterly',
-					'半年租': 'half_year',
-					'年租': 'yearly'
-				}
-			}
-		},
-		computed: {
-			paymentTypeIndex() {
-				return this.paymentTypeOptions.indexOf(this.form.paymentTypeText)
-			}
-		},
-		onLoad(options) {
-			this.loadApartments()
-			if (options.id) {
-				this.isEdit = true
-				this.rentalId = options.id
-				this.loadRentalDetail(options.id)
-			} else {
-				// 设置默认开始日期为今天
-				this.form.startDate = this.formatDate(new Date())
-			}
-		},
-		methods: {
-			async loadApartments() {
-				try {
-					const res = await apartmentApi.getList({ pageSize: 999 })
-					if (res.data) {
-						this.apartments = res.data
-					}
-				} catch (error) {
-					console.error('加载公寓列表失败:', error)
-				}
-			},
-			
-			async loadRooms(apartmentId) {
-				try {
-					const res = await roomApi.getList({ apartmentId, pageSize: 999 })
-					if (res.data) {
-						this.rooms = res.data
-					}
-				} catch (error) {
-					console.error('加载房间列表失败:', error)
-				}
-			},
-			
-			async loadRenters() {
-				try {
-					const res = await renterApi.getOptions({ keyword: this.renterSearchKeyword })
-					if (res.data) {
-						this.renters = res.data
-					}
-				} catch (error) {
-					console.error('加载租客列表失败:', error)
-				}
-			},
-			
-			async loadRentalDetail(id) {
-				try {
-					const res = await rentalApi.getDetail(id)
-					if (res.data) {
-						const data = res.data
-						this.form = {
-							apartmentId: data.Room?.Apartment?.id,
-							roomId: data.roomId,
-							renterId: data.renterId,
-							paymentType: data.paymentType,
-							paymentTypeText: this.getPaymentTypeText(data.paymentType),
-							startDate: data.startDate,
-							endDate: data.endDate,
-							rent: String(data.rent),
-							deposit: String(data.deposit || ''),
-							waterMeterStart: String(data.waterMeterStart || ''),
-							electricityMeterStart: String(data.electricityMeterStart || ''),
-							remark: data.remark || ''
-						}
-						this.loadRooms(this.form.apartmentId)
-					}
-				} catch (error) {
-					console.error('加载租赁详情失败:', error)
-				}
-			},
-			
-			selectApartment(item) {
-				this.form.apartmentId = item.id
-				this.form.roomId = ''
-				this.loadRooms(item.id)
-			},
-			
-			selectRoom(item) {
-				if (item.status === 'rented') {
-					uni.showToast({ title: '该房间已出租', icon: 'none' })
-					return
-				}
-				this.form.roomId = item.id
-			},
-			
-			selectRenter(item) {
-				this.form.renterId = item.id
-				this.isNewRenter = false
-			},
-			
-			searchRenters() {
-				this.loadRenters()
-			},
-			
-			nextStep() {
-				if (this.currentStep < 3) {
-					this.currentStep++
-					if (this.currentStep === 2) {
-						this.loadRenters()
-					}
-				}
-			},
-			
-			prevStep() {
-				if (this.currentStep > 1) {
-					this.currentStep--
-				}
-			},
-			
-			onPaymentTypeChange(e) {
-				const text = this.paymentTypeOptions[e.detail.value]
-				this.form.paymentTypeText = text
-				this.form.paymentType = this.paymentTypeMap[text]
-			},
-			
-			onStartDateChange(e) {
-				this.form.startDate = e.detail.value
-			},
-			
-			onEndDateChange(e) {
-				this.form.endDate = e.detail.value
-			},
-			
-			showAddRenterPopup() {
-				this.$refs.addRenterPopup.open()
-			},
-			
-			closeAddRenterPopup() {
-				this.$refs.addRenterPopup.close()
-				this.newRenter = { name: '', phone: '', idCard: '' }
-			},
-			
-			confirmAddRenter() {
-				if (!this.newRenter.name.trim()) {
-					uni.showToast({ title: '请输入租客姓名', icon: 'none' })
-					return
-				}
-				if (!this.newRenter.phone.trim()) {
-					uni.showToast({ title: '请输入租客电话', icon: 'none' })
-					return
-				}
-				this.isNewRenter = true
-				this.form.renterId = ''
-				this.closeAddRenterPopup()
-				uni.showToast({ title: '新租客信息已保存', icon: 'success' })
-			},
-			
-			async submitForm() {
-				// 表单验证
-				if (!this.form.roomId) {
-					uni.showToast({ title: '请选择房间', icon: 'none' })
-					return
-				}
-				if (!this.form.renterId && !this.isNewRenter) {
-					uni.showToast({ title: '请选择或添加租客', icon: 'none' })
-					return
-				}
-				if (!this.form.startDate) {
-					uni.showToast({ title: '请选择开始日期', icon: 'none' })
-					return
-				}
-				if (!this.form.endDate) {
-					uni.showToast({ title: '请选择结束日期', icon: 'none' })
-					return
-				}
-				if (!this.form.rent) {
-					uni.showToast({ title: '请输入月租金', icon: 'none' })
-					return
-				}
-				
-				this.submitLoading = true
-				try {
-					const data = {
-						roomId: this.form.roomId,
-						paymentType: this.form.paymentType,
-						startDate: this.form.startDate,
-						endDate: this.form.endDate,
-						rent: parseFloat(this.form.rent),
-						deposit: parseFloat(this.form.deposit) || 0,
-						waterMeterStart: this.form.waterMeterStart ? parseFloat(this.form.waterMeterStart) : null,
-						electricityMeterStart: this.form.electricityMeterStart ? parseFloat(this.form.electricityMeterStart) : null,
-						remark: this.form.remark
-					}
-					
-					if (this.isNewRenter) {
-						// 创建租赁同时创建租客
-						data.renter = this.newRenter
-						await rentalApi.createWithRenter(data)
-					} else {
-						data.renterId = this.form.renterId
-						if (this.isEdit) {
-							await rentalApi.update(this.rentalId, data)
-						} else {
-							await rentalApi.create(data)
-						}
-					}
-					
-					uni.showToast({
-						title: this.isEdit ? '更新成功' : '创建成功',
-						icon: 'success'
-					})
-					
-					setTimeout(() => {
-						uni.navigateBack()
-					}, 1500)
-				} catch (error) {
-					console.error('保存失败:', error)
-					uni.showToast({
-						title: this.isEdit ? '更新失败' : '创建失败',
-						icon: 'none'
-					})
-				} finally {
-					this.submitLoading = false
-				}
-			},
-			
-			goBack() {
-				uni.navigateBack()
-			},
-			
-			getPaymentTypeText(type) {
-				const map = {
-					monthly: '月租',
-					quarterly: '季租',
-					half_year: '半年租',
-					yearly: '年租'
-				}
-				return map[type] || type
-			},
-			
-			formatDate(date) {
-				const d = new Date(date)
-				return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-			}
-		}
-	}
+  import rentalApi from '@/api/rental.js'
+  import apartmentApi from '@/api/apartment.js'
+  import roomApi from '@/api/room.js'
+  
+  export default {
+    data() {
+      return {
+        isEdit: false,
+        rentalId: null,
+        submitLoading: false,
+        showSuccess: false,
+        scrollIntoView: '',
+        apartments: [],
+        rooms: [],
+        selectedApartmentId: null,
+        leasePeriod: 1,
+        form: {
+          roomId: '',
+          renterName: '',
+          renterPhone: '',
+          renterIdCard: '',
+          paymentType: 'monthly',
+          startDate: '',
+          endDate: '',
+          rent: '',
+          deposit: '',
+          operator: '',
+          waterStartReading: '',
+          electricStartReading: '',
+          remark: ''
+        },
+        paymentTypes: [
+          { label: '月租', value: 'monthly', desc: '每月支付' },
+          { label: '年租', value: 'yearly', desc: '每年支付' }
+        ]
+      }
+    },
+    computed: {
+      availableRooms() {
+        // 编辑模式下显示所有房间，新增模式下只显示空置房间
+        if (this.isEdit) {
+          return this.rooms
+        }
+        return this.rooms.filter(room => room.status === 'empty' || room.status === 'vacant')
+      },
+      periodOptions() {
+        if (this.form.paymentType === 'monthly') {
+          return Array.from({ length: 24 }, (_, i) => ({
+            label: `${i + 1}个月`,
+            value: i + 1
+          }))
+        } else if (this.form.paymentType === 'quarterly') {
+          return Array.from({ length: 8 }, (_, i) => ({
+            label: `${i + 1}个季度`,
+            value: i + 1
+          }))
+        } else if (this.form.paymentType === 'half_year') {
+          return Array.from({ length: 6 }, (_, i) => ({
+            label: `${i + 1}个半年`,
+            value: i + 1
+          }))
+        } else {
+          return Array.from({ length: 10 }, (_, i) => ({
+            label: `${i + 1}年`,
+            value: i + 1
+          }))
+        }
+      },
+      canSubmit() {
+        return this.form.roomId && this.form.renterName.trim() && this.form.startDate && this.form.endDate && this.form.rent
+      }
+    },
+    onLoad(options) {
+      this.loadApartments()
+      this.form.startDate = this.formatDate(new Date())
+      
+      if (options.id) {
+        // 编辑模式
+        this.isEdit = true
+        this.rentalId = options.id
+        this.loadRentalDetail(options.id)
+      } else if (options.roomId) {
+        // 从房间预选
+        this.preSelectRoom(options.roomId)
+      }
+    },
+    watch: {
+      'form.paymentType': function() {
+        if (!this.isEdit) {
+          this.leasePeriod = 1
+          this.updateEndDate()
+        }
+      },
+      leasePeriod: function() {
+        if (!this.isEdit) {
+          this.updateEndDate()
+        }
+      },
+      'form.startDate': function() {
+        if (!this.isEdit) {
+          this.updateEndDate()
+        }
+      }
+    },
+    methods: {
+      async loadApartments() {
+        try {
+          const res = await apartmentApi.list()
+          if (res.data) {
+            this.apartments = res.data
+          }
+        } catch (error) {
+          console.error('加载公寓列表失败:', error)
+        }
+      },
+
+      async loadRooms(apartmentId) {
+        try {
+          const res = await roomApi.list({ apartmentId })
+          if (res.data) {
+            this.rooms = res.data
+          }
+        } catch (error) {
+          console.error('加载房间列表失败:', error)
+        }
+      },
+      
+      async loadRentalDetail(id) {
+        try {
+          const res = await rentalApi.getDetail(id)
+          if (res.data) {
+            const data = res.data
+            this.selectedApartmentId = data.Room?.Apartment?.id
+            await this.loadRooms(this.selectedApartmentId)
+            
+            this.form = {
+              roomId: data.roomId,
+              renterName: data.Renter?.name || '',
+              renterPhone: data.Renter?.phone || '',
+              renterIdCard: data.Renter?.idCard || '',
+              paymentType: data.paymentType || 'monthly',
+              startDate: data.startDate,
+              endDate: data.endDate,
+              rent: String(data.rent || ''),
+              deposit: String(data.deposit || ''),
+              operator: data.operator || '',
+              waterStartReading: String(data.waterMeterStart || ''),
+              electricStartReading: String(data.electricityMeterStart || ''),
+              remark: data.remark || ''
+            }
+          }
+        } catch (error) {
+          console.error('加载租赁详情失败:', error)
+          uni.showToast({ title: '加载详情失败', icon: 'none' })
+        }
+      },
+      
+      async preSelectRoom(roomId) {
+        try {
+          const res = await roomApi.getDetail(roomId)
+          if (res.data) {
+            const room = res.data
+            this.selectedApartmentId = room.apartmentId
+            await this.loadRooms(room.apartmentId)
+            this.form.roomId = roomId
+            this.form.rent = room.rent || ''
+          }
+        } catch (error) {
+          console.error('加载房间详情失败:', error)
+        }
+      },
+      
+      selectApartment(id) {
+        this.selectedApartmentId = id
+        this.form.roomId = ''
+        this.loadRooms(id)
+      },
+      
+      selectRoom(room) {
+        // 新增模式下检查房间是否已出租
+        if (!this.isEdit && room.status === 'rented') {
+          uni.showToast({ title: '该房间已出租', icon: 'none' })
+          return
+        }
+        this.form.roomId = room.id
+        this.form.rent = room.rent || ''
+      },
+      
+      selectPaymentType(type) {
+        this.form.paymentType = type
+      },
+      
+      selectPeriod(period) {
+        this.leasePeriod = period
+      },
+      
+      onStartDateChange(e) {
+        this.form.startDate = e.detail.value
+      },
+      
+      onEndDateChange(e) {
+        this.form.endDate = e.detail.value
+      },
+      
+      updateEndDate() {
+        if (!this.form.startDate) return
+        const startDate = new Date(this.form.startDate)
+        const endDate = new Date(startDate)
+        
+        if (this.form.paymentType === 'monthly') {
+          endDate.setMonth(endDate.getMonth() + this.leasePeriod)
+        } else if (this.form.paymentType === 'quarterly') {
+          endDate.setMonth(endDate.getMonth() + this.leasePeriod * 3)
+        } else if (this.form.paymentType === 'half_year') {
+          endDate.setMonth(endDate.getMonth() + this.leasePeriod * 6)
+        } else {
+          endDate.setFullYear(endDate.getFullYear() + this.leasePeriod)
+        }
+        
+        this.form.endDate = this.formatDate(endDate)
+      },
+      
+      async submitForm() {
+        if (!this.canSubmit) return
+        
+        this.submitLoading = true
+        try {
+          const submitData = {
+            roomId: this.form.roomId,
+            renterName: this.form.renterName.trim(),
+            renterPhone: this.form.renterPhone.trim() || null,
+            renterIdCard: this.form.renterIdCard.trim() || null,
+            paymentType: this.form.paymentType,
+            startDate: this.form.startDate,
+            endDate: this.form.endDate,
+            rent: parseFloat(this.form.rent),
+            deposit: parseFloat(this.form.deposit) || 0,
+            operator: this.form.operator.trim() || null,
+            waterStartReading: this.form.waterStartReading ? parseFloat(this.form.waterStartReading) : null,
+            electricStartReading: this.form.electricStartReading ? parseFloat(this.form.electricStartReading) : null,
+            remark: this.form.remark.trim() || null
+          }
+          
+          if (this.isEdit) {
+            await rentalApi.update(this.rentalId, submitData)
+          } else {
+            await rentalApi.createWithRenter(submitData)
+          }
+          
+          this.showSuccess = true
+        } catch (error) {
+          console.error(this.isEdit ? '修改失败:' : '办理入住失败:', error)
+          uni.showToast({
+            title: this.isEdit ? '修改失败' : '办理失败',
+            icon: 'none'
+          })
+        } finally {
+          this.submitLoading = false
+        }
+      },
+      
+      closeSuccess() {
+        this.showSuccess = false
+        uni.navigateBack()
+      },
+      
+      formatDate(date) {
+        const d = new Date(date)
+        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+      },
+      
+      goBack() {
+        uni.navigateBack()
+      }
+    }
+  }
 </script>
 
 <style scoped>
-	.rental-add-page {
-		min-height: 100vh;
-		background: #F8FAFC;
-		display: flex;
-		flex-direction: column;
-	}
+  .rental-add-page {
+    min-height: 100vh;
+    background: linear-gradient(180deg, #F0F7FF 0%, #F8FAFC 200rpx);
+    display: flex;
+    flex-direction: column;
+  }
 
-	/* 自定义导航栏 */
-	.custom-nav {
-		background: #FFFFFF;
-		border-bottom: 2rpx solid #F1F5F9;
-	}
+  /* 导航栏 */
+  .custom-nav {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20rpx);
+    border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
 
-	.nav-content {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 20rpx 32rpx;
-	}
+  .nav-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16rpx 24rpx;
+    height: 96rpx;
+  }
 
-	.nav-btn {
-		width: 72rpx;
-		height: 72rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-	}
+  .nav-btn {
+    width: 72rpx;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+  }
 
-	.nav-btn:active {
-		background: #F1F5F9;
-	}
+  .back-btn:active {
+    background: rgba(37, 99, 235, 0.1);
+  }
 
-	.nav-title {
-		font-size: 34rpx;
-		font-weight: 600;
-		color: #1E293B;
-	}
+  .nav-title {
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #1E293B;
+  }
 
-	.save-text {
-		font-size: 28rpx;
-		color: #2563EB;
-		font-weight: 600;
-	}
+  .placeholder {
+    width: 72rpx;
+  }
 
-	/* 表单内容 */
-	.form-content {
-		flex: 1;
-		padding: 24rpx 32rpx;
-	}
+  /* 表单滚动区 */
+  .form-scroll {
+    flex: 1;
+  }
 
-	/* 步骤指示器 */
-	.step-indicator {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-bottom: 40rpx;
-		padding: 24rpx;
-		background: #FFFFFF;
-		border-radius: 16rpx;
-	}
+  .form-container {
+    padding: 32rpx;
+  }
 
-	.step-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 8rpx;
-	}
+  /* 页面标题 */
+  .page-header {
+    margin-bottom: 40rpx;
+  }
 
-	.step-num {
-		width: 48rpx;
-		height: 48rpx;
-		border-radius: 50%;
-		background: #E2E8F0;
-		color: #64748B;
-		font-size: 24rpx;
-		font-weight: 600;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+  .header-title {
+    display: block;
+    font-size: 44rpx;
+    font-weight: 700;
+    color: #1E293B;
+    margin-bottom: 12rpx;
+  }
 
-	.step-item.active .step-num {
-		background: #2563EB;
-		color: #FFFFFF;
-	}
+  .header-subtitle {
+    font-size: 28rpx;
+    color: #64748B;
+  }
 
-	.step-text {
-		font-size: 22rpx;
-		color: #64748B;
-	}
+  /* 卡片样式 */
+  .section-card {
+    background: #FFFFFF;
+    border-radius: 28rpx;
+    padding: 32rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+    border: 1rpx solid rgba(226, 232, 240, 0.5);
+  }
 
-	.step-item.active .step-text {
-		color: #2563EB;
-		font-weight: 500;
-	}
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-bottom: 28rpx;
+  }
 
-	.step-line {
-		width: 80rpx;
-		height: 2rpx;
-		background: #E2E8F0;
-		margin: 0 16rpx;
-		margin-bottom: 30rpx;
-	}
+  .section-icon {
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 14rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-	.step-line.active {
-		background: #2563EB;
-	}
+  .room-icon { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }
+  .renter-icon { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
+  .contract-icon { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); }
+  .meter-icon { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
+  .remark-icon { background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%); }
 
-	/* 步骤内容 */
-	.step-content {
-		animation: fadeIn 0.3s ease;
-	}
+  .section-title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #1E293B;
+    flex: 1;
+  }
 
-	@keyframes fadeIn {
-		from { opacity: 0; transform: translateX(20rpx); }
-		to { opacity: 1; transform: translateX(0); }
-	}
+  .section-badge {
+    font-size: 22rpx;
+    color: #10B981;
+    background: rgba(16, 185, 129, 0.1);
+    padding: 6rpx 16rpx;
+    border-radius: 20rpx;
+  }
 
-	/* 标题 */
-	.section-title {
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #1E293B;
-		margin-bottom: 16rpx;
-	}
+  .section-hint {
+    font-size: 24rpx;
+    color: #94A3B8;
+  }
 
-	/* 选择列表 */
-	.select-list {
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		overflow: hidden;
-		margin-bottom: 24rpx;
-	}
+  /* 表单组 */
+  .form-group {
+    margin-bottom: 28rpx;
+  }
 
-	.select-item {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 24rpx;
-		border-bottom: 2rpx solid #F1F5F9;
-	}
+  .form-group:last-child {
+    margin-bottom: 0;
+  }
 
-	.select-item:last-child {
-		border-bottom: none;
-	}
+  .form-row {
+    display: flex;
+    gap: 24rpx;
+  }
 
-	.select-item.active {
-		background: #EFF6FF;
-	}
+  .form-group.half {
+    flex: 1;
+    margin-bottom: 0;
+  }
 
-	.select-item.disabled {
-		opacity: 0.5;
-	}
+  .group-label {
+    display: block;
+    font-size: 26rpx;
+    color: #475569;
+    margin-bottom: 16rpx;
+    font-weight: 500;
+  }
 
-	.item-name {
-		font-size: 28rpx;
-		color: #1E293B;
-		font-weight: 500;
-	}
+  .required {
+    color: #EF4444;
+  }
 
-	.item-address {
-		font-size: 24rpx;
-		color: #94A3B8;
-		margin-top: 4rpx;
-	}
+  /* 输入框 */
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 0 24rpx;
+    height: 88rpx;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+  }
 
-	.item-info {
-		display: flex;
-		align-items: center;
-		gap: 16rpx;
-	}
+  .input-wrapper:focus-within {
+    background: #FFFFFF;
+    border-color: #3B82F6;
+    box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
+  }
 
-	.item-status {
-		font-size: 22rpx;
-		padding: 4rpx 12rpx;
-		border-radius: 6rpx;
-	}
+  .input-icon {
+    margin-right: 16rpx;
+  }
 
-	.item-status.vacant {
-		background: #D1FAE5;
-		color: #059669;
-	}
+  .form-input {
+    flex: 1;
+    height: 100%;
+    font-size: 30rpx;
+    color: #1E293B;
+    background: transparent;
+  }
 
-	.item-status.rented {
-		background: #FEE2E2;
-		color: #DC2626;
-	}
+  .input-wrapper.money {
+    padding-left: 32rpx;
+  }
 
-	.empty-tip {
-		padding: 48rpx;
-		text-align: center;
-		font-size: 26rpx;
-		color: #94A3B8;
-	}
+  .currency {
+    font-size: 32rpx;
+    color: #3B82F6;
+    font-weight: 600;
+    margin-right: 12rpx;
+  }
 
-	/* 租客项 */
-	.renter-item {
-		padding: 20rpx 24rpx;
-	}
+  /* 公寓选择器 */
+  .apartment-selector {
+    margin: 0 -32rpx;
+    padding: 0 32rpx;
+  }
 
-	.renter-avatar {
-		width: 64rpx;
-		height: 64rpx;
-		border-radius: 50%;
-		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+  .apartment-scroll {
+    width: 100%;
+  }
 
-	.renter-avatar text {
-		font-size: 24rpx;
-		font-weight: 600;
-		color: #FFFFFF;
-	}
+  .apartment-list {
+    display: flex;
+    gap: 16rpx;
+    padding-bottom: 8rpx;
+  }
 
-	.renter-info {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-	}
+  .apartment-item {
+    flex-shrink: 0;
+    min-width: 200rpx;
+    background: #F8FAFC;
+    border-radius: 20rpx;
+    padding: 20rpx 24rpx;
+    border: 2rpx solid transparent;
+    position: relative;
+    transition: all 0.2s ease;
+  }
 
-	.renter-name {
-		font-size: 28rpx;
-		color: #1E293B;
-		font-weight: 500;
-	}
+  .apartment-item.active {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    border-color: #3B82F6;
+  }
 
-	.renter-phone {
-		font-size: 24rpx;
-		color: #64748B;
-	}
+  .apt-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
 
-	/* 搜索栏 */
-	.search-bar {
-		display: flex;
-		align-items: center;
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		padding: 20rpx 24rpx;
-		margin-bottom: 24rpx;
-		gap: 16rpx;
-	}
+  .apt-name {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #1E293B;
+  }
 
-	.search-input {
-		flex: 1;
-		font-size: 28rpx;
-		color: #1E293B;
-	}
+  .apt-count {
+    font-size: 22rpx;
+    color: #64748B;
+  }
 
-	/* 分隔线 */
-	.divider {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin: 32rpx 0;
-	}
+  .apt-check {
+    position: absolute;
+    top: -8rpx;
+    right: -8rpx;
+    width: 32rpx;
+    height: 32rpx;
+    background: #3B82F6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.4);
+  }
 
-	.divider::before,
-	.divider::after {
-		content: '';
-		flex: 1;
-		height: 2rpx;
-		background: #E2E8F0;
-	}
+  /* 房间网格 */
+  .room-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16rpx;
+  }
 
-	.divider text {
-		padding: 0 24rpx;
-		font-size: 24rpx;
-		color: #94A3B8;
-	}
+  .room-card {
+    background: #F8FAFC;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+  }
 
-	/* 添加租客按钮 */
-	.btn-add-renter {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 12rpx;
-		background: #FFFFFF;
-		border: 2rpx dashed #2563EB;
-		border-radius: 16rpx;
-		padding: 28rpx;
-		margin-bottom: 40rpx;
-	}
+  .room-card.active {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    border-color: #3B82F6;
+  }
 
-	.btn-add-renter text {
-		font-size: 28rpx;
-		color: #2563EB;
-		font-weight: 500;
-	}
+  .room-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12rpx;
+  }
 
-	/* 表单卡片 */
-	.form-card {
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		padding: 0 24rpx;
-		margin-bottom: 40rpx;
-	}
+  .room-number {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: #1E293B;
+  }
 
-	.form-item {
-		padding: 24rpx 0;
-		border-bottom: 2rpx solid #F1F5F9;
-	}
+  .room-check {
+    width: 28rpx;
+    height: 28rpx;
+    background: #3B82F6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-	.form-item:last-child {
-		border-bottom: none;
-	}
+  .room-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
+  }
 
-	.form-label {
-		display: block;
-		font-size: 26rpx;
-		color: #64748B;
-		margin-bottom: 16rpx;
-	}
+  .room-price {
+    font-size: 26rpx;
+    color: #EF4444;
+    font-weight: 600;
+  }
 
-	.required {
-		color: #EF4444;
-	}
+  .price-unit {
+    font-size: 20rpx;
+    font-weight: 400;
+  }
 
-	.picker-value {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-size: 30rpx;
-		color: #1E293B;
-	}
+  .room-area {
+    font-size: 22rpx;
+    color: #94A3B8;
+  }
 
-	.form-input {
-		width: 100%;
-		font-size: 30rpx;
-		color: #1E293B;
-	}
+  .empty-rooms {
+    grid-column: span 3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48rpx;
+    color: #94A3B8;
+    font-size: 26rpx;
+    gap: 16rpx;
+  }
 
-	.form-textarea {
-		width: 100%;
-		height: 160rpx;
-		font-size: 30rpx;
-		color: #1E293B;
-	}
+  /* 付租方式 */
+  .payment-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16rpx;
+  }
 
-	/* 按钮 */
-	.btn-next {
-		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
-		color: #FFFFFF;
-		font-size: 30rpx;
-		font-weight: 600;
-		padding: 28rpx;
-		border-radius: 16rpx;
-		border: none;
-	}
+  .payment-item {
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 20rpx 12rpx;
+    text-align: center;
+    border: 2rpx solid transparent;
+    position: relative;
+    transition: all 0.2s ease;
+  }
 
-	.btn-next[disabled] {
-		opacity: 0.5;
-	}
+  .payment-item.active {
+    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
+    border-color: #3B82F6;
+  }
 
-	.btn-group {
-		display: flex;
-		gap: 24rpx;
-	}
+  .payment-label {
+    display: block;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #1E293B;
+    margin-bottom: 4rpx;
+  }
 
-	.btn-prev {
-		flex: 1;
-		background: #F3F4F6;
-		color: #64748B;
-		font-size: 30rpx;
-		font-weight: 600;
-		padding: 28rpx;
-		border-radius: 16rpx;
-		border: none;
-	}
+  .payment-desc {
+    display: block;
+    font-size: 20rpx;
+    color: #64748B;
+  }
 
-	.btn-submit {
-		flex: 2;
-		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
-		color: #FFFFFF;
-		font-size: 30rpx;
-		font-weight: 600;
-		padding: 28rpx;
-		border-radius: 16rpx;
-		border: none;
-	}
+  .payment-item.active .payment-label {
+    color: #3B82F6;
+  }
 
-	/* 弹窗 */
-	.popup-content {
-		background: #FFFFFF;
-		border-radius: 24rpx;
-		width: 600rpx;
-	}
+  .payment-indicator {
+    position: absolute;
+    top: 8rpx;
+    right: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+    background: #3B82F6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-	.popup-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 32rpx;
-		border-bottom: 2rpx solid #F1F5F9;
-	}
+  /* 租期选择 */
+  .period-scroll {
+    margin: 0 -32rpx;
+    padding: 0 32rpx;
+  }
 
-	.popup-title {
-		font-size: 32rpx;
-		font-weight: 700;
-		color: #1E293B;
-	}
+  .period-list {
+    display: flex;
+    gap: 12rpx;
+    padding-bottom: 8rpx;
+  }
 
-	.popup-body {
-		padding: 32rpx;
-	}
+  .period-tag {
+    flex-shrink: 0;
+    padding: 16rpx 28rpx;
+    background: #F8FAFC;
+    border-radius: 12rpx;
+    font-size: 26rpx;
+    color: #475569;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+  }
 
-	.popup-footer {
-		display: flex;
-		gap: 20rpx;
-		padding: 24rpx 32rpx;
-		border-top: 2rpx solid #F1F5F9;
-	}
+  .period-tag.active {
+    background: #3B82F6;
+    color: #FFFFFF;
+    border-color: #3B82F6;
+  }
 
-	.btn-cancel {
-		flex: 1;
-		height: 80rpx;
-		background: #F3F4F6;
-		border-radius: 12rpx;
-		font-size: 28rpx;
-		color: #64748B;
-		border: none;
-	}
+  /* 日期选择 */
+  .picker-box, .static-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 0 24rpx;
+    height: 88rpx;
+  }
 
-	.btn-confirm {
-		flex: 1;
-		height: 80rpx;
-		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
-		border-radius: 12rpx;
-		font-size: 28rpx;
-		color: #FFFFFF;
-		font-weight: 600;
-		border: none;
-	}
+  .picker-text {
+    font-size: 30rpx;
+    color: #1E293B;
+  }
+
+  .picker-text.placeholder {
+    color: #94A3B8;
+  }
+
+  .static-text {
+    font-size: 30rpx;
+    color: #64748B;
+  }
+
+  /* 水电表 */
+  .meter-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+  }
+
+  .meter-item {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    background: #F8FAFC;
+    border-radius: 20rpx;
+    padding: 20rpx 24rpx;
+  }
+
+  .meter-icon-box {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .meter-icon-box.water { background: rgba(59, 130, 246, 0.1); }
+  .meter-icon-box.electric { background: rgba(245, 158, 11, 0.1); }
+
+  .meter-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .meter-label {
+    font-size: 28rpx;
+    color: #475569;
+  }
+
+  .meter-input-box {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+  }
+
+  .meter-input {
+    width: 120rpx;
+    height: 56rpx;
+    background: #FFFFFF;
+    border-radius: 12rpx;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1E293B;
+    border: 2rpx solid #E2E8F0;
+  }
+
+  .meter-unit {
+    font-size: 24rpx;
+    color: #64748B;
+  }
+
+  /* 备注 */
+  .textarea-wrapper {
+    position: relative;
+  }
+
+  .form-textarea {
+    width: 100%;
+    height: 180rpx;
+    background: #F8FAFC;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    font-size: 30rpx;
+    color: #1E293B;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+  }
+
+  .form-textarea:focus {
+    background: #FFFFFF;
+    border-color: #3B82F6;
+  }
+
+  .char-count {
+    position: absolute;
+    bottom: 16rpx;
+    right: 20rpx;
+    font-size: 22rpx;
+    color: #94A3B8;
+  }
+
+  /* 提交按钮区域 */
+  .submit-section {
+    margin-top: 32rpx;
+    margin-bottom: 32rpx;
+  }
+
+  .submit-section .submit-btn {
+    width: 100%;
+    height: 96rpx;
+    background: #CBD5E1;
+    border-radius: 48rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+    transition: all 0.3s ease;
+  }
+
+  .submit-section .submit-btn.active {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.35);
+  }
+
+  .submit-section .submit-btn.active:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+  }
+
+  /* 底部提交栏 */
+  .submit-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20rpx);
+    border-top: 1rpx solid rgba(226, 232, 240, 0.6);
+    padding: 20rpx 32rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    z-index: 100;
+  }
+
+  .submit-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24rpx;
+  }
+
+  .submit-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
+  }
+
+  .info-label {
+    font-size: 22rpx;
+    color: #94A3B8;
+  }
+
+  .info-value {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #10B981;
+  }
+
+  .info-value.incomplete {
+    color: #F59E0B;
+  }
+
+  .submit-btn {
+    min-width: 240rpx;
+    height: 88rpx;
+    background: #CBD5E1;
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+    transition: all 0.3s ease;
+  }
+
+  .submit-btn.active {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.35);
+  }
+
+  .submit-btn.active:active {
+    transform: scale(0.98);
+    box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+  }
+
+  .btn-loading {
+    display: flex;
+    gap: 12rpx;
+    align-items: center;
+  }
+
+  .loading-dot {
+    width: 12rpx;
+    height: 12rpx;
+    background: #FFFFFF;
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite both;
+  }
+
+  .loading-dot:nth-child(1) { animation-delay: -0.32s; }
+  .loading-dot:nth-child(2) { animation-delay: -0.16s; }
+
+  @keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+  }
+
+  /* 成功弹窗 */
+  .success-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+  }
+
+  .success-content {
+    background: #FFFFFF;
+    border-radius: 32rpx;
+    padding: 56rpx 64rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: scaleIn 0.3s ease;
+  }
+
+  .success-icon {
+    margin-bottom: 32rpx;
+  }
+
+  .success-circle {
+    width: 120rpx;
+    height: 120rpx;
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.35);
+  }
+
+  .success-title {
+    font-size: 40rpx;
+    font-weight: 700;
+    color: #1E293B;
+    margin-bottom: 12rpx;
+  }
+
+  .success-desc {
+    font-size: 28rpx;
+    color: #64748B;
+    margin-bottom: 40rpx;
+  }
+
+  .success-btn {
+    width: 320rpx;
+    height: 88rpx;
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    border-radius: 44rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.9); }
+    to { opacity: 1; transform: scale(1); }
+  }
 </style>
diff --git a/pages/rentals/rentals.vue b/pages/rentals/rentals.vue
index 8101a2d..df29e52 100644
--- a/pages/rentals/rentals.vue
+++ b/pages/rentals/rentals.vue
@@ -3,7 +3,12 @@
 		<!-- 自定义导航栏 -->
 		<view class="custom-nav safe-area-top">
 			<view class="nav-content">
-				<text class="nav-title">租赁记录</text>
+				<view class="nav-left">
+					<view class="nav-btn back-btn" @click="goBack">
+						<uni-icons type="left" size="22" color="#1E293B"></uni-icons>
+					</view>
+					<text class="nav-title">租赁记录</text>
+				</view>
 				<view class="nav-actions">
 					<view class="nav-btn" @click="showFilter">
 						<uni-icons type="settings-filled" size="22" color="#1E293B"></uni-icons>
@@ -31,24 +36,6 @@
 			</view>
 		</view>
 
-		<!-- 统计卡片 -->
-		<view class="stats-bar">
-			<view class="stat-item">
-				<text class="stat-num">{{activeCount}}</text>
-				<text class="stat-label">在租</text>
-			</view>
-			<view class="stat-divider"></view>
-			<view class="stat-item">
-				<text class="stat-num warning">{{expiringCount}}</text>
-				<text class="stat-label">即将到期</text>
-			</view>
-			<view class="stat-divider"></view>
-			<view class="stat-item">
-				<text class="stat-num">{{expiredCount}}</text>
-				<text class="stat-label">已到期</text>
-			</view>
-		</view>
-
 		<!-- 筛选标签 -->
 		<scroll-view scroll-x class="filter-tabs" show-scrollbar="false">
 			<view 
@@ -211,12 +198,103 @@
 				</view>
 			</view>
 		</uni-popup>
+
+		<!-- 筛选弹窗 -->
+		<uni-popup ref="filterPopup" type="right">
+			<view class="filter-drawer">
+				<view class="filter-header">
+					<text class="filter-title">筛选条件</text>
+					<uni-icons type="close" size="20" color="#94A3B8" @click="closeFilterPopup"></uni-icons>
+				</view>
+				<scroll-view scroll-y class="filter-body">
+					<!-- 公寓筛选 -->
+					<view class="filter-section">
+						<text class="filter-label">公寓</text>
+						<view class="filter-options">
+							<view 
+								v-for="apt in apartmentFilterOptions" 
+								:key="apt.value"
+								class="filter-option"
+								:class="{ active: filterForm.apartmentId === apt.value }"
+								@click="selectApartment(apt.value)"
+							>
+								<text>{{apt.label}}</text>
+							</view>
+						</view>
+					</view>
+
+					<!-- 房间筛选 -->
+					<view class="filter-section" v-if="filterForm.apartmentId">
+						<text class="filter-label">房间</text>
+						<view class="filter-options">
+							<view 
+								v-for="room in roomFilterOptions" 
+								:key="room.value"
+								class="filter-option"
+								:class="{ active: filterForm.roomId === room.value }"
+								@click="selectRoom(room.value)"
+							>
+								<text>{{room.label}}</text>
+							</view>
+						</view>
+					</view>
+
+					<!-- 状态筛选 -->
+					<view class="filter-section">
+						<text class="filter-label">租赁状态</text>
+						<view class="filter-options">
+							<view 
+								v-for="status in statusOptions" 
+								:key="status.value"
+								class="filter-option"
+								:class="{ active: filterForm.status === status.value }"
+								@click="selectStatus(status.value)"
+							>
+								<text>{{status.label}}</text>
+							</view>
+						</view>
+					</view>
+
+					<!-- 付租方式筛选 -->
+					<view class="filter-section">
+						<text class="filter-label">付租方式</text>
+						<view class="filter-options">
+							<view 
+								v-for="type in paymentTypeOptions" 
+								:key="type.value"
+								class="filter-option"
+								:class="{ active: filterForm.paymentType === type.value }"
+								@click="selectPaymentType(type.value)"
+							>
+								<text>{{type.label}}</text>
+							</view>
+						</view>
+					</view>
+
+					<!-- 租客姓名 -->
+					<view class="filter-section">
+						<text class="filter-label">租客姓名</text>
+						<input 
+							class="filter-input" 
+							type="text" 
+							placeholder="请输入租客姓名"
+							v-model="filterForm.renterName"
+						/>
+					</view>
+				</scroll-view>
+				<view class="filter-footer">
+					<button class="btn-reset" @click="resetFilter">重置</button>
+					<button class="btn-confirm" @click="confirmFilter">确定</button>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 	import rentalApi from '@/api/rental.js'
 	import apartmentApi from '@/api/apartment.js'
+	import roomApi from '@/api/room.js'
 	
 	export default {
 		data() {
@@ -234,6 +312,7 @@
 				],
 				rentals: [],
 				apartments: [],
+				rooms: [],
 				selectedApartmentId: '',
 				loadStatus: 'more',
 				page: 1,
@@ -245,19 +324,32 @@
 					electricityMeterEnd: '',
 					refundDeposit: '',
 					remark: ''
-				}
+				},
+				// 筛选表单
+				filterForm: {
+					apartmentId: '',
+					roomId: '',
+					status: '',
+					paymentType: '',
+					renterName: ''
+				},
+				// 筛选选项
+				statusOptions: [
+					{ label: '全部', value: '' },
+					{ label: '在租', value: 'active' },
+					{ label: '已到期', value: 'expired' },
+					{ label: '已终止', value: 'terminated' }
+				],
+				paymentTypeOptions: [
+					{ label: '全部', value: '' },
+					{ label: '月租', value: 'monthly' },
+					{ label: '季租', value: 'quarterly' },
+					{ label: '半年租', value: 'half_year' },
+					{ label: '年租', value: 'yearly' }
+				]
 			}
 		},
 		computed: {
-			activeCount() {
-				return this.rentals.filter(r => r.status === 'active').length
-			},
-			expiringCount() {
-				return this.rentals.filter(r => r.status === 'active' && this.isExpiringSoon(r.endDate)).length
-			},
-			expiredCount() {
-				return this.rentals.filter(r => r.status === 'expired').length
-			},
 			filteredRentals() {
 				let list = this.rentals
 				
@@ -285,10 +377,22 @@
 				if (!this.selectedApartmentId) return '全部公寓'
 				const apartment = this.apartments.find(a => a.id === this.selectedApartmentId)
 				return apartment ? apartment.name : '全部公寓'
+			},
+			// 筛选弹窗用的公寓选项
+			apartmentFilterOptions() {
+				return [{ label: '全部', value: '' }, ...this.apartments.map(a => ({ label: a.name, value: a.id }))]
+			},
+			// 筛选弹窗用的房间选项
+			roomFilterOptions() {
+				const filteredRooms = this.filterForm.apartmentId 
+					? this.rooms.filter(r => r.apartmentId === this.filterForm.apartmentId)
+					: this.rooms
+				return [{ label: '全部', value: '' }, ...filteredRooms.map(r => ({ label: r.roomNumber, value: r.id }))]
 			}
 		},
 		onLoad() {
 			this.loadApartments()
+			this.loadRooms()
 			this.loadRentals()
 		},
 		onShow() {
@@ -297,7 +401,7 @@
 		methods: {
 			async loadApartments() {
 				try {
-					const res = await apartmentApi.getList({ pageSize: 999 })
+					const res = await apartmentApi.list()
 					if (res.data) {
 						this.apartments = res.data
 					}
@@ -305,19 +409,41 @@
 					console.error('加载公寓列表失败:', error)
 				}
 			},
+
+			async loadRooms() {
+				try {
+					const res = await roomApi.list()
+					if (res.data) {
+						this.rooms = res.data
+					}
+				} catch (error) {
+					console.error('加载房间列表失败:', error)
+				}
+			},
 			
 			async loadRentals() {
+				// 防止重复请求
+				if (this.isLoading) return
+				
 				this.isLoading = true
 				try {
 					const params = {
 						page: this.page,
 						pageSize: this.pageSize,
-						renterName: this.searchKeyword
+						renterName: this.searchKeyword || this.filterForm.renterName,
+						apartmentId: this.filterForm.apartmentId,
+						roomId: this.filterForm.roomId,
+						status: this.filterForm.status,
+						paymentType: this.filterForm.paymentType
 					}
 					
 					const res = await rentalApi.getList(params)
-					if (res.data) {
-						const list = res.data.map(item => ({
+					// 后端返回格式: { data: { list: [], total: n, page: n, pageSize: n } }
+					const pageData = res.data || {}
+					const rawList = pageData.list || []
+					
+					if (rawList.length > 0 || this.page === 1) {
+						const list = rawList.map(item => ({
 							id: item.id,
 							apartmentId: item.Room?.Apartment?.id,
 							apartmentName: item.Room?.Apartment?.name || '--',
@@ -344,7 +470,7 @@
 							this.rentals = [...this.rentals, ...list]
 						}
 						
-						this.total = res.total || 0
+						this.total = pageData.total || 0
 						this.loadStatus = this.rentals.length < this.total ? 'more' : 'noMore'
 					}
 				} catch (error) {
@@ -390,11 +516,15 @@
 			},
 			
 			addRental() {
-				uni.navigateTo({
-					url: '/pages/rental-add/rental-add'
+				uni.switchTab({
+					url: '/pages/add-record/add-record'
 				})
 			},
 			
+			goBack() {
+				uni.navigateBack()
+			},
+			
 			viewRentalDetail(item) {
 				uni.navigateTo({
 					url: `/pages/rental-detail/rental-detail?id=${item.id}`
@@ -462,11 +592,53 @@
 				}
 			},
 			
+			// 筛选弹窗相关方法
 			showFilter() {
-				uni.showToast({
-					title: '筛选功能',
-					icon: 'none'
-				})
+				// 打开筛选弹窗前加载房间数据
+				this.loadRooms()
+				this.$refs.filterPopup.open()
+			},
+			
+			closeFilterPopup() {
+				this.$refs.filterPopup.close()
+			},
+			
+			selectApartment(apartmentId) {
+				this.filterForm.apartmentId = apartmentId
+				// 切换公寓时重置房间选择
+				this.filterForm.roomId = ''
+			},
+			
+			selectRoom(roomId) {
+				this.filterForm.roomId = roomId
+			},
+			
+			selectStatus(status) {
+				this.filterForm.status = status
+			},
+			
+			selectPaymentType(type) {
+				this.filterForm.paymentType = type
+			},
+			
+			resetFilter() {
+				this.filterForm = {
+					apartmentId: '',
+					roomId: '',
+					status: '',
+					paymentType: '',
+					renterName: ''
+				}
+				this.searchKeyword = ''
+				this.page = 1
+				this.loadRentals()
+				this.closeFilterPopup()
+			},
+			
+			confirmFilter() {
+				this.page = 1
+				this.loadRentals()
+				this.closeFilterPopup()
 			},
 			
 			loadMore() {
@@ -534,6 +706,12 @@
 		padding: 20rpx 32rpx;
 	}
 
+	.nav-left {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+	}
+
 	.nav-title {
 		font-size: 36rpx;
 		font-weight: 700;
@@ -545,6 +723,10 @@
 		gap: 16rpx;
 	}
 
+	.back-btn {
+		margin-left: -8rpx;
+	}
+
 	.nav-btn {
 		width: 72rpx;
 		height: 72rpx;
@@ -1034,4 +1216,105 @@
 		font-weight: 600;
 		border: none;
 	}
+
+	/* 筛选抽屉样式 */
+	.filter-drawer {
+		width: 600rpx;
+		height: 100vh;
+		background: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.filter-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 32rpx;
+		border-bottom: 2rpx solid #F1F5F9;
+	}
+
+	.filter-title {
+		font-size: 32rpx;
+		font-weight: 700;
+		color: #1E293B;
+	}
+
+	.filter-body {
+		flex: 1;
+		padding: 32rpx;
+	}
+
+	.filter-section {
+		margin-bottom: 40rpx;
+	}
+
+	.filter-label {
+		display: block;
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #1E293B;
+		margin-bottom: 20rpx;
+	}
+
+	.filter-options {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16rpx;
+	}
+
+	.filter-option {
+		padding: 16rpx 32rpx;
+		background: #F1F5F9;
+		border-radius: 12rpx;
+		font-size: 26rpx;
+		color: #64748B;
+		transition: all 0.2s;
+	}
+
+	.filter-option.active {
+		background: #DBEAFE;
+		color: #2563EB;
+		font-weight: 500;
+	}
+
+	.filter-input {
+		width: 100%;
+		height: 80rpx;
+		background: #F8FAFC;
+		border-radius: 12rpx;
+		padding: 0 24rpx;
+		font-size: 28rpx;
+		color: #1E293B;
+		border: 2rpx solid #E2E8F0;
+	}
+
+	.filter-footer {
+		display: flex;
+		gap: 20rpx;
+		padding: 24rpx 32rpx;
+		border-top: 2rpx solid #F1F5F9;
+		background: #FFFFFF;
+	}
+
+	.filter-footer .btn-reset {
+		flex: 1;
+		height: 80rpx;
+		background: #F3F4F6;
+		border-radius: 12rpx;
+		font-size: 28rpx;
+		color: #64748B;
+		border: none;
+	}
+
+	.filter-footer .btn-confirm {
+		flex: 1;
+		height: 80rpx;
+		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
+		border-radius: 12rpx;
+		font-size: 28rpx;
+		color: #FFFFFF;
+		font-weight: 600;
+		border: none;
+	}
 </style>
diff --git a/pages/renter-detail/renter-detail.vue b/pages/renter-detail/renter-detail.vue
index 23f1c6a..6d0789f 100644
--- a/pages/renter-detail/renter-detail.vue
+++ b/pages/renter-detail/renter-detail.vue
@@ -39,24 +39,6 @@
             <text class="item-label">身份证号</text>
             <text class="item-value">{{renter.idCard || '-'}}</text>
           </view>
-          <view class="info-item">
-            <text class="item-label">紧急联系人</text>
-            <text class="item-value">{{renter.emergencyContact || '-'}}</text>
-          </view>
-          <view class="info-item">
-            <text class="item-label">紧急电话</text>
-            <view class="item-value">
-              <text>{{renter.emergencyPhone || '-'}}</text>
-              <uni-icons v-if="renter.emergencyPhone" type="phone-filled" size="18" color="#2563EB" @click="callPhone(renter.emergencyPhone)"></uni-icons>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <view class="info-section" v-if="renter.remark">
-        <view class="section-title">备注信息</view>
-        <view class="info-card">
-          <text class="remark-text">{{renter.remark}}</text>
         </view>
       </view>
 
@@ -96,7 +78,7 @@
         try {
           uni.showLoading({ title: '加载中...' })
           const res = await renterApi.getDetail(this.renterId)
-          this.renter = res.data || {}
+          this.renter = res.data
         } catch (error) {
           uni.showToast({ title: '加载失败', icon: 'none' })
         } finally {
@@ -110,14 +92,14 @@
         uni.navigateTo({ url: `/pages/rentals/rentals?renterId=${this.renterId}` })
       },
       addRental() {
-        uni.navigateTo({ url: `/pages/add-record/add-record?renterId=${this.renterId}` })
+        uni.switchTab({ url: `/pages/add-record/add-record?renterId=${this.renterId}` })
       },
       callPhone(phone) {
         uni.makePhoneCall({ phoneNumber: phone })
       },
       goBack() { uni.navigateBack() },
       getStatusText(status) {
-        const texts = { 'active': '在租', 'inactive': '已退租' }
+        const texts = { 'active': '正常', 'inactive': '停用' }
         return texts[status] || '未知'
       }
     }
@@ -146,7 +128,6 @@
   .info-item:last-child { border-bottom: none; }
   .item-label { font-size: 30rpx; color: #64748B; }
   .item-value { display: flex; align-items: center; gap: 16rpx; font-size: 30rpx; color: #1E293B; font-weight: 500; }
-  .remark-text { font-size: 30rpx; color: #1E293B; line-height: 1.6; padding: 28rpx 0; }
   .action-section { display: flex; gap: 24rpx; margin-top: 48rpx; }
   .action-btn { flex: 1; height: 96rpx; background: #F1F5F9; color: #64748B; font-size: 32rpx; font-weight: 600; border-radius: 16rpx; border: none; display: flex; align-items: center; justify-content: center; }
   .action-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #FFFFFF; }
diff --git a/pages/renters/renters.vue b/pages/renters/renters.vue
index 64b2169..92a6910 100644
--- a/pages/renters/renters.vue
+++ b/pages/renters/renters.vue
@@ -18,7 +18,15 @@
       <view class="search-section">
         <view class="search-box">
           <uni-icons type="search" size="18" color="#94A3B8"></uni-icons>
-          <input type="text" v-model="searchKeyword" placeholder="搜索租客姓名或电话" @confirm="search"/>
+          <input type="text" v-model="searchForm.keyword" placeholder="搜索姓名/电话/身份证" @confirm="search"/>
+        </view>
+        <view class="filter-box">
+          <picker mode="selector" :range="statusOptions" range-key="label" :value="statusIndex" @change="onStatusChange">
+            <view class="filter-item">
+              <text>{{statusOptions[statusIndex].label}}</text>
+              <uni-icons type="down" size="14" color="#64748B"></uni-icons>
+            </view>
+          </picker>
         </view>
       </view>
 
@@ -36,7 +44,7 @@
             </view>
             <view class="info-detail">
               <text class="detail-item">{{item.phone || '暂无电话'}}</text>
-              <text class="detail-item" v-if="item.idCard">身份证: {{maskIdCard(item.idCard)}}</text>
+              <text class="detail-item" v-if="item.idCard">身份证: {{item.idCard || '-'}}</text>
             </view>
           </view>
           <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
@@ -59,8 +67,18 @@
   export default {
     data() {
       return {
-        searchKeyword: '',
+        searchForm: {
+          keyword: '',
+          status: ''
+        },
+        statusOptions: [
+          { label: '全部', value: '' },
+          { label: '正常', value: 'active' },
+          { label: '停用', value: 'inactive' }
+        ],
+        statusIndex: 0,
         renterList: [],
+        total: 0,
         isLoading: false,
         page: 1,
         pageSize: 10,
@@ -78,18 +96,22 @@
         if (this.isLoading) return
         this.isLoading = true
         try {
-          const res = await renterApi.list({
-            keyword: this.searchKeyword,
+          const params = {
+            keyword: this.searchForm.keyword,
+            status: this.searchForm.status,
             page: this.page,
             pageSize: this.pageSize
-          })
-          const list = res.data || []
+          }
+          const res = await renterApi.getAll(params)
+          const list = res.data.list
+          const total = res.data.total
           if (this.page === 1) {
             this.renterList = list
           } else {
             this.renterList = [...this.renterList, ...list]
           }
-          this.hasMore = list.length >= this.pageSize
+          this.total = total
+          this.hasMore = this.renterList.length < total
         } catch (error) {
           uni.showToast({ title: '加载失败', icon: 'none' })
         } finally {
@@ -106,6 +128,12 @@
         this.page = 1
         this.loadData()
       },
+      onStatusChange(e) {
+        this.statusIndex = e.detail.value
+        this.searchForm.status = this.statusOptions[this.statusIndex].value
+        this.page = 1
+        this.loadData()
+      },
       addRenter() {
         uni.navigateTo({ url: '/pages/renter-add/renter-add' })
       },
@@ -116,12 +144,8 @@
         uni.navigateBack()
       },
       getStatusText(status) {
-        const texts = { 'active': '在租', 'inactive': '已退租' }
+        const texts = { 'active': '正常', 'inactive': '停用' }
         return texts[status] || '未知'
-      },
-      maskIdCard(idCard) {
-        if (!idCard || idCard.length < 8) return idCard
-        return idCard.slice(0, 4) + '****' + idCard.slice(-4)
       }
     }
   }
@@ -135,9 +159,12 @@
   .nav-title { font-size: 36rpx; font-weight: 700; color: #1E293B; }
   .nav-actions { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
   .page-content { flex: 1; padding: 24rpx 32rpx; }
-  .search-section { margin-bottom: 24rpx; }
-  .search-box { display: flex; align-items: center; background: #FFFFFF; border-radius: 16rpx; padding: 20rpx 24rpx; gap: 16rpx; }
+  .search-section { margin-bottom: 24rpx; display: flex; gap: 16rpx; }
+  .search-box { flex: 1; display: flex; align-items: center; background: #FFFFFF; border-radius: 16rpx; padding: 20rpx 24rpx; gap: 16rpx; }
   .search-box input { flex: 1; font-size: 28rpx; color: #1E293B; }
+  .filter-box { background: #FFFFFF; border-radius: 16rpx; padding: 0 24rpx; display: flex; align-items: center; }
+  .filter-item { display: flex; align-items: center; gap: 8rpx; height: 72rpx; }
+  .filter-item text { font-size: 28rpx; color: #64748B; }
   .renter-list { display: flex; flex-direction: column; gap: 24rpx; }
   .renter-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; display: flex; align-items: center; gap: 24rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
   .renter-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; }
diff --git a/pages/room-add/room-add.vue b/pages/room-add/room-add.vue
index 7dc7232..51be1df 100644
--- a/pages/room-add/room-add.vue
+++ b/pages/room-add/room-add.vue
@@ -16,63 +16,135 @@
       <view class="form-card">
         <view class="form-item">
           <text class="form-label">所属公寓 <text class="required">*</text></text>
-          <picker mode="selector" :range="apartmentOptions" :value="selectedApartmentIndex" @change="onApartmentChange">
-            <view class="picker-value" :class="{ placeholder: !form.apartmentId }">
-              <text>{{selectedApartmentLabel}}</text>
-              <uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
-            </view>
-          </picker>
+          <view class="form-control">
+            <picker mode="selector" :range="apartmentOptions" :value="selectedApartmentIndex" @change="onApartmentChange">
+              <view class="picker-value" :class="{ placeholder: !form.apartmentId }">
+                <text>{{selectedApartmentLabel}}</text>
+                <uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
+              </view>
+            </picker>
+          </view>
         </view>
 
         <view class="form-item">
           <text class="form-label">房间号 <text class="required">*</text></text>
-          <input 
-            type="text" 
-            v-model="form.roomNumber" 
-            placeholder="请输入房间号，如：101"
-            class="form-input"
-            maxlength="20"
-          />
+          <view class="form-control">
+            <input 
+              type="text" 
+              v-model="form.roomNumber" 
+              placeholder="请输入房间号，如：101"
+              class="form-input"
+              maxlength="10"
+            />
+          </view>
         </view>
 
         <view class="form-item">
-          <text class="form-label">房间面积 (m²)</text>
-          <input 
-            type="digit" 
-            v-model="form.area" 
-            placeholder="请输入房间面积"
-            class="form-input"
-          />
+          <text class="form-label">楼层</text>
+          <view class="form-control">
+            <input 
+              type="number" 
+              v-model="form.floor" 
+              placeholder="请输入楼层"
+              class="form-input"
+            />
+          </view>
         </view>
 
         <view class="form-item">
-          <text class="form-label">房间朝向</text>
-          <picker mode="selector" :range="orientationOptions" :value="orientationIndex" @change="onOrientationChange">
-            <view class="picker-value" :class="{ placeholder: !form.orientation }">
-              <text>{{form.orientation || '请选择朝向'}}</text>
-              <uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
-            </view>
-          </picker>
+          <text class="form-label">户型</text>
+          <view class="form-control">
+            <input 
+              type="text" 
+              v-model="form.roomType" 
+              placeholder="请输入户型，如一室一厅"
+              class="form-input"
+            />
+          </view>
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">面积 (m²)</text>
+          <view class="form-control">
+            <input 
+              type="digit" 
+              v-model="form.area" 
+              placeholder="请输入面积"
+              class="form-input"
+            />
+          </view>
         </view>
 
         <view class="form-item">
           <text class="form-label">月租金 (元)</text>
-          <input 
-            type="digit" 
-            v-model="form.rent" 
-            placeholder="请输入月租金"
-            class="form-input"
-          />
+          <view class="form-control">
+            <input 
+              type="digit" 
+              v-model="form.monthlyPrice" 
+              placeholder="请输入月租金"
+              class="form-input"
+            />
+          </view>
         </view>
 
         <view class="form-item">
-          <text class="form-label">房间描述</text>
-          <textarea 
-            v-model="form.description" 
-            placeholder="请输入房间描述（选填）"
-            class="form-textarea"
-            maxlength="200"
-          />
+          <text class="form-label">年租金 (元)</text>
+          <view class="form-control">
+            <input 
+              type="digit" 
+              v-model="form.yearlyPrice" 
+              placeholder="请输入年租金"
+              class="form-input"
+            />
+          </view>
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">押金 (元)</text>
+          <view class="form-control">
+            <input 
+              type="digit" 
+              v-model="form.deposit" 
+              placeholder="请输入押金"
+              class="form-input"
+            />
+          </view>
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">排序</text>
+          <view class="form-control">
+            <input 
+              type="number" 
+              v-model="form.sortOrder" 
+              placeholder="数字越小越靠前"
+              class="form-input"
+            />
+          </view>
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">主状态</text>
+          <view class="form-control">
+            <picker mode="selector" :range="statusOptions" :value="statusIndex" @change="onStatusChange">
+              <view class="picker-value" :class="{ placeholder: !form.status }">
+                <text>{{getStatusLabel(form.status)}}</text>
+                <uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
+              </view>
+            </picker>
+          </view>
+        </view>
+
+        <view class="form-item" v-if="form.status === 'rented'">
+          <text class="form-label">租房标识</text>
+          <view class="form-control">
+            <picker mode="selector" :range="rentalStatusOptions" :value="rentalStatusIndex" @change="onRentalStatusChange">
+              <view class="picker-value" :class="{ placeholder: !form.rentalStatus }">
+                <text>{{getRentalStatusLabel(form.rentalStatus)}}</text>
+                <uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
+              </view>
+            </picker>
+          </view>
         </view>
       </view>
 
@@ -85,7 +157,7 @@
 <script>
   import roomApi from '@/api/room.js'
   import apartmentApi from '@/api/apartment.js'
-  
+
   export default {
     data() {
       return {
@@ -93,14 +165,22 @@
         roomId: null,
         submitLoading: false,
         apartments: [],
-        orientationOptions: ['东', '南', '西', '北', '东南', '东北', '西南', '西北'],
+        statusOptions: ['空房', '预定', '在租'],
+        statusValues: ['empty', 'reserved', 'rented'],
+        rentalStatusOptions: ['正常', '即将到期', '已到期'],
+        rentalStatusValues: ['normal', 'soon_expire', 'expired'],
         form: {
           apartmentId: '',
           roomNumber: '',
+          floor: '',
+          roomType: '',
           area: '',
-          orientation: '',
-          rent: '',
-          description: ''
+          monthlyPrice: '',
+          yearlyPrice: '',
+          deposit: '',
+          sortOrder: 0,
+          status: 'empty',
+          rentalStatus: 'normal'
         }
       }
     },
@@ -116,8 +196,11 @@
         const apartment = this.apartments.find(a => a.id === this.form.apartmentId)
         return apartment ? apartment.name : '请选择公寓'
       },
-      orientationIndex() {
-        return this.orientationOptions.indexOf(this.form.orientation)
+      statusIndex() {
+        return this.statusValues.indexOf(this.form.status)
+      },
+      rentalStatusIndex() {
+        return this.rentalStatusValues.indexOf(this.form.rentalStatus)
       }
     },
     onLoad(options) {
@@ -133,7 +216,7 @@
     methods: {
       async loadApartments() {
         try {
-          const res = await apartmentApi.getList({ pageSize: 999 })
+          const res = await apartmentApi.list()
           if (res.data) {
             this.apartments = res.data
           }
@@ -149,10 +232,15 @@
             this.form = {
               apartmentId: data.apartmentId,
               roomNumber: data.roomNumber,
+              floor: data.floor ? String(data.floor) : '',
+              roomType: data.roomType || '',
               area: data.area ? String(data.area) : '',
-              orientation: data.orientation || '',
-              rent: data.rent ? String(data.rent) : '',
-              description: data.description || ''
+              monthlyPrice: data.monthlyPrice ? String(data.monthlyPrice) : '',
+              yearlyPrice: data.yearlyPrice ? String(data.yearlyPrice) : '',
+              deposit: data.deposit ? String(data.deposit) : '',
+              sortOrder: data.sortOrder !== undefined ? data.sortOrder : 0,
+              status: data.status || 'empty',
+              rentalStatus: data.rentalStatus || 'normal'
             }
           }
         } catch (error) {
@@ -163,8 +251,19 @@
       onApartmentChange(e) {
         this.form.apartmentId = this.apartments[e.detail.value].id
       },
-      onOrientationChange(e) {
-        this.form.orientation = this.orientationOptions[e.detail.value]
+      onStatusChange(e) {
+        this.form.status = this.statusValues[e.detail.value]
+      },
+      onRentalStatusChange(e) {
+        this.form.rentalStatus = this.rentalStatusValues[e.detail.value]
+      },
+      getStatusLabel(value) {
+        const index = this.statusValues.indexOf(value)
+        return index >= 0 ? this.statusOptions[index] : '请选择状态'
+      },
+      getRentalStatusLabel(value) {
+        const index = this.rentalStatusValues.indexOf(value)
+        return index >= 0 ? this.rentalStatusOptions[index] : '请选择租房标识'
       },
       async saveRoom() {
         if (!this.form.apartmentId) {
@@ -181,10 +280,15 @@
           const data = {
             apartmentId: this.form.apartmentId,
             roomNumber: this.form.roomNumber.trim(),
+            floor: this.form.floor ? parseInt(this.form.floor) : null,
+            roomType: this.form.roomType.trim() || null,
             area: this.form.area ? parseFloat(this.form.area) : null,
-            orientation: this.form.orientation || null,
-            rent: this.form.rent ? parseFloat(this.form.rent) : null,
-            description: this.form.description.trim() || null
+            monthlyPrice: this.form.monthlyPrice ? parseFloat(this.form.monthlyPrice) : null,
+            yearlyPrice: this.form.yearlyPrice ? parseFloat(this.form.yearlyPrice) : null,
+            deposit: this.form.deposit ? parseFloat(this.form.deposit) : null,
+            sortOrder: this.form.sortOrder !== '' ? parseInt(this.form.sortOrder) : 0,
+            status: this.form.status,
+            rentalStatus: this.form.rentalStatus
           }
 
           if (this.isEdit) {
@@ -256,6 +360,8 @@
     margin-bottom: 40rpx;
   }
   .form-item {
+    display: flex;
+    align-items: center;
     padding: 24rpx 0;
     border-bottom: 2rpx solid #F1F5F9;
   }
@@ -263,10 +369,13 @@
     border-bottom: none;
   }
   .form-label {
-    display: block;
-    font-size: 26rpx;
+    width: 180rpx;
+    font-size: 28rpx;
     color: #64748B;
-    margin-bottom: 16rpx;
+    flex-shrink: 0;
+  }
+  .form-control {
+    flex: 1;
   }
   .required {
     color: #EF4444;
@@ -275,7 +384,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 30rpx;
+    font-size: 28rpx;
     color: #1E293B;
   }
   .picker-value.placeholder {
@@ -283,23 +392,23 @@
   }
   .form-input {
     width: 100%;
-    height: 60rpx;
-    font-size: 30rpx;
+    height: 48rpx;
+    font-size: 28rpx;
     color: #1E293B;
+    text-align: right;
   }
-  .form-textarea {
-    width: 100%;
-    height: 160rpx;
-    font-size: 30rpx;
-    color: #1E293B;
+  .form-input::placeholder {
+    color: #94A3B8;
   }
   .btn-submit {
     background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
     color: #FFFFFF;
     font-size: 30rpx;
     font-weight: 600;
-    padding: 28rpx;
+    height: 88rpx;
+    line-height: 88rpx;
     border-radius: 16rpx;
     border: none;
+    width: 100%;
   }
 </style>
diff --git a/pages/room-detail/room-detail.vue b/pages/room-detail/room-detail.vue
index 1e41197..1361a38 100644
--- a/pages/room-detail/room-detail.vue
+++ b/pages/room-detail/room-detail.vue
@@ -27,18 +27,48 @@
           </view>
           <view class="info-divider"></view>
           <view class="info-item">
-            <text class="label">房间面积</text>
+            <text class="label">房间号</text>
+            <text class="value">{{room.roomNumber}}</text>
+          </view>
+          <view class="info-divider"></view>
+          <view class="info-item">
+            <text class="label">楼层</text>
+            <text class="value">{{room.floor || '--'}}</text>
+          </view>
+          <view class="info-divider"></view>
+          <view class="info-item">
+            <text class="label">户型</text>
+            <text class="value">{{room.roomType || '--'}}</text>
+          </view>
+          <view class="info-divider"></view>
+          <view class="info-item">
+            <text class="label">面积</text>
             <text class="value">{{room.area || '--'}} m²</text>
           </view>
           <view class="info-divider"></view>
           <view class="info-item">
-            <text class="label">房间朝向</text>
-            <text class="value">{{room.orientation || '--'}}</text>
+            <text class="label">月租金</text>
+            <text class="value price">¥{{room.monthlyPrice || 0}}</text>
           </view>
           <view class="info-divider"></view>
           <view class="info-item">
-            <text class="label">月租金</text>
-            <text class="value price">¥{{room.rent || 0}}</text>
+            <text class="label">年租金</text>
+            <text class="value price">¥{{room.yearlyPrice || 0}}</text>
+          </view>
+          <view class="info-divider"></view>
+          <view class="info-item">
+            <text class="label">押金</text>
+            <text class="value price">¥{{room.deposit || 0}}</text>
+          </view>
+          <view class="info-divider"></view>
+          <view class="info-item">
+            <text class="label">主状态</text>
+            <text class="value">{{room.statusText}}</text>
+          </view>
+          <view class="info-divider" v-if="room.status === 'rented' && room.rentalStatusText"></view>
+          <view class="info-item" v-if="room.status === 'rented' && room.rentalStatusText">
+            <text class="label">租房标识</text>
+            <text class="value">{{room.rentalStatusText}}</text>
           </view>
         </view>
       </view>
@@ -56,10 +86,34 @@
       </view>
 
       <view class="action-section">
-        <view class="action-btn primary" v-if="room.status === 'vacant'" @click="addRental">
-          <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
-          <text>办理入住</text>
+        <!-- 空房状态：显示预定和办理入住按钮 -->
+        <template v-if="room.status === 'empty'">
+          <view class="action-btn warning" @click="reserveRoom">
+            <uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
+            <text>预定</text>
+          </view>
+          <view class="action-btn primary" @click="addRental">
+            <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
+            <text>办理入住</text>
+          </view>
+        </template>
+        <!-- 预定状态：显示取消预定和办理入住按钮 -->
+        <template v-if="room.status === 'reserved'">
+          <view class="action-btn warning" @click="cancelReserve">
+            <uni-icons type="close" size="20" color="#FFFFFF"></uni-icons>
+            <text>取消预定</text>
+          </view>
+          <view class="action-btn primary" @click="addRental">
+            <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
+            <text>办理入住</text>
+          </view>
+        </template>
+        <!-- 已租状态：查看租赁 -->
+        <view class="action-btn primary" v-if="room.status === 'rented'" @click="viewRentalDetail">
+          <uni-icons type="eye" size="20" color="#FFFFFF"></uni-icons>
+          <text>查看租赁</text>
         </view>
+        <!-- 删除房间按钮 -->
         <view class="action-btn danger" @click="deleteRoom">
           <uni-icons type="trash" size="20" color="#FFFFFF"></uni-icons>
           <text>删除房间</text>
@@ -108,20 +162,25 @@
             this.room = {
               id: data.id,
               roomNumber: data.roomNumber,
+              floor: data.floor,
+              roomType: data.roomType,
               area: data.area,
-              orientation: data.orientation,
-              rent: data.rent,
+              monthlyPrice: data.monthlyPrice,
+              yearlyPrice: data.yearlyPrice,
+              deposit: data.deposit,
               status: data.status || 'vacant',
-              statusText: data.status === 'rented' ? '已出租' : '空置中',
-              apartmentName: data.Apartment?.name || '--',
+              statusText: this.getRoomStatusText(data.status),
+              rentalStatus: data.rentalStatus,
+              rentalStatusText: this.getRentalStatusText(data.rentalStatus),
+              apartmentName: data.Apartment && data.Apartment.name || '--',
               rental: data.Rental ? {
                 id: data.Rental.id,
-                renterName: data.Rental.Renter?.name,
+                renterName: data.Rental.Renter && data.Rental.Renter.name,
                 startDate: data.Rental.startDate,
                 endDate: data.Rental.endDate,
                 rent: data.Rental.rent,
                 status: data.Rental.status,
-                statusText: this.getStatusText(data.Rental.status)
+                statusText: this.getRentalStatusText(data.Rental.status)
               } : null
             }
           }
@@ -138,6 +197,46 @@
       addRental() {
         uni.navigateTo({ url: `/pages/rental-add/rental-add?roomId=${this.roomId}` })
       },
+      // 预定房间
+      async reserveRoom() {
+        uni.showModal({
+          title: '确认预定',
+          content: '确定要预定这个房间吗？',
+          confirmColor: '#2563EB',
+          success: async (res) => {
+            if (res.confirm) {
+              try {
+                await roomApi.update(this.roomId, { status: 'reserved' })
+                uni.showToast({ title: '预定成功', icon: 'success' })
+                this.loadRoomDetail(this.roomId)
+              } catch (error) {
+                uni.showToast({ title: '预定失败', icon: 'none' })
+                console.error(error)
+              }
+            }
+          }
+        })
+      },
+      // 取消预定
+      async cancelReserve() {
+        uni.showModal({
+          title: '确认取消',
+          content: '确定要取消预定吗？',
+          confirmColor: '#EF4444',
+          success: async (res) => {
+            if (res.confirm) {
+              try {
+                await roomApi.update(this.roomId, { status: 'empty' })
+                uni.showToast({ title: '取消预定成功', icon: 'success' })
+                this.loadRoomDetail(this.roomId)
+              } catch (error) {
+                uni.showToast({ title: '取消预定失败', icon: 'none' })
+                console.error(error)
+              }
+            }
+          }
+        })
+      },
       viewRentalDetail() {
         if (this.room.rental) {
           uni.navigateTo({ url: `/pages/rental-detail/rental-detail?id=${this.room.rental.id}` })
@@ -164,8 +263,12 @@
       goBack() {
         uni.navigateBack()
       },
-      getStatusText(status) {
-        const map = { active: '在租', expired: '已到期', terminated: '已终止' }
+      getRoomStatusText(status) {
+        const map = { empty: '空房', reserved: '预定', rented: '在租' }
+        return map[status] || status
+      },
+      getRentalStatusText(status) {
+        const map = { normal: '正常', soon_expire: '即将到期', expired: '已到期' }
         return map[status] || status
       }
     }
@@ -324,6 +427,10 @@
     background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
     box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.3);
   }
+  .action-btn.warning {
+    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+    box-shadow: 0 8rpx 24rpx rgba(245, 158, 11, 0.3);
+  }
   .action-btn.danger {
     background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
     box-shadow: 0 8rpx 24rpx rgba(239, 68, 68, 0.3);
diff --git a/pages/rooms/rooms.vue b/pages/rooms/rooms.vue
index 9828aa7..31b42b8 100644
--- a/pages/rooms/rooms.vue
+++ b/pages/rooms/rooms.vue
@@ -32,10 +32,10 @@
       </view>
 
       <view v-else class="room-grid">
-        <view v-for="(item, index) in rooms" :key="index" class="room-card" @click="viewRoomDetail(item)">
+        <view v-for="(item, index) in rooms" :key="index" class="room-card" :class="getRoomStatusClass(item)" @click="viewRoomDetail(item)">
           <view class="room-header">
             <text class="room-number">{{item.roomNumber}}</text>
-            <view class="room-status" :class="item.status">{{item.statusText}}</view>
+            <view class="room-status">{{item.statusText}}</view>
           </view>
           <view class="room-info">
             <text class="info-item">面积: {{item.area || '--'}} m²</text>
@@ -97,13 +97,13 @@
     methods: {
       async loadApartments() {
         try {
-          const res = await apartmentApi.getList({ pageSize: 999 })
+          const res = await apartmentApi.list()
           if (res.data) {
             this.apartments = res.data
             if (!this.selectedApartmentId && this.apartments.length > 0) {
               this.selectedApartmentId = this.apartments[0].id
             }
-            this.loadRooms()
+            // 注意：loadRooms 由 onShow 触发，避免重复请求
           }
         } catch (error) {
           console.error('加载公寓列表失败:', error)
@@ -119,23 +119,24 @@
             apartmentId: this.selectedApartmentId
           }
           const res = await roomApi.getList(params)
-          if (res.data) {
-            const list = res.data.map(item => ({
+          if (res.data && res.data.list) {
+            const list = res.data.list.map(item => ({
               id: item.id,
               roomNumber: item.roomNumber,
               area: item.area,
               orientation: item.orientation,
               rent: item.rent,
-              status: item.status || 'vacant',
-              statusText: item.status === 'rented' ? '已出租' : '空置中',
-              renterName: item.Renter?.name
+              status: this.getRoomStatus(item),
+              rentalStatus: item.rentalStatus,
+              statusText: this.getRoomStatusText(item),
+              renterName: item.Renter && item.Renter.name
             }))
             if (this.page === 1) {
               this.rooms = list
             } else {
               this.rooms = [...this.rooms, ...list]
             }
-            this.loadStatus = this.rooms.length < (res.total || 0) ? 'more' : 'noMore'
+            this.loadStatus = this.rooms.length < (res.data.total || 0) ? 'more' : 'noMore'
           }
         } catch (error) {
           console.error('加载房间列表失败:', error)
@@ -173,6 +174,32 @@
       },
       goBack() {
         uni.navigateBack()
+      },
+      getRoomStatus(room) {
+        // 与Web端Status.vue保持一致，直接使用room.status
+        return room.status || 'empty'
+      },
+      getRoomStatusText(room) {
+        // 与Web端Status.vue#getRoomStatusText保持一致
+        if (room.status === 'empty') return '空置'
+        if (room.status === 'rented') {
+          if (room.rentalStatus === 'expired') return '已到期'
+          if (room.rentalStatus === 'soon_expire') return '即将到期'
+          return '已租'
+        }
+        if (room.status === 'reserved') return '预定'
+        return room.status
+      },
+      getRoomStatusClass(room) {
+        // 根据status和rentalStatus确定样式类，与Web端保持一致
+        if (room.status === 'empty') return 'status-empty'
+        if (room.status === 'rented') {
+          if (room.rentalStatus === 'expired') return 'status-expired'
+          if (room.rentalStatus === 'soon_expire') return 'status-soon-expire'
+          return 'status-rented'
+        }
+        if (room.status === 'reserved') return 'status-reserved'
+        return ''
       }
     }
   }
@@ -249,11 +276,12 @@
   .empty-btn {
     background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
     color: #FFFFFF;
-    font-size: 30rpx;
-    font-weight: 600;
-    padding: 24rpx 60rpx;
-    border-radius: 16rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    padding: 16rpx 40rpx;
+    border-radius: 12rpx;
     border: none;
+    line-height: 1.5;
   }
   .room-grid {
     display: grid;
@@ -262,9 +290,37 @@
   }
   .room-card {
     background: #FFFFFF;
+    border: 2rpx solid #EBEEF5;
     border-radius: 16rpx;
     padding: 24rpx;
     box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+    transition: all 0.2s;
+    position: relative;
+    overflow: hidden;
+  }
+  .room-card:active {
+    transform: scale(0.98);
+  }
+  /* 状态样式 */
+  .room-card.status-empty {
+    border-color: #67C23A;
+    background: #F0F9FF;
+  }
+  .room-card.status-rented {
+    border-color: #409EFF;
+    background: #ECF5FF;
+  }
+  .room-card.status-soon-expire {
+    border-color: #E6A23C;
+    background: #FDF6EC;
+  }
+  .room-card.status-expired {
+    border-color: #F56C6C;
+    background: #FEF0F0;
+  }
+  .room-card.status-reserved {
+    border-color: #909399;
+    background: #F4F4F5;
   }
   .room-header {
     display: flex;
@@ -279,16 +335,11 @@
   }
   .room-status {
     padding: 4rpx 12rpx;
-    border-radius: 6rpx;
+    border-radius: 20rpx;
     font-size: 20rpx;
-  }
-  .room-status.vacant {
-    background: #D1FAE5;
-    color: #059669;
-  }
-  .room-status.rented {
-    background: #DBEAFE;
-    color: #2563EB;
+    background: rgba(255, 255, 255, 0.9);
+    color: #606266;
+    font-weight: 500;
   }
   .room-info {
     margin-bottom: 12rpx;
diff --git a/pages/stats/stats.vue b/pages/stats/stats.vue
index f5d8340..7314da3 100644
--- a/pages/stats/stats.vue
+++ b/pages/stats/stats.vue
@@ -39,7 +39,7 @@
         <view class="overview-row">
           <view class="overview-card pending">
             <view class="card-icon">
-              <uni-icons type="time-filled" size="28" color="#FFFFFF"></uni-icons>
+              <uni-icons type="refresh-filled" size="28" color="#FFFFFF"></uni-icons>
             </view>
             <view class="card-content">
               <text class="card-value">¥{{formatAmount(statistics.totalUnreceived)}}</text>
@@ -226,13 +226,37 @@
             <text>暂无明细数据</text>
           </view>
         </view>
-        <view v-if="hasMore" class="load-more" @click="loadMore">
-          <text>加载更多</text>
-        </view>
       </view>
 
       <view class="safe-area-bottom" style="height: 40rpx;"></view>
     </scroll-view>
+
+    <!-- 自定义日期选择弹窗 -->
+    <view class="custom-date-mask" v-if="showCustomDatePicker" @click="cancelCustomDate">
+      <view class="date-picker-popup" @click.stop>
+        <view class="popup-header">
+          <text class="popup-title">选择日期范围</text>
+          <view class="popup-close" @click="cancelCustomDate">
+            <uni-icons type="close" size="20" color="#64748B"></uni-icons>
+          </view>
+        </view>
+        <view class="popup-content">
+          <uni-datetime-picker
+            v-model="tempDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :border="false"
+            :clear-icon="false"
+          />
+        </view>
+        <view class="popup-footer">
+          <view class="btn btn-cancel" @click="cancelCustomDate">取消</view>
+          <view class="btn btn-confirm" @click="confirmCustomDate">确定</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -262,9 +286,9 @@
         ],
         categoryMap: {},
         isLoading: false,
-        page: 1,
-        pageSize: 10,
-        hasMore: true
+        // 自定义日期选择
+        showCustomDatePicker: false,
+        tempDateRange: []
       }
     },
     computed: {
@@ -278,8 +302,6 @@
       this.loadData()
     },
     onPullDownRefresh() {
-      this.page = 1
-      this.hasMore = true
       this.loadData().finally(() => {
         uni.stopPullDownRefresh()
       })
@@ -317,15 +339,23 @@
         this.isLoading = true
 
         try {
+          console.log('开始加载数据，日期范围:', this.dateRange)
           const billRes = await billApi.list({
             startDate: this.dateRange[0],
-            endDate: this.dateRange[1],
-            page: this.page,
-            pageSize: this.pageSize
+            endDate: this.dateRange[1]
           })
+          console.log('API返回结果:', billRes)
 
-          this.processData(billRes.data || [])
+          if (billRes.code === 200) {
+            this.processData(billRes.data || [])
+          } else {
+            uni.showToast({
+              title: billRes.message || '加载数据失败',
+              icon: 'none'
+            })
+          }
         } catch (error) {
+          console.error('加载数据失败:', error)
           uni.showToast({
             title: '加载数据失败',
             icon: 'none'
@@ -432,15 +462,8 @@
         // 处理趋势数据
         this.processTrendData(trendData)
 
-        if (this.page === 1) {
-          this.incomeList = incomeList
-          this.expenseList = expenseList
-        } else {
-          this.incomeList = [...this.incomeList, ...incomeList]
-          this.expenseList = [...this.expenseList, ...expenseList]
-        }
-
-        this.hasMore = bills.length >= this.pageSize
+        this.incomeList = incomeList
+        this.expenseList = expenseList
       },
 
       // 处理趋势数据
@@ -468,9 +491,15 @@
         uni.showActionSheet({
           itemList: ['本周', '本月', '本季度', '本年', '自定义'],
           success: (res) => {
-            const periods = ['本周', '本月', '本季度', '本年', '自定义']
-            this.currentPeriod = periods[res.tapIndex]
-            this.updateDateRange(res.tapIndex)
+            if (res.tapIndex === 4) {
+              // 自定义日期
+              this.showCustomDatePicker = true
+              this.tempDateRange = this.dateRange
+            } else {
+              const periods = ['本周', '本月', '本季度', '本年', '自定义']
+              this.currentPeriod = periods[res.tapIndex]
+              this.updateDateRange(res.tapIndex)
+            }
           }
         })
       },
@@ -504,22 +533,38 @@
         }
 
         this.dateRange = [this.formatDate(start), this.formatDate(end)]
-        this.page = 1
-        this.hasMore = true
         this.loadData()
       },
 
+      // 确认自定义日期
+      confirmCustomDate() {
+        if (this.tempDateRange && this.tempDateRange.length === 2) {
+          this.dateRange = this.tempDateRange
+          this.currentPeriod = `${this.tempDateRange[0]} 至 ${this.tempDateRange[1]}`
+          this.showCustomDatePicker = false
+          this.loadData()
+        } else {
+          uni.showToast({
+            title: '请选择开始和结束日期',
+            icon: 'none'
+          })
+        }
+      },
+
+      // 取消自定义日期选择
+      cancelCustomDate() {
+        this.showCustomDatePicker = false
+        this.tempDateRange = []
+      },
+
       // 切换明细标签
       switchTab(value) {
         this.activeTab = value
       },
 
-      // 加载更多
+      // 加载更多（已移除分页，此方法保留但为空）
       loadMore() {
-        if (this.hasMore && !this.isLoading) {
-          this.page++
-          this.loadData()
-        }
+        // 不再使用分页加载
       },
 
       // 查看详情
@@ -1074,4 +1119,79 @@
     color: #64748B;
     font-size: 26rpx;
   }
+
+  /* 日期选择弹窗 */
+  .custom-date-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+  }
+
+  .date-picker-popup {
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    width: 600rpx;
+    overflow: hidden;
+    margin: 0 40rpx;
+  }
+
+  .popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32rpx;
+    border-bottom: 2rpx solid #F1F5F9;
+  }
+
+  .popup-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1E293B;
+  }
+
+  .popup-close {
+    width: 48rpx;
+    height: 48rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 24rpx;
+    background: #F8FAFC;
+  }
+
+  .popup-content {
+    padding: 48rpx 32rpx;
+  }
+
+  .popup-footer {
+    display: flex;
+    padding: 24rpx 32rpx;
+    gap: 24rpx;
+    border-top: 2rpx solid #F1F5F9;
+  }
+
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 24rpx 0;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+  }
+
+  .btn-cancel {
+    background: #F1F5F9;
+    color: #64748B;
+  }
+
+  .btn-confirm {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #FFFFFF;
+  }
 </style>
diff --git a/utils/request.js b/utils/request.js
index 1d221de..526d9ee 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -70,18 +70,19 @@ const getHeaders = (needAuth = true) => {
 
 /**
  * 处理响应错误
- * 优先使用后端返回的 message
+ * 根据后端统一响应格式处理错误
+ * 后端格式: { code: 400/401/403/404/500, message: 'xxx', data: null }
  */
 const handleResponseError = (response) => {
-  const { statusCode: code, data } = response
+  const { statusCode: httpCode, data } = response
 
   // 优先使用后端返回的 message
-  const message = data?.message
+  const message = data?.message || '请求失败'
 
-  switch (code) {
+  switch (httpCode) {
     case 400:
       uni.showToast({
-        title: message || '请求参数错误',
+        title: message,
         icon: 'none'
       })
       break
@@ -91,7 +92,7 @@ const handleResponseError = (response) => {
       uni.removeStorageSync(getStorageKey('token'))
       uni.removeStorageSync(getStorageKey('userInfo'))
       uni.showToast({
-        title: message || '登录已过期，请重新登录',
+        title: message,
         icon: 'none'
       })
       setTimeout(() => {
@@ -103,28 +104,28 @@ const handleResponseError = (response) => {
 
     case 403:
       uni.showToast({
-        title: message || '没有权限执行此操作',
+        title: message,
         icon: 'none'
       })
       break
 
     case 404:
       uni.showToast({
-        title: message || '请求的资源不存在',
+        title: message,
         icon: 'none'
       })
       break
 
     case 500:
       uni.showToast({
-        title: message || '服务器错误，请稍后重试',
+        title: message,
         icon: 'none'
       })
       break
 
     default:
       uni.showToast({
-        title: message || '请求失败',
+        title: message,
         icon: 'none'
       })
   }
@@ -160,23 +161,28 @@ const request = (options = {}, needAuth = true) => {
     uni.request({
       ...config,
       success: (response) => {
-        const { statusCode: code, data } = response
+        const { statusCode: httpCode, data } = response
 
-        // 请求成功
-        if (code >= 200 && code < 300) {
-          // 如果后端返回的数据没有 code 字段，直接视为成功
-          if (!data.code || data.code === 200) {
+        // HTTP 请求成功 (2xx)
+        if (httpCode >= 200 && httpCode < 300) {
+          // 根据后端统一响应格式处理
+          // 后端格式: { code: 200, message: 'xxx', data: xxx }
+          
+          // 业务逻辑成功
+          if (data.code === 200) {
             resolve(data)
           } else {
-            // 业务逻辑失败
+            // 业务逻辑失败（如参数错误等）
+            // 后端格式: { code: 400/403/404/500, message: 'xxx', data: null }
+            const errorMessage = data.message || '操作失败'
             uni.showToast({
-              title: data.message || '操作失败',
+              title: errorMessage,
               icon: 'none'
             })
             reject(data)
           }
         } else {
-          // HTTP错误
+          // HTTP 错误（4xx, 5xx）
           handleResponseError(response)
           reject(response)
         }
@@ -262,11 +268,13 @@ export const upload = (url, filePath, formData = {}, needAuth = true) => {
       header: needAuth && token ? { 'Authorization': `Bearer ${token}` } : {},
       success: (response) => {
         const data = JSON.parse(response.data)
+        // 根据后端统一响应格式处理
         if (data.code === 200) {
           resolve(data)
         } else {
+          const errorMessage = data.message || '上传失败'
           uni.showToast({
-            title: data.message || '上传失败',
+            title: errorMessage,
             icon: 'none'
           })
           reject(data)