258 lines
9.8 KiB
JavaScript
258 lines
9.8 KiB
JavaScript
let info = {};
|
||
$(function () {
|
||
//5-31 1590940799000
|
||
// let time = 1590335999000
|
||
//设定一个有关事件倒计时的参照物
|
||
let time = 1590940799000
|
||
//定时器没错
|
||
let timer = null
|
||
let weekStarRankList = []
|
||
//请求接口的类型，1是魅力榜，2是土豪帮
|
||
let rankType = 1
|
||
let browser = checkVersion();
|
||
let api = locateJudge();
|
||
if (EnvCheck() == 'test') { let vConsole = new VConsole };
|
||
let locateObj = getQueryString();
|
||
//获取uid
|
||
if (browser.app) {
|
||
if (browser.ios) {
|
||
info.uid = tools.cookieUtils.get('uid');
|
||
window.webkit.messageHandlers.getTicket.postMessage(null);
|
||
} else if (browser.android) {
|
||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||
info.uid = parseInt(window.androidJsObj.getUid());
|
||
info.ticket = window.androidJsObj.getTicket();
|
||
}
|
||
}
|
||
} else {
|
||
info.uid = 936365;
|
||
info.ticket = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MzYzNjUsInRpY2tldF9pZCI6IjJiN2M2MmU3LTgwMGQtNDEzOS1hMDY0LWE1YzczYmFkNGNjZCIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.E_tw9Ya7z7YCLfXZWN5Tyn5B5d2HxTgtWeBLZ6Gyzkg"
|
||
}
|
||
//点击土豪帮还是魅力榜
|
||
$('.tab-week p').on('click', function () {
|
||
$(this).addClass('active').siblings().removeClass('active')
|
||
$(this).index() ? $('.week-award').addClass('bule') : $('.week-award').removeClass('bule')
|
||
$(this).index() ? $('.now-week-time').addClass('activ') : $('.now-week-time').removeClass('activ')
|
||
$(this).index() ? renderAward(moneyArr, moneyName) : renderAward(charmArr, charmName)
|
||
|
||
rankType = $(this).index() + 1
|
||
getData($(this).index() + 1)
|
||
})
|
||
//请求数据
|
||
function getData(rankType) {
|
||
|
||
$.ajax({
|
||
type: 'get',
|
||
// url: 'https://beta.api.pekolive.com/weekStar/getWeekStarList',
|
||
url: '/weekStar/getWeekStarList',
|
||
data: {
|
||
rankType,
|
||
uid: info.uid
|
||
},
|
||
headers: {
|
||
pub_uid: info.uid,
|
||
pub_ticket: info.ticket
|
||
},
|
||
success(res) {
|
||
if (res.code === 200) {
|
||
weekStarRankList = res.data.weekStarRankList
|
||
res.data.lastWeekStarList.length ? renderLastWeek(res.data.lastWeekStarList) : $('.last-week').fadeOut(0)
|
||
renderNowWeek(weekStarRankList)
|
||
renderRankWeek()
|
||
}
|
||
// renderAward(res.data.award)
|
||
|
||
}
|
||
})
|
||
}
|
||
//点击活动详情按钮
|
||
$('.act-detail').on('click', function () {
|
||
window.location.href = './detail.html'
|
||
})
|
||
//渲染本周礼物
|
||
function renderNowWeek(data) {
|
||
let str = ''
|
||
data.forEach((value, index) => {
|
||
str += ` <p class="${index == 0 ? 'active' : ''}"><img src="${value.gift.picUrl}" alt="">
|
||
<span>${value.gift.giftName}</span></p>`
|
||
})
|
||
$('.now-week-three-tab').html(str)
|
||
}
|
||
|
||
|
||
//点击本周礼物图标渲染不一样的数据
|
||
$('.now-week-three-tab').on('click', 'p', function () {
|
||
$(this).addClass('active').siblings().removeClass('active')
|
||
renderRankWeek($(this).index())
|
||
})
|
||
//渲染上周数据
|
||
function renderLastWeek(data) {
|
||
let str = ''
|
||
for (let item of data) {
|
||
let nick = item.weekStarRankList[0].nick
|
||
str += ` <li ><div class="last-week-gift">
|
||
<img src="${item.gift.picUrl}" alt="">
|
||
<p class="gift-name">${item.gift.giftName}</p></div>
|
||
<img data-uid="${item.weekStarRankList[0].uid}" class="headimg" src="./images/0.png" alt="">
|
||
<img class="avatar" src="${item.weekStarRankList[0].avatar}" alt="">
|
||
<p class="last-week-name"><span class="${nick.length <= 5 ? '' : 'wordsLoop'}">${nick}</span></p></li>`
|
||
}
|
||
$('.last-week ul').html(str)
|
||
}
|
||
//渲染本周排名数据
|
||
function renderRankWeek(index = 0) {
|
||
//执行渲染我的函数
|
||
renderMine(weekStarRankList[index].mineRank)
|
||
//如果没有前三的数据，需要显示虚位以待
|
||
let falseData = {
|
||
avatar: './images/empty.png',
|
||
nick: '虚位以待',
|
||
amount: '0',
|
||
erbanNo: ''
|
||
}
|
||
let dataList = weekStarRankList[index]
|
||
let str = ''
|
||
let strOther = ''
|
||
//渲染前三名
|
||
let topThree = dataList.weekStarRankList.slice(0, 3)
|
||
if (topThree.length < 3) topThree.push(...new Array(3 - topThree.length).fill(falseData))
|
||
|
||
let other = dataList.weekStarRankList.slice(3)
|
||
if (other.length < 2) other.push(...new Array(2 - other.length).fill(falseData))
|
||
topThree.forEach((value, index) => {
|
||
str += `<li data-uid="${value.uid}"> <div class="picture-frame"> <img src="./images/${index}.png" alt=""></div>
|
||
<img class="picture" src="${value.avatar}" alt="">
|
||
<p class="nick">${value.nick.length > 6 ? value.nick.slice(0, 6) + '...' : value.nick}</p>
|
||
<p class="charm-num">${rankType == 1 ? "魅力值" : '豪气值'}${value.amount}</p></li>`
|
||
})
|
||
other.forEach((val, ind) => {
|
||
strOther += `<li data-uid="${val.uid}"> <span class="rank-index">${ind + 4}</span>
|
||
|
||
<img src="${val.avatar}" alt="">
|
||
<p class="user-detail"><span>${val.nick.length > 6 ? val.nick.slice(0, 6) + '...' : val.nick}</span>
|
||
<span>ID:${val.erbanNo}</span></p>
|
||
<p class="charm-num">${val.amount}</p></li>`
|
||
})
|
||
$('.now-week-threetop ul').html(str)
|
||
$('.now-week-other ul').html(strOther)
|
||
|
||
}
|
||
|
||
// renderAward(data.data.award)
|
||
//渲染星球奖励列表，这里是写死的
|
||
function renderAward(award, awardName) {
|
||
let str = ` <div class="first">
|
||
<p class="tit">第1名</p><ul><li><div class="head">
|
||
<span> <img src="./images/first.png" alt=""></span>
|
||
<img class=${awardName[0] == 'UFO座驾' ? "namemoney" : "nameplate"} src="./gift/${award[0]}" alt="">
|
||
</div><p class="gift-name">${awardName[0]}</p>
|
||
</li><li><div class="head">
|
||
<span> <img src="./images/first.png" alt=""></span>
|
||
<!-- <div class="animation animation-2"></div> -->
|
||
<img src="./gift/${award[1]}" alt="">
|
||
</div><p class="gift-name">${awardName[1]}</p>
|
||
</li><li><div class="head"><span> <img src="./images/first.png" alt=""></span>
|
||
<img src="./gift/${award[2]}" alt="">
|
||
</div><p class="gift-name">${awardName[2]}</p></li></ul></div>
|
||
<div class="second">
|
||
<p class="tit">第2名</p><ul><li><div class="head">
|
||
<span> <img src="./images/five.png" alt=""></span>
|
||
<img src="./gift/${award[3]}" alt="">
|
||
</div><p class="gift-name">${awardName[3]}</p></li>
|
||
<li><p class="head"><span> <img src="./images/five.png" alt=""></span>
|
||
<img src="./gift/${award[4]}" alt="">
|
||
</p><p class="gift-name">${awardName[4]}</p></p></li></ul>
|
||
</div>
|
||
<div class="third"><p class="tit">第3名</p><ul><li><p class="head">
|
||
<span> <img src="./images/three.png" alt=""></span>
|
||
<img src="./gift/${award[5]}" alt="">
|
||
</p><p class="gift-name">${awardName[5]}</p></li><li><p class="head">
|
||
<span> <img src="./images/three.png" alt=""></span>
|
||
<img src="./gift/${award[6]}" alt=""></p>
|
||
<p class="gift-name">${awardName[6]}</p></li></ul></div>
|
||
<div class="other"><p class="tit">第4-10名</p><ul>
|
||
<li><p class="head"><span><img src="./images/two.png" alt="">
|
||
</span><img src="./gift/${award[7]}" alt="">
|
||
</p><p class="gift-name">${awardName[7]}</p></li></ul></div>`
|
||
$('.week-award-bg').html(str)
|
||
}
|
||
//渲染自己的信息
|
||
function renderMine(data) {
|
||
$('.mine').html(` <p class="ranking">${data.rank === -1 ? '未上榜' : data.rank}</p>
|
||
<img src="${data.avatar}" alt=""> <div class="mine-detail">
|
||
<p class="mine-d"> <span>${data.nick.length >= 4 ? data.nick.slice(0, 4) + '...' : data.nick}</span>
|
||
<span class="value">${rankType == 1 ? "魅力值" : '豪气值'}：${data.amount}</span> </p>
|
||
<p class="distance">${(!data.amount || !data.deviation) ? '' : `距离上一名还差${data.deviation}${rankType == 1 ? "魅力值" : '豪气值'}`}</p> </div>`)
|
||
}
|
||
|
||
//时间倒计时
|
||
function countDown(endDateStr) {
|
||
//结束时间
|
||
var nowDate = new Date().getTime();
|
||
let i = parseInt((nowDate - time) / 604800000)
|
||
|
||
var endDate = time + 604800000 * (i + 1);
|
||
//当前时间
|
||
// var nowDate = new Date().getTime();
|
||
//相差的总秒数
|
||
var totalSeconds = parseInt((endDate - nowDate) / 1000);
|
||
//天数
|
||
var days = Math.floor(totalSeconds / (60 * 60 * 24));
|
||
//取模（余数）
|
||
var modulo = totalSeconds % (60 * 60 * 24);
|
||
//小时数
|
||
var hours = Math.floor(modulo / (60 * 60)) >= 10 ? Math.floor(modulo / (60 * 60)) : "0" + Math.floor(modulo / (60 * 60));
|
||
modulo = modulo % (60 * 60);
|
||
//分钟
|
||
var minutes = Math.floor(modulo / 60) >= 10 ? Math.floor(modulo / 60) : '0' + Math.floor(modulo / 60);
|
||
//秒
|
||
var seconds = modulo % 60 >= 10 ? modulo % 60 : '0' + modulo % 60;
|
||
//输出到页面
|
||
$('.now-week-time p span').html(`${days}天 ${hours}:${minutes}:${seconds}`)
|
||
//延迟一秒执行自己
|
||
timer = setTimeout(function () {
|
||
clearTimeout(timer)
|
||
countDown(endDate);
|
||
}, 1000)
|
||
}
|
||
|
||
setTimeout(() => {
|
||
getData(rankType)
|
||
countDown()
|
||
renderAward(charmArr, charmName)
|
||
// renderRankWeek(0)
|
||
}, 50)
|
||
|
||
function openPerson(dom) {
|
||
$(document).on('click', dom, function () {
|
||
let erbanUid = $(this).data('uid')
|
||
if (!browser.app) return
|
||
if (browser.ios) {
|
||
window.webkit.messageHandlers.openPersonPage.postMessage(erbanUid);
|
||
} else if (browser.android) {
|
||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||
window.androidJsObj.openPersonPage(erbanUid);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
openPerson('.last-week li .headimg')
|
||
openPerson('.now-week-threetop li')
|
||
openPerson('.now-week-other li')
|
||
})
|
||
function getMessage(key, value) {
|
||
info[key] = value;
|
||
}
|
||
|
||
///carActivity/user
|
||
|
||
// amount
|
||
|
||
|
||
// if (browser.ios) {
|
||
// window.webkit.messageHandlers.openPersonPage.postMessage(erbanUid);
|
||
// } else if (browser.android) {
|
||
// if (androidJsObj && typeof androidJsObj === 'object') {
|
||
// window.androidJsObj.openPersonPage(erbanUid);
|
||
// }
|
||
// }
|