zhywpt-sp/subpackage/after-sale/activation-once-again

车辆详情页面

功能说明

新创建的 vehicle-details.vue 页面用于显示车辆的详细信息，包括：

主要功能

1. 车辆基本信息展示

   • 车牌号
   • 车牌颜色
   • 所有人
   • 车辆类型
   • 车辆识别代号
   • 发动机号码
   • 核定载人数
   • 整备质量
   • 外廊尺寸
   • 总质量
   • 车轴数

2. 行驶证图片展示

   • 行驶证主页
   • 行驶证副页
   • 支持图片预览

3. 车牌选择功能

   • 车牌号输入框
   • 车牌颜色选择（蓝色/渐变绿）
   • 添加新车牌功能

4. 车头照上传

   • 支持从相册或相机选择图片
   • 图片预览功能

5. 底部操作按钮

   • 下一步按钮
   • 车辆信息变更按钮

使用方法

从select-car页面跳转

在 select-car.vue 页面的 choose 方法中，点击车辆列表项时会跳转到车辆详情页面：

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. 添加更多的车辆信息字段