h5写的一个签到积分系统

实现一个七天签到功能，但不是展示七天然后进行签到，是后台根据日期只返回最近七天的签到情况。

html页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>签到</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta charset="UTF-8" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link href="../static/css/weixin/base.css?v=2017012401" rel="stylesheet" type="text/css">
    <script src="../static/js/weixin/jquery.min.js?v=2017012401"></script>
    <script src="../static/js/md5.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/css/css.css" rel="stylesheet" type="text/css">
    <!-- <style>
        .page { padding: 0; }
        .page-form { height: 100%; padding: 20px; border-radius: 0; }
        .page-form .form-top { padding: 20% 0; border: none; }
        .page-form .form-top .form-item { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; }
        .page-form .form-top .form-item + .form-item { margin-top: 20px; }
    </style> -->
    <style>
        html,
        body {
            font-family: "PingFang SC";
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul,
        ol {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .main {
            background: #fff;
            border-radius: 8px;
            width: 100%;
            height: 60%;
            padding: 1rem;
            box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.5)
        }


        .title {
            /* color: #8d8ebb; */
            color: #4093dd;
            font-size: 0.8pc;
            line-height: 26px;
            text-align: center;
        }

        .title h1 {
            font-weight: bolder;
            font-size: 0.8pc
        }

        .sign-head {
            /* width: 560px; */
            overflow: hidden;
            margin: 10px auto;
        }

        .sign-head .sign-btn {
            /* width: 100%; */
            /* border: 1px solid #4093dd; */
            float: left;
            color: #fff;
            font-size: 14px;
            line-height: 36px;
            padding: 2px 25px;
            border-radius: 4px;
            cursor: pointer;
            background-color: #4093dd;
            text-align: center;
        }

        .sign-head .sign-btn.disabled {
            color: #bbb;
            background-color: #eee;
        }

        .sign-foot {
            /* width: 106px; */
            overflow: hidden;
            margin: 10px auto;
            margin-top: 3rem;
            display: flex;
            justify-content: space-between;
        }

        .sign-foot .reward-btn {
            /* width: 100%; */
            /* border: 1px solid #b25d06; */
            /* float: left; */
            color: #fff;
            float: right;
            font-size: 14px;
            line-height: 36px;
            padding: 2px 25px;
            border-radius: 4px;
            cursor: pointer;
            /* background-color: #b25d06; */
            background-color: #4093dd;
            text-align: center;
        }

        .sign-foot .reward-btn div:active {
            background-color: red;
        }

        .sign-foot .reward-btn.disabled {
            color: #bbb;
            background-color: #eee;
        }

        .sign-head .sign-date {
            float: right;
            /* color: #333; */
            color: #4093dd;
            font-size: 20px;
            line-height: 36px;
            padding: 2px 25px;
        }

        .sign-box {
            /* width: 560px; */
            width: 100%;
            height: 50px;
            margin: 10px auto;
        }

        .mark {
            /* width: 560px; */
            width: 100%;
            margin: 10px auto;
            color: grey;
        }

        .sign-box li {
            float: left;
            /* width: 14.285%; */
            width: 13.285%;
            margin: 0.5%;
            text-align: center;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            /* border-right: 1px solid #4093dd;
            border-bottom: 1px solid #4093dd; */

            border: 1px solid #4093dd;
            box-shadow: -1px 0px 1px 0px ;

            /* transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -webkit-transform: rotate(30deg); */
        }

        .sign-box ol {
            /* border-top: 1px solid #ccc; */
            /* border-left: 1px solid #ccc; */
        }

        .sign-box ol li {
            height: 40px;
            color: #4093dd;
            font-size: 24px;
            line-height: 40px;
        }

        .sign-box ul {
            /* border-left: 1px solid #4093dd;
            border-top: 1px solid #4093dd;
            border: 1px solid #4093dd; */
            /* box-shadow: -5px 0px 5px 0px rgba(0,0,0,0.5) */
        }

        .sign-box ul li {
            height: 80px;
            /* color: #333; */
            color: #4093dd;
            font-size: 20px;
            /* line-height: 50px; */
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* .sign-box ul li .signDate {
            width: 50px;
            height: 40px;
        } */

        .sign-box ul li .signDate {
            position: relative;
            width: 2rem;
            height: 2rem;
            margin-top: 0.5rem;
            border-radius: 1rem;
            background-color: rgba(0, 0, 0, 0.4);
            /* background-color: grey; */
            z-index: 5;
        }

        .sign-box ul li .signDate::before {
            content: '';
            position: absolute;
            width: 1rem;
            height: 1.5rem;
            color: black;
            border-bottom: 3px solid #fff;
            border-right: 3px solid #fff;
            left: 50%;
            top: 30%;
            transform-origin: center;
            transform: translate(-50%, -30%) rotate(45deg);
            -webkit-transform: translate(-50%, -30%) rotate(45deg);
        }

        .sign-box ul li .hasSignDate {
            position: relative;
            width: 2rem;
            height: 2rem;
            margin-top: 0.5rem;
            border-radius: 1rem;
            /* background-color: rgba(0, 0, 0, 0.4); */
            background-color: #4093dd;
            z-index: 5;

        }


        .sign-box ul li .hasSignDate::before {
            content: '';
            position: absolute;
            width: 1rem;
            height: 1.5rem;
            color: black;
            border-bottom: 3px solid #fff;
            border-right: 3px solid #fff;
            left: 50%;
            top: 30%;
            transform-origin: center;
            transform: translate(-50%, -30%) rotate(45deg);
            -webkit-transform: translate(-50%, -30%) rotate(45deg);
        }

        .sign-box li.seat {
            color: #ddd;
        }

        .sign-box li:active {
            background-color: #f2f2f2;
        }

        .sign-box li.current {
            color: #fff;
            background-color: #4093dd;
        }

        /* .sign-box li.checked {
            color: #999;
            background-color: #eee;
        } */

        /* .sign-box li.checked {

            width: 8px;

            height: 16px;

            border-color: #009933;

            border-style: solid;

            border-width: 0 3px 5px 0;

            transform: rotate(45deg);

        } */
        .sign-box li .checked {
            position: absolute;
            left: 1rem;
            top: 1rem;
            display: inline-block;
            font-weight: 700;
            margin: 0 10px;
            /* width: 8px; */
            width: 1rem;
            height: 2rem;
            transform: rotate(45deg);
            border-style: solid;
            border-color: #4093dd;
            border-width: 0 4px 4px 0;
        }

        /* .sign-box li.today {
            background-color: #4093dd
        } */

        .integral {
            /* color: #b25d06; */
            color: #4093dd;
            /* color: #4093dd; */
            font-size: 18px;
            font-family: KaiTi;
            line-height: 36px;
        }

        .footer {
            background: #fff;
            width: 100%;
            height: 35%;
            padding: 1rem;
            margin: 1rem auto;
            border-radius: 8px;
            box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.5)
        }

        .qiandao-rule-list {
            margin-bottom: 35px;
            /* color: #8d8ebb; */
            color: #4093dd;
            font-size: 0.7pc;
            line-height: 26px
        }

        .qiandao-rule-list h4 {
            font-weight: bolder;
            font-size: 0.7pc
        }
    </style>
    <script src="../static/js/layer.2.0/layer.m.js"></script>
</head>

<body>

    <div class="main">
        <div class="logo-wrap">

        </div>
        <div class="title">
            <h4>签到领积分</h4>
            <p>积分可兑换优惠券</p>
        </div>
        <div class="sign-head">
            <span class="sign-btn">立即签到</span>
            <span class="sign-date">2017-04</span>
        </div>
        <div class="sign-box"></div>
        <!-- <div class="mark">只显示最近七天的签到情况</div> -->
        <!-- <div class="grandTotal">累计签到：5天</div> -->
        <div class="sign-foot">
            <div class="integral">当前积分：6分</div>
            <div class="reward-btn">积分兑换</div>
        </div>
    </div>
    <div class="footer">
        <!-- <div class="explanation">
            规则说明
        </div> -->
        <div class="qiandao-rule-list">
            <h4>签到规则</h4>
            <p>每次签到获得1个积分，如果中间有一天间断未签到的，重新开始计算连续签到时间。</p>
            <p>连续签到七天及其以上可以使用7个积分兑换一张优惠券</p>
            <p>连续签到不满七天的，可以使用10个积分兑换一张优惠券</p>
        </div>
    </div>

    <!-- <script src="../static/js/weixin/jquery.min.js"></script> -->
    <!-- <script src="./js//signInPage.js"></script> -->
    <!-- <script>
        document.write("<script src='./js//signInPage.js?t=" + new Date().getTime() + "'><\/script>");
    </script> -->
    <script>
        document.write("<script src='../static/js/js.js?t=" + new Date().getTime() + "'><\/script>",
            "<script src='./js//signInPage.js?t=" + new Date().getTime() + "'><\/script>")
    </script>
    <script>
        $(function () {
            $('.sign-box').Sign({
                signBtn: '.sign-btn',
                rewardBtn: '.reward-btn',
                current: '.sign-date',
                dateChecked: [1, 2, 3, 4, 5, 6, 8]
            })
        })
    </script>
</body>

</html>

View Code

js部分

(function ($, window, document, undefined) {
    // var rewardFlag = false // // 是否可以领奖判断，默认不可领取
    var rewardFlag = false // // 是否可以领奖判断，默认不可领取
    var signFlag = true // // 每天只可以签到一次
    var integral = 0 // 拿到积分
    var signDateArray = [] // 拿到日期数组
    var point = 0;

    // 拿到乐停logo
    function getParkInfo(parkId, callback) {
        fnReq("/openapi/getParkInfo?parkId=" + parkId, function (type, data) {
            if (type == 1 && data) {
                callback && callback(data);
            } else {
                callback && callback(data || {});
            }
        });
    }
    // getQueryVariable('parkId')
    getParkInfo(getQueryVariable('parkId'), function (data) {
        if (data.logo) {
            $('.logo-wrap').empty();
            var imgStr = '<img alt="企业logo" class="logo-img" src="' + data.logo + '">';
            $('.logo-wrap').append(imgStr);
        }
    });

    // 获取地址栏参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
    var Sign = function (el, options) {
        this.el = el;
        this.defaults = {
            signBtn: '.signBtn',
        };
        this.options = $.extend({}, this.defaults, options);



        // 获取用户最近七天签到信息
        let reqParams = {
            parkId: getQueryVariable('parkId'),
            openId: getQueryVariable('openId')
        }

        function getUserSignList(params, callback) {
            var url = '/openapi/coupon/getUserSignList?t=' + new Date().getTime()
            // fnReq(url, params || {}, function (type, data, res) {
            //     console.log('1231111')
            //     console.log(data)
            //     if (type === 1) {
            //         callback && callback(data)
            //     } else if (type === 2) {
            //         valert(res.msg || '系统开了小差')
            //     }
            // })
            $.ajaxSettings.async = false; //设置为同步
            $.get(url, params, function (result) {
                signDateArray = result.data.signDateArray
                integral = result.data.totalPoint
                // 进行初始化的处理
                $('.integral').text(`当前积分：${integral}分`)
                //今天是否已签到
                if ($.inArray(new Date().format("yyyy-MM-dd"), signDateArray) != -1) {
                    // $(this.options.rewardBtn).addClass('disabled')
                    $('.sign-btn').addClass('disabled')
                    $('.sign-btn').text('已签到')
                    signFlag = false
                }
            });
        }
        getUserSignList(reqParams)

        // 点击签到
        // this.el.on('click', '.current', $.proxy(this.signIn, this))
        // $(this.options.signBtn).on('click', $.proxy(this.signIn, this))
        let that = this
        this.el.on('click', '.current', $.proxy(this.signIn, this))
        // $(this.options.signBtn).on('click', $.proxy(this.signIn, this))
        $('.sign-head .sign-btn').click(function () {
            that.signIn()
        })

    }
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }
    Sign.prototype = {
        // point: '', // 拿到日期数组
        init: function () {
            // 拿到前七天的时间
            function getDay(day) {
                var today = new Date();
                var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = doHandleMonth(tMonth + 1);
                tDate = doHandleMonth(tDate).toString();
                // return tYear + "-" + tMonth + "-" + tDate;
                if (tDate.substring(0, 1) == '0') {
                    tDate = tDate.substring(tDate.length - 1)
                }
                return tDate;
            }

            function doHandleMonth(month) {
                var m = month;
                if (month.toString().length == 1) {
                    m = "0" + month;
                }
                return m;
            }

            var h = k = '',
                c = new Date(), //当前时间
                y = this.options.dateMonth ? this.options.dateMonth[0] : c.getFullYear(),
                m = this.options.dateMonth ? this.options.dateMonth[1] - 1 : c.getMonth(),
                d = m == c.getMonth() ? c.getDate() : null,
                w = new Date(y, m).getDay(),
                f = new Date(y, m, 1).getDay(), // 当前月份第一天的星期
                p = new Date(y, m, 0).getDate(), // 前一月份天数(最后一天)
                t = new Date(y, [m + 1], 0).getDate(), // 当前月份天数(最后一天)
                l = new Date(y, m, t).getDay(); // 当前月份最后一天的星期

            // 显示当前日期
            if (this.options.current) {
                var ct = c.getFullYear() + '-' + [(c.getMonth() < 9) ? ('0' + (c.getMonth() + 1)) : (c.getMonth() + 1)]
                $(this.options.current).text(ct)
            }

            //ol => 星期 ul => 日期
            this.el.append('<ol></ol><ul></ul>')


            // 只展示最近七天的日期
            for (var i = -6; i <= 0; i++) {
                // 默认添加灰色对号
                // 
                h += '<li>' + getDay(i) + '<div class="signDate"></div></li>'
            }
            this.el.find('ul').append(h)
            // 已签到记录
            // this.options.dateChecked = ['2020-06-17', '2020-06-18', '2020-06-19', '2020-06-20', '2020-06-21', '2020-06-22']
            let dateArray = [] //重新定义一个日期数组
            let singleDate; //单个日期
            // 当返回数组为空时不进行处理
            if (signDateArray.length == 0) {

            } else {
                signDateArray.forEach(element => {
                    singleDate = element.substring(element.length - 2)
                    if (singleDate.substring(0, 1) == '0') {
                        singleDate = singleDate.substring(singleDate.length - 1)
                    }
                    // dateArray.push(Number(singleDate))
                    dateArray.push(singleDate)
                });
            }
            $('ul').find('li').eq(6).addClass('current')
            // 给已签到的日期添加标记
            for (let i = 0; i <= 7; i++) {
                // 如果li标签的日期存在于数组中，添加标记
                if ($.inArray($('ul').find('li').eq(i).text(), dateArray) != -1) {
                    $('ul').find('li').eq(i).removeClass('current')
                    // 删除灰色对号 添加蓝色对号
                    //  $('ul').find('li').eq(i).append('<div class="checked"></div>')
                    $('ul li div').eq(i).remove('.signDate')
                    $('ul').find('li').eq(i).append('<div class="hasSignDate"></div>')
                }
            }

            this.judgment(integral)
            $('ul').find('li')
            console.log($('ul li').find('.checked').length)

        },
        signIn: function (e) {
            if (signFlag) {
                signFlag = false

                // 获取用户最近七天签到信息
                let reqParams = {
                    parkId: getQueryVariable('parkId'),
                    openId: getQueryVariable('openId')
                }
                let that = this

                function userSign(params, callback) {
                    var url = '/openapi/coupon/userSign?t=' + new Date().getTime()
                    $.ajaxSettings.async = false; //设置为同步
                    fnReq(url, params || {}, function (type, data, res) {})
                    // let ss = 9
                    integral += 1
                    $('.sign-btn').addClass('disabled')
                    $('.sign-btn').text('已签到')
                    $('.reward-btn').text('积分兑换')
                    // this.el.find('.current').addClass('checked')
                    // $('ul').find('li').eq(6).addClass('checked')
                    $('ul').find('li').eq(6).removeClass('current')

                    // 删除当天灰色对号 添加蓝色对号
                    // $('ul').find('li').eq(6).append('<div class="checked"></div>')
                    $('ul li div').eq(6).remove('.signDate')
                    // $('ul li').find('.signDate').eq(6).remove()
                    $('ul').find('li').eq(6).append('<div class="hasSignDate"></div>')
                    $('.integral').text(`当前积分：${integral}分`)
                    // $('.grandTotal').text(`累计签到：${ss+1}天`)

                    // this.options.dateChecked.push(new Date().format("yyyy-MM-dd"))
                    // console.log(new Date().format("yyyy-MM-dd"))
                    // console.log(this.options)
                    console.log($('ul li').find('.checked'))

                    that.judgment(integral)
                }
                userSign(reqParams)

            }
        },
        // 領獎按钮
        rewardIn: function (e) {
            // if (rewardFlag) {
            // window.location.href="http://scantest.leting360.cn/2.0/bindplate.html";
            var url = '/bindplate2.0.html?parkId=' + getQueryVariable('parkId') + '&openId=' + getQueryVariable('openId') + '&point=' + point + '&preferSchemeId=' + getQueryVariable('preferSchemeId');
            toLink(host_ht + url);
            // 请求领取奖励接口
            // let reqParams = {
            //     parkId: getQueryVariable('parkId'),
            //     openId: getQueryVariable('openId'),
            //     point:integral,
            //     preferSchemeId:getQueryVariable('preferSchemeId'),
            //     plateNumber:'车牌号'
            // }
            // function pointExchange(params, callback) {
            //     var url = '/openapi/coupon/pointExchange?t=' + new Date().getTime()
            //     $.ajaxSettings.async = false; //设置为同步
            //     fnReq(url, params || {}, function (type, data, res) {
            //         console.log('1231111')
            //         console.log(data)
            //         if (type === 1) {
            //             callback && callback(data)
            //         } else if (type === 2) {
            //             valert(res.msg || '系统开了小差')
            //         }
            //     })
            //     // $.get(url, params, function (result) {
            //     //     console.log(result)
            //     //     signDateArray = result.data.signDateArray
            //     //     integral = result.data.totalPoint
            //     //     // 进行初始化的处理
            //     //     $('.integral').text(`当前积分：${integral}分`)
            //     //     //今天是否已签到
            //     //     console.log($.inArray(new Date().format("yyyy-MM-dd"), signDateArray) != -1)
            //     //     if ($.inArray(new Date().format("yyyy-MM-dd"), signDateArray) != -1) {
            //     //         // $(this.options.rewardBtn).addClass('disabled')
            //     //         $('.sign-btn').addClass('disabled')
            //     //         $('.sign-btn').text('已签到')
            //     //         signFlag = false
            //     //     }
            //     // });
            // }
            // pointExchange(reqParams)


            $(this.options.rewardBtn).addClass('disabled')
            $(this.options.rewardBtn).text('已领取')
            rewardFlag = false
            // } else {
            //     // valert('已经领取了一张优惠券了', function () {
            //     // })
            // }
        },
        //判断是否可以领取奖励
        judgment: function () {
            // 如果已标记checked的li标签有七个 && 积分大于等于 7   领取奖励变亮
            if (integral >= 7 && $('ul li').find('.hasSignDate').length == 7) {
                point = 7
                rewardFlag = true
            }
            // 如果积分大于等于10 领取奖励变亮
            if (integral >= 10 && $('ul li').find('.hasSignDate').length != 7) {
                point = 10
                rewardFlag = true
            }

            if (!rewardFlag) {
                $(this.options.rewardBtn).addClass('disabled')
            } else {
                $(this.options.rewardBtn).removeClass('disabled')
                // 可以领取奖励
                $(this.options.rewardBtn).on('click', $.proxy(this.rewardIn, this))
            }
        },
    }
    $.fn.Sign = function (options) {
        //在这里面,this指的是用jQuery选中的元素
        var sign = new Sign(this, options);

        return sign.init()
    };
})(jQuery, window, document);