开发接近一个月，对自己预期来说，开发时间比较长。想找个时间好好梳理一下，时间都去哪儿啦？

第一个星期是完成好了，主页和预热页的切图还有架构的，主页的弹窗会比较多，在弹窗这一块时间耗费起码有一天，还是自己效率太低了，下次应该用时间管理吧，时间段做了什么事情记录下来。

第二块耗费时间的地方应该是购物车，同一商品不同类型的购物车，让我有点头痛，在前期没有请教同事的时候，尝试了N种，均不太适用，后面求助同事后，任然觉得不是最优方案，继续探索了一晚上，以有漏洞告终，最后采用了同事的对象法，放弃数组法。

第三块耗费时间的地方是礼包的返利券。需求和一开始我get的有出入。当我已经按照当初的方案写好了。后期让我改的时候，脑子已经被以前的方案占满了，跳不出来去思考这种应该怎么做，思想被局限住了。第一种方案是，没买礼包前，4个礼包只有报销金和返利券可以点开查看规则，右上角有问号样式。重值礼包后，4个礼包右上角都有红点，只要没领取，红点就一直存在，并且返利券一直在动。后面换成的方案是，冲值礼包后，4个礼包右上角红点，当第一次点击后红点小时，返利券有4个冲值档位，如果没有充值完，就会有动画。我的难点在于，阅点和阅读券都OK，应该有后端的接口，可以在接口请求成功的时候，让红点消失，但报销金和返利券就很尴尬，不能判断用户什么时候是第一次点击。刚开始的解决办法是在本地浏览器存 window.localStorage.setItem('bxCLick', 1);当点击了报销金，就 window.localStorage.setItem('bxCLick', 2);来判断用户是不是点击了报销金。返利券对于这种方法不太适用，用于控制的变量太多了。就把时间一直用在想，返利券的效果怎么实现。最后解决方案是后端给了一个接口，用来记录用户有没有点，这样就超级方便，万事大吉了！（沟通太重要了）

这次活动虽然事故频发，但是收货颇丰。

1、明白了做事情之前要想好方案再动手，不然很浪费时间，购物车就是一个很好的教训

2、技术水平还有很大的成长空间，仍需努力

3、合理计划时间，对时间有一个模块化的划分

4、做事情要细心、不要用到的变量名及时删掉

5、尽量用一个变量去控制一个状态，当一个变量名无法控制时，建议写在一个计算属性中

附录：

1、帧动画：用的CSS3的translate3d性能加速实现的。代码如下：

//html
<div class="sprite3-wp">
    <div class="sprite3"></div>
</div>

//精灵图一共只有3帧

//css
.sprite3-wp{
  width:remit(570);
  height:remit(420);
  overflow: hidden;
  position: absolute;
  bottom: remit(228);
  left: remit(168);
}

.sprite3{
  width:remit(1710);
  height:remit(420);
  will-change: transform;
  background-image: url('../images/sprites3.png');
  background-size: remit(1710 420);
  animation: frame3 0.3s  steps(1) both infinite;
}
@keyframes frame3 {
	0% {transform: translate3d(remit(-10),0,0);}
	50% {transform: translate3d(remit(-580),0,0);}
  100% {transform: translate3d(remit(-1150),0,0);}
}

2、阅读券选择、取消

data(){
    selectMap:{}，
    selectCount:0,
    list:[]
},
methods:{
    goChoose(item){
        if(this.selectMap[item.id]){
            this.selectMap[item.id]=false;
            this.$set(item,'isClick',false);
            selectCount--
        }else{
            if(selectMap.length > 3)return;
            this.selectMap[item.id]=true;
            this.$set(item,'isClick',true);
            selectCount++
        }
    }
}

福利节活动总结

附录：