### 3.1 位置选择与切换模块

*   **列表展示**：页面顶部显示“当前服务区域”（带醒目的红框或特定标签背景），其区域按列表排列在“其他区域”区域。
*   **信息卡片**：每个区域卡片应展示：
    *   区域图标（或Logo）
    *   区域名称（如“菜根服务中心8楼”、“菜根服务中心16楼”）
    *   开放状态（如“已开放”徽章，需根据后台配置动态显示）
    *   地理位置/楼层（如“贵州省贵阳市观山湖区贵州银行总部”、“16楼”）
    *   联系电话（方便用户咨询）
*   **切换操作**：在“其他区域”区域提供**【选这个】**操作按钮。点击后，该区域将变为“当前区域”，且后续的菜品浏览和点单均针对该区域生效。
*   **交互反馈**：点击切换成功后，需有Toast弹窗提示“切换成功”或页面自动刷新。

### 3.2 菜品详情

点击某个菜品后，进入详情页面：

*   **基础信息展示**：
    *   菜品大图（轮播图展示）。
    *   菜品名称（如“沙拉”）。
    *   价格（如“¥21”）。
    *   菜品标签（如“特色菜”、“不辣”，支持多标签）。
*   **库存状态逻辑（核心）**：
    *   **实时库存**：界面需明文显示库存剩余数量（如“仅剩0”）。
    *   **库存为0时的交互控制**：当库存为0时，页面底部的购买按钮必须强制切换状态为**【已售罄】**，并且按钮不可点击（灰色/禁用态），从而避免用户下单失败造成的负面体验。
    *   *建议后台系统支持高并发下的库存扣减，避免超卖。*
*   **配送/自提信息**：
    *   取货方式：可以通过显示为“自提”。
    *   取货日期：明确告知用户取货时间（如“现在下单，06月24日可取货”）。
*   **倒计时系统**：
    *   **截止下单时间**：展示每日下单的截止时间，格式为`时:分:秒`的倒计时（如截图中的“02:13:58”）。
    *   *逻辑要求*：倒计时结束（为0:0:0）时，前端需自动刷新状态，此时即使有库存，也应切换为“已截单/停止接单”状态，切断用户下单通道。
*   **服务关联**：页面需明确展示当前选中的“当前服务区域”，支持点击直接跳回餐厅列表进行切换。
*   菜品规格：需要展示菜品规则，如：（一荤两素，二荤一素等），通过后端可以进行配置，在前端切换不同规格时需要动态显示不同规格下的菜品描述信息
*   **菜品描述**：支持富文本展示菜品的详细配料、过敏原提示等信息。

### 3.4 菜单浏览与日期选择模块
*   **当前餐厅状态栏**：
    *   **快捷切换**：在页面头部固定显示当前选中区域的信息（名称、状态、楼层、电话），并在最右侧设置橙色背景的**【切换餐厅】**按钮。
    *   **交互逻辑**：点击【切换区域】按钮，直接跳转至“选择服务区域”列表页面，实现闭环操作。
*   **多日期用餐选择（核心新增）**：
    *   **功能**：顶部提供周一到周日的选择，如：“周三（今天）”、“周四（明天）”、“周五（后天）”三个日期选项。已过日期置灰不可用。
    *   **数据联动**：**选中的日期不同，下方显示的菜单列表、菜品库存、以及截单倒计时都必须同步刷新。**（例如：今天截单倒计时剩2小时，切换到明天可能显示还有23小时）。
    *   后台配置：后台可针对早餐，午餐，晚餐设置截止时间点
*   **菜单列表卡片展示**：
    *   **信息排布**：采用图文列表布局。左侧为菜品图片，右侧区域分别展示：菜品名称、多标签（如“特色菜”、“不辣”）、价格，以及库存状态。
    *   **库存与操作按钮**：
        *   如果剩余库存不足时，右侧底部为**【售罄】**标识。
        *   **视觉逻辑**：当库存为0时，不仅按钮显示灰色“售罄”状态，**菜品图片上还需打上斜向的“已售罄”红色水印印章**，以极度强化的视觉提示阻断用户无效点击。

---

## 5. 完整的交互业务流程图

梳理出完整的用户操作链路：

1.  **访问订餐页**：看到当前内容不变，如果**未登录**，底部横幅提示“去登录”。
2.  **登录验证**：点击【去登录】-> 进入登录页 -> 登录成功，回到首页，横幅消失。
3.  点击“去订餐”或“个人订餐”等，跳转到菜品列表页面
4.  **日期选择**：在首页顶部选择可订时间，确定订餐日期。
5.  **浏览与切换区域**：
    *   *在订餐页点击【切换区域】，进入“选择服务区域”页面，点击【选这个】切换目标区域后，自动返回首页刷新该菜单。
6.  **查看详情与下单**：
    *   点击某个菜品卡片，进入“菜品详情”页。
    *   观察倒计时及库存。若有库存且未截单，点击购买；若库存为0（显示仅剩0或显示已售罄印章），则按钮置灰无法点击。
7.  **完成结算**：选择好菜品后，去结算，完成自助订餐。

