412 lines
14 KiB
JavaScript
412 lines
14 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
|
let browser = checkVersion()
|
|
let queryObj = getQueryString()
|
|
if (EnvCheck() === 'test') new VConsole
|
|
// 封装layer消息提醒框
|
|
let layerIndex
|
|
const showLoading = () => {
|
|
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'
|
|
})
|
|
}
|
|
|
|
let showReceiveRankTotal //是否展示总榜
|
|
let showMonthList
|
|
// 获取后台配置信息
|
|
const getShowInfo = () => {
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/room/rankings/showInfo',
|
|
data: {
|
|
roomUid: queryObj.roomUid
|
|
},
|
|
success (res) {
|
|
if (res.code === 200) {
|
|
showReceiveRankTotal = res.data.showReceiveRankTotal
|
|
showMonthList = res.data.showMonthList
|
|
if (res.data.showMonthList) {
|
|
$('title').text('主播榜');
|
|
// $('.wrap .tab_wrap').hide();
|
|
// $('.wrap .rank_wrap .top_three_wrap').css("margin-top", "0");
|
|
// $('.wrap .rank_wrap ul').css("height", "6.4rem");
|
|
$('.wrap .tab_wrap .rank_type p:last-child').text('月榜');
|
|
$('.wrap .tab_wrap .tab_contain p').eq(0).text('贡献榜')
|
|
$('.wrap .tab_wrap .rank_type p:last-child').show();
|
|
getList('day')
|
|
$('.wrap').show()
|
|
} else {
|
|
$('.wrap').show()
|
|
if (showReceiveRankTotal) {
|
|
$('.rank_type p').eq(2).show()
|
|
} else {
|
|
$('.rank_type p').eq(2).hide()
|
|
}
|
|
getList('day')
|
|
}
|
|
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error (err) {
|
|
toastMsg('網絡錯誤')
|
|
}
|
|
})
|
|
}
|
|
|
|
let page = 1
|
|
let pageSize = 10
|
|
let rankList = []
|
|
let canNext = true
|
|
let isLock = true
|
|
|
|
// 获取财富榜数据
|
|
const getList = (type, page = 1) => {
|
|
console.log('贡献榜');
|
|
console.log(type);
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/room/rankings',
|
|
data: {
|
|
type,
|
|
page,
|
|
pageSize,
|
|
roomUid: queryObj.roomUid
|
|
},
|
|
success (res) {
|
|
if (res.code === 200) {
|
|
if (res.data.rankings.length === pageSize) {
|
|
// 能够继续请求下一页
|
|
canNext = true
|
|
} else {
|
|
canNext = false
|
|
}
|
|
rankList.push(...res.data.rankings)
|
|
renderList()
|
|
isLock = true
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error (err) {
|
|
toastMsg('網絡錯誤')
|
|
}
|
|
})
|
|
}
|
|
|
|
// 获取魅力榜数据
|
|
const getCharmList = (type, page = 1) => {
|
|
console.log('魅力榜');
|
|
console.log(type);
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/room/recive/rankings',
|
|
data: {
|
|
type,
|
|
page,
|
|
pageSize,
|
|
roomUid: queryObj.roomUid
|
|
},
|
|
success (res) {
|
|
if (res.code === 200) {
|
|
if (res.data.rankings.length === pageSize) {
|
|
// 能够继续请求下一页
|
|
canNext = true
|
|
} else {
|
|
canNext = false
|
|
}
|
|
rankList.push(...res.data.rankings)
|
|
renderList()
|
|
isLock = true
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error (err) {
|
|
toastMsg('網絡錯誤')
|
|
}
|
|
})
|
|
}
|
|
|
|
const renderList = () => {
|
|
let topThreeArr = rankList.slice(0, 3)
|
|
if (rankList.length < 3) {
|
|
let len = 3 - rankList.length
|
|
let arr = new Array(len).fill({
|
|
nick: '',
|
|
erbanNo: '',
|
|
goldAmount: '',
|
|
gender: ''
|
|
})
|
|
topThreeArr.push(...arr)
|
|
}
|
|
let topThreeStr = ''
|
|
topThreeArr.map((item, index) => {
|
|
let tostr, goldAmount
|
|
if (item.goldAmount) {
|
|
tostr = item.goldAmount.toString()
|
|
}
|
|
if (tostr) {
|
|
if (tostr.length >= 5) {
|
|
goldAmount = (item.goldAmount / 10000).toFixed(2) + 'w'
|
|
} else {
|
|
goldAmount = item.goldAmount
|
|
}
|
|
}
|
|
|
|
topThreeStr += `
|
|
<div class="top_three_item">
|
|
<div class="avatar" data-uid=${item.uid}>
|
|
<p></p>
|
|
<img src="${item.avatar ? item.avatar : `./images/${index + 1}.png`}" alt="">
|
|
</div>
|
|
<div class="nick"}>
|
|
${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}
|
|
<img src="${item.gender == 1 ? './images/male.png' : './images/female.png'}" alt="" class='gender' style='display:${item.gender ? 'inline-block' : 'none'}'>
|
|
</div>
|
|
<div class="erbanNo"}><span>${item.erbanNo ? 'ID:' + item.erbanNo : ''}</span></div>
|
|
<div class="num"}>${goldAmount ? goldAmount : ''}</div>
|
|
</div>
|
|
`
|
|
})
|
|
$('.top_three_wrap').html(topThreeStr)
|
|
|
|
|
|
// 渲染非前3
|
|
let othersArr = rankList.slice(3)
|
|
let others = ''
|
|
othersArr.map((item, index) => {
|
|
let tostr = item.goldAmount.toString()
|
|
let goldAmount
|
|
if (tostr.length >= 5) {
|
|
goldAmount = (item.goldAmount / 10000).toFixed(2) + 'w'
|
|
} else {
|
|
goldAmount = item.goldAmount
|
|
}
|
|
others += `
|
|
<li>
|
|
<div class="index">${index + 4}</div>
|
|
<div class="others_avatar" data-uid=${item.uid}><img src="${item.avatar}" alt=""></div>
|
|
<div class="info_wrap">
|
|
<div class="others_nick">
|
|
${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}
|
|
<img src="${item.gender == 1 ? './images/male.png' : './images/female.png'}" alt="">
|
|
</div>
|
|
<div class="others_erbanNo">ID:<span>${item.erbanNo}</span></div>
|
|
</div>
|
|
<div class="others_num">${goldAmount}</div>
|
|
</li>
|
|
`
|
|
})
|
|
$('ul').html(others)
|
|
}
|
|
|
|
$(function () {
|
|
getInfoFromClient()
|
|
setTimeout(() => {
|
|
getShowInfo()
|
|
// getList( 'day' )
|
|
}, 50)
|
|
|
|
// tab切换
|
|
let currentTabIndex = 0
|
|
$('.tab_contain').on('click', 'p', function () {
|
|
let index = $(this).index()
|
|
if (currentTabIndex == index) return;
|
|
currentTabIndex = index
|
|
$(this).addClass('active').siblings('p').removeClass('active')
|
|
rankList = []
|
|
$('.rank_wrap').scrollTop(0)
|
|
page = 1
|
|
if (index) {
|
|
// 魅力榜单
|
|
$('.rank_type p').eq(2).hide()
|
|
$('.rank_type p').eq(currentCharmRankType).addClass('active').siblings('p').removeClass('active')
|
|
if (showMonthList) {
|
|
$('.wrap .tab_wrap .rank_type p:last-child').show();
|
|
if (currentCharmRankType == 0) {
|
|
getCharmList('day')
|
|
} else if (currentCharmRankType == 1) {
|
|
getCharmList('week')
|
|
} else if (currentCharmRankType == 2) {
|
|
getCharmList('month')
|
|
}
|
|
} else {
|
|
if (currentCharmRankType == 0) {
|
|
getCharmList('day')
|
|
} else if (currentCharmRankType == 1) {
|
|
getCharmList('week')
|
|
} else if (currentCharmRankType == 2) {
|
|
getCharmList('total')
|
|
}
|
|
}
|
|
} else {
|
|
// 贡献榜&爱意榜
|
|
if (showReceiveRankTotal) {
|
|
$('.rank_type p').eq(2).show()
|
|
}
|
|
if (showMonthList) {
|
|
$('.wrap .tab_wrap .rank_type p:last-child').show();
|
|
$('.rank_type p').eq(currentRankType).addClass('active').siblings('p').removeClass('active')
|
|
if (currentRankType == 0) {
|
|
getList('day')
|
|
} else if (currentRankType == 1) {
|
|
getList('week')
|
|
} else if (currentRankType == 2) {
|
|
getList('month')
|
|
}
|
|
} else {
|
|
$('.rank_type p').eq(currentRankType).addClass('active').siblings('p').removeClass('active')
|
|
if (currentRankType == 0) {
|
|
getList('day')
|
|
} else if (currentRankType == 1) {
|
|
getList('week')
|
|
} else if (currentRankType == 2) {
|
|
getList('total')
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// 日榜周榜总榜切换
|
|
let currentRankType = 0
|
|
let currentCharmRankType = 0
|
|
$('.rank_type').on('click', 'p', function () {
|
|
$('.rank_wrap').scrollTop(0)
|
|
page = 1
|
|
if (currentTabIndex) {
|
|
// 魅力榜
|
|
let index = $(this).index()
|
|
if (currentCharmRankType == index) return;
|
|
currentCharmRankType = index
|
|
$(this).addClass('active').siblings('p').removeClass('active')
|
|
rankList = []
|
|
|
|
if (showMonthList) {
|
|
if (index == 0) {
|
|
getCharmList('day')
|
|
} else if (index == 1) {
|
|
getCharmList('week')
|
|
} else if (index == 2) {
|
|
getCharmList('month')
|
|
}
|
|
} else {
|
|
if (index == 0) {
|
|
getCharmList('day')
|
|
} else if (index == 1) {
|
|
getCharmList('week')
|
|
} else if (index == 2) {
|
|
getCharmList('total')
|
|
}
|
|
}
|
|
} else {
|
|
// 财富榜
|
|
let index = $(this).index()
|
|
if (currentRankType == index) return;
|
|
currentRankType = index
|
|
$(this).addClass('active').siblings('p').removeClass('active')
|
|
rankList = []
|
|
if (showMonthList) {
|
|
if (index == 0) {
|
|
getList('day')
|
|
} else if (index == 1) {
|
|
getList('week')
|
|
} else if (index == 2) {
|
|
getList('month')
|
|
}
|
|
} else {
|
|
if (index == 0) {
|
|
getList('day')
|
|
} else if (index == 1) {
|
|
getList('week')
|
|
} else if (index == 2) {
|
|
getList('total')
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// 监听滚动
|
|
$('.rank_wrap').scroll(function () {
|
|
let scrollTop = $(this).scrollTop()
|
|
let scrollHeight = $('.rank_wrap')[0].scrollHeight
|
|
let ulHeight = $(this).innerHeight()
|
|
if (scrollTop + ulHeight + 100 >= scrollHeight) {
|
|
if (isLock) {
|
|
// 请求下一页
|
|
if (canNext) {
|
|
if (showMonthList) {
|
|
if (currentTabIndex) {
|
|
if (currentCharmRankType == 0) {
|
|
getCharmList('day', ++page)
|
|
} else if (currentCharmRankType == 1) {
|
|
getCharmList('week', ++page)
|
|
} else if (currentCharmRankType == 2) {
|
|
getCharmList('month', ++page)
|
|
}
|
|
} else {
|
|
if (currentRankType == 0) {
|
|
getList('day', ++page)
|
|
} else if (currentRankType == 1) {
|
|
getList('week', ++page)
|
|
} else if (currentRankType == 2) {
|
|
getList('month', ++page)
|
|
}
|
|
}
|
|
} else {
|
|
if (currentTabIndex) {
|
|
if (currentCharmRankType == 0) {
|
|
getCharmList('day', ++page)
|
|
} else if (currentCharmRankType == 1) {
|
|
getCharmList('week', ++page)
|
|
} else if (currentCharmRankType == 2) {
|
|
getCharmList('total', ++page)
|
|
}
|
|
} else {
|
|
if (currentRankType == 0) {
|
|
getList('day', ++page)
|
|
} else if (currentRankType == 1) {
|
|
getList('week', ++page)
|
|
} else if (currentRankType == 2) {
|
|
getList('total', ++page)
|
|
}
|
|
}
|
|
}
|
|
isLock = false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
//跳转个人主页
|
|
function openPerson (document, 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('.top_three_wrap', '.avatar')
|
|
openPerson('ul', '.others_avatar')
|
|
}) |