节能知识竞赛微信小程序复盘-累计连续签到设计和实现

近期由于太忙了，没时间整理，现在抽空复盘一下我前段时间承接的节能知识竞赛活动小程序。

一、程序功能

（一） 主要功能

1.每日答题：每日10道题目，每道题目限时15秒作答，参赛者每天可答题一次。

2.每日签到：设置7日登录奖励，参赛者每日登录活动界面进行签到，按照连续签到的天数可领取不同天数的节能币。

（二）辅助功能 

1.排行榜：从高到底显示每日用户排名。 

2.数据统计：活动结束后导出所有用户排名。 

二、问题难点

需求：用户登陆之后，连续签到7天之后，能领取到额外的奖励 。

难点：

• 怎么用比较好方式去统计连续打卡天数
• 怎么实现补卡功能以达到连续签到的效果
• 怎么实现补签后连续天数的统计功能

前端实现思路：

这里可以用循环出来五天的数据，分三种状态：未签到的，已签到，待签到的三种情况。

1.进入页面获取初始数据（初始数据和后端协商，应该包括：是否可领取奖励的字段，总共签到的天数，是否完成连续签到，签到记录（是数组类型））

2.根据签到记录来处理 渲染设计图上的签到记录列表

如果记录的数组为空，未签到。用连续签到的总天数7-已签到的天数=未签到的天数

未签到几天，就循环向 数组中添加几天的初始数据。组成已签到的和未签到在一起的数组，渲染到界面

根据最后签到的时间和今天的时间相对比，判断今天是否已签到。再根据 签到记录中返回的数据记录中其属性time是否存在的，存在就添加新属性status==2，用于判断是哪种状态

部分逻辑代码：

            // 处理返回的数据
            handerResult(res) {
                res.record = JSON.parse(res.record || '[]');
                // status 代表签到状态 0待签  1签到 2 签到成功
                this.signInfo = res;
                // 还剩几天没签到
                let len = 7 - this.signInfo.record.length;


                if (len > 0) {
                    for (let i = 0; i < len; i++) {
                        this.signInfo.record.push({
                            face: '//img.xx.cn/FmiPRe4NWIKV-XDlvMLLtBqFTuUk'
                        });
                    }
                }
                let status = 0;
                let last_time = this.signInfo.last_time || 0;
                let now = moment().format('YYYY-MM-DD');
                let l_t = moment(last_time).format('YYYY-MM-DD');
                let today = now == l_t;


                this.signInfo.record.forEach((i, index) => {
                    if (i.time) {
                        i.status = 2;
                    } else {
                        if (today) {
                            i.status = 0;
                        } else {
                            i.status = 1;
                            today = true;
                        }
                    }
                });
                return this.signInfo;
            },