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

每日消费 - 底部轮播图已完成，还差轮播图内的奖励图

Browse Source
This commit is contained in:
yujiacong
2025-07-15 18:20:49 +08:00
parent f04fea4985
commit 43eac638c7
16 changed files with 389 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
view/molistar/modules/dailyConsumption/css/index.css
View File

@@ -367,6 +367,7 @@ body {
width: 10rem;
height: auto;
margin: 0 auto 0.4133333333rem;
display: none;
}
.content1 .contentBox1,
.content1 .contentBox2,
@@ -784,6 +785,117 @@ body {
margin-bottom: 0.4533333333rem;
}
.reward_list .reward_box {
width: 10rem;
}
.reward_list .reward_box .top {
background: url(../images/top_bg.png) no-repeat;
background-size: 100% 100%;
height: 4.9066666667rem;
width: 100%;
position: relative;
}
.reward_list .reward_box .top .title {
background: url(../images/act_tab_bg.png) no-repeat;
background-size: 100% 100%;
width: 7.2933333333rem;
height: 2.5333333333rem;
font-family: PingFang SC;
font-weight: 600;
font-size: 0.5333333333rem;
color: #FFED70;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.7333333333rem;
}
.reward_list .reward_box .top .title img {
width: 0.5333333333rem;
height: 0.5333333333rem;
margin: 0 0.04rem;
}
.reward_list .reward_box .content {
background: url(../images/content_bg.png) no-repeat;
background-size: 100% 100%;
width: 100%;
text-align: center;
}
.reward_list .reward_box .content img {
width: 8rem;
}
.reward_list .reward_box .bottom {
background: url(../images/bottom_bg.png) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 4.9333333333rem;
}
.reward_list .reward_box .bottom .priority_title {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.4266666667rem;
color: #FFED70;
text-align: center;
padding-top: 0.3733333333rem;
}
.reward_list .reward_box .bottom .user_list {
display: flex;
justify-content: space-around;
margin: 0.36rem auto 0;
}
.reward_list .reward_box .bottom .user_list div {
width: 1.6rem;
height: 1.6rem;
position: relative;
}
.reward_list .reward_box .bottom .user_list div img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
border: 0.04rem #FFED70 solid;
}
.reward_list .reward_box .bottom .user_list div span {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
color: #FFED70;
font-size: 0.3466666667rem;
font-weight: 500;
text-align: center;
position: absolute;
left: 0;
bottom: -0.6rem;
height: 0.4rem;
}
.reward_list .reward_box .nextBtn,
.reward_list .reward_box .prevBtn {
position: absolute;
}
.reward_list .reward_box .nextBtn img,
.reward_list .reward_box .prevBtn img {
width: 1.3333333333rem;
height: 1.3333333333rem;
}
.reward_list .reward_box .nextBtn {
top: 7.7733333333rem;
right: 0;
}
.reward_list .reward_box .prevBtn {
top: 7.7733333333rem;
left: 0;
}
.swiper-slide {
width: 10rem;
}
.arabic .header {
background: url(../images/header-ar.png) no-repeat;
background-size: 100% 100%;

142
view/molistar/modules/dailyConsumption/css/index.scss
View File

@@ -289,6 +289,7 @@ body {
transform: translateX(-50%);
top: px2rem(420);
border-radius: px2rem(16);
// padding: 0 px2rem(60);
.line {
width: 0%;
@@ -330,8 +331,9 @@ body {
}
}
.boxs:nth-child(odd){
span{
.boxs:nth-child(odd) {
span {
top: px2rem(70);
// bottom: px2rem(550);
}
@@ -348,13 +350,15 @@ body {
.box3 {
left: px2rem(0);
}
.box4 {
left: px2rem(0);
}
.box5 {
right: px2rem(0);
}
.act {
background: url(../images/true.png) no-repeat;
@@ -424,7 +428,7 @@ body {
width: px2rem(750);
height: auto;
margin: 0 auto px2rem(31);
// display: none;
display: none;
.contentBox1,
.contentBox2,
@@ -835,6 +839,136 @@ body {
}
}
.reward_list {
.reward_box {
width: px2rem(750);
.top {
background: url(../images/top_bg.png) no-repeat;
background-size: 100% 100%;
height: px2rem(368);
width: 100%;
position: relative;
.title {
background: url(../images/act_tab_bg.png) no-repeat;
background-size: 100% 100%;
width: px2rem(547);
height: px2rem(190);
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(40);
color: #FFED70;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(130);
img {
width: px2rem(40);
height: px2rem(40);
margin: 0 px2rem(3);
}
}
}
.content {
background: url(../images/content_bg.png) no-repeat;
background-size: 100% 100%;
width: 100%;
text-align: center;
img {
width: px2rem(600);
}
}
.bottom {
background: url(../images/bottom_bg.png) no-repeat;
background-size: 100% 100%;
width: 100%;
height: px2rem(370);
.priority_title {
font-family: PingFang SC;
font-weight: 500;
font-size: px2rem(32);
color: #FFED70;
text-align: center;
padding-top: px2rem(28);
}
.user_list {
display: flex;
justify-content: space-around;
margin: px2rem(27) auto 0;
div {
width: px2rem(120);
height: px2rem(120);
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
border: px2rem(3) #FFED70 solid;
}
span {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
color: #FFED70;
font-size: px2rem(26);
font-weight: 500;
text-align: center;
position: absolute;
left: 0;
bottom: -0.6rem;
height: 0.4rem;
}
}
}
}
.nextBtn,
.prevBtn {
position: absolute;
img {
width: px2rem(100);
height: px2rem(100);
}
}
.nextBtn {
top: px2rem(583);
right: 0;
}
.prevBtn {
top: px2rem(583);
left: 0;
}
}
}
.swiper-slide {
width: px2rem(750);
// display: flex;
// flex: 1;
}
.arabic {
.header {
background: url(../images/header-ar.png) no-repeat;

13
view/molistar/modules/dailyConsumption/css/swiper-bundle.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
view/molistar/modules/dailyConsumption/images/Next.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
view/molistar/modules/dailyConsumption/images/Prev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
view/molistar/modules/dailyConsumption/images/bottom_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
view/molistar/modules/dailyConsumption/images/content.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
view/molistar/modules/dailyConsumption/images/content_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
view/molistar/modules/dailyConsumption/images/top_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

14
view/molistar/modules/dailyConsumption/index.html
View File

@@ -7,6 +7,8 @@
<title class="text1"></title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css?v=1.0">
<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
</head>
<body>
@@ -102,6 +104,15 @@
<div class="tabbox act text7"></div>
<div class="text8"></div>
</div> -->
<div class="reward_list">
<div class="swiper">
<div class="swiper-wrapper">
</div>
</div>
</div>
<!-- 档位1 -->
<div class="content1">
<div class="contentBox1 level3">
@@ -262,4 +273,5 @@
<script src="./local/tr.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./js/index.js?v=1.0"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="../../common/local/langHandler.js"></script>
<script src="./js/swiper-bundle.min.js"></script>

177
view/molistar/modules/dailyConsumption/js/index.js
View File

@@ -58,6 +58,7 @@ $(function () {
localLang = window.lang;
translateFun();
getConfig();
swiperFun();
}, 100)
})
// 处理SVGA
@@ -124,11 +125,11 @@ function translateFun() {
}
console.log(unitProcessingAr(7000000, 1));
var activityType = 'DAY_CONSUME';
var gearPosition = {
DAY_CONSUME: [70000, 350000, 700000, 2100000, 3500000],
WEEK_CONSUME: [560000, 2800000, 5600000, 16800000, 28000000],
MONTH_CONSUME: [7000000, 21000000, 35000000, 70000000, 140000000],
};
// var gearPosition = {
// DAY_CONSUME: [70000, 350000, 700000, 2100000, 3500000],
// WEEK_CONSUME: [560000, 2800000, 5600000, 16800000, 28000000],
// MONTH_CONSUME: [7000000, 21000000, 35000000, 70000000, 140000000],
// };
var boxImgOption = {
DAY_CONSUME: {
ordinary: './images/day_ordinarybox.png',
@@ -156,7 +157,7 @@ function getConfig() {
success(res) {
if (res.code === 200) {
// 分区规则
$('.rule .rule_in .box').html(res.data.partitionId == 2 ||res.data.partitionId == 8 ? langReplace(localLang.demoModule.arRule) : res.data.partitionId == 1? langReplace(localLang.demoModule.enRule) :langReplace(localLang.demoModule.en2Rule));
$('.rule .rule_in .box').html(res.data.partitionId == 2 || res.data.partitionId == 8 ? langReplace(localLang.demoModule.arRule) : res.data.partitionId == 1 ? langReplace(localLang.demoModule.enRule) : langReplace(localLang.demoModule.en2Rule));
// 处理是否代理人
res.data.rechargeUser ? $('.myBox').hide() : $('.myBox').show();
// 处理等级不足不显示榜单
@@ -174,21 +175,23 @@ function getConfig() {
}
// 处理倒计时
countup(res.data.expireNanos);
// console.log(res.data.expireNanos + Math.floor(Date.now()));
let gearPosition = res.data.activityLevelUserVo
// res.data.goldNum = 8000000;
// 处理顶部进度以及个人信息
$('.myBox .tx').attr('src', res.data.avatar);
$('.myBox .name').text(res.data.nick);
$('.myBox .Today_Support').text(langReplace(localLang.demoModule.Today_Support) + res.data.goldNum);
$('.myBox .Upgrade_Requires').text(langReplace(localLang.demoModule.Upgrade_Requires) + getNextLevelDifference(res.data.goldNum, gearPosition[activityType]));
gearPosition[activityType].forEach((item, index) => {
$(`.myBox .lineBox .box${index + 1} span b`).text(unitProcessingAr(item, 1));
$('.myBox .Upgrade_Requires').text(langReplace(localLang.demoModule.Upgrade_Requires) + getNextLevelDifference(res.data.goldNum, gearPosition));
// 轮播图清空
$('.reward_list .swiper-wrapper .swiper-slide').remove();
let htmlStr = '';
gearPosition.forEach((item, index) => {
$(`.myBox .lineBox .box${index + 1} span b`).text(unitProcessingAr(item.usb, 1));
// 均匀分配每个档位的进度条宽度
$(`.myBox .lineBox .box${index + 1}`).css('left', `${((index + 1) / (gearPosition[activityType].length + 0.5)) * 100}%`);
$(`.myBox .lineBox .box${index + 1}`).css('left', `${((index + 1) / (gearPosition.length + 0.5)) * 100}%`);
// 到达档位 - 宝箱高亮
if (res.data.goldNum >= item) {
if (res.data.goldNum >= item.usb) {
$(`.myBox .lineBox .box${index + 1}`).css({
'background': `url(${boxImgOption[activityType].actBox}) no-repeat`,
'background-size': '100% 100%'
@@ -199,68 +202,11 @@ function getConfig() {
'background-size': '100% 100%'
});
}
});
// 调整进度条宽度为均匀分布
let currentLevelIndex = getCurrentLevelIndex(res.data.goldNum, gearPosition[activityType]);
if (currentLevelIndex >= gearPosition[activityType].length) {
$('.myBox .lineBox .line').css('width', '100%');
} else if (currentLevelIndex === 0) {
// 特殊处理第一个档位
let firstLevelValue = gearPosition[activityType][0];
let progressWidth = (res.data.goldNum / firstLevelValue) * (100 / gearPosition[activityType].length + 0.2);
$('.myBox .lineBox .line').css('width', `${progressWidth}%`);
} else {
let nextLevelValue = gearPosition[activityType][currentLevelIndex];
let totalLevels = gearPosition[activityType].length + 0.2;
let prevLevelValue = gearPosition[activityType][currentLevelIndex - 1];
// 防止除以零的情况
let levelRange = nextLevelValue - prevLevelValue;
let progress = levelRange === 0 ? 0 : (res.data.goldNum - prevLevelValue) / levelRange;
let progressWidth = (currentLevelIndex / totalLevels) * 100 + progress * (100 / totalLevels);
$('.myBox .lineBox .line').css('width', `${progressWidth}%`);
}
// $('.myBox .tetxBox .r b').text(res.data.goldNum);
// console.log(res.data.goldNum < 700000);
// if (res.data.goldNum < 700000) {
// $('.myBox .tetxBox .r strong').text(700000);
// $('.myBox .lineBox .box1 span b').text('70K');
// $('.myBox .lineBox .box1').css('left', `${(70000 / 700000) * 100}%`);
// $('.myBox .lineBox .box2 span b').text('350K');
// $('.myBox .lineBox .box2').css('left', `${(350000 / 700000) * 100}%`);
// $('.myBox .lineBox .box3 span b').text('700K');
// $('.myBox .lineBox .box3').css('right', `0%`);
// $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 700000) * 100) > 100 ? 100 : (res.data.goldNum / 700000) * 100}%`);
// if (res.data.goldNum >= 70000) { $('.myBox .lineBox .box1').addClass('act') }
// if (res.data.goldNum >= 350000) { $('.myBox .lineBox .box2').addClass('act') }
// if (res.data.goldNum >= 700000) { $('.myBox .lineBox .box3').addClass('act') }
// } else {
// $('.myBox .tetxBox .r strong').text(7000000);
// $('.myBox .lineBox .box1 span b').text('210K');
// $('.myBox .lineBox .box1').css('left', `${(70000 / 7000000) * 100}%`);
// $('.myBox .lineBox .box2 span b').text('3500K');
// $('.myBox .lineBox .box2').css('left', `${(3500000 / 7000000) * 100}%`);
// $('.myBox .lineBox .box3 span b').text('7M');
// $('.myBox .lineBox .box3').css('right', `0`);
// $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 7000000) * 100) > 100 ? 100 : (res.data.goldNum / 7000000) * 100}%`);
// if (res.data.goldNum >= 210000) { $('.myBox .lineBox .box1').addClass('act') }
// if (res.data.goldNum >= 3500000) { $('.myBox .lineBox .box2').addClass('act') }
// if (res.data.goldNum >= 7000000) { $('.myBox .lineBox .box3').addClass('act') }
// }
// 处理每个档位的用户前四名
res.data.activityLevelUserVo.forEach((res, i) => {
var str = '';
if ((res.level) <= 3) {
$(`.content1 .level${res.level} .priorityWinnersBox div`).remove();
} else {
$(`.content2 .level${res.level} .priorityWinnersBox div`).remove();
}
if (res.userVos.length > 0) {
res.userVos.forEach(val => {
// 渲染轮播图
let str = '';
// 处理每个档位的用户前四名
if (item.userVos.length > 0) {
item.userVos.forEach(val => {
str += `
<div>
<img src="${val.avatar}" alt="">
@@ -276,12 +222,59 @@ function getConfig() {
</div>
`
}
if ((res.level) <= 3) {
$(`.content1 .level${res.level} .priorityWinnersBox`).append(str);
} else {
$(`.content2 .level${res.level} .priorityWinnersBox`).append(str);
}
})
htmlStr += `
<div class="swiper-slide">
<div class="reward_box">
<div class="top">
<div class="title">${localLang.demoModule.Consume} ${unitProcessingAr(item.usb, 1)} <img src="./images/gold.png" alt=""> </div>
</div>
<div class="content">
<img src="./images/content.png" alt="">
</div>
<div class="bottom">
<div class="priority_title">${localLang.demoModule.priorityWinners}</div>
<div class="user_list">
${str}
</div>
</div>
<div class="nextBtn">
<img src="./images/Next.png" alt="">
</div>
<div class="prevBtn">
<img src="./images/Prev.png" alt="">
</div>
</div>
</div>
`
});
// 渲染轮播图
$('.reward_list .swiper-wrapper').append(htmlStr);
// 轮播图回到第一张
mySwiper.slideTo(0);
// 调整进度条宽度为均匀分布
let currentLevelIndex = getCurrentLevelIndex(res.data.goldNum, gearPosition);
if (currentLevelIndex >= gearPosition.length) {
$('.myBox .lineBox .line').css('width', '100%');
} else if (currentLevelIndex === 0) {
// 特殊处理第一个档位
let firstLevelValue = gearPosition[0].usb;
let progressWidth = (res.data.goldNum / firstLevelValue) * (100 / gearPosition.length + 0.2);
$('.myBox .lineBox .line').css('width', `${progressWidth}%`);
} else {
let nextLevelValue = gearPosition[currentLevelIndex].usb;
let totalLevels = gearPosition.length + 0.2;
let prevLevelValue = gearPosition[currentLevelIndex - 1].usb;
// 防止除以零的情况
let levelRange = nextLevelValue - prevLevelValue;
let progress = levelRange === 0 ? 0 : (res.data.goldNum - prevLevelValue) / levelRange;
let progressWidth = (currentLevelIndex / totalLevels) * 100 + progress * (100 / totalLevels);
$('.myBox .lineBox .line').css('width', `${progressWidth}%`);
}
} else {
toastMsg(res.message)
}
@@ -297,9 +290,9 @@ function getConfig() {
// 新增函数：获取当前等级索引
function getCurrentLevelIndex(currentValue, levels) {
for (let i = 0; i < levels.length; i++) {
if (currentValue < levels[i]) {
if (currentValue < levels[i].usb) {
return i;
} else if (currentValue === levels[i]) {
} else if (currentValue === levels[i].usb) {
// 如果当前值正好匹配档位值，返回下一个索引
return i + 1;
}
@@ -450,9 +443,23 @@ $('.tab_list .tab_box').click(function () {
})
function getNextLevelDifference(currentValue, levels) {
for (let i = 0; i < levels.length; i++) {
if (currentValue < levels[i]) {
return levels[i] - currentValue;
if (currentValue < levels[i].usb) {
return levels[i].usb - currentValue;
}
}
return 0; // 当前值大于等于最高等级，无需再升级
}
// 輪播
function swiperFun() {
mySwiper = new Swiper('.swiper', {
loop: false,
});
}
// 切换上一张
$(document).on('click', '.prevBtn', function () {
mySwiper.slidePrev();
})
// 切换下一张
$(document).on('click', '.nextBtn', function () {
mySwiper.slideNext();
})

14
view/molistar/modules/dailyConsumption/js/swiper-bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
view/molistar/modules/dailyConsumption/local/ar.js
View File

@@ -80,5 +80,7 @@ langAr = {
Days:'الأيام',
Today_Support: 'دعم اليوم:',
Upgrade_Requires: 'متطلبات الترقية:',
Consume:'استهلاك ',
}
}

2
view/molistar/modules/dailyConsumption/local/en.js
View File

@@ -78,5 +78,7 @@ langEn = {
Days:'Days',
Today_Support: `Today's Support:`,
Upgrade_Requires: 'Upgrade Requires:',
Consume:'Consume',
}
}

2
view/molistar/modules/dailyConsumption/local/tr.js
View File

@@ -78,6 +78,8 @@ langTr = {
Days:'Günler',
Today_Support: 'Bugünün Desteği:',
Upgrade_Requires: 'Yükseltme Gereksinimleri:',
Consume:'tüket',
}
}

1
view/molistar/modules/dailyConsumption/local/zh.js
View File

@@ -80,5 +80,6 @@ langZh = {
Days: '天',
Today_Support: '今日支持:',
Upgrade_Requires: '升級至下一等級所需:',
Consume:'消耗',
}
}