为了吸引客户流量,所以开发这个功能。
需求:用户登陆之后,连续签到五天之后,能领取到三天的会员奖励 。设计图下
这里可以用循环出来五天的数据,分三种状态:未签到的,已签到,待签到的三种情况。如果没有连续签到五天,则领取3天会员的按钮会显示任务未完成弹框,会员不能领取。
前端实现思路:
1.进入页面获取初始数据(初始数据和后端协商,应该包括:是否可领取奖励的字段,总共签到的天数,是否完成连续签到,签到记录(是数组类型))
2.根据签到记录来处理 渲染设计图上的签到记录列表
- 如果记录的数组为空,未签到。用 连续签到的总天数5-已签到的天数=未签到的天数
- 未签到几天,就循环向 数组中添加几天的初始数据。组成已签到的和未签到在一起的数组,渲染到界面
- 根据最后签到的时间和今天的时间相对比,判断今天是否已签到。再根据 签到记录中返回的数据记录中其属性time是否存在的,存在就添加新属性status==2,用于判断是哪种状态
主要代码: