"我的"页面精简优化说明

修改背景

根据业务需求，将"我的"页面进行精简，移除不必要的功能模块，只保留核心的用户信息展示、车辆绑定和退出登录功能。

修改内容

删除的功能模块

1. ❌ 交流群 - 删除QQ群入口
2. ❌ 在线客服 - 删除客服入口
3. ❌ 反馈社区 - 删除社区入口
4. ❌ 点赞我们 - 删除点赞入口
5. ❌ 编辑资料 - 删除编辑入口
6. ❌ 用户服务协议 - 删除协议入口
7. ❌ 隐私政策 - 删除政策入口
8. ❌ 常见问题 - 删除帮助入口
9. ❌ 关于我们 - 删除关于入口
10. ❌ 应用设置 - 删除设置入口

保留的功能模块

1. ✅ 用户信息展示

• 用户名
• 手机号码
• 所属分公司（新增）
• 绑定车辆
• App版本号

1. ✅ 车辆绑定管理

• 绑定车辆/更换车辆入口
• 统一跳转到车辆绑定页面

1. ✅ 退出登录

• 红色警示样式
• 二次确认提示

页面结构

修改前

┌─────────────────────┐
│   用户头像和基本信息   │
├─────────────────────┤
│ 交流群 客服 社区 点赞 │  ← 删除
├─────────────────────┤
│    用户详细信息      │
│  [绑定/解绑车辆]     │  ← 移除按钮
├─────────────────────┤
│ • 编辑资料          │  ← 删除
│ • 用户服务协议      │  ← 删除
│ • 隐私政策          │  ← 删除
│ • 常见问题          │  ← 删除
│ • 关于我们          │  ← 删除
│ • 应用设置          │  ← 删除
└─────────────────────┘

修改后

┌─────────────────────┐
│   用户头像和基本信息   │
├─────────────────────┤
│    用户详细信息      │
│  • 用户名           │
│  • 手机号码         │
│  • 所属分公司       │  ← 新增
│  • 绑定车辆         │
│  • App版本号        │
├─────────────────────┤
│ • 绑定车辆/更换车辆  │  ← 保留
│ • 退出登录          │  ← 新增
└─────────────────────┘

详细修改点

1. 模板部分

删除的四宫格操作区

<!-- 删除前 -->
<view class="mine-actions grid col-4 text-center">
  <view class="action-item" @click="handleJiaoLiuQun">
    <view class="iconfont icon-friendfill text-pink icon"></view>
    <text class="text">交流群</text>
  </view>
  <!-- ... 其他三个 -->
</view>

新增分公司信息

<!-- 新增 -->
<view class="info-item">
  <view class="info-label">所属分公司：</view>
  <view class="info-value">{{ deptName || '未设置' }}</view>
</view>

简化菜单列表

<!-- 修改后只保留 -->
<view class="menu-list">
  <!-- 绑定/更换车辆 -->
  <view class="list-cell list-cell-arrow" @click="handleVehicleBinding">
    <view class="menu-item-box">
      <view class="iconfont icon-car menu-icon"></view>
      <view>{{ boundVehicle && boundVehicle !== '未绑定' ? '更换车辆' : '绑定车辆' }}</view>
    </view>
  </view>
  
  <!-- 退出登录 -->
  <view class="list-cell list-cell-arrow" @click="handleLogout">
    <view class="menu-item-box">
      <view class="iconfont icon-logout menu-icon text-red"></view>
      <view class="text-red">退出登录</view>
    </view>
  </view>
</view>

2. 脚本部分

新增数据字段

data() {
  return {
    // ... 其他字段
    deptName: '', // 新增：所属分公司
  }
}

优化获取用户信息

getUserInfo() {
  getUserProfile().then(response => {
    const user = response.data
    this.name = user.userName
    this.phonenumber = user.phonenumber
    this.deptName = user.dept ? user.dept.deptName : '未设置' // 新增
  })
}

统一车辆绑定入口

// 新增：统一的车辆绑定处理
handleVehicleBinding() {
  this.$tab.navigateTo('/pages/bind-vehicle')
}

优化退出登录

handleLogout() {
  this.$modal.confirm('确定退出登录吗？').then(() => {
    this.$store.dispatch('LogOut').then(() => {
      this.$tab.reLaunch('/pages/login') // 改为跳转到登录页
    })
  })
}

删除的方法

• ❌ goToBindVehicle() - 合并到 handleVehicleBinding()
• ❌ unbindVehicle() - 在车辆绑定页面处理
• ❌ handleToEditInfo() - 删除编辑资料入口
• ❌ handleToSetting() - 删除设置入口
• ❌ handleHelp() - 删除帮助入口
• ❌ handleAbout() - 删除关于入口
• ❌ handleUserAgreement() - 删除协议入口
• ❌ handlePrivacyPolicy() - 删除政策入口
• ❌ handleJiaoLiuQun() - 删除交流群入口
• ❌ handleBuilding() - 删除建设中提示

3. 样式部分

删除的样式

// 删除四宫格样式
.mine-actions { ... }

// 删除车辆操作按钮样式
.vehicle-actions { ... }

功能对比

用户信息展示

字段	修改前	修改后
用户名	✅ 显示	✅ 显示
手机号码	✅ 显示	✅ 显示
所属分公司	❌ 不显示	✅ 显示
绑定车辆	✅ 显示	✅ 显示
App版本号	✅ 显示	✅ 显示

操作入口

功能	修改前	修改后
绑定车辆	✅ 按钮	✅ 菜单项
解绑车辆	✅ 按钮	✅ 在绑定页处理
更换车辆	❌ 无	✅ 动态显示
退出登录	❌ 隐藏深	✅ 主菜单
编辑资料	✅ 有	❌ 删除
设置	✅ 有	❌ 删除
帮助	✅ 有	❌ 删除

交互优化

1. 车辆绑定优化

修改前：
- 已绑定：显示"取消绑定车辆"按钮
- 未绑定：显示"绑定车辆"按钮

修改后：
- 已绑定：菜单显示"更换车辆"
- 未绑定：菜单显示"绑定车辆"
- 统一跳转到车辆绑定页面处理

2. 退出登录优化

修改前：
- 隐藏在设置页面中
- 提示"确定注销并退出系统吗？"
- 退出后跳转到首页

修改后：
- 直接在主菜单显示
- 使用红色警示样式
- 提示"确定退出登录吗？"
- 退出后跳转到登录页

3. 页面简化

修改前：
- 10个功能入口
- 需要滚动查看
- 信息密集

修改后：
- 2个功能入口
- 无需滚动
- 清爽简洁

视觉效果

页面布局

┌─────────────────────────────────┐
│  👤  用户名：张三      [个人信息>] │  ← 顶部蓝色区域
├─────────────────────────────────┤
│                                 │
│  ┌───────────────────────────┐  │
│  │  用户名：     张三        │  │
│  │  手机号码：   138****1234 │  │
│  │  所属分公司： 广州分公司   │  │  ← 用户信息卡片
│  │  绑定车辆：   粤A12345    │  │
│  │  App版本号：  1.0.0      │  │
│  └───────────────────────────┘  │
│                                 │
│  ┌───────────────────────────┐  │
│  │  🚗  更换车辆          >  │  │  ← 功能菜单
│  ├───────────────────────────┤  │
│  │  🚪  退出登录          >  │  │  ← 红色警示
│  └───────────────────────────┘  │
│                                 │
└─────────────────────────────────┘

代码优化

代码量对比

指标	修改前	修改后	优化
模板行数	~130行	~70行	↓46%
方法数量	14个	5个	↓64%
样式代码	~110行	~80行	↓27%

性能提升

1. ✅ 渲染更快 - 减少DOM元素
2. ✅ 代码更简洁 - 删除无用方法
3. ✅ 维护更容易 - 功能聚焦

用户体验

优势

1. ✅ 界面简洁 - 无干扰信息
2. ✅ 操作直观 - 核心功能突出
3. ✅ 查找快速 - 无需滚动
4. ✅ 退出方便 - 主菜单可见

注意事项

1. ⚠️ 功能缩减 - 部分功能不可用
2. ⚠️ 用户习惯 - 需要适应新布局
3. ✅ 核心保留 - 不影响主要功能

测试验证

测试场景

1. ✅ 用户信息显示

• 验证所有字段正确显示
• 验证分公司信息显示

1. ✅ 车辆绑定

• 未绑定：显示"绑定车辆"
• 已绑定：显示"更换车辆"
• 点击跳转到绑定页面

1. ✅ 退出登录

• 显示红色警示样式
• 二次确认提示
• 退出后跳转到登录页

相关文件

• 页面文件: app/pages/mine/index.vue
• API文件: app/api/system/user.js
• 车辆API: app/api/vehicle.js
• Store: app/store/modules/user.js

升级建议

如果后续需要恢复某些功能，建议：

1. 在设置页面中添加"高级功能"入口
2. 使用抽屉或弹窗展示次要功能
3. 保持主页面的简洁性

---

修改时间: 2025-10-26
修改人: AI Assistant
影响范围: "我的"页面UI和功能
状态: ✅ 已完成并优化