订水商城H5实战教程-01需求分析

2023-10-20 20:52
文章标签 分析 实战 教程 01 商城 需求 h5 订水

本文主要是介绍订水商城H5实战教程-01需求分析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 1 用户分析
  • 2 模块分析
  • 3 原型设计
    • 3.1 首页
    • 3.2 商城
    • 3.3 一键订购
    • 3.4 我的
    • 3.5 确认订单
    • 3.6 地址管理
    • 3.7 编辑地址
    • 3.8 搜索
    • 3.9 搜索结果
    • 3.10 充值
    • 3.11 我的订单
    • 3.12 开票信息
    • 3.13 优惠券
    • 3.14 我的空桶
    • 3.15 商品详情
    • 3.16 购物车
    • 3.17 门店信息
    • 3.18 订单详情
  • 总结

生活中，我们经常有直饮水的需求。有的老旧小区本身管网比较旧，自来水的口感不太好，有的是因为经常性的断水断电有送水的需求。

原来送水是通过发送小卡片，或者上门推销。有了公众号这个载体后，市民就可以关注公众号来订水。我们本次的实战教程就是围绕网上订水这个实际的生活需求，利用H5的技术来开发一款在线订水工具。既方便市民，也方便送水企业提高营销水平和工作效率。

1 用户分析

我们的订水商城，分为三类角色，分别是市民、企业、送水工

市民登录后可以在线的下单，支付，评价。

企业登录后，可以维护类目，商品，确认订单，选择送水工

送水工可以在线接单，按照目的地和订单内容进行配送。

2 模块分析

我们的商城功能总体分为类目管理、商品管理、订单管理、发票管理、送水工管理、店铺管理、用户管理等几个模块

类目管理由管理员进行维护，可以维护类目的名称和序号。

商品管理由管理员进行维护，可以维护商品的基本信息，包括商品的轮播图、名称、单价、详情、状态等

订单管理，普通用户在移动端完成商品的选购、支付，支付成功后形成订单。管理员可以查看订单信息，选择送水工进行派送。送水完毕后，普通用户可以进行评价

发票管理，普通用户可以提交自己的开票信息，可以在订单上申请开票。管理员在收到开票申请后进行审核，审核通过后将电子发票上传，通过邮箱的形式发送给用户。

送水工管理，管理员可以录入送水工的信息，在派单的时候可以选择人员。

店铺管理，管理员可以维护店铺的基本信息，普通用户可以进行查看。

用户管理，用户首次使用的时候需要进行登录，录入基本信息。

3 原型设计

依据我们的需求，使用原型工具来设计界面

3.1 首页

在这里插入图片描述
首页分成几个部分

  • 第一部分是轮播图，主要是广告，点击广告的时候可以打开公众号的宣传文章
  • 跑马灯主要是一些推荐活动
  • 宫格导航，列出了重要的分类信息，点击分类可以跳转到商城页面，默认选择该分类
  • 热销商品以双列的形式列出热销商品，点击加号可以加入购物车，点击更多跳转到商城页面
  • 底部导航条，列出主要的模块，包括首页、商城、一键订购、我的

3.2 商城

在这里插入图片描述

  • 商城页面以侧边栏导航的形式列出所有的分类，点击分类的时候可以切换
  • 点击某个分类右侧显示该分类的商品，列出商品的图片、名称、价格，点击加号可以加入购物车
  • 优惠的话，点击更多可以跳转到优惠券页面
  • 空桶的话，点击购买可以跳转到空桶列表页面
  • 底部是购物车的功能条，如果点击加号，购物车会出现具体的数字，同时计算总价，点击去结算按钮跳转到确认订单页

3.3 一键订购

在这里插入图片描述

  • 我的水票列出当前可以使用的水票信息，显示可以用的数量，已使用的数量。点击一键订水进入到订单确认页面

3.4 我的

在这里插入图片描述

  • 第一部分显示用户的头像、昵称，点击分享图标可以分享给别人
  • 第二部分列出当前可以使用的水票，点击电子水票打开一键订购页面，看到具体的列表
  • 第三部分列出当前空桶的信息，点击我的空桶进入到具体的页面
  • 点击优惠券进入到优惠券列表页面
  • 第四部分显示用户的余额，点击充值跳转到充值页面
  • 我的订单，列出每种状态下订单的数量，点击状态的名称跳转到我的订单页面
  • 我的信息相当于模块导航，点击某个模块跳转到对应的页面
  • 商户信息列出当前店铺的具体信息

3.5 确认订单

在这里插入图片描述
凡是从购物车页面点击去结算按钮，跳转到该页面，列出选购的商品，显示配送地址，可以在线留言，选择支付方式，选好之后点击去下单。

  • 如果选择线上支付，拉起微信支付
  • 如果选择货到付款，需要送水工最终完成订单
  • 如果选择余额支付，要扣除当前用户的余额，扣除时要计算余额是否充足

3.6 地址管理

在这里插入图片描述

  • 列出当前用户的地址
  • 点击开关按钮可以设置地址为默认地址
  • 点击新增地址跳转到编辑地址页面

3.7 编辑地址

在这里插入图片描述
录入地址的基本信息，点击保存地址跳转到列表页面

3.8 搜索

在这里插入图片描述

  • 首页上点击搜索图标进入该页面
  • 在搜索框里输入关键词进入到搜索结果页面
  • 热门搜索列出常见的搜索词，点击搜索词进入到搜索结果页
  • 历史搜索显示历史输入过的搜索词，点击删除图标清空搜索词

3.9 搜索结果

在这里插入图片描述

  • 以双列的形式展现搜索结果
  • 点击加号加入购物车
  • 底部的购物车功能条，显示商品数量、总价
  • 点击去结算进入到订单确认页面

3.10 充值

在这里插入图片描述

输入充值金额，点击购买累加金额

3.11 我的订单

在这里插入图片描述
以页签的形式列出该状态下的订单信息

3.12 开票信息

在这里插入图片描述
录入开票的基本信息

3.13 优惠券

在这里插入图片描述
列出可以使用的优惠券

3.14 我的空桶

在这里插入图片描述
列出购买的空桶，点击退桶提交申请

3.15 商品详情

在这里插入图片描述
展示商品的详情信息，可以选择购买的数量，点击去结算进入到订单确认页面

3.16 购物车

在这里插入图片描述
点击购物车的图标弹出购物车列表，可以调整数量，点击清空按钮清空购物车，点击去结算跳转到订单确认页面

3.17 门店信息

在这里插入图片描述
在首页点击店铺的名称，跳转到店铺信息页面

3.18 订单详情

在这里插入图片描述
列出订单额详细信息，点击再来一单跳转到商城页面

总结

我们本篇使用原型工具分析了订水商城应该具备的功能，先把功能分析好了，画好图纸才能便于后续的施工，否则边做边想一个是容易返工，有时候也浪费了大量的时间。

这篇关于订水商城H5实战教程-01需求分析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/249666。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
hdu 2602 and poj 3624(01背包)

hdu 2602 and poj 3624(01背包)

01背包的模板题。 hdu2602代码： #include<stdio.h>#include<string.h>const int MaxN = 1001;int max(int a, int b){return a > b ? a : b;}int w[MaxN];int v[MaxN];int dp[MaxN];int main(){int T;int N, V;s
阅读更多...
滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE啦，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好习惯，别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏，专业攻坚指数级提升，助你一臂之力，带你早日登顶🚀，欢迎大家关注&&收藏！持续更新中，up！up！up！！ 环境说明：Windows 10
阅读更多...
SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型，它综合考虑了土壤-水分-大气以及植被间的相互作用；是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程，使其能够精确的模拟土壤中水分的运动，而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者
阅读更多...
MOLE 2.5 分析分子通道和孔隙

MOLE 2.5 分析分子通道和孔隙

软件介绍 生物大分子通道和孔隙在生物学中发挥着重要作用，例如在分子识别和酶底物特异性方面。 我们介绍了一种名为 MOLE 2.5 的高级软件工具，该工具旨在分析分子通道和孔隙。 与其他可用软件工具的基准测试表明，MOLE 2.5 相比更快、更强大、功能更丰富。作为一项新功能，MOLE 2.5 可以估算已识别通道的物理化学性质。 软件下载 https://pan.quark.cn/s/57
阅读更多...
衡石分析平台使用手册-单机安装及启动

衡石分析平台使用手册-单机安装及启动

单机安装及启动​ 本文讲述如何在单机环境下进行 HENGSHI SENSE 安装的操作过程。 在安装前请确认网络环境，如果是隔离环境，无法连接互联网时，请先按照 离线环境安装依赖的指导进行依赖包的安装，然后按照本文的指导继续操作。如果网络环境可以连接互联网，请直接按照本文的指导进行安装。 准备工作​ 请参考安装环境文档准备安装环境。 配置用户与安装目录。 在操作前请检查您是否有 sud
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2