任务一 点餐 APP 项目概述
一、任务目标
通过查看点餐 APP 的目标效果,认识账号、门店、商品、购物车、订单和个人中心等主要功能,能够说明一次点餐的操作流程及各功能的页面入口。
二、认识项目与操作流程
点餐 APP Food 面向顾客,提供账号登录、商品浏览、下单支付、订单查看和个人资料管理功能。
一次点餐的主要操作流程如下:
登录账号后,选择门店并浏览商品;将商品加入购物车,核对数量和金额后创建订单;选择支付方式并提交,最后在订单列表中查看最新状态。没有账号时,先注册再登录。
登录后可通过底部导航切换“点餐”“订单”和“我”三个主要页面:
| 导航项 | 对应页面 | 主要作用 |
|---|---|---|
| 点餐 | 门店列表页 | 选择门店,进入商品页进行点餐 |
| 订单 | 订单列表页 | 查看当前账号的订单,进入订单详情页 |
| 我 | 个人中心页 | 查看和修改个人资料,退出登录 |
三、查看主要页面的效果
1. 账号与个人中心
登录页用于填写用户名和密码。没有账号时,可进入注册页;注册成功后返回登录页并回填用户名。在“我”页面可查看和修改头像、用户名,也可退出登录。“优惠券”“地址管理”和“关于”目前只显示入口。
2. 门店浏览与订单查看
“点餐”页显示门店图片、名称、距离和营业状态。进入门店后,商品页按分类展示商品;点击分类或滚动列表,分类选中状态会随之变化。“订单”页显示当前账号的订单及其状态,点击订单可进入详情页。
3. 购物车与订单详情
加入商品后,购物车栏显示总件数和总金额,展开明细可调整数量或清空购物车。点击“去结算”创建订单后,详情页显示订单状态、门店、商品明细和金额;待支付订单还显示支付入口与演示用倒计时。
4. 支付方式选择
点击“去支付”后,从微信支付、支付宝和银联支付中选择一种方式并确认。未选择时会显示提示,点击“取消”则关闭弹窗;支付成功后重新读取订单状态。本项目通过支付请求练习订单状态更新,不接入真实支付渠道。
任务小结
本任务认识了点餐 APP 的主要页面和操作流程:登录后浏览门店与商品、加入购物车、创建并支付订单,随后可在订单页查看状态,在个人中心管理资料。