19 Commits

Author SHA1 Message Date
Dragon
fabb0a14c1 新增愚人节活动 2024-03-27 20:12:16 +08:00
Dragon
b95b0c6d96 新增跳转ui和ticket 2024-03-20 15:53:34 +08:00
Dragon
7797bd0b6e 迁移peko跳转 2024-03-20 15:26:18 +08:00
Dragon
8f21ec0807 替换官网ios下载链接 2024-03-18 13:35:31 +08:00
Dragon
72845dd4e0 替换官网下载链接 2024-03-15 10:13:20 +08:00
Dragon
3cda83ce99 替换奖励规则 2024-03-13 16:18:04 +08:00
Dragon
268a0c9f8a 替换客服号 2024-03-13 12:39:06 +08:00
Dragon
e78ee47012 新增白色情人节 2024-03-12 11:32:10 +08:00
Dragon
7120ef5197 新增女神节 2024-03-04 15:15:19 +08:00
Dragon
dcd7da696d 替换二维码 2024-02-28 20:10:51 +08:00
Dragon
7a7e65d421 调整文案 2024-02-27 22:03:08 +08:00
Dragon
9b09374128 优化样式 2024-02-27 21:56:58 +08:00
Dragon
df6210b2ae 修改样式 2024-02-27 21:52:45 +08:00
Dragon
4037c534ca 清规则缓存 2024-02-13 00:58:31 +08:00
Dragon
389bccabe7 修改规则 2024-02-13 00:19:27 +08:00
Dragon
1dc4207ff9 修改活动时间 2024-02-12 13:20:19 +08:00
Dragon
f4a2bce138 完成音萌情人节活动 2024-02-05 21:10:25 +08:00
Dragon
4b0993dee3 完成首页任务接口联调暂存 2024-02-05 21:10:20 +08:00
Dragon
ff64c396ec 暂存 2024-02-05 21:10:20 +08:00
217 changed files with 14798 additions and 428 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 612 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 945 B

View File

@@ -0,0 +1,270 @@
<!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?v=1.0">
</head>
<body>
<!-- 顶部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
</div>
<!-- 头部 -->
<div class="header">
<!-- 限定礼物 -->
<img src="./images/qualifyGift_icon.png" alt="" class="qualifyGift_icon">
<!-- 活动规则 -->
<img src="./images/rule_icon.png" alt="" class="rule_icon">
</div>
<!-- tab切换 -->
<div class="tabs">
<div class="tab1 act1"></div>
<div style="display: none;" class="tab2"></div>
<div class="tab3"></div>
<div class="tab4"></div>
</div>
<!-- 页面1 -->
<div class="page1">
<!-- 奇幻魔盒 -->
<div class="box1">
<!-- <img src="./images/pageBox1Rule_icon.png" alt="" class=""> -->
<div class="pageBox1Rule_icon">魔盒说明</div>
<div class="time">3分钟倒计时: <span class="sp1">03</span><span class="sp2">00</span></div>
<div class="text">用户在送出第一个奇幻魔盒后开启3分钟倒计时<br>在此期间内点亮所有礼物,可获得<b>【愚人庆典】</b>礼物*1</div>
<div class="giftBoxs">
<!-- <div class="">
<img src="./images/pageBox1Gift1.png" alt="">
扑克士兵
</div>
<div>
<img src="./images/pageBox1Gift2.png" alt="">
咬咬鲨
</div>
<div>
<img src="./images/pageBox1Gift3.png" alt="">
兔子先生
</div>
<div>
<img src="./images/pageBox1Gift4.png" alt="">
甜心魔法
</div>
<div>
<img src="./images/pageBox1Gift5.png" alt="">
奇趣杂技
</div> -->
</div>
</div>
<!-- 奇幻榜 -->
<div class="box2">
<!-- 前叁 -->
<div class="top3">
<div class="no1">
<img src="./images/page1Top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no2">
<img src="./images/page1Top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no3">
<img src="./images/page1Top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值:0</div>
</div>
</div>
<!-- 非前叁 -->
<ul>
<!-- <li>
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值: 20</div>
</li> -->
</ul>
</div>
<!-- 自己榜单 -->
<div class="my">
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值: 20</div>
</div>
</div>
<!-- 页面2 -->
<div class="page2">
<!-- 更新 -->
<img src="./images/upDate.png" alt="" class="upDate">
<!-- 切换 -->
<div class="tab">
<div class="act1">牌照房间</div>
<div class="">个播房间</div>
</div>
<!-- 第一名房间 -->
<div class="topRoom">
<img src="./images/logo.png" alt="" class="tx">
<div class="roomName">房间昵称</div>
<div class="score">房间进度值: <b>00.0%</b></div>
</div>
<!-- 第一名进度 -->
<div class="topLine">
<div></div>
<span>0/0</span>
</div>
<!-- 文桉介绍 -->
<div class="text">房间进度值达到100%,即可开启红包雨</div>
<!-- 第一名房间跳转 -->
<img src="./images/page2ToRoomBut.png" alt="" class="page2ToRoomBut">
<div class="page2NotTopTitle">其他房间推荐</div>
<!-- 其他房间 -->
<ul>
<li>
<img src="./images/logo.png" alt="" class="tx">
<div class="live">直播中</div>
<div class="roomName">房间昵称</div>
<div class="score">房间进度值: <b>00.0%</b></div>
<div class="line_in">
<div></div>
<span>0/0</span>
</div>
<img src="./images/go.png" alt="" class="go">
<img src="./images/notGo.png" alt="" class="notGo">
</li>
</ul>
</div>
<!-- 页面3 -->
<div class="page3"></div>
<!-- 页面4 -->
<div class="page4 page41">
<!-- 切换 -->
<div class="page4_tab">
<div></div>
<div></div>
</div>
<!-- 日榜总榜切换 -->
<div class="dayTab">
<div class="act">日榜</div>
<div>总榜</div>
</div>
<!-- 日期切换 -->
<div class="timeTab">
<div class="act">3.27</div>
<div>3.27</div>
<div>3.27</div>
<div>3.27</div>
<div>3.27</div>
<div>3.27</div>
</div>
<!-- 前叁 -->
<div class="top3">
<div class="no1">
<img src="./images/page1Top1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no2">
<img src="./images/page1Top2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值:0</div>
</div>
<div class="no3">
<img src="./images/page1Top3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值:0</div>
</div>
</div>
<!-- 非前叁 -->
<ul>
<li>
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值: 20</div>
</li>
</ul>
<!-- 自己榜单 -->
<div class="my">
<div class="num">1.</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">用户昵称</div>
<div class="score">奇幻值: 20</div>
</div>
</div>
<!-- 魔盒说明 -->
<div class="MagicBoxRule">
<div class="MagicBoxRule_in MagicBoxRule1">
<!-- 切换 -->
<div class="tab">
<div></div>
<div></div>
</div>
<!-- 切换页面1 -->
<img src="./images/MagicBoxRule1Bg.png" alt="" class="MagicBoxRulePage1">
<!-- 切换页面2 -->
<div class="MagicBoxRulePage2">
<ul>
<li>
<div>
<p>2024/3/19</p>
<b>14:07:07</b>
</div>
<div class="centen">用户昵称</div>
<div class="right">
<p>获得:礼物名称</p>
<b>0 <img src="./images/diamond.png" alt=""></b>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 活动规则 -->
<div class="rule">
<div class="rule_in">
<div class="box">
<img src="./images/rule_in.png" alt="" srcset="">
</div>
</div>
</div>
<!-- 限定礼物规则 -->
<div class="limitedGift">
<div class="limitedGift_in">
<div class="box">
<img src="./images/limitedGift_in.png" alt="" srcset="">
</div>
</div>
</div>
</body>
</html>
</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/index.js"></script>

View File

@@ -0,0 +1,566 @@
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'
})
}
var page = 1;
var isLock = true;
var timeOut = null;
var countupTime = 0;
var XIAO_CHOU_ROOM = 'XIAO_CHOU_ROOM_1';
var rankType = 1; //排行榜类型1=送礼日榜2=送礼总榜3=收礼日榜4=收礼总榜);
var data = null;//默认日榜;
var type = 'a';//a:送礼b:收礼;
var type2 = 'a';//a:日榜b:总榜;
var curDate; //当天日期;
// 初始化函数
$(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)
}
})
getTime();
getRank();
}, 100)
})
// 获取任务接口
function getTaskUser () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user',
data: { componentCode: "QI_HUAN_MO_HE" },
success (res) {
if (res.code === 200) {
// 渲染愚人盛典礼物
$('.page1 .box1 .giftBoxs div').remove();
var str = '';
res.data[0].children.forEach((res, i) => {
var img = res.taskIcon.split("|");
str += `
<div class="${res.completed ? 'act' : ''}">
<img src = "${res.completed ? img[1] : img[0]}" alt = "" >
${res.taskName}
</div >
`
});
$('.page1 .box1 .giftBoxs').append(str);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
}
})
}
// 获取倒计时接口
function getTime () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2024AprilFoolsDay/getTime',
data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: "QI_HUAN_GIFT" },
success (res) {
if (res.code === 200) {
if (res.data) {
countupTime = res.data - res.timestamp;
countup();
}
getTaskUser();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
}
})
}
// 倒计时
function countup () {
clearTimeout(timeOut)
//获取当前时间
var d = 0;
var h = 0;
var m = 0;
var s = 0;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (countupTime >= 0) {
d = getzf(Math.floor(countupTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(countupTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(countupTime / 1000 / 60 % 60));
s = getzf(Math.floor(countupTime / 1000 % 60));
//将倒计时赋值到div中
$('.page1 .box1 .time .sp1').text(m);
$('.page1 .box1 .time .sp2').text(s);
countupTime = countupTime - 1000;
//递归每秒调⽤countTime⽅法显⽰动态时间效果
} else {
getTime();
return
}
timeOut = setTimeout(countup, 1000);
}
//补0操作
function getzf (num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}
// tab切换
$('.tabs div').click(function () {
var i = $(this).index() + 1;
$('.tabs div').removeClass('act1').removeClass('act2').removeClass('act3').removeClass('act4');
$(this).addClass(`act${i}`);
$('.page1,.page2,.page3,.page4').hide();
$(`.page${i}`).show();
if (i == 1) {
getRank();
} else if (i == 2) {
getRooms();
} else if (i == 4) {
giftGetRank(rankType, data);
}
})
// 更新房间接口按钮
$('.page2 .upDate').click(function () {
getRooms();
})
// 获取奇幻榜接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2023Halloween/rank/getRank',
data: { rankType: 4, pageSize: 15, },
success (res) {
if (res.code === 200) {
// 处理前叁
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
avatar: './images/logo.png',
nick: '虚位以待',
score: "0"
})
top3.push(...arr)
}
top3.forEach((res, i) => {
$(`.page1 .box2 .top3 .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page1 .box2 .top3 .no${i + 1} .nick`).text(res.nick);
$(`.page1 .box2 .top3 .no${i + 1} .score`).html('奇幻值<br>' + unitProcessing(res.score, 10000, 1, 'w'))
})
// 非前叁
var str = '';
$('.page1 .box2 ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}.</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="nick">${res.nick}</div>
<div class="score">奇幻值: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page1 .box2 ul').append(str);
// 处理自己榜单
$('.page1 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page1 .my .tx').attr('src', res.data.meRank.avatar);
$('.page1 .my .nick').text(res.data.meRank.nick);
$('.page1 .my .score').text('奇幻值' + unitProcessing(res.data.meRank.score, 10000, 1, 'w'));
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
}
})
}
// 页面2切换
$('.page2 .tab div').click(function () {
var i = $(this).index() + 1;
$('.page2 .tab div').removeClass('act1').removeClass('act2');
$(this).addClass(`act${i}`);
XIAO_CHOU_ROOM = i == 1 ? 'XIAO_CHOU_ROOM_1' : 'XIAO_CHOU_ROOM_4';
getRooms();
})
// 获取房间榜接口
function getRooms () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2024AprilFoolsDay/getRooms',
data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: XIAO_CHOU_ROOM },
success (res) {
if (res.code === 200) {
var top = res.data.slice(0, 1);
if (top.length < 3) {
let arr = new Array(1 - top.length).fill({
roomAvatar: './images/logo.png',
roomTitle: '虚位以待',
percentage: 0,
activityValue: 0,
conditionValue: 0,
})
top.push(...arr)
}
console.log(top);
var notTop = res.data.slice(1);
// 第一房间
$('.page2 .topRoom .tx').attr('src', top[0].roomAvatar);
$('.page2 .topRoom .roomName').text(top[0].roomTitle);
$('.page2 .topRoom .score b').text(top[0].percentage + '%');
$('.page2 .topLine div').css('width', top[0].percentage + '%');
$('.page2 .topLine span').text(`${top[0].activityValue}/${top[0].conditionValue}`);
$('.page2 .page2ToRoomBut').attr("uid", top[0].roomUid);
$('.page2 .page2ToRoomBut').attr("src", top[0].isUnderway ? './images/page2ToRoomBut.png' : './images/page2ToRoomBut2.png');
$('.page2 .page2ToRoomBut').attr("isUnderway", top[0].isUnderway);
// 其他房间
$('.page2 ul li').remove();
var str = '';
notTop.forEach(res => {
str += `
<li>
<img src="${res.roomAvatar}" alt="" class="tx">
<div class="live" style="display:${res.isLive ? 'block' : 'none'}">直播中</div>
<div class="roomName">${res.roomTitle}</div>
<div class="score">房间进度值: <b>${res.percentage}%</b></div>
<div class="line_in">
<div style="width:${res.percentage}%"></div>
<span>${res.activityValue}/${res.conditionValue}</span>
</div>
<img style="display:${res.isUnderway ? 'block' : 'none'}" src="./images/go.png" alt="" class="go" uid=${res.roomUid}>
<img style="display:${!res.isUnderway ? 'block' : 'none'}" src="./images/notGo.png" alt="" class="notGo" uid=${res.roomUid}>
</li>
`
})
$('.page2 ul').append(str);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
}
})
}
// 房间最前面的跳转按钮
$('.page2 .page2ToRoomBut').click(function () {
var uid = $(this).attr('uid');
var isUnderway = $(this).attr('isUnderway');
if (isUnderway) {
if (browser.ios) {
window.webkit.messageHandlers.openRoom.postMessage(uid);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
window.androidJsObj.openRoom(uid);
}
}
}
})
// 其他房间跳转房间按钮
$('.page2 ul').on('click', ' li .go', function () {
var uid = $(this).attr('uid');
if (browser.ios) {
window.webkit.messageHandlers.openRoom.postMessage(uid);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
window.androidJsObj.openRoom(uid);
}
}
})
// 其他房间跳转房间按钮
$('.page2 ul').on('click', ' li .notGo', function () {
var uid = $(this).attr('uid');
if (browser.ios) {
window.webkit.messageHandlers.openRoom.postMessage(uid);
} else if (browser.android) {
if (androidJsObj && typeof androidJsObj === 'object') {
window.androidJsObj.openRoom(uid);
}
}
})
// 页面4切换
$('.page4 .page4_tab div').click(function () {
var i = $(this).index() + 1;
$('.page4').removeClass('page41').removeClass('page42');
$('.page4').addClass(`page4${i}`);
if (i == 1) {
type = 'a';
rankType = type2 == "a" ? 1 : 2;
} else {
type = 'b';
rankType = type2 == "a" ? 3 : 4;
}
giftGetRank(rankType, data);
})
// 页面4 日榜/总榜切换
$('.page4 .dayTab div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act')
if (i == 1) {
type2 = 'a';
rankType = type == "a" ? 1 : 3;
$('.page4 .timeTab').show();
} else {
type2 = 'b';
rankType = type == "a" ? 2 : 4;
$('.page4 .timeTab').hide();
}
giftGetRank(rankType, data);
})
// 页面4 日期切换
$('.page4 .timeTab div').click(function () {
var i = $(this).index() + 1;
var datas = $(this).attr('data');
$(this).addClass('act').siblings().removeClass('act')
rankType = type == "a" ? 1 : 3;//排行榜类型1=甜蜜日榜2=甜蜜总榜3=爱意日榜4=爱意总榜)
data = datas;
giftGetRank(rankType, data);
})
// 获取愚人榜单接口
function giftGetRank (rankType, date) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/special/gift/getRank',
data: { rankType, date, pageSize: 30 },
success (res) {
if (res.code === 200) {
// 设置当天日期
curDate = res.data.curDate;
// 处理日期
if (res.data.dateList) {
res.data.dateList.forEach((res, i) => {
$('.page4 .timeTab div').eq(i).text(`${res[5]}${res[6]}.${res[8]}${res[9]}`);
$('.page4 .timeTab div').eq(i).attr('data', res);
if (res == curDate && date == null) {
$('.page4 .timeTab div').removeClass('act')
$('.page4 .timeTab div').eq(i).addClass('act');
}
})
}
// 处理前叁
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
avatar: './images/logo.png',
nick: '虚位以待',
score: "0"
})
top3.push(...arr)
}
top3.forEach((res, i) => {
$(`.page4 .top3 .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page4 .top3 .no${i + 1} .nick`).text(res.nick);
$(`.page4 .top3 .no${i + 1} .score`).html(`${rankType == 1 || rankType == 2 ? '愚乐值' : '欢乐值'}<br>` + unitProcessing(res.score, 10000, 1, 'w'))
})
// 非前叁
var str = '';
$('.page4 ul li').remove();
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}.</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="nick">${res.nick}</div>
<div class="score">${rankType == 1 || rankType == 2 ? '愚乐值' : '欢乐值'}: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
})
$('.page4 ul').append(str);
// 处理自己榜单
$('.page4 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page4 .my .tx').attr('src', res.data.meRank.avatar);
$('.page4 .my .nick').text(res.data.meRank.nick);
$('.page4 .my .score').text(`${rankType == 1 || rankType == 2 ? '愚乐值' : '欢乐值'}` + unitProcessing(res.data.meRank.score, 10000, 1, 'w'));
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
}
})
}
// 魔盒切换
$('.MagicBoxRule .MagicBoxRule_in .tab div').click(function () {
var i = $(this).index() + 1;
$('.MagicBoxRule .MagicBoxRule_in').removeClass('MagicBoxRule1').removeClass('MagicBoxRule2');
$('.MagicBoxRule .MagicBoxRule_in').addClass(`MagicBoxRule${i}`);
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage1,.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2').hide();
$(`.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage${i}`).show();
return false;
})
// 获取魔盒接口
function getRecordPage () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/task/user/record/page',
data: {
componentCode: "QI_HUAN_MO_HE",
activityCode: 'ACT_2024_APRIL_FOOLS_DAY',
pageNum: page,
pageSize: 20,
},
success (res) {
if (res.code === 200) {
var str = ''
if (res.data.records.length == 0) {
str = `
<li class="not">暂无记录</li>
`
isLock = false;
} else {
res.data.records.forEach(res => {
str += `
<li>
<div>
<p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
<b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
</div>
<div class="centen">${res.nick}</div>
<div class="right">
<p>获得:${res.rewardName}</p>
<b>${res.showValue} <img src="./images/diamond.png" alt=""></b>
</div>
</li>
`
})
isLock = true;
}
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').append(str);
} else {
toastMsg(res.message)
isLock = true;
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
isLock = true;
}
})
}
// 滚动
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').scroll(function () {
let scrollTop = $(this).scrollTop()
let scrollHeight = $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul')[0].scrollHeight
let ulHeight = $(this).innerHeight()
if (scrollTop + ulHeight + 100 >= scrollHeight) {
if (isLock) {
// 请求下一页
page = page + 1;
getRecordPage();
isLock = false;
}
}
})
// 打开魔盒规则
$('.page1 .box1 .pageBox1Rule_icon').click(function () {
$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li').remove();
getRecordPage();
$('.MagicBoxRule').show();
bodyScroolFun(true);
})
// 关闭魔盒规则
$('.MagicBoxRule').click(function () {
$('.MagicBoxRule').hide();
bodyScroolFun(false);
})
// 打开规则
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 关闭规则
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
})
// 打开限定礼物规则
$('.header .qualifyGift_icon').click(function () {
$('.limitedGift').show();
bodyScroolFun(true);
})
// 关闭限定礼物规则
$('.limitedGift').click(function () {
$('.limitedGift').hide();
bodyScroolFun(false);
})

View File

@@ -0,0 +1,498 @@
html,
body {
width: 100%;
background: #FBABAD;
}
.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;
}
.header {
width: 10rem;
height: 14.56rem;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto 0.24rem;
}
.header .rule_icon {
width: 1.14667rem;
height: 3.4rem;
position: absolute;
right: 0rem;
top: 6.25333rem;
}
.tabBox {
width: 7.66667rem;
height: 1.13333rem;
margin: 0 auto 0.22667rem;
display: flex;
justify-content: space-between;
}
.tabBox div {
width: 3.58667rem;
}
.tabBox .tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.tabBox .tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.tabBox .tabAct1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.tabBox .tabAct2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
.page1 {
width: 9.44rem;
height: 18.6rem;
margin: 0 auto 0.34667rem;
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
}
.page2 {
display: none;
width: 9.44rem;
height: 18.42667rem;
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 2.06667rem;
overflow: hidden;
}
.page2 .tablist {
width: 4.90667rem;
height: 0.70667rem;
display: flex;
justify-content: space-between;
margin: 0.50667rem auto 0.93333rem;
background: url(../images/tabListBg.png) no-repeat;
background-size: 100% 100%;
}
.page2 .tablist div {
width: 2.45333rem;
height: 0.70667rem;
line-height: 0.70667rem;
color: #FFFFFF;
font-size: 0.38667rem;
font-weight: 500;
text-align: center;
}
.page2 .tablist .act {
background: url(../images/tabListAct.png) no-repeat;
background-size: 100% 100%;
}
.page2 .top3Box {
width: 8.33333rem;
height: 3.13333rem;
position: relative;
margin: 0 auto 0.33333rem;
}
.page2 .top3Box .no1 {
width: 2.73333rem;
height: 3.49333rem;
background: url(../images/no1Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.page2 .top3Box .no1 .ts {
width: 1.56rem;
height: 1.58667rem;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.96rem;
}
.page2 .top3Box .no1 .tx {
width: 1.21333rem;
height: 1.21333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.10667rem;
border-radius: 50%;
}
.page2 .top3Box .no1 .name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.30667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.38667rem;
text-align: center;
}
.page2 .top3Box .no1 p {
width: 100%;
color: #AE3E4E;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.70667rem;
text-align: center;
}
.page2 .top3Box .no1 .score {
width: 100%;
color: #fff;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.24rem;
text-align: center;
}
.page2 .top3Box .no2 {
width: 2.73333rem;
height: 3.13333rem;
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0%;
bottom: 0;
}
.page2 .top3Box .no2 .ts {
width: 1.56rem;
height: 1.58667rem;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.72rem;
}
.page2 .top3Box .no2 .tx {
width: 1.21333rem;
height: 1.21333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.89333rem;
border-radius: 50%;
}
.page2 .top3Box .no2 .name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.30667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.26667rem;
text-align: center;
}
.page2 .top3Box .no2 p {
width: 100%;
color: #AE3E4E;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.72rem;
text-align: center;
}
.page2 .top3Box .no2 .score {
width: 100%;
color: #fff;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.26667rem;
text-align: center;
}
.page2 .top3Box .no3 {
width: 2.73333rem;
height: 3.13333rem;
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0%;
bottom: 0;
}
.page2 .top3Box .no3 .ts {
width: 1.56rem;
height: 1.58667rem;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.72rem;
}
.page2 .top3Box .no3 .tx {
width: 1.21333rem;
height: 1.21333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.89333rem;
border-radius: 50%;
}
.page2 .top3Box .no3 .name {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.30667rem;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.26667rem;
text-align: center;
}
.page2 .top3Box .no3 p {
width: 100%;
color: #AE3E4E;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.72rem;
text-align: center;
}
.page2 .top3Box .no3 .score {
width: 100%;
color: #fff;
font-size: 0.26667rem;
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.26667rem;
text-align: center;
}
.page2 ul {
width: 9.26667rem;
height: 12.6rem;
overflow-y: scroll;
margin: 0 auto 0;
}
.page2 ul::-webkit-scrollbar {
display: none;
}
.page2 ul li {
width: 100%;
height: 1.53333rem;
background: url(../images/liBg.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 0.02667rem;
}
.page2 ul li .num {
width: 0.46667rem;
height: 1.53333rem;
line-height: 1.53333rem;
color: #AE3E4E;
font-size: 0.4rem;
font-weight: 400;
margin-left: 0.38667rem;
text-align: center;
margin-right: 0.6rem;
float: left;
}
.page2 ul li .tx {
width: 1.16rem;
height: 1.16rem;
border-radius: 50%;
border: 0.02667rem solid #AE3E4E;
margin-top: 0.2rem;
margin-right: 0.37333rem;
display: block;
float: left;
}
.page2 ul li .name {
width: 3rem;
height: 1.53333rem;
line-height: 1.53333rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.36rem;
float: left;
}
.page2 ul li .score {
float: right;
height: 1.53333rem;
line-height: 1.53333rem;
color: #AE3E4E;
font-weight: 400;
margin-right: 0.56rem;
}
.page2 .my {
position: fixed;
width: 10rem;
height: 2.06667rem;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 0.02667rem;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.page2 .my .num {
width: 1.33333rem;
height: 2.06667rem;
line-height: 2.06667rem;
color: #AE3E4E;
font-size: 0.4rem;
font-weight: 400;
margin-left: 0.38667rem;
text-align: center;
margin-right: 0.25333rem;
float: left;
}
.page2 .my .tx {
width: 1.16rem;
height: 1.16rem;
border-radius: 50%;
border: 0.02667rem solid #AE3E4E;
margin-top: 0.42667rem;
margin-right: 0.37333rem;
display: block;
float: left;
}
.page2 .my .name {
width: 3rem;
height: 2.06667rem;
line-height: 2.06667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: 0.36rem;
float: left;
}
.page2 .my .score {
float: right;
height: 2.06667rem;
line-height: 2.06667rem;
color: #AE3E4E;
font-weight: 400;
margin-right: 0.56rem;
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.6);
}
.rule .rule_in {
width: 8.76rem;
height: 13.13333rem;
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.rule .rule_in .rulebox {
width: 8.06667rem;
height: 11.5rem;
margin: 1.38667rem auto 0;
overflow-y: scroll;
}
.rule .rule_in .rulebox::-webkit-scrollbar {
display: none;
}
.rule .rule_in .rulebox img {
display: block;
width: 100%;
}

View File

@@ -0,0 +1,507 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #FBABAD;
}
// 返回按钮
.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);
}
}
.header {
width: px2rem(750);
height: px2rem(1092);
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto px2rem(18);
.rule_icon {
width: px2rem(86);
height: px2rem(255);
position: absolute;
right: px2rem(0);
top: px2rem(469);
}
}
.tabBox {
width: px2rem(575);
height: px2rem(85);
margin: 0 auto px2rem(17);
display: flex;
justify-content: space-between;
div {
width: px2rem(269);
}
.tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
}
.tabAct1 {
background: url(../images/tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.tabAct2 {
background: url(../images/tabAct2.png) no-repeat;
background-size: 100% 100%;
}
}
.page1 {
// display: none;
width: px2rem(708);
height: px2rem(1395);
margin: 0 auto px2rem(26);
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
}
.page2 {
display: none;
width: px2rem(708);
height: px2rem(1382);
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(155);
overflow: hidden;
.tablist {
width: px2rem(368);
height: px2rem(53);
display: flex;
justify-content: space-between;
margin: px2rem(38) auto px2rem(70);
background: url(../images/tabListBg.png) no-repeat;
background-size: 100% 100%;
div {
width: px2rem(184);
height: px2rem(53);
line-height: px2rem(53);
color: #FFFFFF;
font-size: px2rem(29);
font-weight: 500;
text-align: center;
}
.act {
background: url(../images/tabListAct.png) no-repeat;
background-size: 100% 100%;
}
}
.top3Box {
width: px2rem(625);
height: px2rem(235);
position: relative;
margin: 0 auto px2rem(25);
.no1 {
width: px2rem(205);
height: px2rem(262);
background: url(../images/no1Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
.ts {
width: px2rem(117);
height: px2rem(119);
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(147);
}
.tx {
width: px2rem(91);
height: px2rem(91);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(158);
border-radius: 50%;
}
.name {
width: 100%;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(23);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(104);
text-align: center;
}
p {
width: 100%;
color: #AE3E4E;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(53);
text-align: center;
}
.score {
width: 100%;
color: #fff;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(18);
text-align: center;
}
}
.no2 {
width: px2rem(205);
height: px2rem(235);
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0%;
bottom: 0;
.ts {
width: px2rem(117);
height: px2rem(119);
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(129);
}
.tx {
width: px2rem(91);
height: px2rem(91);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(142);
border-radius: 50%;
}
.name {
width: 100%;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(23);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(95);
text-align: center;
}
p {
width: 100%;
color: #AE3E4E;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(54);
text-align: center;
}
.score {
width: 100%;
color: #fff;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(20);
text-align: center;
}
}
.no3 {
width: px2rem(205);
height: px2rem(235);
background: url(../images/no23Bg.png) no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0%;
bottom: 0;
.ts {
width: px2rem(117);
height: px2rem(119);
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(129);
}
.tx {
width: px2rem(91);
height: px2rem(91);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(142);
border-radius: 50%;
}
.name {
width: 100%;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(23);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(95);
text-align: center;
}
p {
width: 100%;
color: #AE3E4E;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(54);
text-align: center;
}
.score {
width: 100%;
color: #fff;
font-size: px2rem(20);
font-weight: 400;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(20);
text-align: center;
}
}
}
ul {
width: px2rem(695);
height: 12.6rem;
overflow-y: scroll;
margin: 0 auto 0;
&::-webkit-scrollbar {
display: none;
}
li {
width: 100%;
height: px2rem(115);
background: url(../images/liBg.png) no-repeat;
background-size: 100% 100%;
margin-bottom: px2rem(2);
.num {
width: px2rem(35);
height: px2rem(115);
line-height: px2rem(115);
color: #AE3E4E;
font-size: px2rem(30);
font-weight: 400;
margin-left: px2rem(29);
text-align: center;
margin-right: px2rem(45);
float: left;
}
.tx {
width: px2rem(87);
height: px2rem(87);
border-radius: 50%;
border: px2rem(2) solid #AE3E4E;
margin-top: px2rem(15);
margin-right: px2rem(28);
display: block;
float: left;
}
.name {
width: 3rem;
height: px2rem(115);
line-height: px2rem(115);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(27);
float: left;
}
.score {
float: right;
height: px2rem(115);
line-height: px2rem(115);
color: #AE3E4E;
font-weight: 400;
margin-right: px2rem(42);
}
}
}
.my {
position: fixed;
width: px2rem(750);
height: px2rem(155);
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
margin-bottom: px2rem(2);
left: 50%;
transform: translateX(-50%);
bottom: 0;
.num {
width: px2rem(100);
height: px2rem(155);
line-height: px2rem(155);
color: #AE3E4E;
font-size: px2rem(30);
font-weight: 400;
margin-left: px2rem(29);
text-align: center;
margin-right: px2rem(19);
float: left;
}
.tx {
width: px2rem(87);
height: px2rem(87);
border-radius: 50%;
border: px2rem(2) solid #AE3E4E;
margin-top: px2rem(32);
margin-right: px2rem(28);
display: block;
float: left;
}
.name {
width: 3rem;
height: px2rem(155);
line-height: px2rem(155);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #AE3E4E;
font-size: px2rem(27);
float: left;
}
.score {
float: right;
height: px2rem(155);
line-height: px2rem(155);
color: #AE3E4E;
font-weight: 400;
margin-right: px2rem(42);
}
}
}
.rule {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, .6);
.rule_in {
width: px2rem(657);
height: px2rem(985);
background: url(../images/ruleBg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.rulebox {
width: px2rem(605);
height: 11.5rem;
margin: px2rem(104) auto 0;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
img {
display: block;
width: 100%;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 323 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,101 @@
<!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>
<!-- header -->
<div class="header">
<img src="./images/rule_icon.png" alt="" class="rule_icon">
</div>
<!-- tab -->
<div class="tabBox">
<div class="tab1 tabAct1"></div>
<div class="tab2"></div>
</div>
<!-- page1 -->
<div class="page1"></div>
<!-- page2 -->
<div class="page2">
<!-- tab -->
<div class="tablist">
<div class="act">守护榜</div>
<div>女神榜</div>
</div>
<!-- 前三 -->
<div class="top3Box">
<div class="no1">
<img src="./images/no1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用户昵称</div>
<p>守护榜</p>
<div class="score">0</div>
</div>
<div class="no2">
<img src="./images/no2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用户昵称</div>
<p>守护榜</p>
<div class="score">0</div>
</div>
<div class="no3">
<img src="./images/no3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用户昵称</div>
<p>守护榜</p>
<div class="score">0</div>
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">04</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用户昵称</div>
<div class="score">守护榜:0</div>
</li>
</ul>
<!-- 我自己 -->
<div class="my">
<div class="num">未上榜</div>
<img src="./images/logo.png" alt="" class="tx">
<div class="name">用户昵称</div>
<div class="score">守护榜:0</div>
</div>
</div>
<!-- 活动规则 -->
<div class="rule">
<div class="rule_in">
<div class="rulebox">
<img src="./images/rule.png" alt="">
</div>
</div>
</div>
</body>
<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/index.js"></script>
</html>

View File

@@ -0,0 +1,140 @@
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'
})
}
var rankType = 2;
// 初始化函数
$(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)
}
})
}, 100)
})
// 获取榜单接口
function getRank () {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/special/gift/getRank',
data: {
rankType,
pageSize: 30
},
success (res) {
if (res.code === 200) {
// 处理前叁
var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
avatar: './images/logo.png',
nick: '虚位以待',
score: "0",
})
top3.push(...arr)
}
top3.forEach((res, i) => {
$(`.page2 .top3Box .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page2 .top3Box .no${i + 1} .name`).text(res.nick);
$(`.page2 .top3Box .no${i + 1} p`).text(`${rankType == 2 ? "守护值" : "女神值"}`);
$(`.page2 .top3Box .no${i + 1} .score`).text(unitProcessing(res.score, 10000, 1, 'w'));
})
// 非前叁
$('.page2 ul li').remove();
var str = '';
notTop3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.ranking}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="name">${res.nick}</div>
<div class="score">${rankType == 2 ? "守护值" : "女神值"}:${unitProcessing(res.score, 10000, 1, 'w')}</div>
</li>
`
});
$('.page2 ul').append(str);
// 处理自己榜单
$('.page2 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
$('.page2 .my .tx').attr('src', res.data.meRank.avatar);
$('.page2 .my .name').text(res.data.meRank.nick);
$('.page2 .my .score').text(`${rankType == 2 ? "守护值:" : "女神值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网路错误,请退出重进')
}
})
}
// tab切换
$('.tabBox div').click(function () {
var i = $(this).index() + 1;
$('.tabBox div').removeClass('tabAct1').removeClass('tabAct2');
$(this).addClass(`tabAct${i}`);
$('.page1,.page2').hide();
$(`.page${i}`).show();
if (i == 2) {
getRank();
}
})
$('.page2 .tablist div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act');
rankType = i == 1 ? 2 : 4;
getRank();
})
// 打开规则
$('.header .rule_icon').click(function () {
$('.rule').show();
bodyScroolFun(true);
})
// 关闭规则
$('.rule').click(function () {
$('.rule').hide();
bodyScroolFun(false);
})

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Some files were not shown because too many files have changed in this diff Show More