连续签到功能

本文介绍了如何在前端实现连续签到功能,当用户连续签到五天后可获得三天会员奖励。首先,获取初始化数据,包括签到状态、奖励领取情况及签到记录。然后,根据记录渲染签到列表,若无签到记录,则填充未签到天数。通过比较签到时间和当前时间确定签到状态,并更新到界面上。
摘要由CSDN通过智能技术生成

为了吸引客户流量,所以开发这个功能。
需求:用户登陆之后,连续签到五天之后,能领取到三天的会员奖励 。设计图下
在这里插入图片描述
这里可以用循环出来五天的数据,分三种状态:未签到的,已签到,待签到的三种情况。如果没有连续签到五天,则领取3天会员的按钮会显示任务未完成弹框,会员不能领取。

前端实现思路:
1.进入页面获取初始数据(初始数据和后端协商,应该包括:是否可领取奖励的字段,总共签到的天数,是否完成连续签到,签到记录(是数组类型))
在这里插入图片描述
2.根据签到记录来处理 渲染设计图上的签到记录列表

  • 如果记录的数组为空,未签到。用 连续签到的总天数5-已签到的天数=未签到的天数
  • 未签到几天,就循环向 数组中添加几天的初始数据。组成已签到的和未签到在一起的数组,渲染到界面
  • 根据最后签到的时间和今天的时间相对比,判断今天是否已签到。再根据 签到记录中返回的数据记录中其属性time是否存在的,存在就添加新属性status==2,用于判断是哪种状态

主要代码:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值