说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！
上节回顾：项目总结：vue.js2.5饿了么APP（1）概述+项目准备
一、 星级评分组件
设计实现思路：首先显示是由三组图片组成（全星，半星，空），使用props接收size和score两个参数。计算属性依赖size实现三种大小的样式展现，通过计算score在数组中放入响应的星星状态，使用v-for遍历数组显示评分。
效果：使用图片素材 全星（on） 半星（half） 空（off） 拼接评分效果
1. 使用span绑定starType；v-for遍历itemClasses数组，使用计算属性显示。
<div class="star" :class="starType">
<span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
</div>2. Props接收两个参数：size大小（有三种类型24 36 48）score分数
props: {
size: {
type: Number
},
score: {
type: Number
}
},3. 定义常量length ,cls_on, cls_half, cls_off分别记录评星长度，和星级
定义result数组，通过props中的score拿到分数，计算四舍五入之后的评分，得到hasDecimal是否有半星，integer有多少个全星。
做循环，将全星cls_on放入数组result,如果有半星就放入半星。再循环补上空星。
itemClasses() {
const result = []
const score = Math.floor(this.score * 2) / 2
const hasDecimal = score % 1 !== 0
const integer = Math.floor(score)
for (let i = 0; i < integer; i++) {
result.push(CLS_ON)
}
if (hasDecimal) {
result.push(CLS_HALF)
}
while (result.length < LENGTH) {
result.push(CLS_OFF)
}
return result
}
}4. 使用computed计算属性计算starType（）需要依赖size, 返回‘star’ + this.size，因此可以添加不同的样式star-24 star-36 star-48
.star
display: flex
align-items: center
justify-content: center
.star-item
background-repeat: no-repeat
&.star-48
.star-item
width: 20px
height: 20px
margin-right: 22px
background-size: 20px 20px
&:last-child
margin-right: 0
&.on
bg-image('star48_on')
&.half
bg-image('star48_half')
&.off
bg-image('star48_off')
&.star-36
.star-item
width: 15px
height: 15px
margin-right: 6px
background-size: 15px 15px
&:last-child
margin-right: 0
&.on
bg-image('star36_on')
&.half
bg-image('star36_half')
&.off
bg-image('star36_off')
&.star-24
.star-item
width: 10px
height: 10px
margin-right: 3px
background-size: 10px 10px
&:last-child
margin-right: 0
&.on
bg-image('star24_on')
&.half
bg-image('star24_half')
&.off
bg-image('star24_off')6. 组件的使用
引入组件并注册，即可使用。并且<star>组件接收两个参数score type
<star :size="48" :score="seller.score"></star>二、收藏页面本地缓存
设计思想：首先收藏的效果就是，点击按钮切换图标的显示状态，但是问题是，当再次刷新页面，状态会被重新初始化。由于项目只提供了一个商家的信息，并且不包含id。因此，希望通过url解析出包含id值的一个对象，在每次请求时加上id进行模拟收藏效果。为了实现本地存储，使用了封装了sessionstorage的storage库，提供了set get接口,和直接调用原生api 需要对对象和字符串进行转换相比，使用起来更简单，可以直接对对现象操作。导出两个接口saveLocal和loadLocal，来实现本地缓存。saveload中构造一个复杂对象，第一层是id,它还是一个对象，包含收藏和其他需要存储的项，然后返回该对象。最后的效果就是：点击收藏之后会在localstorage中添加一个__seller__，会显示id，以及favorite的true false。
三、cube-ui组件库
Popup 弹层：底层弹层组件，主要用于基于此组件实现上层组件封装，只提供了基础功能：指定类型、是否有背景层、显示内容（HTML）以及是否居中。
内置所有的弹层类组件都是基于此组件实现，包括：Toast、Picker、TimePicker、Dialog、ActionSheet。
Scroll 滚动：滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。
Slide 幻灯片：轮播图，提供了常见的轮播及swipe的功能，也是一个基于better-scroll进行封装的组件。
IndexList 索引列表：索引列表，提供了列表索引的功能，也是一个基于better-scroll进行封装的组件。
create-api：有些时候，开发者可能也需要自己封装的组件支持 API 式调用，此时可以通过引入 create-api 模块或者通过全局的 Cube.createAPI 接口来达到封装目的。
Dialog：Dialog模态框组件，提供了多种样式及交互形式。
购物车小球下落问题解决： 需要动态计算小球的初始位置。点击按钮时拿到DOM元素，编写小球下落的drop（）方法，遍历小球，拿出购物车隐藏小球第一个为false的小球做动画，再修改小球的下落状态为true。之后计算购物车和点击位置的偏移量。其中使用到了贝塞尔曲线。过程中需要监听几个vue的钩子函数before-enter enter after-enter。
购物车的sticky页面：由于下方购物车组件设置为api组件，层级价高，因此当跳转到支付或详情页面页面上时购物车组件无法显示。解决思路：向body中挂载一个购物车组件，覆盖当前页面的部分，并控制他在合适时机隐藏。
使用better-scroll第三方库，实现页面滚动；之后又用cube-ui的scroll-nav组件重构；其中设置directionLockThreshold:0 保证页面可以左右上下滑动而不会斜着滑动。
正在更新。。。