# Purolator Vue 项目使用说明

## 项目概述
这是一个基于 Vue 3 + Vite 的 Purolator 配送状态管理系统，包含多个页面：
- 首页：配送状态显示
- 更新地址页面：修改配送地址表单
- 在线支付页面：重新配送服务费支付

## 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 启动开发服务器
```bash
npm run dev
```
或者双击 `start.bat` 文件（Windows）

### 3. 访问应用
打开浏览器访问：`http://localhost:5173`（或显示的端口）

## 页面路由

### 主要页面
- **首页**: `/` - 显示包裹配送状态
- **更新地址**: `/update-address` - 配送地址修改表单
- **在线支付**: `/payment` - 重新配送服务费支付

### 页面导航
- 从首页点击 "Update Address" 按钮可以跳转到地址更新页面
- 从首页点击 "Pay for Redelivery" 按钮可以跳转到支付页面
- 从地址更新页面可以继续到支付页面
- 各页面都包含完整的头部导航和页脚

## 项目结构

```
src/
├── components/           # Vue 组件
│   ├── HomePage.vue         # 首页组件
│   ├── UpdateAddressPage.vue # 地址更新页面
│   ├── PaymentPage.vue      # 在线支付页面
│   ├── HeaderComponent.vue   # 头部导航组件
│   └── FooterComponent.vue   # 页脚组件
├── router/              # 路由配置
│   └── index.js            # 路由定义
├── assets/              # 静态资源
├── App.vue             # 主应用组件
├── main.js             # 应用入口
└── style.css           # 全局样式
```

## 功能特点

### 响应式设计
- 支持桌面端和移动端
- 最大宽度 450px，确保移动端最佳体验
- 自适应布局，在不同屏幕尺寸下都有良好显示

### 多页面支持
- 使用 Vue Router 实现页面路由
- 单页面应用体验
- 保持原有页面设计和功能

### 品牌一致性
- 保持 Purolator 品牌色彩 (#001996)
- 使用原版图片和图标
- 完整的页脚信息和链接

## 开发说明

### 技术栈
- Vue 3 (Composition API)
- Vue Router 4
- Vite (构建工具)
- CSS3 (响应式设计)

### 添加新页面
1. 在 `src/components/` 创建新的 Vue 组件
2. 在 `src/router/index.js` 添加路由配置
3. 确保组件包含 HeaderComponent 和 FooterComponent

### 样式规范
- 使用 scoped CSS 避免样式冲突
- 保持与原版设计一致的颜色和字体
- 确保移动端友好

## 故障排除

### 常见问题
1. **端口占用**: 如果 5173 端口被占用，Vite 会自动选择其他端口
2. **依赖问题**: 删除 `node_modules` 文件夹并重新运行 `npm install`
3. **路由问题**: 确保所有页面组件都已正确导入和注册

### 构建生产版本
```bash
npm run build
```

生产文件将生成在 `dist/` 目录中。

## 更新日志
- 添加了 Vue Router 支持
- 创建了地址更新页面
- 创建了在线支付页面
- 实现了多页面导航
- 支持信用卡支付表单验证
- 保持了原有的设计和功能