# 车辆详情页面 ## 功能说明 新创建的 `vehicle-details.vue` 页面用于显示车辆的详细信息,包括: ### 主要功能 1. **车辆基本信息展示** - 车牌号 - 车牌颜色 - 所有人 - 车辆类型 - 车辆识别代号 - 发动机号码 - 核定载人数 - 整备质量 - 外廊尺寸 - 总质量 - 车轴数 2. **行驶证图片展示** - 行驶证主页 - 行驶证副页 - 支持图片预览 3. **车牌选择功能** - 车牌号输入框 - 车牌颜色选择(蓝色/渐变绿) - 添加新车牌功能 4. **车头照上传** - 支持从相册或相机选择图片 - 图片预览功能 5. **底部操作按钮** - 下一步按钮 - 车辆信息变更按钮 ## 使用方法 ### 从select-car页面跳转 在 `select-car.vue` 页面的 `choose` 方法中,点击车辆列表项时会跳转到车辆详情页面: ```javascript const choose = (i, item) => { console.log(item.id); // 跳转到车辆详情页面,携带item.id参数 uni.navigateTo({ url: `/subpackage/after-sale/activation-once-again/vehicle-details?id=${item.id}` }); } ``` ### 页面参数 - `id`: 车辆ID,用于获取车辆详细信息 ### 页面路由 页面路径:`/subpackage/after-sale/activation-once-again/vehicle-details` ## 技术实现 ### 文件结构 ``` subpackage/after-sale/activation-once-again/ ├── select-car.vue # 车辆选择页面 ├── vehicle-details.vue # 车辆详情页面(新增) └── README.md # 说明文档 ``` ### 主要组件 - 使用 Vue 3 Composition API - 响应式数据管理 - 图片上传和预览功能 - 车牌输入组件 ### 样式特点 - 现代化UI设计 - 响应式布局 - 渐变色按钮 - 卡片式布局 ## 注意事项 1. **API集成**: 当前使用模拟数据,实际使用时需要集成真实的API接口 2. **图片处理**: 行驶证图片需要从后端API获取 3. **权限控制**: 根据实际业务需求添加相应的权限控制 4. **错误处理**: 需要添加网络请求失败等异常情况的处理 ## 后续优化 1. 添加车辆信息编辑功能 2. 集成真实的API接口 3. 添加图片压缩和上传进度 4. 优化页面加载性能 5. 添加更多的车辆信息字段