1105 lines
27 KiB
Markdown
1105 lines
27 KiB
Markdown
# RentEase App 功能页面设计规范
|
||
|
||
## 一、项目概述
|
||
|
||
### 1.1 产品定位
|
||
RentEase 是一款面向房东和物业管理人员的智能租赁管理移动应用，支持 App 和微信小程序双端运行。
|
||
|
||
### 1.2 技术栈
|
||
- **框架**: uni-app (Vue 3)
|
||
- **UI组件**: uni-ui
|
||
- **样式**: SCSS + CSS变量
|
||
- **状态管理**: 全局存储 + Vuex
|
||
- **网络请求**: 封装 uni.request
|
||
|
||
### 1.3 设计原则
|
||
- **移动端优先**: 所有设计以手机端体验为核心
|
||
- **简洁高效**: 减少操作步骤，提高管理效率
|
||
- **视觉一致**: 统一的蓝色主题 (#2563EB)
|
||
- **反馈及时**: 操作后有明确的视觉和交互反馈
|
||
|
||
---
|
||
|
||
## 二、页面架构设计
|
||
|
||
### 2.1 页面清单
|
||
|
||
| 模块 | 页面路径 | 功能描述 | 优先级 |
|
||
|------|----------|----------|--------|
|
||
| **认证** | pages/login/login | 用户登录 | P0 |
|
||
| **认证** | pages/register/register | 用户注册 | P0 |
|
||
| **首页** | pages/home/home | 仪表盘、快捷入口 | P0 |
|
||
| **房源** | pages/properties/properties | 房源列表 | P0 |
|
||
| **房源** | pages/property-add/property-add | 添加/编辑房源 | P0 |
|
||
| **房源** | pages/property-detail/property-detail | 房源详情 | P0 |
|
||
| **房间** | pages/rooms/rooms | 房间列表 | P1 |
|
||
| **房间** | pages/room-detail/room-detail | 房间详情 | P1 |
|
||
| **租客** | pages/tenants/tenants | 租客列表 | P1 |
|
||
| **租客** | pages/tenant-detail/tenant-detail | 租客详情 | P1 |
|
||
| **租客** | pages/tenant-add/tenant-add | 添加/编辑租客 | P1 |
|
||
| **租赁** | pages/rentals/rentals | 租赁记录列表 | P0 |
|
||
| **租赁** | pages/rental-detail/rental-detail | 租赁详情 | P0 |
|
||
| **租赁** | pages/rental-add/rental-add | 新增租赁 | P0 |
|
||
| **租赁** | pages/rental-renew/rental-renew | 续租办理 | P1 |
|
||
| **账单** | pages/bills/bills | 账单列表 | P1 |
|
||
| **账单** | pages/bill-detail/bill-detail | 账单详情 | P1 |
|
||
| **抄表** | pages/meter-readings/meter-readings | 抄表记录 | P2 |
|
||
| **抄表** | pages/meter-reading-add/meter-reading-add | 添加抄表 | P2 |
|
||
| **统计** | pages/stats/stats | 数据统计 | P1 |
|
||
| **我的** | pages/profile/profile | 个人中心 | P0 |
|
||
| **通用** | pages/add-record/add-record | 快捷添加 | P0 |
|
||
|
||
### 2.2 TabBar 结构
|
||
|
||
```
|
||
┌─────────┬─────────┬─────────┬─────────┬─────────┐
|
||
│ 首页 │ 房源 │ 添加 │ 统计 │ 我的 │
|
||
│ home │property │ + │ stats │ profile │
|
||
└─────────┴─────────┴─────────┴─────────┴─────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 三、API 接口绑定
|
||
|
||
### 3.1 现有 API 模块
|
||
|
||
```javascript
|
||
// api/index.js
|
||
const api = {
|
||
auth, // 认证相关
|
||
apartment, // 公寓/房源管理
|
||
room, // 房间管理
|
||
tenant, // 租客管理
|
||
rental, // 租赁管理
|
||
statistics // 统计分析
|
||
}
|
||
```
|
||
|
||
### 3.2 需要新增的 API 模块
|
||
|
||
```javascript
|
||
// api/bill.js - 账单管理
|
||
export default {
|
||
getList(params) {}, // 获取账单列表
|
||
getDetail(id) {}, // 获取账单详情
|
||
create(data) {}, // 创建账单
|
||
update(id, data) {}, // 更新账单
|
||
delete(id) {}, // 删除账单
|
||
markPaid(id) {}, // 标记已支付
|
||
getStatistics(params) {} // 获取账单统计
|
||
}
|
||
|
||
// api/meterReading.js - 抄表管理
|
||
export default {
|
||
getList(params) {}, // 获取抄表列表
|
||
getDetail(id) {}, // 获取抄表详情
|
||
create(data) {}, // 创建抄表记录
|
||
update(id, data) {}, // 更新抄表记录
|
||
delete(id) {}, // 删除抄表记录
|
||
getByRoom(roomId) {}, // 获取房间抄表历史
|
||
getLatest(roomId) {} // 获取最新读数
|
||
}
|
||
|
||
// api/renter.js - 租客管理（补充）
|
||
export default {
|
||
getList(params) {},
|
||
getDetail(id) {},
|
||
create(data) {},
|
||
update(id, data) {},
|
||
delete(id) {},
|
||
getOptions(params) {} // 获取租客下拉选项
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 四、核心页面设计
|
||
|
||
### 4.1 首页 (pages/home/home)
|
||
|
||
**功能模块:**
|
||
- 顶部导航栏：位置选择、通知入口
|
||
- 欢迎卡片：用户信息、快捷统计（房源数/租客数/待办数）
|
||
- 快捷功能：房源管理、租客管理、合同管理、账单管理
|
||
- 待办事项：合同到期、待收租金、维修申请
|
||
- 最近动态：租金收入、新租客入住、合同续签
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 加载仪表盘数据
|
||
this.$api.statistics.getDashboard()
|
||
|
||
// 数据映射
|
||
{
|
||
apartmentCount: data.apartmentCount, // 房源数
|
||
tenantCount: data.tenantCount, // 租客数
|
||
pendingTaskCount: data.pendingTaskCount // 待办数
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.2 房源列表 (pages/properties/properties)
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题、筛选、添加按钮
|
||
- 搜索栏：按名称/地址搜索
|
||
- 统计栏：全部/已出租/空置中
|
||
- 筛选标签：全部/已出租/空置中/即将到期
|
||
- 房源卡片网格：图片、状态标签、地址、租客、到期日、水电单价、租金
|
||
- 加载更多
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取房源列表
|
||
apartmentApi.getList({
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
name: this.searchKeyword
|
||
})
|
||
|
||
// 数据映射
|
||
{
|
||
id: item.id,
|
||
name: item.name,
|
||
address: item.address,
|
||
status: item.status || 'vacant',
|
||
statusText: item.status === 'rented' ? '已出租' : '空置中',
|
||
waterPrice: item.waterPrice || 5.00,
|
||
electricityPrice: item.electricityPrice || 1.00,
|
||
rent: item.rent || 0,
|
||
tenant: item.tenant,
|
||
dueDate: item.dueDate,
|
||
images: item.images
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.3 房源详情 (pages/property-detail/property-detail)
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：返回、编辑
|
||
- 房源图片轮播
|
||
- 基本信息：名称、标签、地址
|
||
- 费用标准卡片：水费单价、电费单价
|
||
- 租金信息卡片：月租金、租客、到期日
|
||
- 房源描述
|
||
- 操作按钮：编辑、删除
|
||
- 房间列表（子模块）
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取房源详情
|
||
apartmentApi.getDetail(id)
|
||
|
||
// 获取房源下的房间列表
|
||
roomApi.getList({ apartmentId: id })
|
||
```
|
||
|
||
---
|
||
|
||
### 4.4 租赁记录列表 (pages/rentals/rentals) ⭐ 新增
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题、筛选、搜索
|
||
- 筛选栏：公寓选择、状态筛选（在租/已到期/已终止）
|
||
- 统计卡片：在租数/即将到期/已到期
|
||
- 租赁卡片列表：
|
||
- 公寓名称 + 房间号
|
||
- 租客姓名 + 电话
|
||
- 租期（开始-结束）
|
||
- 付租方式标签
|
||
- 月租金
|
||
- 状态标签
|
||
- 即将到期警告（7天内）
|
||
- 操作按钮：详情、续租、退租
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取租赁列表
|
||
rentalApi.getList({
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
apartmentId: this.filterApartmentId,
|
||
status: this.filterStatus,
|
||
renterName: this.searchKeyword
|
||
})
|
||
|
||
// 数据映射
|
||
{
|
||
id: item.id,
|
||
apartmentName: item.Room?.Apartment?.name || '--',
|
||
roomNumber: item.Room?.roomNumber || '--',
|
||
renterName: item.Renter?.name || '--',
|
||
renterPhone: item.Renter?.phone || '--',
|
||
startDate: item.startDate,
|
||
endDate: item.endDate,
|
||
paymentType: item.paymentType,
|
||
paymentTypeText: this.getPaymentTypeText(item.paymentType),
|
||
rent: item.rent,
|
||
deposit: item.deposit || 0,
|
||
status: item.status,
|
||
statusText: this.getStatusText(item.status),
|
||
isExpiringSoon: this.isExpiringSoon(item.endDate) && item.status === 'active'
|
||
}
|
||
|
||
// 付租方式映射
|
||
paymentTypeMap: {
|
||
monthly: { text: '月租', color: 'info' },
|
||
quarterly: { text: '季租', color: 'warning' },
|
||
half_year: { text: '半年租', color: '' },
|
||
yearly: { text: '年租', color: 'success' }
|
||
}
|
||
|
||
// 状态映射
|
||
statusMap: {
|
||
active: { text: '在租', color: 'success' },
|
||
expired: { text: '已到期', color: 'info' },
|
||
terminated: { text: '已终止', color: 'danger' }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.5 租赁详情 (pages/rental-detail/rental-detail) ⭐ 新增
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：返回、编辑
|
||
- 租赁状态卡片：状态标签、租期进度条
|
||
- 房源信息：公寓、房间号
|
||
- 租客信息：姓名、电话、身份证号
|
||
- 租赁信息：
|
||
- 付租方式
|
||
- 开始日期
|
||
- 结束日期
|
||
- 月租金
|
||
- 押金
|
||
- 水表起始读数
|
||
- 电表起始读数
|
||
- 操作按钮：
|
||
- 在租状态：续租、退租
|
||
- 其他状态：仅查看
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取租赁详情
|
||
rentalApi.getDetail(id)
|
||
|
||
// 续租
|
||
rentalApi.create({
|
||
roomId: this.rental.roomId,
|
||
renterId: this.rental.renterId,
|
||
startDate: renewForm.startDate,
|
||
endDate: renewForm.endDate,
|
||
rent: renewForm.rent,
|
||
deposit: this.rental.deposit,
|
||
paymentType: this.rental.paymentType,
|
||
remark: renewForm.remark
|
||
})
|
||
// 然后更新原租约状态
|
||
rentalApi.update(this.rental.id, { status: 'expired' })
|
||
|
||
// 退租
|
||
rentalApi.terminate(this.rental.id, {
|
||
waterMeterEnd: terminateForm.waterMeterEnd,
|
||
electricityMeterEnd: terminateForm.electricityMeterEnd,
|
||
refundDeposit: terminateForm.refundDeposit,
|
||
remark: terminateForm.remark
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
### 4.6 新增租赁 (pages/rental-add/rental-add) ⭐ 新增
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：返回、保存
|
||
- 分步表单：
|
||
- 步骤1：选择房源和房间
|
||
- 步骤2：选择或添加租客
|
||
- 步骤3：填写租赁信息
|
||
- 表单字段：
|
||
- 公寓（下拉选择）
|
||
- 房间（级联下拉）
|
||
- 租客（搜索选择或新增）
|
||
- 付租方式（月租/季租/半年租/年租）
|
||
- 开始日期
|
||
- 结束日期
|
||
- 月租金
|
||
- 押金
|
||
- 水表起始读数
|
||
- 电表起始读数
|
||
- 备注
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取公寓列表（用于选择）
|
||
apartmentApi.getList({ pageSize: 999 })
|
||
|
||
// 获取房间列表（根据公寓筛选）
|
||
roomApi.getList({ apartmentId: selectedApartmentId, pageSize: 999 })
|
||
|
||
// 获取租客选项
|
||
renterApi.getOptions({ keyword: searchKeyword })
|
||
|
||
// 创建租赁
|
||
rentalApi.create({
|
||
roomId: form.roomId,
|
||
renterId: form.renterId,
|
||
paymentType: form.paymentType,
|
||
startDate: form.startDate,
|
||
endDate: form.endDate,
|
||
rent: form.rent,
|
||
deposit: form.deposit,
|
||
waterMeterStart: form.waterMeterStart,
|
||
electricityMeterStart: form.electricityMeterStart,
|
||
remark: form.remark
|
||
})
|
||
|
||
// 或创建租赁同时创建租客
|
||
rentalApi.createWithRenter({
|
||
roomId: form.roomId,
|
||
paymentType: form.paymentType,
|
||
startDate: form.startDate,
|
||
endDate: form.endDate,
|
||
rent: form.rent,
|
||
deposit: form.deposit,
|
||
renter: {
|
||
name: form.renterName,
|
||
phone: form.renterPhone,
|
||
idCard: form.renterIdCard
|
||
},
|
||
remark: form.remark
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
### 4.7 租客列表 (pages/tenants/tenants) ⭐ 新增
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题、搜索、添加
|
||
- 搜索栏：按姓名/电话搜索
|
||
- 租客卡片列表：
|
||
- 头像（默认头像）
|
||
- 姓名
|
||
- 电话
|
||
- 身份证号（脱敏显示）
|
||
- 在租房间数
|
||
- 租赁历史数
|
||
- 操作：查看详情、编辑、删除
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取租客列表
|
||
renterApi.getList({
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
keyword: this.searchKeyword
|
||
})
|
||
|
||
// 数据映射
|
||
{
|
||
id: item.id,
|
||
name: item.name,
|
||
phone: item.phone,
|
||
idCard: this.maskIdCard(item.idCard),
|
||
avatar: item.avatar || '/static/default-avatar.png',
|
||
activeRentals: item.activeRentals || 0,
|
||
totalRentals: item.totalRentals || 0
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.8 账单列表 (pages/bills/bills) ⭐ 新增
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题、筛选、统计
|
||
- 筛选栏：月份选择、状态筛选（未付/已付/逾期）
|
||
- 统计卡片：本月应收/已收/未收
|
||
- 账单卡片列表：
|
||
- 账单月份
|
||
- 房源/房间信息
|
||
- 租客姓名
|
||
- 账单金额
|
||
- 账单类型（租金/水费/电费/其他）
|
||
- 状态标签
|
||
- 到期日
|
||
- 操作：标记已付、查看详情、发送提醒
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取账单列表
|
||
billApi.getList({
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
month: this.selectedMonth,
|
||
status: this.filterStatus
|
||
})
|
||
|
||
// 获取账单统计
|
||
billApi.getStatistics({ month: this.selectedMonth })
|
||
|
||
// 标记已支付
|
||
billApi.markPaid(billId)
|
||
|
||
// 数据映射
|
||
{
|
||
id: item.id,
|
||
month: item.month,
|
||
apartmentName: item.Room?.Apartment?.name || '--',
|
||
roomNumber: item.Room?.roomNumber || '--',
|
||
renterName: item.Renter?.name || '--',
|
||
amount: item.amount,
|
||
type: item.type,
|
||
typeText: this.getBillTypeText(item.type),
|
||
status: item.status,
|
||
statusText: this.getBillStatusText(item.status),
|
||
dueDate: item.dueDate
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.9 抄表记录 (pages/meter-readings/meter-readings) ⭐ 新增
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题、添加
|
||
- 筛选栏：公寓选择、月份选择
|
||
- 抄表卡片列表：
|
||
- 房源/房间信息
|
||
- 抄表日期
|
||
- 水表读数（本期/上期/用量）
|
||
- 电表读数（本期/上期/用量）
|
||
- 费用计算
|
||
- 操作：查看详情、编辑
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取抄表列表
|
||
meterReadingApi.getList({
|
||
page: this.page,
|
||
pageSize: this.pageSize,
|
||
apartmentId: this.filterApartmentId,
|
||
month: this.selectedMonth
|
||
})
|
||
|
||
// 数据映射
|
||
{
|
||
id: item.id,
|
||
apartmentName: item.Room?.Apartment?.name || '--',
|
||
roomNumber: item.Room?.roomNumber || '--',
|
||
readingDate: item.readingDate,
|
||
waterCurrent: item.waterCurrent,
|
||
waterPrevious: item.waterPrevious,
|
||
waterUsage: item.waterCurrent - item.waterPrevious,
|
||
waterCost: (item.waterCurrent - item.waterPrevious) * item.waterPrice,
|
||
electricityCurrent: item.electricityCurrent,
|
||
electricityPrevious: item.electricityPrevious,
|
||
electricityUsage: item.electricityCurrent - item.electricityPrevious,
|
||
electricityCost: (item.electricityCurrent - item.electricityPrevious) * item.electricityPrice
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.10 统计页面 (pages/stats/stats)
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题
|
||
- 时间筛选：本月/本季度/本年
|
||
- 收入统计卡片：
|
||
- 总租金收入
|
||
- 水电费收入
|
||
- 其他收入
|
||
- 收入趋势图
|
||
- 房源统计：
|
||
- 房源总数
|
||
- 出租率
|
||
- 空置房源数
|
||
- 租客统计：
|
||
- 在租租客数
|
||
- 即将到期数
|
||
- 新入住数
|
||
- 图表展示：
|
||
- 收入趋势折线图
|
||
- 房源状态饼图
|
||
- 收支对比柱状图
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取仪表盘统计
|
||
statisticsApi.getDashboardStats()
|
||
|
||
// 获取租金统计
|
||
statisticsApi.getRentStatistics()
|
||
|
||
// 获取房间状态统计
|
||
statisticsApi.getRoomStatus()
|
||
|
||
// 获取公寓房间状态
|
||
statisticsApi.getApartmentRoomStatusStats()
|
||
|
||
// 获取即将到期房间
|
||
statisticsApi.getSoonExpireRoomsByApartment()
|
||
```
|
||
|
||
---
|
||
|
||
### 4.11 快捷添加 (pages/add-record/add-record)
|
||
|
||
**功能模块:**
|
||
- 自定义导航栏：标题
|
||
- 快捷入口网格：
|
||
- 添加房源
|
||
- 添加房间
|
||
- 添加租客
|
||
- 办理入住（新增租赁）
|
||
- 录入抄表
|
||
- 生成账单
|
||
- 最近操作记录
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 页面跳转处理
|
||
navigateTo(page) {
|
||
const routes = {
|
||
property: '/pages/property-add/property-add',
|
||
room: '/pages/room-add/room-add',
|
||
tenant: '/pages/tenant-add/tenant-add',
|
||
rental: '/pages/rental-add/rental-add',
|
||
meter: '/pages/meter-reading-add/meter-reading-add',
|
||
bill: '/pages/bill-generate/bill-generate'
|
||
}
|
||
uni.navigateTo({ url: routes[page] })
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4.12 个人中心 (pages/profile/profile)
|
||
|
||
**功能模块:**
|
||
- 用户信息卡片：头像、姓名、手机号
|
||
- 功能菜单列表：
|
||
- 我的房源
|
||
- 我的租客
|
||
- 账单管理
|
||
- 抄表记录
|
||
- 设置
|
||
- 关于我们
|
||
- 帮助与反馈
|
||
- 退出登录
|
||
|
||
**API 绑定:**
|
||
```javascript
|
||
// 获取用户信息
|
||
authApi.getUserInfo()
|
||
|
||
// 退出登录
|
||
authApi.logout()
|
||
```
|
||
|
||
---
|
||
|
||
## 五、组件设计规范
|
||
|
||
### 5.1 通用组件
|
||
|
||
#### EmptyState 空状态组件
|
||
```vue
|
||
<template>
|
||
<view class="empty-state">
|
||
<image class="empty-icon" :src="icon" />
|
||
<text class="empty-title">{{title}}</text>
|
||
<text class="empty-desc">{{description}}</text>
|
||
<button v-if="showButton" class="empty-btn" @click="onAction">{{buttonText}}</button>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
#### LoadingState 加载状态组件
|
||
```vue
|
||
<template>
|
||
<view class="loading-state">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">{{text}}</text>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
#### StatusTag 状态标签组件
|
||
```vue
|
||
<template>
|
||
<view class="status-tag" :class="type">
|
||
<text>{{text}}</text>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### 5.2 业务组件
|
||
|
||
#### PropertyCard 房源卡片
|
||
```vue
|
||
<template>
|
||
<view class="property-card" @click="onClick">
|
||
<image class="card-image" :src="property.images[0]" mode="aspectFill" />
|
||
<view class="card-content">
|
||
<view class="card-header">
|
||
<text class="card-title">{{property.name}}</text>
|
||
<status-tag :type="property.status" :text="property.statusText" />
|
||
</view>
|
||
<text class="card-address">{{property.address}}</text>
|
||
<view class="card-footer">
|
||
<text class="card-rent">¥{{property.rent}}/月</text>
|
||
<text class="card-tenant">{{property.tenant || '待租'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
#### RentalCard 租赁卡片
|
||
```vue
|
||
<template>
|
||
<view class="rental-card" @click="onClick">
|
||
<view class="card-header">
|
||
<view class="room-info">
|
||
<text class="apartment-name">{{rental.apartmentName}}</text>
|
||
<text class="room-number">{{rental.roomNumber}}</text>
|
||
</view>
|
||
<status-tag :type="rental.status" :text="rental.statusText" />
|
||
</view>
|
||
<view class="renter-info">
|
||
<text class="renter-name">{{rental.renterName}}</text>
|
||
<text class="renter-phone">{{rental.renterPhone}}</text>
|
||
</view>
|
||
<view class="rental-info">
|
||
<view class="info-item">
|
||
<text class="label">租期</text>
|
||
<text class="value">{{rental.startDate}} 至 {{rental.endDate}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">租金</text>
|
||
<text class="value price">¥{{rental.rent}}/月</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="rental.isExpiringSoon" class="expiring-warning">
|
||
<uni-icons type="info-filled" size="14" color="#EF4444" />
|
||
<text>即将到期（{{getRemainingDays(rental.endDate)}}天）</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
---
|
||
|
||
## 六、样式规范
|
||
|
||
### 6.1 颜色系统
|
||
|
||
```css
|
||
:root {
|
||
/* 主色调 */
|
||
--primary: #2563EB;
|
||
--primary-light: #3B82F6;
|
||
--primary-dark: #1D4ED8;
|
||
--primary-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
|
||
|
||
/* 功能色 */
|
||
--success: #10B981;
|
||
--warning: #F59E0B;
|
||
--error: #EF4444;
|
||
--info: #64748B;
|
||
|
||
/* 中性色 */
|
||
--background: #F8FAFC;
|
||
--surface: #FFFFFF;
|
||
--text-primary: #1E293B;
|
||
--text-secondary: #64748B;
|
||
--text-muted: #94A3B8;
|
||
--border: #E2E8F0;
|
||
|
||
/* 阴影 */
|
||
--shadow: 0 4rpx 20rpx rgba(37, 99, 235, 0.1);
|
||
--shadow-lg: 0 8rpx 40rpx rgba(37, 99, 235, 0.15);
|
||
}
|
||
```
|
||
|
||
### 6.2 间距系统
|
||
|
||
```css
|
||
/* 基础单位 4rpx */
|
||
--space-1: 4rpx;
|
||
--space-2: 8rpx;
|
||
--space-3: 12rpx;
|
||
--space-4: 16rpx;
|
||
--space-5: 20rpx;
|
||
--space-6: 24rpx;
|
||
--space-8: 32rpx;
|
||
--space-10: 40rpx;
|
||
--space-12: 48rpx;
|
||
```
|
||
|
||
### 6.3 圆角系统
|
||
|
||
```css
|
||
--radius-sm: 12rpx;
|
||
--radius-md: 20rpx;
|
||
--radius-lg: 32rpx;
|
||
--radius-full: 9999rpx;
|
||
```
|
||
|
||
### 6.4 字体系统
|
||
|
||
```css
|
||
/* 字号 */
|
||
--text-xs: 22rpx;
|
||
--text-sm: 24rpx;
|
||
--text-base: 28rpx;
|
||
--text-lg: 32rpx;
|
||
--text-xl: 36rpx;
|
||
--text-2xl: 40rpx;
|
||
--text-3xl: 48rpx;
|
||
|
||
/* 字重 */
|
||
--font-normal: 400;
|
||
--font-medium: 500;
|
||
--font-semibold: 600;
|
||
--font-bold: 700;
|
||
```
|
||
|
||
---
|
||
|
||
## 七、交互规范
|
||
|
||
### 7.1 页面转场
|
||
|
||
```css
|
||
/* 页面进入动画 */
|
||
.page-enter {
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(30rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* 列表项进入动画 */
|
||
.list-item-enter {
|
||
animation: fadeInUp 0.4s ease-out;
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
```
|
||
|
||
### 7.2 按钮状态
|
||
|
||
```css
|
||
/* 默认状态 */
|
||
.btn {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
/* 按下状态 */
|
||
.btn:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 禁用状态 */
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.btn-loading {
|
||
position: relative;
|
||
color: transparent;
|
||
}
|
||
|
||
.btn-loading::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 2rpx solid transparent;
|
||
border-top-color: currentColor;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
```
|
||
|
||
### 7.3 列表加载
|
||
|
||
```javascript
|
||
// 加载更多逻辑
|
||
loadMore() {
|
||
if (this.loadStatus === 'noMore') return
|
||
this.loadStatus = 'loading'
|
||
this.page++
|
||
this.loadData().then(() => {
|
||
this.loadStatus = this.hasMore ? 'more' : 'noMore'
|
||
})
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 八、数据流设计
|
||
|
||
### 8.1 页面数据流
|
||
|
||
```
|
||
用户操作 → 调用API → 数据处理 → 更新视图 → 本地缓存（可选）
|
||
```
|
||
|
||
### 8.2 状态管理
|
||
|
||
```javascript
|
||
// store/user.js - 用户状态
|
||
export const userStore = {
|
||
state: {
|
||
token: uni.getStorageSync('token'),
|
||
userInfo: uni.getStorageSync('userInfo')
|
||
},
|
||
mutations: {
|
||
setToken(state, token) {
|
||
state.token = token
|
||
uni.setStorageSync('token', token)
|
||
},
|
||
setUserInfo(state, userInfo) {
|
||
state.userInfo = userInfo
|
||
uni.setStorageSync('userInfo', userInfo)
|
||
}
|
||
}
|
||
}
|
||
|
||
// store/cache.js - 数据缓存
|
||
export const cacheStore = {
|
||
state: {
|
||
apartments: [],
|
||
lastUpdate: null
|
||
},
|
||
mutations: {
|
||
setApartments(state, list) {
|
||
state.apartments = list
|
||
state.lastUpdate = Date.now()
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 九、性能优化
|
||
|
||
### 9.1 列表优化
|
||
|
||
```javascript
|
||
// 虚拟列表（长列表）
|
||
<recycle-list>
|
||
<cell v-for="(item, index) in list" :key="index">
|
||
<rental-card :rental="item" />
|
||
</cell>
|
||
</recycle-list>
|
||
|
||
// 分页加载
|
||
pagination: {
|
||
page: 1,
|
||
pageSize: 20,
|
||
hasMore: true
|
||
}
|
||
```
|
||
|
||
### 9.2 图片优化
|
||
|
||
```vue
|
||
<image
|
||
:src="item.image"
|
||
mode="aspectFill"
|
||
lazy-load
|
||
:fade-show="true"
|
||
/>
|
||
```
|
||
|
||
### 9.3 请求优化
|
||
|
||
```javascript
|
||
// 防抖搜索
|
||
import { debounce } from '@/utils/index.js'
|
||
|
||
onSearch: debounce(function(keyword) {
|
||
this.searchKeyword = keyword
|
||
this.page = 1
|
||
this.loadData()
|
||
}, 300)
|
||
|
||
// 请求缓存
|
||
const cacheKey = `api_${url}_${JSON.stringify(params)}`
|
||
const cached = uni.getStorageSync(cacheKey)
|
||
if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
|
||
return Promise.resolve(cached.data)
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 十、开发规范
|
||
|
||
### 10.1 文件命名
|
||
|
||
- 页面文件: `pages/page-name/page-name.vue`
|
||
- 组件文件: `components/component-name/component-name.vue`
|
||
- API文件: `api/module-name.js`
|
||
- 工具文件: `utils/util-name.js`
|
||
|
||
### 10.2 代码规范
|
||
|
||
```javascript
|
||
// 组件命名: 大驼峰
|
||
export default {
|
||
name: 'RentalCard'
|
||
}
|
||
|
||
// 方法命名: 小驼峰
|
||
methods: {
|
||
handleSearch() {},
|
||
loadData() {},
|
||
onRefresh() {}
|
||
}
|
||
|
||
// 数据命名: 语义化
|
||
data() {
|
||
return {
|
||
rentalList: [], // 列表数据
|
||
isLoading: false, // 加载状态
|
||
hasMore: true // 是否有更多
|
||
}
|
||
}
|
||
```
|
||
|
||
### 10.3 注释规范
|
||
|
||
```javascript
|
||
/**
|
||
* 获取租赁列表
|
||
* @param {Object} params - 查询参数
|
||
* @param {number} params.page - 页码
|
||
* @param {number} params.pageSize - 每页数量
|
||
* @returns {Promise} 返回租赁列表数据
|
||
*/
|
||
async getRentalList(params) {
|
||
// 实现代码
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 十一、页面路由配置
|
||
|
||
### 11.1 pages.json 完整配置
|
||
|
||
```json
|
||
{
|
||
"pages": [
|
||
{ "path": "pages/login/login", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/register/register", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/home/home", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/properties/properties", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/property-add/property-add", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/property-detail/property-detail", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/rooms/rooms", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/room-detail/room-detail", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/tenants/tenants", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/tenant-detail/tenant-detail", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/tenant-add/tenant-add", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/rentals/rentals", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/rental-detail/rental-detail", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/rental-add/rental-add", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/rental-renew/rental-renew", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/bills/bills", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/bill-detail/bill-detail", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/meter-readings/meter-readings", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/meter-reading-add/meter-reading-add", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/stats/stats", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/profile/profile", "style": { "navigationStyle": "custom" } },
|
||
{ "path": "pages/add-record/add-record", "style": { "navigationStyle": "custom" } }
|
||
],
|
||
"tabBar": {
|
||
"color": "#94A3B8",
|
||
"selectedColor": "#2563EB",
|
||
"backgroundColor": "#FFFFFF",
|
||
"borderStyle": "white",
|
||
"list": [
|
||
{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home-active.png" },
|
||
{ "pagePath": "pages/properties/properties", "text": "房源", "iconPath": "static/tabbar/property.png", "selectedIconPath": "static/tabbar/property-active.png" },
|
||
{ "pagePath": "pages/add-record/add-record", "text": "添加", "iconPath": "static/tabbar/add.png", "selectedIconPath": "static/tabbar/add-active.png" },
|
||
{ "pagePath": "pages/stats/stats", "text": "统计", "iconPath": "static/tabbar/stats.png", "selectedIconPath": "static/tabbar/stats-active.png" },
|
||
{ "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "static/tabbar/profile.png", "selectedIconPath": "static/tabbar/profile-active.png" }
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 十二、实现优先级
|
||
|
||
### P0 - 核心功能（必须实现）
|
||
1. ✅ 登录/注册
|
||
2. ✅ 首页仪表盘
|
||
3. ✅ 房源列表/添加/详情
|
||
4. ⭐ 租赁记录列表/详情/添加
|
||
5. ✅ 快捷添加页面
|
||
6. ✅ 个人中心
|
||
|
||
### P1 - 重要功能（建议实现）
|
||
1. ⭐ 租客管理（列表/详情/添加）
|
||
2. ⭐ 账单管理（列表/详情）
|
||
3. ⭐ 统计报表
|
||
4. 房间管理（列表/详情）
|
||
|
||
### P2 - 扩展功能（可选实现）
|
||
1. 抄表记录
|
||
2. 续租/退租流程
|
||
3. 消息通知
|
||
4. 数据导出
|
||
|
||
---
|
||
|
||
## 十三、总结
|
||
|
||
本设计规范涵盖了 RentEase App 的完整功能架构，包括：
|
||
|
||
1. **22个功能页面** 的详细设计
|
||
2. **6个API模块** 的接口绑定
|
||
3. **统一的视觉规范**（颜色、间距、字体、圆角）
|
||
4. **完整的交互规范**（动画、状态、手势）
|
||
5. **性能优化方案**（列表、图片、请求）
|
||
|
||
所有页面采用 **自定义导航栏** 设计，保持视觉一致性。API 接口已根据现有后端设计进行绑定，可直接使用。
|
||
|
||
标记 ⭐ 的页面为需要新增的页面，其他页面已有基础实现需要完善。
|