3.2 核心业务模块 - 机票

3.2 核心业务模块 - 机票

机票业务包含以下功能：

• 航班首页搜索
• 航班结果页
• 航班预订

3.2.1 航班首页搜索 (Flight Homepage Search)

1. 功能概述 (Feature Overview)

本功能是用户发起机票查询流程的主入口,位于机票业务的首页。它提供了一个简洁、高效的表单,旨在快速捕获用户的核心出行意图,包括行程类型、地点和日期,并将用户引导至包含详细航班信息的搜索结果页面。

2. 优先级 (Priority)

• MoSCoW 评级: Must Have

3. 用户故事 (User Stories)

• US-01 [Must Have]: 作为一个有初步出行计划的用户,我希望能在首页清晰地看到并填写我的出发地、目的地和日期,以便快速启动航班搜索。

• US-02 [Should Have]: 作为一个经常查询相似航线的用户,我希望首页能显示我的历史搜索记录,以便我能一键重新发起搜索,无需重复输入。

4. 验收标准 (Acceptance Criteria)

场景1: 用户成功发起一次单程搜索 (Happy Path)

• Given 用户位于机票首页
• When 用户选择了"单程",并输入了有效的出发地、目的地和未来的出发日期,然后点击"搜索"按钮
• Then 浏览器应跳转到航班结果页
• And 结果页的URL应包含用户输入的查询参数(如?tripType=one-way&from=SHA&to=BJS&date=2025-10-18)

场景2: 行程类型切换时UI正确响应

• Given 用户位于机票首页
• When 用户从"单程"切换到"往返"
• Then "返程日期"的输入框应变为可用状态
• And 当用户再切换回"单程"时,"返程日期"输入框应被禁用或隐藏

场景3: 用户输入无效信息并尝试搜索

• Given 用户位于机票首页
• When 用户未填写"出发地"就点击"搜索"按钮
• Then 系统应在"出发地"输入框旁给出错误提示,并且不发生页面跳转

场景4: 用户使用历史记录快速搜索 [Should Have]

• Given 用户之前搜索过"上海"到"北京"的航班
• When 用户在机票首页的历史记录区域点击"上海-北京"这一项
• Then 浏览器应跳转到航班结果页
• And 结果页的URL应包含历史记录中的查询参数(如?tripType=one-way&from=SHA&to=BJS&date=2025-10-18)

场景5: 用户清除搜索历史记录 [Should Have]

• Given 用户之前搜索过"上海"到"北京"的航班
• When 用户在机票首页的历史记录区域点击清除搜索历史按钮
• Then 直接清除用户的所有机票搜索记录

5. UI与交互设计简述 (UI/UX Notes)

• 所需UI元素:

  • 行程类型Tabs: "单程"、"往返"单选切换
  • 地点输入框: "出发地"、"目的地"输入框,应支持模糊匹配和机场代码(SHA)提示
  • 交换按钮: 位于出发地和目的地输入框之间,用于快速交换两地
  • 日期选择器: "出发日期"、"返程日期"的日历选择组件，中间显示时间长度“x天”
  • 乘客类型 [Could Have]: "儿童"、"婴儿"的复选框
  • 搜索按钮: 一个醒目的"搜索"按钮
  • 搜索历史 [Should Have]: 在搜索框下方,以列表或卡片形式展示最近的4条搜索记录
  • 清除搜索历史按钮 [Should Have]：在搜索框下方，搜索历史卡片上方，点击按钮清除搜索历史记录

• 关键交互:

  • 地点输入框支持国内/国际及中国港澳台的切换
  • 地点按照热门+首字母顺序进行展示
  • [Could Have] 允许用户输入文本模糊搜索目的地
  • 行程类型切换时,返程日期输入框的可用状态应实时响应
  • 点击历史搜索记录可直接搜索

---

3.2.2 航班结果页 (Flight Results Page)

1. 功能概述 (Feature Overview)

本页面是机票业务的核心，它向用户展示所有符合其初始搜索条件的航班列表。页面顶部保留了搜索栏供用户随时修改查询，同时提供了强大的筛选和排序工具集，帮助用户在众多选项中快速、精准地定位到目标航班，并最终通过"预订"按钮进入订单流程。

2. 优先级 (Priority)

• MoSCoW 评级: Must Have(结果列表展示高级筛选、排序) / Should Have(数据新鲜度提示)

3. 用户故事 (User Stories)

• US-01: 作为一个完成了机票搜索的用户,我希望能在一个清晰的列表上看到所有可用的航班及其关键信息(价格、时间、航司),以便我能开始比较和选择。
• US-02: 作为一个面对海量航班结果的用户,我希望能通过多种条件(如只看直飞、特定航司、起飞时段)进行筛选,以便快速剔除不符合我要求的选项。
• US-03: 作为一个有明确偏好(如价格最低或时间最早)的用户,我希望能一键对所有结果进行排序,以便让最符合我心意的航班排在最前面。
• US-04: 作为一个出行日期比较灵活的用户,我希望能方便地看到邻近几天的最低票价,以便找到最便宜的出行日期。
• US-05: 作为一个希望获得准确信息的用户,我希望在我长时间未刷新页面时，系统能提示我当前价格可能已过时,以便我能主动刷新，避免基于旧信息做决策。

4. 验收标准 (Acceptance Criteria)

场景1: 页面成功加载并展示默认结果

• Given 用户从首页成功发起了一次航班搜索
• When 航班结果页加载完成
• Then 页面顶部的搜索框应预先填入用户刚刚的搜索条件
• And 页面应以列表形式展示所有匹配的航班
• And 列表应按默认排序规则(例如"低价优先")进行排序

场景2: 用户使用筛选条件并实时更新列表

• Given 当前列表页展示了50个航班结果
• When 用户在筛选栏中勾选了"中国国际航空"
• Then 航班列表应立刻(或在短暂加载后)更新,仅显示国航的航班

场景3: 用户改变列表排序方式

• Given 当前航班列表按"低价优先"排序
• When 用户点击排序栏中的"起飞时间 从早到晚"
• Then 航班列表应立刻重新排序,将起飞最早的航班展示在最顶部

场景4: 用户查看邻近日期价格并发起新搜索

• Given 页面上展示了邻近7天的价格条
• When 用户点击了与当前搜索日期不同的一天(例如"10-19 周日 ¥500")
• Then 页面应使用新的日期重新发起搜索并刷新整个结果列表

场景5: 用户点击"预订"按钮进入下一流程

• Given 用户在航班列表中找到了一个满意的航班
• When 用户点击该航班卡片右侧的"预订"按钮
• Then 系统应将用户导航至"航班预订(订单填写)"页面
• And 所选航班的信息(如航班号、日期、价格)应被传递到预订页面

场景6: 提示数据过时 [Should Have]

• Given 用户停留在航班结果页，且未进行任何操作
• When 距离上次数据加载的时间超过了预设阈值（例如 5 分钟）
• Then 页面上应出现一个明显的提示（如弹窗或顶部横幅），内容为“价格和库存可能已发生变化，建议您刷新查看最新信息”
• And 该提示中应包含一个“立即刷新”的按钮，点击后会重新执行当前条件的搜索

5. UI与交互设计简述 (UI/UX Notes)

• 所需UI元素:
  • 顶部搜索栏(与首页搜索组件一致,用于修改搜索条件)
  • 邻近日期价格条(横向滚动区域,展示前后各3天的最低票价)
  • 搜索条件概要，一段文本，例如“单程：上海青岛10月22日周三”
  • 筛选控制区(直飞/经停、航空公司、起抵时间、机场等多选或下拉菜单)
  • 排序控制区(低价优先、准点率高-低、起飞时间早-晚等排序选项)
  • 航班卡片列表(包含航司Logo、航司名称、航班号、机型、起抵时间、机场航站楼、价格、舱位标签、橙色"订票"按钮)
  • [Should Have] 最近更新时间: HH:MM:SS和用于提示数据过时的弹窗（Modal）
• 关键交互:
  • 临近日期指的是从用户选择的日期-3/-2/-1/0/+1/+2/+3这7天，如果用户选择日期到今天不足3天，则自动顺延。
  • 点击邻近日期价格条中的某一天时使用新日期重新发起搜索
  • 点击"预订"按钮时跳转至订单相关页面并传递航班唯一ID或关键信息

---

3.2.3 航班预订 (Flight Booking)

1. 功能概述 (Feature Overview)

本功能通过一个标准化的四步向导流程，引导用户在选定航班后最终完成预订。流程包括：1. 填写乘机与联系人信息；2. （模拟）选择增值服务；3. 完成支付；4. 查看预订成功确认。整个过程旨在提供清晰、流畅、无差错的订单生成体验。

2. 优先级 (Priority)

• MoSCoW 评级: Must Have (整个流程的UI骨架和核心逻辑) / Could Have (增值服务的具体选项)

3. 用户故事 (User Stories)

• US-01: 作为一个准备预订机票的用户，我希望能在一个清晰的表单上填写所有乘机人的信息，并提供一个联系方式，以便完成机票的预订。
• US-02: 作为一个拥有常用旅客列表的用户，我希望能通过勾选的方式快速选择乘机人，以便避免重复输入，减少出错的可能性。
• US-03: 作为一个即将提交订单的用户，我希望能清晰地看到包含税费在内的最终价格明细，以便在付款前对总费用有明确的了解。
• US-04: 作为一个用户，我希望有一个引导清晰的分步流程来完成预订，以便我能专注于每一步的操作，降低出错的概率。

4. 验收标准 (Acceptance Criteria)

场景1: 用户成功走完四步预订流程 (Happy Path)

• Given 用户从结果页选定航班并进入预订流程第一步
• When 用户在第一步填写了所有有效的乘机人信息并点击"下一步"
• Then 系统应暂存信息并导航至第二步（增值服务页）
• And 当用户在第二步点击"下一步"
• Then 系统应创建状态为"待支付"的订单，并导航至第三步（支付页）
• And 当用户在第三步成功完成（模拟）支付
• Then 系统应更新订单状态为"已支付"，并导航至第四步（成功页）
• And 成功页应显示"预订成功"和订单号，并提供一个"查看订单"的按钮

场景2: 提交乘机人信息时校验失败

• Given 用户位于预订流程第一步
• When 用户未填写某位乘机人的必填项（如证件号），并尝试点击"下一步"
• Then 系统应高亮显示错误字段并给出提示，阻止用户进入下一步

场景3: 支付页面倒计时结束

• Given 用户已进入第三步（支付页），支付倒计时开始
• When 用户在倒计时结束前未完成支付
• Then 页面应提示"订单已超时取消"
• And 对应订单的状态应在后台更新为"已取消"

场景4: 使用常用旅客快速填写

• Given 用户位于预订流程第一步，且已有常用旅客记录
• When 用户勾选某个常用旅客
• Then 系统应自动填充该旅客的姓名、证件类型、证件号码等信息

5. UI与交互设计简述 (UI/UX Notes)

• 所需UI元素:

  • 顶部步骤指示器（①填写信息 -> ②增值服务 -> ③支付 -> ④完成）
  • 第一步：常用旅客选择区（Checkbox列表）、乘机人信息表单、联系人信息表单、"+ 新增乘机人"按钮
  • 右侧侧边栏：航班信息卡片、价格明细（票价、机建燃油、总价）
  • 第二步：增值服务手风琴/卡片列表（航空意外险、延误险、接送机等）
  • 第三步：订单总金额显示、支付倒计时、订单摘要、支付方式选择（平台余额）、"确认支付"按钮
  • 第四步：成功图标、"预订成功"标题、订单号、航班摘要、"查看订单详情"按钮、"返回首页"链接

• 关键交互:

  • 第一步点击"下一步"：前端校验表单，暂存数据，跳转至第二步
  • 第二步点击"下一步"：创建待支付订单，跳转至第三步
  • 第三步点击"确认支付"：更新订单状态，跳转至第四步
  • 支付倒计时结束：自动取消订单并提示用户
  • 勾选常用旅客：自动填充对应表单字段
  • 点击"+ 新增乘机人"：动态增加一个空表单