完成所有接口联调

2023-08-11 19:02:15 +08:00
parent bdf9d34ea7
commit 660cbde145
6 changed files with 389 additions and 21 deletions
--- a/view/peko/activity/act-2023-qx/css/index.css
+++ b/view/peko/activity/act-2023-qx/css/index.css
@@ -785,6 +785,38 @@ body {
  color: #E4797A;
  font-size: 0.1466666667rem !important;
 }
+.page2 .blessingTree .blessingTreeSvga {
+  width: 1.4133333333rem;
+  height: 4.0666666667rem;
+  position: absolute;
+  z-index: 3;
+  display: none;
+}
+.page2 .blessingTree .blessingTreeSvga .blessingTreeSvgaActive {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.page2 .blessingTree .blessingTreeSvga .blessingTreeSvgaActive .canvas {
+  width: 100%;
+  height: 100%;
+}
+.page2 .blessingTree .blessingTreeSvga1 {
+  left: 0.92rem;
+  top: 4.8rem;
+}
+.page2 .blessingTree .blessingTreeSvga2 {
+  left: 2.9466666667rem;
+  top: 5.2666666667rem;
+}
+.page2 .blessingTree .blessingTreeSvga3 {
+  left: 5.12rem;
+  top: 4.4666666667rem;
+}
+.page2 .blessingTree .blessingTreeSvga4 {
+  left: 7.0133333333rem;
+  top: 5.1466666667rem;
+}
 .page2 .blessingTreeBoomt {
  width: 9.28rem;
  height: 8.2133333333rem;
@@ -866,6 +898,12 @@ body {
  font-size: 0.2666666667rem;
  font-style: normal;
 }
+.page2 .blessingTreeBoomt2 .box2 ul li .b {
+  padding: 0;
+  height: 100%;
+  height: 1.2rem;
+  line-height: 1.2rem;
+}
 .page2 .blessingTreeBoomt2 .box2 ul .active {
  background: #870EAA;
 }
--- a/view/peko/activity/act-2023-qx/css/index.scss
+++ b/view/peko/activity/act-2023-qx/css/index.scss
@@ -888,6 +888,45 @@ body {
                }
            }
        }
+
+        .blessingTreeSvga {
+            width: px2rem(106, );
+            height: px2rem(305, );
+            position: absolute;
+            z-index: 3;
+            display: none;
+
+            .blessingTreeSvgaActive {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+
+                .canvas {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .blessingTreeSvga1 {
+            left: px2rem(69, );
+            top: px2rem(360, );
+        }
+
+        .blessingTreeSvga2 {
+            left: px2rem(221, );
+            top: px2rem(395, );
+        }
+
+        .blessingTreeSvga3 {
+            left: px2rem(384, );
+            top: px2rem(335, );
+        }
+
+        .blessingTreeSvga4 {
+            left: px2rem(526, );
+            top: px2rem(386, );
+        }
    }

    .blessingTreeBoomt {
@@ -980,6 +1019,13 @@ body {
                            font-style: normal;
                        }
                    }
+
+                    .b {
+                        padding: 0;
+                        height: 100%;
+                        height: px2rem(90, );
+                        line-height: px2rem(90, );
+                    }
                }

                .active {
--- a/view/peko/activity/act-2023-qx/images/blessingTree.svga
+++ b/view/peko/activity/act-2023-qx/images/blessingTree.svga
--- a/view/peko/activity/act-2023-qx/index.html
+++ b/view/peko/activity/act-2023-qx/index.html
@@ -108,7 +108,9 @@
            <!-- 背景鹊桥图 -->
            <img src="./images/magpieBridgeBg.png" alt="" class="magpieBridgeBg">
            <!-- 喜鹊动效 -->
-            <div class="xiques"><div class="xique"></div></div>
+            <div class="xiques">
+                <div class="xique"></div>
+            </div>
            <!-- 我的喜鹊 -->
            <p class="birdNum">
                <img src="./images/bird.png" alt="" class="bird">
@@ -200,35 +202,48 @@
            <!-- 打开灯笼 openLantern-->
            <div class="lantern lantern1">
                <div class="box">
-                    <img src="./images/logo.png" alt="">
-                    <p>織女頭飾</p>
-                    <b>1天</b>
+                    <img src="" alt="">
+                    <p></p>
+                    <b></b>
                </div>

            </div>
            <div class="lantern lantern2">
                <div class="box">
-                    <img src="./images/logo.png" alt="">
-                    <p>織女頭飾</p>
-                    <b>1天</b>
+                    <img src="" alt="">
+                    <p></p>
+                    <b></b>
                </div>

            </div>
            <div class="lantern lantern3">
                <div class="box">
-                    <img src="./images/logo.png" alt="">
-                    <p>織女頭飾</p>
-                    <b>1天</b>
+                    <img src="" alt="">
+                    <p></p>
+                    <b></b>
                </div>

            </div>
            <div class="lantern lantern4">
                <div class="box">
-                    <img src="./images/logo.png" alt="">
-                    <p>織女頭飾</p>
-                    <b>1天</b>
+                    <img src="" alt="">
+                    <p></p>
+                    <b></b>
                </div>
            </div>
+            <!-- 动效 -->
+            <div class="blessingTreeSvga blessingTreeSvga1">
+                <div class="blessingTreeSvgaActive blessingTreeSvgaActive1"></div>
+            </div>
+            <div class="blessingTreeSvga blessingTreeSvga2">
+                <div class="blessingTreeSvgaActive blessingTreeSvgaActive2"></div>
+            </div>
+            <div class="blessingTreeSvga blessingTreeSvga3">
+                <div class="blessingTreeSvgaActive blessingTreeSvgaActive3"></div>
+            </div>
+            <div class="blessingTreeSvga blessingTreeSvga4">
+                <div class="blessingTreeSvgaActive blessingTreeSvgaActive4"></div>
+            </div>
        </div>
        <!-- 奖池&记录 blessingTreeBoomt2-->
        <div class="blessingTreeBoomt">
@@ -247,9 +262,8 @@
                            <p>2023/01/18</p>
                            <i>23:45:234</i>
                        </div>
-                        <div>
-                            <p>莲花灯</p>
-                            <b>777鉆</b>
+                        <div class="b">
+                            莲花灯777鉆
                        </div>
                    </li>
                    <li class="active">
--- a/view/peko/activity/act-2023-qx/js/index.js
+++ b/view/peko/activity/act-2023-qx/js/index.js
@@ -36,6 +36,10 @@ var curDate;//当天日期
 var nextHourTimeStamp;//下一轮结束时间戳
 var leftTime;//倒计时暂存
 var timeOut2;//储存定时器
+var redLineNum = 0;//红绳数量
+var page = 1;//页码
+var pageSizeLack = true;// 下拉更多锁
+var lack = true;// 抽奖锁
 // 初始化函數
 $(function () {
    setTimeout(function () {
@@ -149,6 +153,209 @@ function getRecommendRoom () {
        }
    })
 }
+// 祈福配置接口
+function redLineGetConfig () {
+    // showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023Qixi/redLine/getConfig',
+        data: { pub_ticket: pubInfo.ticket, pub_uid: pubInfo.uid },
+        success (res) {
+            if (res.code === 200) {
+                // 设置红绳数量
+                redLineNum = res.data.redLineNum;
+                $('.page2 .blessingTree .redRope b').text(res.data.redLineNum);
+                // 渲染祈福列表
+                res.data.drawList.forEach((res, i) => {
+                    $(`.page2 .blessingTree .lantern${i + 1}`).attr('id', res.id);
+                    if (res.able) {
+                        $(`.page2 .blessingTree .lantern${i + 1}`).removeClass('openLantern');
+                    } else {
+                        console.log(res.name);
+                        $(`.page2 .blessingTree .lantern${i + 1} img`).attr('src', res.pic);
+                        $(`.page2 .blessingTree .lantern${i + 1} .box p`).text(res.name);
+                        $(`.page2 .blessingTree .lantern${i + 1} .box b`).text(`${res.num}${res.unit}`);
+                        $(`.page2 .blessingTree .lantern${i + 1}`).addClass('openLantern');
+                    }
+                })
+                hideLoading(layerIndex)
+            } else {
+                hideLoading(layerIndex)
+                toastMsg(res.message)
+            }
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 祈福抽奖接口
+function redLineDraw (id) {
+    // showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023Qixi/redLine/draw',
+        data: { id },
+        success (res) {
+            if (res.code === 200) {
+                id = id == null ? res.data : id;
+                if (id == 1) {
+                    blessingTreeSvgaFun1();
+                } else if (id == 2) {
+                    blessingTreeSvgaFun2();
+                } else if (id == 3) {
+                    blessingTreeSvgaFun3();
+                } else if (id == 4) {
+                    blessingTreeSvgaFun4();
+                }
+                setTimeout(function () {
+                    lock = true;
+                    redLineGetConfig();
+                }, 500);
+                hideLoading(layerIndex)
+            } else {
+                lock = true;
+                hideLoading(layerIndex)
+                toastMsg(res.message)
+            }
+        },
+        error (err) {
+            lock = true;
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 默认抽奖祈福按钮
+$('.page2 .blessingTree .but').click(function () {
+    if (redLineNum > 0) {
+        if (lack) {
+            lock = false;
+            redLineDraw(null);
+        }
+    } else {
+        toastMsg('红绳数量不足，可参与投放喜鹊活动获得')
+    }
+})
+// 指定抽奖
+$('.page2 .blessingTree .lantern').click(function () {
+    var id = $(this).attr('id');
+    if (redLineNum > 0) {
+        if (lack) {
+            lock = false;
+            redLineDraw(id);
+        }
+    } else {
+        toastMsg('红绳数量不足，可参与投放喜鹊活动获得')
+    }
+})
+// 播放喜鹊svg
+function blessingTreeSvgaFun1 () {
+    $('.page2 .blessingTree .blessingTreeSvga1').show();
+    setTimeout(function () {
+        $('.page2 .blessingTree .lantern1').hide();
+    }, 100)
+    player1 = new SVGA.Player('.blessingTreeSvgaActive1');
+    parser1 = new SVGA.Parser('.blessingTreeSvgaActive1');
+    parser1.load('./images/blessingTree.svga', function (videoItem) {
+        player1.loops = 1
+        player1.clearsAfterStop = false;
+        player1.setVideoItem(videoItem);
+        player1.startAnimation();
+        player1.setContentMode('AspectFill')
+        player1.onFinished(() => {
+            $('.page2 .blessingTree .lantern1').show();
+            $('.page2 .blessingTree .blessingTreeSvga1').hide();
+        })
+    })
+}
+// 播放喜鹊svg
+function blessingTreeSvgaFun2 () {
+    $('.page2 .blessingTree .blessingTreeSvga2').show();
+    setTimeout(function () {
+        $('.page2 .blessingTree .lantern2').hide();
+    }, 100)
+    player2 = new SVGA.Player('.blessingTreeSvgaActive2');
+    parser2 = new SVGA.Parser('.blessingTreeSvgaActive2');
+    parser2.load('./images/blessingTree.svga', function (videoItem) {
+        player2.loops = 1
+        player2.clearsAfterStop = false;
+        player2.setVideoItem(videoItem);
+        player2.startAnimation();
+        player2.setContentMode('AspectFill')
+        player2.onFinished(() => {
+            $('.page2 .blessingTree .lantern2').show();
+            $('.page2 .blessingTree .blessingTreeSvga2').hide();
+        })
+    })
+}
+// 播放喜鹊svg
+function blessingTreeSvgaFun3 () {
+    $('.page2 .blessingTree .blessingTreeSvga3').show();
+    setTimeout(function () {
+        $('.page2 .blessingTree .lantern3').hide();
+    }, 100)
+    player3 = new SVGA.Player('.blessingTreeSvgaActive3');
+    parser3 = new SVGA.Parser('.blessingTreeSvgaActive3');
+    parser3.load('./images/blessingTree.svga', function (videoItem) {
+        player3.loops = 1
+        player3.clearsAfterStop = false;
+        player3.setVideoItem(videoItem);
+        player3.startAnimation();
+        player3.setContentMode('AspectFill')
+        player3.onFinished(() => {
+            $('.page2 .blessingTree .lantern3').show();
+            $('.page2 .blessingTree .blessingTreeSvga3').hide();
+        })
+    })
+}
+// 播放喜鹊svg
+function blessingTreeSvgaFun4 () {
+    $('.page2 .blessingTree .blessingTreeSvga4').show();
+    setTimeout(function () {
+        $('.page2 .blessingTree .lantern4').hide();
+    }, 100)
+    player4 = new SVGA.Player('.blessingTreeSvgaActive4');
+    parser4 = new SVGA.Parser('.blessingTreeSvgaActive4');
+    parser4.load('./images/blessingTree.svga', function (videoItem) {
+        player4.loops = 1;
+        player4.clearsAfterStop = false;
+        player4.setVideoItem(videoItem);
+        player4.startAnimation();
+        player4.setContentMode('AspectFill')
+        player4.onFinished(() => {
+            $('.page2 .blessingTree .lantern4').show();
+            $('.page2 .blessingTree .blessingTreeSvga4').hide();
+        })
+    })
+}
+// 刷新祈福接口
+function fresh () {
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023Qixi/redLine/fresh',
+        data: { pub_ticket: pubInfo.ticket, pub_uid: pubInfo.uid },
+        success (res) {
+            if (res.code === 200) {
+                redLineGetConfig();
+                hideLoading(layerIndex)
+            } else {
+                hideLoading(layerIndex)
+                toastMsg(res.message)
+            }
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 刷新按钮
+$('.page2 .blessingTree .refresh').click(function () {
+    fresh();
+})
 // 定情信物礼物轮播
 function swiperFun () {
    var mySwiper = new Swiper('.swiper', {
@@ -170,6 +377,9 @@ $('.tabs div').click(function () {
    $('.page3').hide();
    $('.page4').hide();
    $(`.page${i}`).show();
+    if (i == 2) {
+        redLineGetConfig();
+    }
    if (i == 3) {
        getRoomRank();
    }
@@ -389,8 +599,68 @@ $('.page2 .blessingTreeBoomt .tab div').click(function () {
        $('.page2 .blessingTreeBoomt').removeClass('blessingTreeBoomt2')
    } else {
        $('.page2 .blessingTreeBoomt').addClass('blessingTreeBoomt2')
+        page = 1;
+        pageRecord(page)
+        $('.page2 .blessingTreeBoomt2 .box2 ul li').remove();
    }
 })
+//检测是否到达底部
+$(document).ready(function () {
+    $(".page2 .blessingTreeBoomt2 .box2 ul").scroll(function () {
+        var divHeight = $(this).height();
+        var nScrollHeight = $(this)[0].scrollHeight;
+        var nScrollTop = $(this)[0].scrollTop;
+        if (nScrollTop + divHeight >= nScrollHeight) {
+            console.log("到达底部了");
+            if (pageSizeLack) {
+                pageSizeLack = false;
+                page++;
+                pageRecord(page)
+            }
+        }
+    });
+});
+// 祈福记录
+function pageRecord (page) {
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023Qixi/redLine/pageRecord',
+        data: { page, size: 10 },
+        success (res) {
+            if (res.code === 200) {
+                if (res.data.length == 0) {
+                    pageSizeLack = false;
+                    hideLoading(layerIndex)
+                    return;
+                }
+                var str = '';
+                res.data.forEach((res, i) => {
+                    str += `
+                    <li class="${i % 2 == 0 ? 'active' : ''}">
+                        <div>
+                            <p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
+                            <i>${dateFormat(res.createTime, 'hh/mm/ss')}</i>
+                        </div>
+                        <div class="b">${res.rewardDesc}</div>
+                    </li>
+                    `
+                })
+                $('.page2 .blessingTreeBoomt2 .box2 ul').append(str);
+                hideLoading(layerIndex)
+            } else {
+                hideLoading(layerIndex)
+                toastMsg(res.message)
+                pageSizeLack = true;
+            }
+        },
+        error (err) {
+            pageSizeLack = true;
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
 // 获取CP榜单接口
 function getCpRank () {
    showLoading()
@@ -449,8 +719,8 @@ function countup () {
        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
        s = getzf(Math.floor(leftTime / 1000 % 60));
        //将倒计时赋值到div中
-        $('.page4 .loveList .times span').eq(0).text(h);
-        $('.page4 .loveList .times span').eq(1).text(m);
+        $('.page4 .loveList .times span').eq(0).text(m);
+        $('.page4 .loveList .times span').eq(1).text(s);
        leftTime = leftTime - 1000;
        //递归每秒调⽤countTime⽅法，显⽰动态时间效果
    } else {
--- a/view/peko/common/js/common2.js
+++ b/view/peko/common/js/common2.js
@@ -544,8 +544,8 @@ function getInfoFromClient () {
    } else {
        // 非app环境调试参数
        pubInfo.uid = sessionStorage.getItem("uid") ? sessionStorage.getItem("uid") : '';
-        pubInfo.ticket = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
-        // pubInfo.h5_token = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
+        // pubInfo.ticket = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
+        pubInfo.h5_token = sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';
        pubInfo.deviceId = "0";
        pubInfo.deviceInfo = {
            app: 'peko',
@@ -775,7 +775,7 @@ function networkRequest (reqObj = {}, type) {
    pubHeader.channel = pubInfo.deviceInfo.channel || ''
    pubHeader.client = 'h5'
    pubHeader.pub_uid = window.location.pathname.match(/login.html/) ? 0 : pubInfo.uid
-    if (true) {
+    if (browser.app) {
        pubHeader.pub_ticket = pubInfo.ticket
    } else {
        pubHeader.h5_token =sessionStorage.getItem("ticket") ? sessionStorage.getItem("ticket") : '';