webchat-group
/
webchat


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>coderutil出品幸运抽奖系统</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />


    <link rel="stylesheet" href="/css/common/common.css">
    <link href="/css/client/luck.css" rel="stylesheet" type="text/css" />

    <link href="/ref/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="/ref/jquery/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="/ref/layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
    <script src="/js/common/common.js" type="text/javascript"></script>

    <style>
        .popup {
            background-color: transparent;/*背景透明*/
            box-shadow: 0 0 0 rgba(0,0,0,0);/*前景无阴影*/
        }
        .popup {
            background-color: transparent;/*背景透明*/
            box-shadow: 0 0 0 rgba(0,0,0,0);/*前景无阴影*/
        }
        .close-popup-btn {
            width: 30px;
            height: 30px;
            background-color: transparent;
            border: 2px solid white;
            border-radius: 100px;
        }
        .userOrderMaxHeight {
            max-height: 420px;
            overflow-y: hidden;
        }
        #time1LuckBtn {
            position: absolute;
            right: 30px;
            top: 30px;
            height: 70px;
            width: 200px;
            border: none;
            border-radius: 5px;
            font-size: 20px;
            color: white;
            font-weight: 600;
            box-shadow: 0px 0px 10px #dedede;
            background: #11998e;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        #time10LuckBtn {
            position: absolute;
            left: 30px;
            top: 30px;
            height: 70px;
            width: 250px;
            border: none;
            border-radius: 5px;
            font-size: 20px;
            color: white;
            font-weight: 600;
            background: #360033;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(54, 0, 51), rgb(11, 135, 147));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(54, 0, 51), rgb(11, 135, 147)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            box-shadow: 0px 0px 10px #dedede;
        }
        #time1LuckBtn img, #time10LuckBtn img {
            margin: 0px 5px 0px 15px;
        }
        .time10result-container {
            position: relative;
            width: 120px;
            background-color: transparent;
            height: 120px;
            float: left;
            margin: 0px 0px 30px 0px;
            text-align: center;
            overflow: hidden;
        }
    </style>
</head>
<body style="background-color: whitesmoke">
<center>

    <div id="header" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 60px; z-index: 1999"></div>

    <div class="luck-body"><div class="div-1190px">
        <!-- 抽奖器模块 -->
        <div class="luck-player-module" style="background-image: url('http://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_7ce6e36d2bf44e689a6d078e690e8202.png')">
            <div class="luck-player-top">
                <span class="luck-title"><span class="layui-badge" id="activityStatus">进行中</span> <span id="activityName"></span></span>
            </div>
            <!-- ali player -->
            <div class="luck-box">
                <div class="luck-container">
                    <div id="luck-container"></div>
                    <button class="luck-border"></button>
                    <button class="luck-btn" id="luck-btn">抽奖</button>
                </div>
                <div class="luck-reduce-integral-rule">本期每抽奖一次需 <b id="reduce-count">-</b> ¥</div>
                <div class="luck-item-count-container">
                    <div class="luck-item-count-container-line" style="color: white; font-weight: 700">
                        <span class="luck-item-rule-left">奖品名称</span>
                        <span class="luck-item-rule-right">奖品数量</span>
                    </div>
                    <div id="luck-item-count-container">

                    </div>
                </div>
            </div>
        </div>
        <!-- 抽奖结果 -->
        <div class="luck-recommend-module">
            <span class="luck-recommend-title">最近中奖 TOP5</span>
            <div class="winPrizeListContainer">
                <div class="winPrizeListContainerList" id="winPrizeListContainerList">

                </div>

                <div class="ww-recommend">
                    <div class="wwads-cn wwads-horizontal" data-id="181" style="max-width: 300px; margin-top:0px;"></div>
                </div>
            </div>

        </div>

    </div>
        <div class="unlogin-luck-mode" id="unlogin-mode">未登录, 没有查看权限！</div>
        <div class="unlogin-luck-mode" id="end-mode" style="display: none">活动已经结束</div>
        <div class="unlogin-luck-mode" id="prepare-mode" style="display: none">活动筹备中</div>
    </div>

    <!-- 奖品清单 -->
    <div class="luck-list-module"><div class="div-1190px">
        <div class="luck-list-box">
            <div class="luck-list-title-box">
                <span class="luck-list-title" data-v-04c4730d="">本期奖品清单</span>
            </div>

            <div id="luck-lists">

            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    </div>

    <!-- 我的本期中奖订单 -->
    <div class="luck-list-module"><div class="div-1190px">
        <div class="luck-list-box">
            <div class="luck-list-title-box">
                <span class="luck-list-title" data-v-04c4730d="">我的中奖记录</span>
                <a style="float: right" onclick="masterWeixin()">兑换 <i class="layui-icon">&#xe602;</i> </a>
            </div>
            <div id="curr-user-order-lists" class="userOrderMaxHeight">

            </div>
            <div style="clear: both"></div>
            <a id="showAllOrderBtn" style="display: none" onclick="$('#curr-user-order-lists').removeClass('userOrderMaxHeight'); $(this).hide();">
                <p style="height: 50px; line-height: 50px;">
                    展开查看全部 <i class="layui-icon">&#xe61a;</i>
                </p>
            </a>
        </div>
    </div></div>

    <!-- 往期活动 -->
    <div class="luck-list-module"><div class="div-1190px">
        <div class="luck-list-box">
            <div class="luck-list-title-box">
                <span class="luck-list-title" data-v-04c4730d="">往期活动</span>
            </div>
            <div id="history-luck-lists">

            </div>
            <div style="clear: both"></div>
        </div>
    </div></div>

    <div style="width: 100%; line-height: 50px; margin-top: 50px;">
        © 2023 https://www.coderutil.com
    </div>
</center>

</body>
<script>


    $("#header").load("/client/header");

    var index = 1;
    var redu = 4;
    var time = 85;
    var reduceCount = 0;
    var luckRandomCount = 300;
    var luckId;
    var luckIdArr;
    var luckTimes = 1;
    var enableLuck = false;
    var running = false;
    var itemMap = new HashMap();
    var activityId = getUserParamByName("id");
    var historyLastId = '';
    var money = 0;
    var walletBalance = 0;


    function refreshUserWalletBalance(balance) {
        this.walletBalance = balance;
        $("#walletBalance").text(balance)
    }

    if (activityId == '') {
        $.ajax({
            url: "/api/lottery/activity/lastId",
            type: "get",
            success: function (data) {
                data = eval(data);
                if (data.success) {
                    activityId = data.data;
                    initLotteryInfo();
                    loadActivityOrderList();
                    loadCurrentUserActivityOrderList();
                }
            }
        })
    } else {
        initLotteryInfo();
        loadActivityOrderList();
        loadCurrentUserActivityOrderList();
    }

    function initLotteryInfo() {
        $.ajax({
            url: "/api/lottery/activity/detail/" + activityId,
            type: "get",
            success: function (data) {
                data = eval(data);
                if (data.success) {
                    data = data.data;
                    if (data == null) {
                        layer.msg("活动未开启");
                        return;
                    }
                    var status = data.status;
                    money = data.money;
                    refreshUserWalletBalance(data.userInitWalletBalance);
                    $("#activityStatus").text(data.statusName);
                    $("#activityName").text(data.name);
                    $("#reduce-count").text(data.money);
                    setDisableLuckStateByActivityStatus();
                    if (status == 1) {
                        $("#prepare-mode").show();
                        $("#activityStatus").addClass("layui-bg-orange");
                    } else if (status == 2) {
                        setEnableLuckState();
                    } else if (status == 3) {
                        $("#end-mode").show();
                        $("#activityStatus").addClass("layui-bg-cyan");
                    } else if (status == 4) {
                        $("#activityStatus").addClass("layui-bg-gray");
                    }
                    $.each(data.items, function (index, item) {
                        var itemElem = "<div class=\"luck-item luck-item-"+item.slot+"\" id=\"luck-item-"+item.slot+"\">\n" +
                            "                        <img src=\""+item.icon+"\">\n" +
                            "                        <p class=\"line1ppp\">"+item.name+"</p>\n" +
                            "                    </div>";
                        var itemStock = "<div class=\"luck-item-count-container-line\">\n" +
                            "                        <span class=\"luck-item-rule-left line1ppp\">"+item.name+"</span>\n" +
                            "                        <span class=\"luck-item-rule-right\">"+item.stock+"</span>\n" +
                            "                    </div>";
                        var itemGood = "<div class=\"luck-list\">\n" +
                            "                    <img class=\"recommend-luck-cover\"\n" +
                            "                         src=\""+item.cover+"?x-oss-process=image/resize,m_fill,w_250,h_150\">\n" +
                            "                    <div class=\"title-container\"><span class=\"title\">"+item.name+"</span></div>\n" +
                            "                    <span class=\"luck-item-count\"><span class=\"layui-badge\">X "+item.stock+"</span></span>\n" +
                            "                </div>";
                        $("#luck-container").append(itemElem);
                        $("#luck-item-count-container").append(itemStock);
                        $("#luck-lists").append(itemGood);
                        // 维护奖品信息到map
                        itemMap.put(item.id, item);
                    })
                    $.each(data.sponsors, function (index, sponsor) {
                        var hrefAttr = "";
                        if (sponsor.url != null && sponsor.url != '') {
                            hrefAttr = "href='"+sponsor.url+"'"
                        }
                        var sponsorElem = "<a "+hrefAttr+" target=\"_blank\">\n" +
                            "                    <div class=\"sponsor-container\">\n" +
                            "                        <img src=\""+sponsor.logo+"?x-oss-process=image/resize,m_fill,w_50,h_50\" class=\"sponsor-logo\">\n" +
                            "                        <p class=\"sponsor-content line1ppp\">"+sponsor.content+"</p>\n" +
                            "                    </div>\n" +
                            "                </a>";
                        $("#sponsor-lists").append(sponsorElem);
                    })

                    // 点击开始抽奖
                    $("#luck-btn").on('click', function () {
                        var popupContent =
                            "<div style='width: 540px; height: 130px; background-color: white; border-radius: 10px;'>" +
                            "<button id='time1LuckBtn'>抽一次 <img src='http://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_75493b4c9d2a40be8b96b3ea00b13793.png' style='height: 30px;'><b style='color: #ee954d'>"+reduceCount+"</b></button>" +
                            "<button id='time10LuckBtn'>十连抽 <img src='http://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_75493b4c9d2a40be8b96b3ea00b13793.png' style='height: 30px;'><b style='color: #ee954d'>"+(reduceCount * 10)+"</b></button>"+
                            "</div>";
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            shadeClose: true,
                            area:  ['540px', '130px'],
                            content: popupContent
                        });
                        $("#time1LuckBtn").on('click', function () {
                            layer.closeAll();
                            startLuckDraw(1);
                        })
                        $("#time10LuckBtn").on('click', function () {
                            layer.closeAll();
                            startLuckDraw(10);
                        })
                    })

                }
            }, error: function () {
            }
        })
    }

    function startLuckDraw(times) {
        if (!isEnableLuck()) {
            layer.msg("活动处于非抽奖状态");
            return;
        }
        if (this.isRunning()) {
            return;
        }
        var validateBalance = money * times;
        if (walletBalance < validateBalance) {
            layer.msg("钱包余额不足");
            return;
        }
        setDisableLuckState();
        // 抽奖api
        var luckApi = "/api/lottery/luckDraw/" + activityId;
        if (times == 10) {
            luckApi = "/api/lottery/luckDraw/" + activityId + "/" + times;
        }
        luckTimes = times;
        // 抽奖之前先重置抽奖结果
        resetLuckResult();
        $.ajax({
            url: luckApi,
            type: "post",
            success: function (data) {
                data = eval(data);
                if (data.success) {
                    // 获取到抽奖结果
                    data = data.data;
                    if (times == 1) {
                        luckId = data.itemId;
                        refreshUserWalletBalance(data.walletBalance);
                    } else if (times == 10) {
                        luckIdArr = data.itemIdList;
                        refreshUserWalletBalance(data.walletBalance);
                    } else {
                        layer.msg("不支持的抽奖个数！");
                    }
                }
            }
        })
        initLuckItemSelectedState();
        initLuckParam();
        luckAnimation();
    }

    function resetLuckResult() {
        luckId="";
        luckIdArr="";
    }

    function luckResultSelected(id) {
        $("#luck-item-"+id).css("background-color", "#93e3ad");
    }

    function initLuckParam() {
        luckRandomCount = 300;
        index = ((++index) % 8 + 1);
    }

    function initLuckItemSelectedState() {
        $(".luck-item").css("background-color", "#ffffff");
    }

    /**
     * 设置不允许抽奖
     */
    function setDisableLuckState() {
        running = true;
        $(".luck-btn").text("抽奖中");
        $(".luck-btn").css("background-color", "#265732");
    }

    function setDisableLuckStateByActivityStatus() {
        enableLuck = false;
        $(".luck-btn").text("暂停");
        $(".luck-btn").css("background-color", "#265732");
    }

    /**
     * 设置允许抽奖
     */
    function setEnableLuckState() {
        running = false;
        enableLuck = true;
        $(".luck-btn").text("抽奖");
        $(".luck-btn").css("background-color", "#58d576");
    }

    function isRunning() {
        return running;
    }

    function isEnableLuck() {
        return enableLuck;
    }

    function luckAnimation() {
        initLuckItemSelectedState();
        if (luckRandomCount <= 0) {
            showLuckResult();
            // luckResultSelected(luckId);
            setEnableLuckState();
            // 重新加载活动下的中奖名单
            loadActivityOrderList();
            // 重新加载我的中奖记录
            loadCurrentUserActivityOrderList();
        } else {
            var tempId = ((++index) % 8 + 1);
            luckResultSelected(tempId);
            luckRandomCount -= redu;
            setTimeout("luckAnimation()",  time);
        }
    }

    function showLuckResult() {
        if (luckTimes == 1) {
            var luckItem = itemMap.get(luckId);
            var popupContent =
                "<div style='width: 500px; height: 300px; text-align: center; overflow: hidden'>" +
                "<p style='line-height: 80px; font-size: 30px; color: white; font-weight: 700'>恭喜你，本次抽中</p>" +
                "<img src=\""+luckItem.icon+"\" style='height: 150px;'>" +
                "<p style='line-height: 80px; font-size: 20px; color: white; font-weight: 500'>"+luckItem.name+"</p>" +
                "</div>"+
                "<p style='width: 500px; height: 30px; margin-top: 20px; text-align: center'>" +
                "<button onclick='layer.closeAll()' class='close-popup-btn'>" +
                "<i class=\"layui-icon\" style='font-size: 20px; color: white'>&#x1007;</i>" +
                "</button></p>";
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: false,
                area:  ['500px', '450px'],
                skin: 'popup',
                content: popupContent
            });
        } else if (luckTimes == 10) {
            var popupContent =
                "<div style='width: 600px; height: 400px; text-align: center; overflow: hidden'>" +
                "<p style='line-height: 80px; font-size: 25px; color: white; font-weight: 700'>恭喜你，十连抽中</p>";
            for (var i = 0; i < luckIdArr.length; i++) {
                var luckItem = itemMap.get(luckIdArr[i]);
                popupContent +=  "<div class='time10result-container'><div style='height: 80px; width: 120px; text-align: center'><img src=\""+luckItem.icon+"\" style='height: 80px;'></div><p style='line-height: 40px; font-size: 17px; color: white' class='line1ppp'>"+luckItem.name+"</p></div>";
            }
            popupContent += "</div>"+
                "<p style='width: 600px; height: 30px; margin-top: 20px; text-align: center'>" +
                "<button onclick='layer.closeAll()' class='close-popup-btn'>" +
                "<i class=\"layui-icon\" style='font-size: 20px; color: white'>&#x1007;</i>" +
                "</button></p>";
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: false,
                area:  ['600px', '500px'],
                skin: 'popup',
                content: popupContent
            });
        } else {
            layer.msg("抽奖参数异常！");
        }
    }

    /**
     * 查询当前用户本期活动所有中奖订单记录
     */
    function loadCurrentUserActivityOrderList() {
        $("#curr-user-order-lists").empty();
        $.ajax({
            url: "/api/lottery/order/byCurrUser/"+activityId,
            type: "get",
            success: function (data) {
                data = eval(data);
                if (data.success) {
                    data = data.data;
                    if (data.legend == 0) {
                        $("#curr-user-order-lists").append("<div style='margin: 50px 0px 100px 0px;'><img src=\"http://coderutil.oss-cn-beijing.aliyuncs.com/bbs-image/file_9983ba5b80bf4b5b9e7c7ea25dee139f.png\" style=\"height: 300px\">\n" +
                            "            <p style=\"line-height: 60px; color: gray; font-size: 15px;\">暂无中奖记录 ～ </p></div>");
                        return;
                    }
                    $.each(data, function (index, order) {
                        var meOrder = "<div class=\"curr-user-order\" style=\"text-align: left; width: 100%; line-height: 40px; border-bottom: 1px dashed whitesmoke\">\n" +
                            "                    <span style=\"width: 100px; margin-right: 20px;\"><span class=\"layui-badge layui-bg-green\">已兑换</span></span>\n" +
                            "                    <span style=\"width: 200px; margin-right: 30px; font-family: Courier\">"+order.orderId+"</span>\n" +
                            "                    <span class=\"line1ppp\" style=\"width: 400px;\">"+order.item.name+"</span>\n"+
                            "                    <span style=\"float: right; color: gray\">中奖时间: "+formatMsgTime(order.luckTime)+"</span>\n";
                        if (order.exchangeTime != 0) {
                            meOrder += "                    <span style=\"float: right; margin-right: 30px; width: 200px; color: gray\">兑换时间: "+formatMsgTime(order.exchangeTime)+"</span>\n";
                        }
                        meOrder += "                </div>";
                        $("#curr-user-order-lists").append(meOrder);
                    })
                    if (data.length > 10) {
                        $("#showAllOrderBtn").show();
                    }
                }
            }, error: function () {
            }
        })
    }

    function loadActivityOrderList() {
        $("#winPrizeListContainerList").empty();
        $.ajax({
            url: "/api/lottery/order/byActivity/"+activityId,
            type: "get",
            success: function (data) {
                data = eval(data);
                if (data.success) {
                    data = data.data;
                    if (data.legend == 0) {
                        $("#winPrizeListContainerList").append("<p style='line-height: 200px'>暂无中奖记录 ～ </p>");
                        return;
                    }
                    $.each(data, function (index, order) {
                        var order = "<div class=\"winPrize\">\n" +
                            "                        <p class=\"prize-header\">\n" +
                            "                            <span class=\"prize-username\"><img src=\""+order.user.photo+"?x-oss-process=image/resize,m_fill,w_20,h_20\">"+order.user.userName+"</span>\n" +
                            "                            <span class=\"prize-time\">"+formatMsgTime(order.luckTime)+"</span>\n" +
                            "                        </p>\n" +
                            "                        <p class=\"prize-detail line1ppp\">\n" +
                            "                            抽中 <span style=\"color: orangered\">"+order.item.name+"</span>\n" +
                            "                        </p>\n" +
                            "                    </div>";
                        $("#winPrizeListContainerList").append(order);
                    })
                }
            }, error: function () {
            }
        })
    }

    /**
     * 加载历史活动列表
     */
    loadHistoryActivityList();
    function loadHistoryActivityList() {
        $.ajax({
            url: "/api/lottery/activity/history/list",
            type: "get",
            success: function (data) {
                data = eval(data);
                if (data.success) {
                    data = data.data;
                    $.each(data, function (index, activity) {
                        var statusTag;
                        var status = activity.status;
                        if (status == 1) {
                            statusTag = "<span class=\"layui-badge layui-bg-orange\">"+activity.statusName+"</span>";
                        } else if (status == 2) {
                            statusTag = "<span class=\"layui-badge\">"+activity.statusName+"</span>";
                        } else if (status == 3) {
                            statusTag = "<span class=\"layui-badge layui-bg-cyan\">"+activity.statusName+"</span>";
                        } else if (status == 4) {
                            statusTag = "<span class=\"layui-badge layui-bg-gray\">"+activity.statusName+"</span>";
                        }
                        var historyActivity = "<a href='/client/index?id="+activity.activityId+"'><div class=\"luck-list\">\n" +
                            "                    <img class=\"recommend-luck-cover\"\n" +
                            "                         src=\""+activity.cover+"?x-oss-process=image/resize,m_fill,w_250,h_150\">\n" +
                            "                    <div class=\"title-container\"><span class=\"title\">"+activity.name+"</span></div>\n" +
                            "                    <span class=\"luck-item-count\">"+statusTag+"</span>\n" +
                            "                </div></a>";
                        historyLastId = activity.id;
                        $("#history-luck-lists").append(historyActivity);
                    })
                }
            }, error: function () {
            }
        })
    }

    refreshUserInfo();
    function refreshUserInfo() {
        $.ajax({
            url:"/api/user/getCurrentUserInfo",
            type:"get",
            success:function (data) {
                data = eval(data);
                if (data.success){
                    $("#unlogin-mode").hide();
                }
            },error:function () {}
        })
    }
</script>
</html>