vue.js开发外卖App项目的内容总结(四)

需求分析

1.从页面来分，分为头部和内容区。其中头部包括展示的那部分和一个浮层。内容区包括评价页，商品页和商家详情页。
2.项目所做的是SPA单页面应用，所以切换子页面时，不会去刷新整个页面。
3.对于头部，当我们点击公告和上面的数字时，需要展示黑色浮层(最后一张图片)，浮层上有关闭按钮，点击按钮，浮层关闭。

4.对于内容区，最复杂的是商品页，商品页拆分为左右两栏，左侧是商品的分类，右侧是商品的实际列表。当实际商品的展示区是哪个分类时，对应左侧的分类高亮显示。当左右两侧内容超过可视区域时，两边都可以滚动。注意：当滚动右侧内容区，左侧对应的列表也要保持联动的效果。当右侧快速滚动时，左侧也要保持联动的效果。这样实现一个外卖app的体验。(将这个滚动当做一个技术难点)
5.页面底部是一个购物车，当我们点击加号，即购买某个商品时候，购物车会自动，联动购买的商品总数和金额这两部分。当金额超过最小配送费(比如20元起送)时，右下角展示区结算的按钮，可以点击该按钮进行结算。当购物车数量为0时，点击购物车没反应，当购物车数量不为0时，点击购物车时，会显示购物车列表。再点击购物车，该列表会隐藏。其中购物车列表也有最大高度，超过最大高度时，内部也可以滚动。在购物车列表内部，也可以完成购买流程，其中在内部点击按钮改变商品数量时，内容页的也会有联动的效果。

当我们点击某个具体的商品时，会展示该商品详情页的一个浮层。该页面有一个与手机屏幕自适应的宽和高相同的大图。接着是商品的一些介绍，然后我们点击加入购物车按钮，一样可以完成购买流程，该数据也是和购物车做联动的。底下是一个评论区，我们可以条件查看。当整个浮层页