用户在绑定车辆页面成功绑定车辆后，返回首页时需要自动刷新并显示最新的绑定车辆信息，确保用户能够立即看到绑定的车辆信息。
只在 onLoad 时加载一次
javascript onLoad() { this.loadUserProfile() // 只在页面首次加载时调用 this.loadRunningTasks() }
onShow 未刷新车辆信息
javascript onShow() { this.loadRunningTasks() // ❌ 只刷新任务，未刷新车辆 }
使用 getUserProfile 接口
graph LR
A[首页] --> B[点击绑定车辆]
B --> C[绑定车辆页面]
C --> D[选择车辆]
D --> E[绑定成功]
E --> F[返回首页]
F --> G{车辆信息更新?}
G -->|原实现| H[❌ 不更新]
G -->|新实现| I[✅ 自动更新]
修改前：javascript import { mapState } from 'vuex' import { listTask, changeTaskStatus } from '@/api/task' import { getUserProfile } from '@/api/system/user'
修改后：javascript import { mapState } from 'vuex' import { listTask, changeTaskStatus } from '@/api/task' import { getUserProfile } from '@/api/system/user' import { getUserBoundVehicle } from '@/api/vehicle' // ✅ 新增专用API
新增方法： loadUserVehicle()
// 加载用户绑定的车辆信息
loadUserVehicle() {
const userId = this.currentUser.userId
if (!userId) {
console.error('用户未登录，无法获取绑定车辆信息')
this.boundVehicle = ''
this.boundVehicleId = null
return
}
getUserBoundVehicle(userId).then(response => {
if (response.code === 200 && response.data) {
const vehicle = response.data
this.boundVehicle = vehicle.vehicleNumber || '未知车牌'
this.boundVehicleId = vehicle.vehicleId
console.log('用户绑定车辆:', this.boundVehicle)
} else {
this.boundVehicle = ''
this.boundVehicleId = null
}
}).catch(error => {
console.error('获取绑定车辆信息失败:', error)
this.boundVehicle = ''
this.boundVehicleId = null
})
}
优势：
- ✅ 使用专用的 getUserBoundVehicle API
- ✅ 数据更准确、更及时
- ✅ 独立的错误处理
- ✅ 清空旧数据，避免显示过期信息
修改前：javascript onLoad() { this.loadUserProfile() // 使用通用接口 this.loadRunningTasks() }, onShow() { this.loadRunningTasks() // ❌ 只刷新任务 }
修改后：javascript onLoad() { this.loadUserVehicle() // ✅ 使用专用方法 this.loadRunningTasks() }, onShow() { this.loadUserVehicle() // ✅ 每次显示都刷新车辆 this.loadRunningTasks() // ✅ 同时刷新任务 }
保留 loadUserProfile() 方法：
```javascript
// 加载用户信息（保留以兼容之前的代码）
loadUserProfile() {
const userId = this.currentUser.userId
if (!userId) {
console.error('用户未登录，无法获取用户信息')
return
}
getUserProfile().then(response => {
const userInfo = response.data || response
// 获取用户绑定的车辆信息
if (userInfo.boundVehicle) {
this.boundVehicle = userInfo.boundVehicle.vehicleNumber
this.boundVehicleId = userInfo.boundVehicle.vehicleId
}
}).catch(error => {
console.error('获取用户信息失败:', error)
})
}
```
作用：
- ✅ 保持向后兼容
- ✅ 如需获取更多用户信息时可以调用
首页显示
用户信息区域： └─ 用户名: 张三 └─ 关联车牌号: 未绑定车牌号 └─ [绑定车辆] 按钮
点击绑定车辆
bind-vehicle.vue 页面 用户信息区域： └─ 用户名: 张三 └─ 关联车牌号: 粤A12345 ← ✅ 自动更新 └─ [更换车辆] 按钮 ← ✅ 按钮文字变化 sequenceDiagram
participant User as 用户
participant Index as 首页
participant Bind as 绑定页面
participant API as 后端API
User->>Index: 打开首页
Index->>API: getUserBoundVehicle(userId)
API-->>Index: 返回：未绑定
Index-->>User: 显示：未绑定车牌号
User->>Index: 点击绑定车辆
Index->>Bind: 跳转到绑定页面
User->>Bind: 选择车辆：粤A12345
User->>Bind: 点击确认绑定
Bind->>API: bindVehicleToUser(userId, vehicleId)
API-->>Bind: 返回：绑定成功
Bind-->>User: 提示：车辆绑定成功
Bind->>Index: 返回首页（navigateBack）
Note over Index: 触发 onShow()
Index->>API: getUserBoundVehicle(userId)
API-->>Index: 返回：粤A12345
Index-->>User: 显示：关联车牌号: 粤A12345
修改前：
- ❌ 绑定成功后返回首页，车辆信息不更新
- ❌ 需要手动刷新页面才能看到最新绑定
修改后：
- ✅ 绑定成功后返回首页，自动刷新车辆信息
- ✅ 用户体验流畅，无需任何额外操作
修改前：
- ⚠️ 使用 getUserProfile 接口
- ⚠️ 可能存在缓存问题
修改后：
- ✅ 使用专用的 getUserBoundVehicle 接口
- ✅ 数据更准确、更及时
新增完善的错误处理：javascript .catch(error => { console.error('获取绑定车辆信息失败:', error) this.boundVehicle = '' // 清空旧数据 this.boundVehicleId = null // 清空旧ID })
多场景自动刷新：
// 获取用户当前绑定的车辆
export function getUserBoundVehicle(userId) {
return request({
url: '/system/vehicle/user/bound/' + userId,
method: 'get'
})
}
后端接口： /system/vehicle/user/bound/{userId}
响应示例：json { "code": 200, "msg": "操作成功", "data": { "vehicleId": 1, "vehicleNumber": "粤A12345", "vehicleType": "救护车", "vehicleBrand": "福特", "vehicleModel": "全顺" } }
无绑定时：json { "code": 200, "msg": "操作成功", "data": null }
步骤：
1. 新用户首次登录
2. 首页显示"未绑定车牌号"
3. 点击"绑定车辆"按钮
4. 选择车牌号并绑定
5. 绑定成功，返回首页
预期结果：
- ✅ 首页显示绑定的车牌号
- ✅ 按钮文字变为"更换车辆"
步骤：
1. 用户已绑定车辆：粤A12345
2. 首页显示"关联车牌号：粤A12345"
3. 点击"更换车辆"按钮
4. 选择新车牌号：粤B67890
5. 确认强制绑定
6. 绑定成功，返回首页
预期结果：
- ✅ 首页显示新车牌号：粤B67890
- ✅ 旧车牌号信息被清除
步骤：
1. 用户已绑定车辆：粤A12345
2. 进入个人中心
3. 点击"取消绑定车辆"
4. 解绑成功
5. 返回首页
预期结果：
- ✅ 首页显示"未绑定车牌号"
- ✅ 按钮文字变为"绑定车辆"
步骤：
1. 断开网络连接
2. 打开首页
预期结果：
- ✅ 控制台输出错误日志
- ✅ 车辆信息为空，不显示过期数据
- ✅ 页面不崩溃
app/pages/index.vue - 首页app/api/vehicle.js - 车辆 APIapp/pages/bind-vehicle.vue - 绑定车辆页面显示加载中的提示，提升用户体验：
loadUserVehicle() {
this.loadingVehicle = true // 显示加载状态
getUserBoundVehicle(userId).then(response => {
// 处理数据...
}).finally(() => {
this.loadingVehicle = false // 隐藏加载状态
})
}
避免频繁请求相同数据：
// 使用 Vuex 缓存绑定车辆信息
// 只有在绑定/解绑操作后才清除缓存
下拉刷新时同时刷新车辆信息：
onPullDownRefresh() {
this.loadUserVehicle() // 新增：刷新车辆
this.loadRunningTasks()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
}
在数据加载时显示骨架屏，提升视觉体验：
<view v-if="loadingVehicle" class="skeleton">
<!-- 骨架屏内容 -->
</view>
<view v-else class="vehicle-info">
{{ boundVehicle || '未绑定车牌号' }}
</view>
通过本次优化，实现了以下目标：
getUserBoundVehicle 专用接口，数据更准确onShow 中刷新车辆信息，适配多种场景核心价值：
- 提升用户体验，操作更流畅
- 数据实时性更好，显示更准确
- 代码结构更清晰，易于维护
| 版本 | 日期 | 修改内容 | 修改人 |
|---|
| 1.0 | 2025-10-15 | 实现首页车辆绑定自动刷新功能 | - |