1.景酒项目(通过秒杀来了解项目)
最开始参考别人实现的思考
可以在controller中增加一些变量:秒杀开始时间,结束时间,当前处于的状态,是否是秒杀产品等等(当然这些变量也可以写在model的状态中,在controller中改变他们就行)增加的这些变量之后,可以通过UPDATE_STATE({parms})把这些新变量增加到项目的总状态集合state中。(注意state已经更新成功,但是不要console(state)直接输出,不然输出的是原来的state,如果你想看现在的状态,可以使用console.log(this.store.getState()) 来重新拉取在展示)
然后就是具体的展示过程,参考别人的代码把这部分内容放在CaLender控件中,增加两个组件:秒杀主组件SenKill,里面定义了计时器的时分秒,计时器,以及是否展示等状态,以及组件生命周期的钩子函数; 秒杀界面显示组件Seckill,接受SenKill状态并根据状态显示相应的页面。
把上面的代码进行改进
把放在Calender中的秒杀相关部分独立为一个单独的组件SenKill,并在View中进行引入和展示。但是出问题了,最后的解决在于由于使用了export default 进行定义,那么你在view中导出的时候import就不能再加{}了。那为什么Calender可以加{}呢????
代码继续改进
对照设计图可以发现,秒杀区块是放在和日历相关的div下的,可以从详细的元素检查中看到,所以把秒杀在View中的引入和展示放在CaLender中的RuleBooking组件下的相应的div下面,同时按照设计对在抢购中,距离抢购结束大于24小时的情况不计时展示而是展示什么时候结束。