uni-app + uView 实战练习：社区团购商城（二）

接下来就是照着一个成熟的应用ui借鉴（chao）一下，毕竟我们是练手，又不会自己做设计，对吧。
干活之前得理清头绪，分步骤进行。

分析页面功能

我们看看有哪些模块，首先看底部导航，有4个，分别是：
推荐，分类，购物车，我的。
然后继续拆分，每个导航对应的页面又有哪些模块。

首页：限时活动，新手区，产品列表展示
分类：分类名称，产品列表展示
购物车： 购物车产品增删改，计算价格
我的： 订单，收藏，设置，客服，帮助，优惠券
二级页面：产品详情，订单列表，结算页面，支付提示，收藏列表，帮助中心

找到需要的组件

限时活动，新手区，可以用scrollview实现，
产品列表可以用瀑布流组件
分类有个现成的模板
个人中心的，订单，设置，优惠券也都有模板，客服，帮助用几个小组件组合即可
收藏可以用产品列表一样的瀑布流， 产品详情用基础组件拼装即可，底部购买按钮组也有模板
那么就只剩下购物车需要自定义了。

组装

接下来就是组装工作，图片资源先不管它，用u-image组件占个位再说

自定义

下面我们来自己写一个购物车组件
功能点如下：

1. 点击添加购物车->提示添加成功
2. 进入购物车可查看添加的商品
3. 在购物车中可以加减商品数量并计算总价。
   实现方式：
   由于整个应用中都需要同步购物车状态，所以通过vue的store来进行保存

完善资源图片

下面来填充一点素材，让这个应用看起来像个真的。

ok，前端静态部分就差不多完成了。接下来是交互逻辑与后台绑定。