生活中，我们经常有直饮水的需求。有的老旧小区本身管网比较旧，自来水的口感不太好，有的是因为经常性的断水断电有送水的需求。
原来送水是通过发送小卡片，或者上门推销。有了公众号这个载体后，市民就可以关注公众号来订水。我们本次的实战教程就是围绕网上订水这个实际的生活需求，利用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 订单详情
列出订单额详细信息，点击再来一单跳转到商城页面
总结
我们本篇使用原型工具分析了订水商城应该具备的功能，先把功能分析好了，画好图纸才能便于后续的施工，否则边做边想一个是容易返工，有时候也浪费了大量的时间。
