moliparty/moliparty-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善幸运数字模块

Browse Source
This commit is contained in:
chenruiye
2025-05-16 15:32:52 +08:00
parent d535c34ceb
commit 7d39f9638e
15 changed files with 273 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
view/molistar/activity/luckyNumbers/css/index.css
View File

@@ -664,3 +664,10 @@ body {
width: 0.8rem;
height: 0.8rem;
}
.arabic .top_bg .rules {
justify-content: flex-start;
}
.arabic .fortunate_number .history_btn {
justify-content: flex-start;
}

8
view/molistar/activity/luckyNumbers/css/index.scss
View File

@@ -769,3 +769,11 @@ body {
}
}
}
.arabic{
.top_bg .rules{
justify-content: flex-start;
}
.fortunate_number .history_btn{
justify-content: flex-start;
}
}

10
view/molistar/activity/luckyNumbers/css/myHistory.css
View File

@@ -131,3 +131,13 @@ body {
z-index: 9999;
background: #000000;
}
.arabic .content_list .content_box .felx_box .view_results img {
transform: rotate(180deg);
}
.arabic .content_list .content_box .Expired {
left: 0.0266666667rem;
display: flex;
right: auto;
border-radius: 0.36rem 0 0.36rem 0;
}

11
view/molistar/activity/luckyNumbers/css/myHistory.scss
View File

@@ -155,3 +155,14 @@ body {
z-index: 9999;
background: #000000;
}
.arabic{
.content_list .content_box .felx_box .view_results img{
transform: rotate(180deg);
}
.content_list .content_box .Expired{
left: px2rem(2);
display: flex;
right: auto;
border-radius: px2rem(27) 0 px2rem(27) 0;
}
}

13
view/molistar/activity/luckyNumbers/css/resultsView.css
View File

@@ -109,7 +109,7 @@ body {
border-radius: 50%;
}
.receiverList .receiver_content .receiver_box .info {
margin-left: 0.2933333333rem;
margin: 0 0.2933333333rem;
}
.receiverList .receiver_content .receiver_box .info .name {
display: flex;
@@ -147,6 +147,9 @@ body {
}
.receiverList .receiver_content .receiver_box .jackpot {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.receiverList .receiver_content .receiver_box .jackpot .num {
font-family: PingFang SC;
@@ -157,7 +160,7 @@ body {
.receiverList .receiver_content .receiver_box .jackpot img {
width: 0.5066666667rem;
height: 0.5066666667rem;
margin-left: 0.1066666667rem;
margin: 0 0.1066666667rem;
}
.Only_data_30 {
@@ -169,6 +172,7 @@ body {
opacity: 0.5;
margin-top: 0.4933333333rem;
text-align: center;
display: none;
}
.No_one_pool {
@@ -181,3 +185,8 @@ body {
margin: 5.3333333333rem 0.6666666667rem;
display: none;
}
.arabic .receiverList .receiver_content .receiver_box .jackpot {
margin-right: auto;
margin-left: 0;
}

66
view/molistar/activity/luckyNumbers/css/resultsView.scss
View File

@@ -42,6 +42,12 @@ body {
}
}
// .top_bg{
// position: fixed;
// left: 0;
// top: 0;
// }
.top_img {
position: relative;
@@ -64,9 +70,11 @@ body {
position: absolute;
bottom: -3%;
width: px2rem(546);
.jackpot{
.jackpot {
font-weight: 600;
}
img {
width: px2rem(52);
height: px2rem(52);
@@ -118,6 +126,7 @@ body {
align-items: center;
padding: px2rem(20) px2rem(25);
margin-top: px2rem(20);
.avatar {
img {
width: px2rem(120);
@@ -127,7 +136,8 @@ body {
}
.info {
margin-left: px2rem(22);
margin: 0 px2rem(22);
.name {
display: flex;
align-items: center;
@@ -173,6 +183,10 @@ body {
.jackpot {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
.num {
font-family: PingFang SC;
font-weight: 600;
@@ -183,30 +197,40 @@ body {
img {
width: px2rem(38);
height: px2rem(38);
margin-left: px2rem(8);
margin: 0 px2rem(8);
}
}
}
}
}
.Only_data_30{
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFF784;
line-height: px2rem(38);
opacity: 0.5;
margin-top: px2rem(37);
text-align: center;
.Only_data_30 {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFF784;
line-height: px2rem(38);
opacity: 0.5;
margin-top: px2rem(37);
text-align: center;
display: none;
}
.No_one_pool{
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(34);
color: #FFF783;
line-height: px2rem(36);
text-align: center;
margin: px2rem(400) px2rem(50);
display: none;
.No_one_pool {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(34);
color: #FFF783;
line-height: px2rem(36);
text-align: center;
margin: px2rem(400) px2rem(50);
display: none;
}
.arabic {
.receiverList .receiver_content .receiver_box .jackpot {
margin-right: auto;
margin-left: 0;
}
}

8
view/molistar/activity/luckyNumbers/index.html
View File

@@ -24,17 +24,17 @@
<div class="time_kuang">
<img src="./images/time_kuang.png" alt="" />
<div class="time_text" id="hours">00</div>
<div class="time_type">Hours</div>
<div class="time_type Hours">Hours</div>
</div>
<div class="time_kuang">
<img src="./images/time_kuang.png" alt="" />
<div class="time_text" id="minutes">00</div>
<div class="time_type">Mins</div>
<div class="time_type Mins">Mins</div>
</div>
<div class="time_kuang">
<img src="./images/time_kuang.png" alt="" />
<div class="time_text" id="seconds">00</div>
<div class="time_type">Secs</div>
<div class="time_type Secs">Secs</div>
</div>
</div>
<div class="tip_chang">
@@ -72,7 +72,7 @@
<span class="Deadline_for_participation"
>Deadline for participation</span
>
06:09:00
<span class="countdown_txt"></span>
</div>
</div>
<div class="today_number Today_Fortunate_Number">

96
view/molistar/activity/luckyNumbers/js/index.js
View File

@@ -84,10 +84,17 @@ function translateFun() {
$('.my_history').html(langReplace(localLang.demoModule.My_history));
$('.Number_participants').html(langReplace(localLang.demoModule.Number_participants));
$('.Rewards').html(langReplace(localLang.demoModule.Rewards));
$('.top_bg .rules').html(langReplace(localLang.demoModule.Rules));
$('.popup_rule .popup_content .title').html(langReplace(localLang.demoModule.Rules));
$('.fortunate_number .history_btn').html(langReplace(localLang.demoModule.History));
$('.Hours').html(langReplace(localLang.demoModule.Hours));
$('.Mins').html(langReplace(localLang.demoModule.Mins));
$('.Secs').html(langReplace(localLang.demoModule.Secs));
}
var totalSeconds;
function getData() {
showLoading();
networkRequest({
@@ -114,40 +121,61 @@ function getData() {
`
$('.top_bg .tip_chang .tip_txt').html(str)
}
$('.my_number .numberList').text(res.data.numberList.join(' 、'))
// 开奖
// 幸运数字个位数情况
if (res.data.luckyNumber) {
if (String(res.data.luckyNumber).length == 1) {
res.data.luckyNumber = '0' + res.data.luckyNumber
}
// 关闭数字滚动动画
pauseAnimation();
$('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
$('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
$('.fortunate_number .num_show .left_txt').css('top', '15%')
$('.fortunate_number .num_show .right_txt').css('top', '15%')
// pauseAnimation(res.data);
let numStr = '';
res.data.numberList.forEach((item, index) => {
if (item == res.data.luckyNumber) {
numStr += ` <span style="color:#FFFFFF">${item}</span>`
} else {
numStr += ` <span>${item}</span> `
}
// 如果中奖了，弹窗
if (res.data.numberList.includes(res.data.luckyNumber)) {
$('.popup_congratulations').show();
// 阻止背景滚动
$('body').css('overflow', 'hidden');
$('.popup_congratulations .popup_content .detail_txt .date').text(res.data.date)
if (index < res.data.numberList.length - 1) {
numStr += '、';
}
})
$('.my_number .numberList').html(numStr)
} else {
$('.my_number .numberList').text(res.data.numberList.join(' 、'))
}
totalSeconds = res.data.countDownSecond;
// // 初始化时分秒显示
const initialTime = formatTime(totalSeconds);
updateCountdownDisplay(initialTime);
pauseCountdown();
if (totalSeconds != 0) {
localStorage.setItem("displayStatus", JSON.stringify(false));
// 开始倒计时
startCountdown();
} else {
let displayStatus = JSON.parse(localStorage.getItem('displayStatus'))
// 不为true执行下面 有一次滚动动画 ，true只会渲染数字
if (!displayStatus) {
// 开启滚动动画
startAnimation()
setTimeout(() => {
// 关闭数字滚动动画
pauseAnimation(res.data);
// 渲染幸运数字
$('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
$('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
$('.fortunate_number .num_show .left_txt').css('top', '15%')
$('.fortunate_number .num_show .right_txt').css('top', '15%')
}, 3000);
} else {
// 渲染幸运数字
$('.fortunate_number .num_show .left_txt .no_animation').text(String(res.data.luckyNumber).substring(0, 1))
$('.fortunate_number .num_show .right_txt .no_animation').text(String(res.data.luckyNumber).substring(1, 2))
$('.fortunate_number .num_show .left_txt').css('top', '15%')
$('.fortunate_number .num_show .right_txt').css('top', '15%')
}
}
} else {
toastMsg(res.message)
@@ -160,7 +188,7 @@ function getData() {
},
})
}
// 数字滚动动画
function startAnimation() {
$('.fortunate_number .num_show .left_txt .animation_box').show();
$('.fortunate_number .num_show .right_txt .animation_box').show();
@@ -169,13 +197,29 @@ function startAnimation() {
$('.fortunate_number .num_show .left_txt .txt_container').css('animation-play-state', 'running');
$('.fortunate_number .num_show .right_txt .txt_container').css('animation-play-state', 'running');
}
function pauseAnimation() {
// 关闭数字滚动动画
function pauseAnimation(obj) {
$('.fortunate_number .num_show .left_txt .animation_box').hide();
$('.fortunate_number .num_show .right_txt .animation_box').hide();
$('.fortunate_number .num_show .left_txt .no_animation').show();
$('.fortunate_number .num_show .right_txt .no_animation').show();
$('.fortunate_number .num_show .left_txt .txt_container').css('animation-play-state', 'paused');
$('.fortunate_number .num_show .right_txt .txt_container').css('animation-play-state', 'paused');
// 如果中奖了，弹窗
if (obj.numberList.includes(obj.luckyNumber)) {
let displayStatus = JSON.parse(localStorage.getItem('displayStatus'))
// 为true不执行下面
if (displayStatus) return
console.log('中奖了弹窗');
// 展示弹窗
$('.popup_congratulations').show();
// 阻止背景滚动
$('body').css('overflow', 'hidden');
$('.popup_congratulations .popup_content .detail_txt .date').text(obj.date)
localStorage.setItem("displayStatus", JSON.stringify(true));
} else {
localStorage.setItem("displayStatus", JSON.stringify(true));
}
}
// 历史轮次
function getListHistoryRound() {
@@ -234,6 +278,7 @@ function updateCountdownDisplay(time) {
$('#hours').text(time.hours);
$('#minutes').text(time.minutes);
$('#seconds').text(time.seconds);
$('.countdown_txt').text(time.hours + ':' + time.minutes + ':' + time.seconds)
}
var countdownInterval;
// 倒计时函数
@@ -247,7 +292,7 @@ function startCountdown() {
pauseCountdown();
setTimeout(() => {
getData();
}, 2000);
}, 3000);
console.log('Countdown ended!');
return;
}
@@ -260,11 +305,11 @@ function startCountdown() {
totalSeconds--;
}, 1000);
}
// 清除计时器
function pauseCountdown() {
clearInterval(countdownInterval);
}
// 监听页面显示事件
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
pauseCountdown();
@@ -282,12 +327,13 @@ $('.fortunate_bottom .participate_btn').click(function () {
// 阻止背景滚动
$('body').css('overflow', 'hidden');
});
// 关闭
// 关闭投入弹窗
$('.popup_sumbit .popup_content .close_btn').click(function () {
$('.popup_sumbit').hide();
// 阻止背景滚动
$('body').css('overflow', 'auto');
});
// 提交选择的幸运数字
$('.popup_sumbit .popup_content .sumbit_btn').click(function () {
let number = String(leftNumber) + String(rightNumber);
submitLuckyNumber(number)
@@ -322,7 +368,7 @@ $('.fortunate_number .history_btn').click(function () {
// 阻止背景滚动
$('body').css('overflow', 'hidden');
});
// 关闭
// 关闭历史轮次
$('.popup_history .popup_content .close_btn').click(function () {
$('.popup_history').hide();
// 阻止背景滚动
@@ -334,7 +380,7 @@ $('.top_bg .rules').click(function () {
// 阻止背景滚动
$('body').css('overflow', 'hidden');
});
// 关闭
// 关闭规则
$('.popup_rule .popup_content .close_btn').click(function () {
$('.popup_rule').hide();
// 阻止背景滚动

46
view/molistar/activity/luckyNumbers/js/myHistory.js
View File

@@ -68,20 +68,24 @@ function getData() {
success: function (res) {
if (res.code == 200) {
let str = '';
res.data.forEach(item => {
res.data.forEach((item, index) => {
if (String(item.luckyNumber).length == 1) {
item.luckyNumber = '0' + item.luckyNumber
}
let numStr =''
item.numberList.forEach(itemTwo=>{
if(String(itemTwo).length == 1){
let numStr = ''
item.numberList.forEach((itemTwo, indexTwo) => {
if (String(itemTwo).length == 1) {
itemTwo = '0' + itemTwo
}
if(item.luckyNumber == itemTwo){
numStr += `<span style="color:#FFFFFF">${itemTwo}</span>`
}else{
if (item.luckyNumber == itemTwo) {
numStr += ` <span style="color:#FFFFFF">${itemTwo}</span>`
} else {
numStr += ` <span>${itemTwo}</span> `
}
// 只有不是最后一个元素时才加顿号
if (indexTwo < item.numberList.length - 1) {
numStr += '、';
}
})
str += `
<div class="content_box">
@@ -114,15 +118,37 @@ function getData() {
},
})
}
$(document).on('click','.Receive_btn' ,function () {
function getJackpot(date) {
showLoading();
networkRequest({
type: "POST",
url: urlPrefix + "/luckyNumber/getJackpot",
data: {
date
},
success: function (res) {
hideLoading(layerIndex);
if (res.code == 200) {
$('#myVideo').show();
$('#myVideo')[0].play()
$('#myVideo').on('ended', function () {
window.location.href = './resultsView.html'
window.location.href = './resultsView.html?date=' + date
return
})
}
},
error: function (res) {
console.log(res, "报错啦");
hideLoading(layerIndex);
},
})
}
// 点击领取奖励
$(document).on('click', '.Receive_btn', function () {
let date = $(this).attr('date');
getJackpot(date);
})
$(document).on('click','.view_results' ,function () {
$(document).on('click', '.view_results', function () {
let date = $(this).attr('date');
console.log(date)
window.location.href = './resultsView.html?date=' + date

38
view/molistar/activity/luckyNumbers/js/resultsView.js
View File

@@ -60,6 +60,7 @@ function translateFun() {
$('.Received_Successful').html(langReplace(localLang.demoModule.Received_Successful));
$('.Put_wallet').html(langReplace(localLang.demoModule.Put_wallet));
$('.already_claimed').html(langReplace(localLang.demoModule.already_claimed));
$('.Only_data_30').html(langReplace(localLang.demoModule.Only_data_30));
}
@@ -73,7 +74,7 @@ function getData() {
hideLoading(layerIndex);
if (res.code == 200) {
$('.page_title').text(res.data.date + ' ' + langReplace(localLang.demoModule.Fortunate))
if (res.data.status == 0) {
if (res.data.status == 0 || ((!res.data.jackpot||res.data.jackpot==0) && !res.data.receiverList)) {
// 没人中奖
$('.one_pool').hide()
$('.No_one_pool').show()
@@ -82,7 +83,8 @@ function getData() {
// 中奖的已领取
$('.one_pool').show()
$('.No_one_pool').hide()
$('.receiverList .title .num').text(res.data?.receiverList.length)
$('.top_img .conis_bg .jackpot').text(res.data.jackpot)
} else if (res.data.status == -1) {
$('.one_pool').show()
$('.No_one_pool').hide()
@@ -100,11 +102,39 @@ function getData() {
'color': '#292419'
})
$('.top_img .conis_bg .jackpot').text(res.data.jackpot)
$('.Received_Successful').text(langReplace(localLang.demoModule.Coins_expired))
$('.Put_wallet').text(langReplace(localLang.demoModule.Remember_time))
$('.Received_Successful').text(langReplace(localLang.demoModule.Coins_expired))
$('.Put_wallet').text(langReplace(localLang.demoModule.Remember_time))
}
}
if(res.data.receiverList){
let str = '';
res.data.receiverList.forEach(item => {
str += `
<div class="receiver_box">
<div class="avatar">
<img src="${item.avatar}" alt="">
</div>
<div class="info">
<div class="name">
<span class="nick">${item.nick}</span>
<img src="${item.userLevelVo.experUrl}" alt="" class="experUrl">
<img src="${item.userLevelVo.charmUrl}" alt="" class="charmUrl">
</div>
<div class="id">ID: <span class="erbanNo">${item.erbanNo}</span> </div>
<div class="date">${item.receiveTime}</div>
</div>
<div class="jackpot">
<div class="num">${item.jackpot}</div>
<img src="./images/coins.png" alt="">
</div>
</div>
`
});
$('.receiverList .receiver_content').append(str)
$('.Only_data_30').show()
}
} else {
toastMsg(res.message)
}

7
view/molistar/activity/luckyNumbers/local/ar.js
View File

@@ -38,6 +38,11 @@ langAr = {
No_one_pool:'لم يشارك أحد في مجموعة الجوائز هذه',
Received_Successful:'تم الاستلام بنجاح',
Put_wallet:'ضعها في محفظتك',
Rules:'القواعد',
History:'تاريخ',
Rewards:'المكافأة',
Hours: `ساعات`,
Mins: `دقائق`,
Secs: `ثواني`,
}
}

6
view/molistar/activity/luckyNumbers/local/en.js
View File

@@ -38,5 +38,11 @@ langEn = {
No_one_pool:'No one has shared this prize pool',
Received_Successful:'Received Successful',
Put_wallet:'Put in your wallet',
Rules:'Rules',
History:'History',
Rewards:'Reward',
Hours: `Hours`,
Mins: `Mins`,
Secs: `Secs`,
}
}

6
view/molistar/activity/luckyNumbers/local/tr.js
View File

@@ -38,5 +38,11 @@ langTr = {
No_one_pool:'Kimse bu ödül havuzunu paylaşmadı',
Received_Successful:'Başarılı Alındı',
Put_wallet:'Cüzdanına koy',
Rules:'Kurallar',
History:'Tarih',
Rewards:'Ödül',
Hours: `Hours`,
Mins: `Mins`,
Secs: `Secs`,
}
}

6
view/molistar/activity/luckyNumbers/local/zh.js
View File

@@ -38,5 +38,11 @@ langZh = {
No_one_pool:'無人分享此獎金池',
Received_Successful:'接收成功',
Put_wallet:'放入錢包',
Rules:'活動規則',
History:'歷史',
Rewards:'獎勵',
Hours: `Hours`,
Mins: `Mins`,
Secs: `Secs`,
}
}

6
view/molistar/activity/luckyNumbers/resultsView.html
View File

@@ -33,9 +33,9 @@
<div class="Put_wallet">Put in your wallet</div>
<div class="receiverList">
<div class="title"> <span class="">12</span> <span class="already_claimed"> have already claimed</span></div>
<div class="title"> <span class="num">0</span> <span class="already_claimed"> have already claimed</span></div>
<div class="receiver_content">
<div class="receiver_box">
<!-- <div class="receiver_box">
<div class="avatar">
<img src="" alt="">
</div>
@@ -52,7 +52,7 @@
<div class="num"></div>
<img src="./images/coins.png" alt="">
</div>
</div>
</div> -->
</div>
</div>
<div class="Only_data_30">Only show last 30 days data</div>