任务一 点餐 APP 项目概述

一、任务目标

通过查看点餐 APP 的目标效果,认识账号、门店、商品、购物车、订单和个人中心等主要功能,能够说明一次点餐的操作流程及各功能的页面入口。

二、认识项目与操作流程

点餐 APP Food 面向顾客,提供账号登录、商品浏览、下单支付、订单查看和个人资料管理功能。

一次点餐的主要操作流程如下:

登录账号后,选择门店并浏览商品;将商品加入购物车,核对数量和金额后创建订单;选择支付方式并提交,最后在订单列表中查看最新状态。没有账号时,先注册再登录。

登录后可通过底部导航切换“点餐”“订单”和“我”三个主要页面:

导航项对应页面主要作用
点餐门店列表页选择门店,进入商品页进行点餐
订单订单列表页查看当前账号的订单,进入订单详情页
我个人中心页查看和修改个人资料,退出登录

三、查看主要页面的效果

1. 账号与个人中心

登录页用于填写用户名和密码。没有账号时,可进入注册页;注册成功后返回登录页并回填用户名。在“我”页面可查看和修改头像、用户名,也可退出登录。“优惠券”“地址管理”和“关于”目前只显示入口。

注册页面
个人中心页面

2. 门店浏览与订单查看

“点餐”页显示门店图片、名称、距离和营业状态。进入门店后,商品页按分类展示商品;点击分类或滚动列表,分类选中状态会随之变化。“订单”页显示当前账号的订单及其状态,点击订单可进入详情页。

门店列表页面
订单列表页面

3. 购物车与订单详情

加入商品后,购物车栏显示总件数和总金额,展开明细可调整数量或清空购物车。点击“去结算”创建订单后,详情页显示订单状态、门店、商品明细和金额;待支付订单还显示支付入口与演示用倒计时。

购物车明细面板
待支付订单详情

4. 支付方式选择

点击“去支付”后,从微信支付、支付宝和银联支付中选择一种方式并确认。未选择时会显示提示,点击“取消”则关闭弹窗;支付成功后重新读取订单状态。本项目通过支付请求练习订单状态更新,不接入真实支付渠道。

支付方式选择对话框

任务小结

本任务认识了点餐 APP 的主要页面和操作流程:登录后浏览门店与商品、加入购物车、创建并支付订单,随后可在订单页查看状态,在个人中心管理资料。