diff --git a/view/peko/activity/act-2023-qx/css/index.css b/view/peko/activity/act-2023-qx/css/index.css index d239471..c054333 100644 --- 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; } diff --git a/view/peko/activity/act-2023-qx/css/index.scss b/view/peko/activity/act-2023-qx/css/index.scss index a0793df..7ea4d6a 100644 --- 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 { diff --git a/view/peko/activity/act-2023-qx/images/blessingTree.svga b/view/peko/activity/act-2023-qx/images/blessingTree.svga new file mode 100644 index 0000000..ddada00 Binary files /dev/null and b/view/peko/activity/act-2023-qx/images/blessingTree.svga differ diff --git a/view/peko/activity/act-2023-qx/index.html b/view/peko/activity/act-2023-qx/index.html index 2159eb8..13b56db 100644 --- a/view/peko/activity/act-2023-qx/index.html +++ b/view/peko/activity/act-2023-qx/index.html @@ -108,7 +108,9 @@ -
+
+
+

@@ -200,35 +202,48 @@

- -

織女頭飾

- 1天 + +

+
- -

織女頭飾

- 1天 + +

+
- -

織女頭飾

- 1天 + +

+
- -

織女頭飾

- 1天 + +

+
+ +
+
+
+
+
+
+
+
+
+
+
+
@@ -247,9 +262,8 @@

2023/01/18

23:45:234
-
-

莲花灯

- 777鉆 +
+ 莲花灯777鉆
  • diff --git a/view/peko/activity/act-2023-qx/js/index.js b/view/peko/activity/act-2023-qx/js/index.js index a28256d..25ff150 100644 --- 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 += ` +
  • +
    +

    ${dateFormat(res.createTime, 'yyyy/MM/dd')}

    + ${dateFormat(res.createTime, 'hh/mm/ss')} +
    +
    ${res.rewardDesc}
    +
  • + ` + }) + $('.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 { diff --git a/view/peko/common/js/common2.js b/view/peko/common/js/common2.js index 4d9a942..72ad8fd 100644 --- 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") : '';