111 lines
3.0 KiB
Markdown
111 lines
3.0 KiB
Markdown
# 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 支持
|
||
- 创建了地址更新页面
|
||
- 创建了在线支付页面
|
||
- 实现了多页面导航
|
||
- 支持信用卡支付表单验证
|
||
- 保持了原有的设计和功能 |