504 lines
13 KiB
JavaScript
504 lines
13 KiB
JavaScript
let browser = checkVersion()
|
|
let info = {}
|
|
let baseUrl = ''
|
|
let timer //定时器
|
|
let timer2
|
|
let rankType = 1 //1为日榜 2为总榜
|
|
let canIncrease = true
|
|
let isFirstLoad = true
|
|
//日榜 总榜 只有第一次点击的时候会请求接口
|
|
let dayOneTime = true
|
|
let totalOneTime = true
|
|
let dataList = []
|
|
let dataListD = []
|
|
let dataListT = []
|
|
// new VConsole
|
|
if (EnvCheck() == 'test') {
|
|
// new VConsole;
|
|
baseUrl = 'http://beta.api.pekolive.com/'
|
|
} else {
|
|
baseUrl = 'https://api.pekolive.com/'
|
|
}
|
|
let i = 0
|
|
let a = true
|
|
$(function () {
|
|
//埋点测试
|
|
_hmt.push(['_trackEvent', 'client', 'click', 'qixi']);
|
|
|
|
let DMPageNum = 1;
|
|
let DMPageSize = 50;
|
|
let dayRankPageNum = 1; //日榜 总榜的页数要区分
|
|
let totalRankPageNum = 1;
|
|
let rankPageSize = 5;
|
|
let t = 0
|
|
function getId() {
|
|
if (browser.app) {
|
|
if (browser.ios) {
|
|
var allcookies = document.cookie;
|
|
var $uid = allcookies.match(/\d+/);
|
|
info.uid = $uid[0]
|
|
window.webkit.messageHandlers.getTicket.postMessage(null);
|
|
// window.webkit.messageHandlers.getUid.postMessage(null);
|
|
} else if (browser.android) {
|
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
|
info.uid = parseInt(window.androidJsObj.getUid());
|
|
info.ticket = window.androidJsObj.getTicket();
|
|
// console.log(40, info.uid, info.ticket);
|
|
}
|
|
}
|
|
} else {
|
|
info.uid = 936365;
|
|
info.ticket = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MzYzNjUsInRpY2tldF9pZCI6IjU2NDRmMTMwLTFjZDctNDM3OS05MDM4LTEwNTZlMjBhNGIxNiIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.ZkINRzz8KG5wSVJ7_01ys-Nn0TlyySYmMlFhzvgMM0w'
|
|
}
|
|
}
|
|
//获取告白墙弹幕
|
|
function getMessageWall(DMPageNum = 1) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: baseUrl + 'sweetActivity/messageWall',
|
|
data: {
|
|
page: DMPageNum,
|
|
pageSize: DMPageSize
|
|
},
|
|
headers: {
|
|
pub_uid: info.uid,
|
|
pub_ticket: info.ticket,
|
|
|
|
// pub_uid: 936365,
|
|
// pub_ticket: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MzYzNjUsInRpY2tldF9pZCI6IjJiMjJiYmZlLWU1YWMtNDY3Ni1hYWRiLTM2YWMwZTYwMmY4OSIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.g08aW8Y7SSIDnqwdbfMfowQwlgk75DXAR2EIk3K5Ugk',
|
|
},
|
|
success(res) {
|
|
if (res.code == 200) {
|
|
// console.log(res.data);
|
|
let data = res.data;
|
|
if(data.length < DMPageSize){
|
|
|
|
isEnd = true
|
|
} else {
|
|
getMessageWall(++DMPageNum)
|
|
}
|
|
// danmu = data.map((item) => {
|
|
// return {
|
|
// message: item.message
|
|
// }
|
|
// });
|
|
danmu.push(...data)
|
|
if(DMPageNum === 1) {
|
|
damuPool = [...data];
|
|
} else {
|
|
|
|
damuPool.push(...data)
|
|
}
|
|
|
|
// console.log(55555, damuPool);
|
|
setData();
|
|
|
|
|
|
// renderDM(res.data)
|
|
} else {
|
|
getMessageWall(++DMPageNum)
|
|
}
|
|
},
|
|
error(){
|
|
// getMessageWall(++DMPageNum)
|
|
}
|
|
})
|
|
}
|
|
//获取专属墙数据
|
|
function getRankList(page, rankType) {
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: baseUrl + 'sweetActivity/rankList',
|
|
data: {
|
|
page: page,
|
|
pageSize: rankPageSize,
|
|
rankType: rankType //日榜1 总榜2
|
|
},
|
|
headers: {
|
|
pub_uid: info.uid,
|
|
pub_ticket: info.ticket,
|
|
|
|
// pub_uid: 936365,
|
|
// pub_ticket: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MzYzNjUsInRpY2tldF9pZCI6IjJiMjJiYmZlLWU1YWMtNDY3Ni1hYWRiLTM2YWMwZTYwMmY4OSIsImV4cCI6MzYwMCwiY2xpZW50X2lkIjoiZXJiYW4tY2xpZW50In0.g08aW8Y7SSIDnqwdbfMfowQwlgk75DXAR2EIk3K5Ugk',
|
|
},
|
|
success(res) {
|
|
// console.log(res);
|
|
if (res.code == 200) {
|
|
if (res.data.length) {
|
|
if(rankType == 1){
|
|
// listDay = res.data
|
|
// dataList.push(...listDay)
|
|
dataListD.push(...res.data)
|
|
renderRankList(rankType);
|
|
if(res.data.length === rankPageSize){
|
|
canIncrease = true
|
|
}else{
|
|
// console.log(333);
|
|
canIncrease = false
|
|
dataListD = dataListD.slice(0, (page - 1) * rankPageSize)
|
|
}
|
|
}else{
|
|
// listTotal = res.data
|
|
// dataList.push(...listTotal)
|
|
dataListT.push(...res.data)
|
|
renderRankList(rankType);
|
|
if(res.data.length === rankPageSize){
|
|
canIncrease = true
|
|
}else{
|
|
canIncrease = false
|
|
dataListT = dataListT.slice(0, (page - 1) * rankPageSize)
|
|
}
|
|
}
|
|
// dataList.push(...res.data)
|
|
// renderRankList(rankType);
|
|
// if(res.data.length === rankPageSize){
|
|
// canIncrease = true
|
|
// }else{
|
|
// canIncrease = false
|
|
// dataList = dataList.slice(0, (pageNum - 1) * rankPageSize)
|
|
// }
|
|
}
|
|
// else {
|
|
// canIncrease = false
|
|
// if (!isFirstLoad) {
|
|
// $('.toast').html('暂时没有更多...').fadeIn(30).fadeOut(1000)
|
|
// }
|
|
// }
|
|
else{
|
|
canIncrease = false
|
|
}
|
|
}
|
|
},
|
|
error(){
|
|
$('.toast').html('网络异常，请检查您的网络后再试').fadeIn(30).fadeOut(3000)
|
|
}
|
|
})
|
|
}
|
|
getId()
|
|
// initDM()
|
|
setTimeout(() => {
|
|
getMessageWall()
|
|
if(new Date().getDate() >= 25){
|
|
rankType = 2
|
|
getRankList(totalRankPageNum, rankType)
|
|
change()
|
|
}else{
|
|
getRankList(dayRankPageNum, rankType)
|
|
}
|
|
}, 50)
|
|
|
|
function change () {
|
|
totalOneTime = false
|
|
$('.btn-item').eq(1).css('background-image', "url('./images/btn-list-active.png')")
|
|
$('.btn-item').eq(0).css('background-image', "url('./images/btn-list.png')")
|
|
$('.totalRank').css('display', 'block')
|
|
$('.dayRank').css('display', 'none')
|
|
clearTimeout(timer)
|
|
$('.count-down').html('活动已结束<br>榜单仅做展示')
|
|
}
|
|
|
|
let damuPool = [];
|
|
let danmu = [];
|
|
|
|
|
|
// 弹幕
|
|
|
|
|
|
function setData() {
|
|
|
|
// if(damuPool.length * 3000 - 1000 <= t){
|
|
// getMessageWall(++DMPageNum)
|
|
// return
|
|
// }
|
|
// console.log(damuPool);
|
|
// setTimeout(() => {
|
|
// renderDM(danmushoot);
|
|
// setData();
|
|
|
|
// }, 3000);
|
|
if(!timer2){
|
|
timer2 = setInterval(() => {
|
|
if(!danmu.length){
|
|
danmu = [...damuPool]
|
|
|
|
}
|
|
if (isEnd && danmu.length < 5){
|
|
DMPageNum = 1
|
|
getMessageWall(DMPageNum)
|
|
isEnd =false
|
|
}
|
|
let danmushoot = danmu.shift();
|
|
if(danmushoot){
|
|
renderDM(danmushoot);
|
|
}
|
|
}, 250);
|
|
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
var danmaku = new Danmaku({
|
|
container: document.getElementById('my-container'),
|
|
speed: 100,
|
|
})
|
|
function renderDM(item) {
|
|
let style = {}
|
|
if(item.sweetValue >= 52){
|
|
style = {
|
|
fontSize: 26 / 75 + 'rem',
|
|
color: '#ffffff',
|
|
padding: '0.2rem 0.4rem 0.2rem 0.8rem',
|
|
border: '1px solid #96005C',
|
|
borderRadius: '0.4rem',
|
|
// backgroundColor: '#FF93CD',
|
|
background: "#FF608A url('./images/danmu-love.png') no-repeat 5px 5px/20px 20px"
|
|
}
|
|
}else{
|
|
style = {
|
|
fontSize: 26 / 75 + 'rem',
|
|
color: '#ffffff',
|
|
padding: '0.2rem 0.4rem',
|
|
border: '1px solid #C94195',
|
|
borderRadius: '0.4rem',
|
|
backgroundColor: '#FF94CE'
|
|
}
|
|
}
|
|
danmaku.emit({
|
|
text: item.message,
|
|
style
|
|
})
|
|
|
|
// data.map((item, index) => {
|
|
// danmaku.emit({
|
|
// text: item.message,
|
|
// style: {
|
|
// fontSize: 26 / 75 + 'rem',
|
|
// color: '#ffffff',
|
|
// padding: '0.2rem 0.4rem',
|
|
// border: '1px solid #C94195',
|
|
// borderRadius: '0.4rem',
|
|
// background: '#FF93CD'
|
|
// }
|
|
// })
|
|
// })
|
|
|
|
// setTimeout(() => {
|
|
// if (DMPageNum > 4) {
|
|
// DMPageNum = 1
|
|
// getMessageWall(DMPageNum)
|
|
// } else {
|
|
// getMessageWall(++DMPageNum)
|
|
// }
|
|
// }, 3000)
|
|
}
|
|
|
|
|
|
|
|
//渲染专属墙榜单
|
|
|
|
function renderRankList(rankType) {
|
|
if(rankType === 1){
|
|
//日榜
|
|
render(dataListD, rankType)
|
|
}else{
|
|
//总榜
|
|
render(dataListT, rankType)
|
|
}
|
|
// let arr = dataList.map((item, index) => {
|
|
// return `
|
|
// <li>
|
|
// <div class="num">${index + 1}</div>
|
|
// <div class="message-obj">
|
|
// <div class="sender">
|
|
// <img src="${item.sendAvatar}" alt="" class="avadar" data-uid='${item.sendUid}'>
|
|
// <span class="nickname">${item.sendNick.length > 5 ? item.sendNick.slice(0, 5) + '...' : item.sendNick}</span>
|
|
// </div>
|
|
// <div class="love-info">
|
|
// <span>爱心值</span>
|
|
// <img src="./images/love.png" alt="">
|
|
// <span class="love-value">${item.sweetValue}</span>
|
|
// </div>
|
|
// <div class="receiver">
|
|
// <img src="${item.recvAvatar}" alt="" class="avadar" data-uid='${item.recvUid}'>
|
|
// <span class="nickname">${item.recvNick.length > 5 ? item.recvNick.slice(0, 5) + '...' : item.recvNick}</span>
|
|
// </div>
|
|
// </div>
|
|
// <p class="message-content">${item.message}</p>
|
|
// </li>
|
|
// `
|
|
// })
|
|
// let str = arr.join('')
|
|
// if (rankType === 1) {
|
|
// $('.totalRank').css('display', 'none')
|
|
// $('.dayRank').css('display', 'block')
|
|
// $('.dayRank')[0].innerHTML = str
|
|
// } else if (rankType === 2) {
|
|
// $('.dayRank').css('display', 'none')
|
|
// $('.totalRank').css('display', 'block')
|
|
// $('.totalRank')[0].innerHTML = str
|
|
// }
|
|
}
|
|
|
|
function render(data, rankType){
|
|
let str = data.map((item, index) => {
|
|
return `
|
|
<li>
|
|
<div class="num">${index + 1}</div>
|
|
<div class="message-obj">
|
|
<div class="sender">
|
|
<img src="${item.sendAvatar}" alt="" class="avadar" data-uid='${item.sendUid}'>
|
|
<span class="nickname">${item.sendNick.length > 5 ? item.sendNick.slice(0, 5) + '...' : item.sendNick}</span>
|
|
</div>
|
|
<div class="love-info">
|
|
<span>爱心值</span>
|
|
<img src="./images/love.png" alt="">
|
|
<span class="love-value">${item.sweetValue}</span>
|
|
</div>
|
|
<div class="receiver">
|
|
<img src="${item.recvAvatar}" alt="" class="avadar" data-uid='${item.recvUid}'>
|
|
<span class="nickname">${item.recvNick.length > 5 ? item.recvNick.slice(0, 5) + '...' : item.recvNick}</span>
|
|
</div>
|
|
</div>
|
|
<p class="message-content">${item.message}</p>
|
|
</li>
|
|
`
|
|
}).join('')
|
|
if (rankType === 1) {
|
|
$('.totalRank').css('display', 'none')
|
|
$('.dayRank').css('display', 'block')
|
|
$('.dayRank')[0].innerHTML = str
|
|
} else if (rankType === 2) {
|
|
$('.dayRank').css('display', 'none')
|
|
$('.totalRank').css('display', 'block')
|
|
$('.totalRank')[0].innerHTML = str
|
|
}
|
|
}
|
|
|
|
//跳转到 寄语 页面
|
|
$('.confession-window').on('click', function () {
|
|
$(location).attr('href', 'message.html')
|
|
})
|
|
//规则弹窗
|
|
$('.btn-regular').on('click', function () {
|
|
$('.shade-mask').css('display', 'block');
|
|
document.body.style.overflow = 'hidden'
|
|
})
|
|
//关闭规则弹窗
|
|
$('.close-mask').on('click', function () {
|
|
$('.shade-mask').css('display', 'none');
|
|
document.body.style.overflow = 'auto'
|
|
})
|
|
//点击日榜 总榜
|
|
$('.btn-item').on('click', function () {
|
|
$(this).css('background-image', "url('./images/btn-list-active.png')")
|
|
$(this).siblings().css('background-image', "url('./images/btn-list.png')")
|
|
})
|
|
$('.btn-item').eq(0).on('click', function () {
|
|
clearTimeout(timer)
|
|
countDown()
|
|
rankType = 1
|
|
// if(dayOneTime){
|
|
// console.log('ri yi ci');
|
|
// getRankList(dayRankPageNum, rankType)
|
|
// dayOneTime = false
|
|
// }
|
|
$('.totalRank').css('display', 'none')
|
|
$('.dayRank').css('display', 'block')
|
|
})
|
|
$('.btn-item').eq(1).on('click', function () {
|
|
clearTimeout(timer)
|
|
countDown('2020/8/25 00:00:00')
|
|
rankType = 2
|
|
if (totalOneTime) {
|
|
// console.log('zong yi ci ');
|
|
getRankList(totalRankPageNum, rankType)
|
|
totalOneTime = false
|
|
a = false
|
|
}
|
|
$('.totalRank').css('display', 'block')
|
|
$('.dayRank').css('display', 'none')
|
|
})
|
|
//倒计时
|
|
function countDown(cd) {
|
|
let totalTime = cd
|
|
let now = new Date()
|
|
let nowMs = now.getTime()
|
|
if (!cd) {
|
|
let y = now.getFullYear()
|
|
let m = now.getMonth() + 1
|
|
let d = now.getDate()
|
|
let tomorrow = y + '/' + m + '/' + (d + 1)
|
|
|
|
var end = new Date(tomorrow) //日榜
|
|
} else {
|
|
var end = new Date(cd) //总榜
|
|
}
|
|
let endMS = end.getTime()
|
|
if (endMS > nowMs) {
|
|
// console.log('活动进行中');
|
|
let leftMS = endMS - nowMs;
|
|
let lefth = Math.floor(leftMS / 1000 / 60 / 60)
|
|
let h = lefth < 10 ? '0' + lefth : lefth
|
|
// console.log(h);
|
|
let leftm = Math.floor(leftMS / 1000 / 60 % 60)
|
|
let m = leftm < 10 ? '0' + leftm : leftm
|
|
// console.log(m);
|
|
let lefts = Math.floor(leftMS / 1000 % 60)
|
|
let s = lefts < 10 ? '0' + lefts : lefts
|
|
// console.log(s);
|
|
$('.h').html(h)
|
|
$('.m').html(m)
|
|
$('.s').html(s)
|
|
} else {
|
|
}
|
|
timer = setTimeout(() => {
|
|
countDown(totalTime)
|
|
}, 1000)
|
|
|
|
}
|
|
countDown()
|
|
|
|
//加载更多 日榜 总榜的点击加载更多区别是ranktype参数
|
|
$('.loadmore').on('click', function () {
|
|
// console.log('加载更多');
|
|
isFirstLoad = false
|
|
// console.log(rankType);
|
|
if (rankType == 1) {
|
|
if (canIncrease) {
|
|
pageNum = ++dayRankPageNum
|
|
} else {
|
|
pageNum = dayRankPageNum
|
|
}
|
|
} else {
|
|
if (canIncrease) {
|
|
pageNum = ++totalRankPageNum
|
|
} else {
|
|
pageNum = totalRankPageNum
|
|
}
|
|
}
|
|
getRankList(pageNum, rankType)
|
|
})
|
|
|
|
//跳转个人主页
|
|
function openPerson(dom) {
|
|
$(document).on('click', dom, function () {
|
|
let erbanUid = $(this).data('uid')
|
|
// console.log($(this)[0])
|
|
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('.sender img')
|
|
openPerson('.receiver img')
|
|
})
|
|
|
|
function getMessage(key, value) {
|
|
info[key] = value;
|
|
} |