# 旅游

**Repository Path**: jiayouyc/travel

## Basic Information

- **Project Name**: 旅游
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-30
- **Last Updated**: 2025-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拍拍旅宿 - 酒店预订系统

这是一个基于React和TypeScript的酒店预订系统前端项目，模仿"拍拍旅宿"网站的功能和界面。

## 主要功能

1. **首页展示** - 展示热门酒店和搜索功能
2. **酒店搜索和筛选** - 支持按地点、日期、价格等条件筛选
3. **酒店详情** - 查看酒店的详细信息、房型和评价
4. **预订系统** - 完整的酒店房间预订流程
5. **订单管理** - 查看、取消和管理订单
6. **个人中心** - 管理个人信息、常用联系人、收藏等
7. **优惠券管理** - 管理和使用优惠券

## 技术栈

- React 18
- TypeScript
- React Router Dom
- Ant Design 组件库
- Styled Components
- Axios 用于API请求
- Moment.js 用于日期处理

## 项目结构

```
reservation/
├── public/              # 静态文件
├── src/                 # 源代码
│   ├── api/             # API 请求
│   ├── assets/          # 图片、字体等资源
│   ├── components/      # 可复用组件
│   ├── pages/           # 页面组件
│   ├── router/          # 路由配置
│   ├── store/           # 状态管理
│   ├── styles/          # 全局样式
│   ├── types/           # TypeScript 类型定义
│   ├── utils/           # 工具函数
│   ├── App.tsx          # 根组件
│   └── index.tsx        # 入口文件
└── package.json         # 项目依赖
```

## 安装和运行

```bash
# 安装依赖
npm install

# 本地开发运行
npm start

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

## 测试账号

由于这是前端演示项目，登录功能是模拟的，您可以使用任意用户名和密码进行登录，或者点击"立即体验"按钮快速登录。

示例账号：
- 用户名: admin
- 密码: 123456

登录后，您可以访问需要登录的功能，比如"个人中心"、"订单"、"收藏"等页面。

## 主要页面和功能

1. **首页**
   - 酒店搜索(目的地、入住/退房日期、房客数)
   - 特色城市展示
   - 热门酒店推荐(精选推荐、热门酒店、特价优惠)

2. **酒店列表页**
   - 搜索结果展示
   - 多维度筛选(位置、价格、星级、设施等)
   - 排序功能(价格、好评、距离)

3. **酒店详情页**
   - 酒店基本信息(地址、设施、评分)
   - 房型展示与价格
   - 用户评价
   - 位置地图

4. **订单页**
   - 填写预订信息
   - 选择入住人信息
   - 添加特殊要求
   - 使用优惠券

5. **支付页**
   - 订单信息确认
   - 支付方式选择
   - 费用明细

6. **个人中心**
   - 订单管理(全部订单、未出行、待支付、待点评)
   - 个人资料管理
   - 常用联系人管理
   - 优惠券管理
   - 收藏的酒店

## 特色功能

1. **模拟数据** - 项目使用模拟数据展示各种功能，无需真实后端
2. **响应式设计** - 适配不同屏幕尺寸
3. **完整的登录流程** - 包括登录验证和权限控制
4. **丰富的UI组件** - 基于Ant Design实现美观的用户界面
5. **TypeScript类型检查** - 提供更好的代码质量和开发体验

## 注意事项

1. 由于这是一个前端演示项目，所有数据都是模拟的，不会真正发送到后端服务器。
2. 登录、注册、预订等功能都是模拟的，不会真正创建账号或预订。
3. 个人中心显示的是模拟数据，修改后的信息会在当前会话中保存，但刷新页面后会重置。
4. 退出登录后，需要重新登录才能访问需要登录的页面。

## 浏览器兼容性

- Chrome (推荐)
- Firefox
- Edge
- Safari

## 功能截图

### 首页
首页提供酒店搜索和热门推荐，用户可以快速找到心仪的酒店。

### 酒店列表
展示符合条件的酒店列表，支持多种筛选方式，帮助用户找到最合适的选择。

### 酒店详情
详细展示酒店信息，包括房型、设施、评价等，方便用户做出预订决策。

### 个人中心
用户可以在个人中心管理订单、常用联系人、优惠券和收藏的酒店，提供完整的用户体验。

### 登录/注册
简洁的登录界面，支持账号密码登录和快速体验入口。

## 贡献和问题

本项目为学习和演示目的开发，如有问题请提交Issue。