新增时空幸运儿

view/peko/activity/spacTimeLuck/css/index.css

@@ -0,0 +1,290 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+}
+
+.rabbit {
+  z-index: 999;
+}
+
+.back {
+  position: fixed;
+  top: 0.93333rem;
+  left: 0.45333rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.header {
+  width: 10rem;
+  height: 15.06667rem;
+  margin: 0 auto 0;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.header .giftBox {
+  width: 10rem;
+  height: 3.86667rem;
+  position: relative;
+  top: 8.94667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/gift.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .giftBox div {
+  position: absolute;
+  width: 1.73333rem;
+  text-align: center;
+}
+
+.header .giftBox div p {
+  color: #fff;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  margin-bottom: 0.10667rem;
+}
+
+.header .giftBox div span {
+  color: #FAF8B6;
+  font-size: 0.32rem;
+  font-weight: 300;
+  display: block;
+}
+
+.header .giftBox .div1 {
+  top: 3.50667rem;
+  left: 0.61333rem;
+}
+
+.header .giftBox .div2 {
+  top: 2.54667rem;
+  left: 2.96rem;
+}
+
+.header .giftBox .div3 {
+  top: 4rem;
+  left: 5.46667rem;
+}
+
+.header .giftBox .div4 {
+  top: 3.29333rem;
+  left: 7.86667rem;
+}
+
+.content {
+  position: relative;
+  width: 9.34667rem;
+  height: 17.72rem;
+  margin: -0.93333rem auto 0.24rem;
+  background: url(../images/content.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .title {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.45333rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  top: 0.38667rem;
+}
+
+.content .text {
+  width: 8rem;
+  height: 1.37333rem;
+  color: #FFFFFF;
+  font-size: 0.32rem;
+  font-weight: 300;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.84rem;
+  line-height: 0.47rem;
+}
+
+.content .lineBox {
+  width: 9.24rem;
+  height: 2.76rem;
+  background: url(../images/lineBigBox.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  top: 3.73333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.content .lineBox .line {
+  width: 7.88rem;
+  height: 0.68rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.69333rem;
+  box-sizing: border-box;
+  padding: 0.10667rem 0.08rem;
+  background: url(../images/lineBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .lineBox .line .line_in {
+  width: 0%;
+  height: 100%;
+  background: linear-gradient(0deg, #FFE993 0%, #EC9409 52%, #FFFC9E 98%);
+  border-radius: 0.68rem;
+  text-align: center;
+  line-height: 0.50667rem;
+  color: #F14029;
+  font-size: 0.34667rem;
+  font-weight: 400;
+}
+
+.content .lineBox .tavBox {
+  width: 95%;
+  position: absolute;
+  top: 1.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  padding: 0 0.13333rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.content .lineBox .tavBox div {
+  width: 0.68rem;
+  height: 0.38667rem;
+  line-height: 0.38667rem;
+  border-radius: 0.10667rem;
+  background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.content .lineBox .tavBox .active {
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .updataIcon {
+  width: 0.73333rem;
+  height: 0.78667rem;
+  position: absolute;
+  right: 0.92rem;
+  top: 6.68rem;
+}
+
+.content .lottery {
+  width: 8.69333rem;
+  height: 7.98667rem;
+  position: relative;
+  top: 5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/contentBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .lottery .title {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 0.33333rem;
+  left: 0rem;
+  color: #FFFFFF;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.content .lottery .user {
+  width: 2.01333rem;
+  height: 2.08rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.84rem;
+}
+
+.content .lottery .user img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.content .lottery .user .ts {
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.content .lottery .user .tx {
+  border-radius: 50%;
+  width: 1.66667rem;
+  height: 1.66667rem;
+}
+
+.content .lottery .user p {
+  width: 130%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.13333rem;
+}
+
+.content .lottery .giftList {
+  width: 6.58667rem;
+  height: 4.28rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.26667rem;
+}
+
+.content .dimension {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  top: 16.32rem;
+}

view/peko/activity/spacTimeLuck/css/index.scss

@@ -0,0 +1,297 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+}
+
+.rabbit {
+    z-index: 999;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70);
+    left: px2rem(34);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(1130);
+    margin: 0 auto 0;
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+    .giftBox {
+        width: px2rem(750);
+        height: px2rem(290);
+        position: relative;
+        top: px2rem(671);
+        left: 50%;
+        transform: translateX(-50%);
+        background: url(../images/gift.png) no-repeat;
+        background-size: 100% 100%;
+
+        div {
+            position: absolute;
+            width: px2rem(130);
+            text-align: center;
+
+            p {
+                color: #fff;
+                font-size: px2rem(26);
+                font-weight: 400;
+                margin-bottom: px2rem(8);
+            }
+
+            span {
+                color: #FAF8B6;
+                font-size: px2rem(24);
+                font-weight: 300;
+                display: block;
+            }
+        }
+
+        .div1 {
+            top: px2rem(263);
+            left: px2rem(46);
+        }
+
+        .div2 {
+            top: px2rem(191);
+            left: px2rem(222);
+        }
+
+        .div3 {
+            top: px2rem(300);
+            left: px2rem(410);
+        }
+
+        .div4 {
+            top: px2rem(247);
+            left: px2rem(590);
+        }
+    }
+}
+
+.content {
+    position: relative;
+    width: px2rem(701);
+    height: px2rem(1329);
+    margin: px2rem(-70) auto px2rem(18);
+    // background-color: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+    background: url(../images/content.png) no-repeat;
+    background-size: 100% 100%;
+
+    .title {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(34);
+        font-weight: 400;
+        position: absolute;
+        left: 0;
+        top: px2rem(29);
+    }
+
+    .text {
+        width: px2rem(600);
+        height: px2rem(103);
+        color: #FFFFFF;
+        font-size: px2rem(24);
+        font-weight: 300;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(138);
+        line-height: 0.47rem;
+    }
+
+    .lineBox {
+        width: px2rem(693);
+        height: px2rem(207);
+        background: url(../images/lineBigBox.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        top: px2rem(280);
+        left: 50%;
+        transform: translateX(-50%);
+
+        .line {
+            width: px2rem(591);
+            height: px2rem(51);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(52);
+            box-sizing: border-box;
+            padding: px2rem(8) px2rem(6);
+            background: url(../images/lineBox.png) no-repeat;
+            background-size: 100% 100%;
+
+            .line_in {
+                width: 0%;
+                height: 100%;
+                background: linear-gradient(0deg, #FFE993 0%, #EC9409 52%, #FFFC9E 98%);
+                border-radius: px2rem(51);
+                text-align: center;
+                line-height: px2rem(38);
+                color: #F14029;
+                font-size: px2rem(26);
+                font-weight: 400;
+            }
+        }
+
+        .tavBox {
+            width: 95%;
+            position: absolute;
+            top: px2rem(121);
+            left: 50%;
+            transform: translateX(-50%);
+            box-sizing: border-box;
+            padding: 0 px2rem(10);
+            display: flex;
+            justify-content: space-between;
+
+            div {
+                width: px2rem(51);
+                // padding: 0 px2rem(10);
+                height: px2rem(29);
+                line-height: px2rem(29);
+                border-radius: px2rem(8);
+                background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
+                color: #FFFFFF;
+                font-size: px2rem(21);
+                font-weight: 500;
+                text-align: center;
+            }
+
+            .active {
+                background: url(../images/tabAct.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+
+    .updataIcon {
+        width: px2rem(55);
+        height: px2rem(59);
+        position: absolute;
+        right: px2rem(69);
+        top: px2rem(501);
+    }
+
+    .lottery {
+        width: px2rem(652);
+        height: px2rem(599);
+        position: relative;
+        top: 5rem;
+        left: 50%;
+        transform: translateX(-50%);
+        background: url(../images/contentBox.png) no-repeat;
+        background-size: 100% 100%;
+
+        .title {
+            width: 100%;
+            text-align: center;
+            position: absolute;
+            top: px2rem(25);
+            left: px2rem(0);
+            color: #FFFFFF;
+            font-size: px2rem(30);
+            font-weight: 500;
+        }
+
+        .user {
+            width: px2rem(151);
+            height: px2rem(156);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(63);
+
+            img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                z-index: 2;
+            }
+
+            .tx {
+                border-radius: 50%;
+                width: px2rem(125);
+                height: px2rem(125);
+            }
+
+            p {
+                width: 130%;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: px2rem(21);
+                font-weight: 400;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(160);
+            }
+        }
+
+        .giftList {
+            width: px2rem(494);
+            height: px2rem(321);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(245);
+        }
+    }
+
+    .dimension {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(21);
+        font-weight: 400;
+        position: absolute;
+        left: 0;
+        top: px2rem(1224);
+    }
+
+}

view/peko/activity/spacTimeLuck/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>時空幸運兒</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 頭部 -->
+    <div class="header">
+        <!-- 禮物展示 -->
+        <div src="" alt="" class="giftBox">
+            <div class="div1">
+                <p>冬雪心願</p>
+                <span>1314鉆</span>
+            </div>
+            <div class="div2">
+                <p>蝶戀花</p>
+                <span>1314鉆</span>
+            </div>
+            <div class="div3">
+                <p>夜鶯與玫瑰</p>
+                <span>1314鉆</span>
+            </div>
+            <div class="div4">
+                <p>玫瑰時鐘</p>
+                <span>1314鉆</span>
+            </div>
+        </div>
+    </div>
+    <!-- 內容 -->
+    <div class="content">
+        <div class="title">活動規則</div>
+        <div class="text">活動期間全民助力, 每送出一個上新禮物下方進度條+1, 第<b></b>名用戶成為幸運兒可獲得幸運獎勵</div>
+        <div class="lineBox">
+            <div class="line">
+                <div class="line_in"></div>
+            </div>
+            <div class="tavBox">
+                <!-- <div class="active">18</div>
+                <div>38</div>
+                <div>88</div>
+                <div>128</div>
+                <div>208</div>
+                <div>288</div>
+                <div>398</div>
+                <div>488</div>
+                <div>598</div>
+                <div>688</div>
+                <div>788</div>
+                <div>888</div> -->
+            </div>
+        </div>
+        <img src="./images/updataIcon.png" alt="" class="updataIcon">
+        <div class="lottery">
+            <div class="title">幸運兒</div>
+            <div class="user">
+                <img src="./images/ts.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p></p>
+            </div>
+            <img src="./images/18.png" alt="" class="giftList">
+        </div>
+        <div class="dimension">本活動最終解釋權歸piko所有，本活動以及獎勵與蘋果公司無關。</div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./js/wow.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/spacTimeLuck/js/index.js

@@ -0,0 +1,134 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}// 初始化函數
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        getConfig();
+    }, 100)
+})
+var obj = {};
+// 獲取配置接口
+function getConfig () {
+    $('.content .lineBox .tavBox div').remove();
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/act/2023LuckyProcessBar/getConfig',
+        success (res) {
+            if (res.code === 200) {
+                // 處理進度
+                $('.content .lineBox .line .line_in').text(`${res.data.cur}/${res.data.max}`);
+                $(`.content .lineBox .line .line_in`).css({ width: `${(res.data.cur / res.data.max) * 100 >= 100 ? 100 : (res.data.cur / res.data.max) * 100}%` });
+                obj = res.data.stageMap;
+                var cur = res.data.cur;
+                var str = '';
+                var text = '';
+                var arr = [];
+                var curstage;
+                // 渲染切換tab
+                for (var key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        str += `
+                            <div class="key${obj[key].stage}" key=${obj[key].stage}>${obj[key].stage}</div>
+                        `
+                        text += `${obj[key].stage}/`
+                        arr.push(obj[key]);
+                    }
+                }
+                $('.content .lineBox .tavBox').append(str);
+                $('.content .text b').text(text);
+                // 處理當前階段
+                arr.forEach((val, i) => {
+                    if (val.luckyUser) {//false
+                        // curstage = val.stage;
+                        // $('.content .lottery .user .tx').attr('src', val.luckyUser.avatar)
+                        // $('.content .lottery .user p').text(val.luckyUser.nick);
+                        if (i == arr.length - 1) {
+                            curstage = arr[arr.length - 1].stage;
+                            $('.content .lottery .user .tx').attr('src', val.luckyUser.avatar)
+                            $('.content .lottery .user p').text(val.luckyUser.nick);
+                        } else {
+                            curstage = arr[i + 1].stage;
+                            $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+                            $('.content .lottery .user p').text('虛位以待');
+                        }
+                    } else if (i == 0) {
+                        curstage = arr[0].stage;
+                        $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+                        $('.content .lottery .user p').text('虛位以待');
+                    }
+                });
+                // console.log(curstage);
+                $(`.content .lineBox .tavBox .key${curstage}`).addClass('active').siblings().removeClass('active');
+                $('.content .lottery .giftList').attr('src', `./images/${curstage}.png`)
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 刷新按鈕
+$('.content .updataIcon').click(function () {
+    getConfig();
+})
+// tab切換
+$('.content').on('click', ' .lineBox .tavBox div', function () {
+    var key = $(this).attr('key')
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.content .lottery .giftList').attr('src', `./images/${key}.png`)
+    // console.log(obj[key]);
+    if (obj[key].luckyUser) {
+        $('.content .lottery .user .tx').attr('src', obj[key].luckyUser.avatar);
+        $('.content .lottery .user p').text(obj[key].luckyUser.nick);
+    } else {
+        $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+        $('.content .lottery .user p').text('虛位以待');
+    }
+})

view/peko/activity/spacTimeLuck/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/icon.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 30,
+        left: e.pageX - 20,
+        opacity: 1,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}