打卡拼图算法

假设需要打卡的总天数为X

当 1≤X＜2²时，每行默认显示1个

当2²≤X＜3²时，每行默认显示2个

当3²≤X＜4²时，每行默认显示3个

……

当9²≤X＜10²时，每行默认显示9个

计算规则：用需要计算的数除以每行的个数，计算结果如果为整数的话，那么计算就一步完成了。计算结果如果不为整数，那么将结果向下取整，得到所需行数，每一行显示的数量需根据原始数据除以总行数来判断，原始数据除以总行数如果不为整数，那么第一行就显示默认数量，计算第二行的显示数量时，用当前剩余数量除以剩余行数，如果结果不为整数的话就还是显示默认数量，以此类推，直到余数除以剩余行数的结果为整数为止。

举例：需要打卡的天数为21天，根据最上面的规则，可以知道数字为21天时，每行默认显示4个。下面计算所需行数。21/4=5.25，不为整数，那么就将5.25向下取整，得到所需行数为5. 接下来计算每行展示的方块数量：

第一行：21/5=4.2，不为整，所以第一行显示4个

第二行：（21-4）/（5-1）=4.25，不为整，所以第二行显示4个

第三行：（21-4-4）/（5-1-1）=4.33，不为整，所以第三行显示4个

第四行：（21-4-4-4）/（5-1-1-1）=4.5，不为整，所以第四行显示4个

第五行：（21-4-4-4-4）/（5-1-1-1-1）=5，最后一行显示5个

假如需要打卡的天数为29天，那就是每行默认显示5个，29/5=5.8，不为整数，将5.8向下取整得到所需行数为5. 接下来计算每行展示的方块数量：

第一行：29/5=5.8，不为整，所以第一行显示5个

第二行：（29-5）/（5-1）=6，为整，所以剩下4行每行显示6个

/**
     * 页面的初始数据
     */
    data: {
        height: 0,
        complete: false, //是否打卡完成
        times: 21, //总共打卡天数
        list: [],
        clock: 5, //打卡第几天
        is_show_complete:0,
    },
//这里页的需要优化
defaultColumn: function(){
        let times = this.data.times
        var column = 1
        if (1 <= times && times < Math.pow(2,2)) {
            column = 1
        } else if (Math.pow(2,2) <= times && times < Math.pow(3,2)) {
            column = 2
        } else if (Math.pow(3,2) <= times && times < Math.pow(4,2)) {
            column = 3
        } else if (Math.pow(4,2) <= times && times < Math.pow(5,2)) {
            column = 4
        } else if (Math.pow(5,2) <= times && times < Math.pow(6,2)) {
            column = 5
        } else if (Math.pow(6,2) <= times && times < Math.pow(7,2)) {
            column = 6
        } else if (Math.pow(7,2) <= times && times < Math.pow(8,2)) {
            column = 7
        } else if (Math.pow(8,2) <= times && times < Math.pow(9,2)) {
            column = 8
        } else if (Math.pow(9,2) <= times && times < Math.pow(10,2)) {
            column = 9
        } else {
            column = 10
        }
        return column;
    },
    getColumn: function(total, totalRow, column, row, ids){
        let rowColumn = Math.floor(total / (totalRow - row))
        if (rowColumn * column === total) {
            for (let i = 0; i < rowColumn; i++) {
                ids += rowColumn+","
            }
            return ids
        } else {
            const nTotal = total - rowColumn;
            ids += rowColumn+","
            if (nTotal > 0) {
                ids = this.getColumn(nTotal, totalRow, column, row + 1, ids)
                return ids
            } else {
                return ids
            }
        }
    },
    calculate: function(){
        let times = this.data.times;
        var list = []
        if (times > 0) {
            let column = this.defaultColumn();
            let totalRow = Math.floor(times / column)
            let ids = this.getColumn(times, totalRow, column, 0, "");
            let tmp = ids.split(",");
            var h = 100
            if (tmp.length > 1) {
                h = (100 / (tmp.length - 1)).toFixed(2)
            }
            let total = 0;
            let clock = this.data.clock
            for (var i = 0; i < tmp.length; i++) {
                if (tmp[i] != "") {
                    list[i] = {}
                    list[i]['height'] = h
                    list[i]['row'] = []
                    let w = (100 / tmp[i]).toFixed(2)
                    for (var j = 0; j < tmp[i]; j++) {
                        total += 1
                        list[i]['row'][j] = {
                            width: w,
                            is_complete: total <= clock ? 1 : 0,
                            next: total == clock+1 ? 1 : 0
                        }
                    }
                }
            }
            console.log(list)
        }
        this.setData({
            list: list
        })
    }