253 lines
7.5 KiB
JavaScript
253 lines
7.5 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
|
let browser = checkVersion()
|
|
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 total = 0 //已送出总礼物数
|
|
let rank = 0 //排名
|
|
let user = 0 //当前用户送出礼物数
|
|
const getProgress = () => {
|
|
// showLoading()
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/moonActivity/process',
|
|
success(res) {
|
|
// hideLoading(layerIndex)
|
|
if (res.code === 200) {
|
|
total = res.data.total
|
|
rank = res.data.rank
|
|
user = res.data.user
|
|
renderProgress()
|
|
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
// hideLoading(layerIndex)
|
|
toastMsg('網絡錯誤')
|
|
}
|
|
})
|
|
}
|
|
|
|
let rankList = []
|
|
let page = 1
|
|
let pageSize = 10
|
|
const getRanking = () => {
|
|
showLoading()
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/moonActivity/ranking',
|
|
data: {
|
|
page,
|
|
pageSize
|
|
},
|
|
success(res) {
|
|
hideLoading(layerIndex)
|
|
if (res.code === 200) {
|
|
if (res.data.rankList.length === pageSize && page == 1) {
|
|
$('.next').show()
|
|
} else if (res.data.rankList.length === 0 && page !== 1) {
|
|
toastMsg('没有更多啦~')
|
|
$('.next').hide()
|
|
return
|
|
} else {
|
|
$('.next').hide()
|
|
}
|
|
|
|
rankList.push(...res.data.rankList)
|
|
renderRanking()
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
hideLoading(layerIndex)
|
|
toastMsg('網絡錯誤')
|
|
}
|
|
})
|
|
}
|
|
|
|
const renderProgress = () => {
|
|
$('.total-num').html(total)
|
|
if (total < 6666) {
|
|
$('.gap-num').html(6666 - total)
|
|
} else if (total < 8888) {
|
|
$('.gap-num').html(8888 - total)
|
|
} else {
|
|
$('.progress div').eq(0).html('<span class="desc-left">距离目标：</span> 已达成8888个【流星赶月】')
|
|
}
|
|
$('.ranking-num').html(rank)
|
|
$('.send-num, .own-num').html(user)
|
|
|
|
let offset = total / 8888 > 1 ? 1 : total / 8888
|
|
$('.progress-bar-now').css('width', `${offset * 100}%`)
|
|
$('.total-num').css('left', `${offset * 100}%`)
|
|
}
|
|
|
|
const renderRanking = () => {
|
|
//渲染前三
|
|
let topThreeArr = rankList.slice(0, 3)
|
|
if (topThreeArr.length < 3) {
|
|
let len = 3 - topThreeArr.length
|
|
let a = new Array(len).fill({
|
|
nick: '虚位以待',
|
|
avatar: './images/logo.png',
|
|
})
|
|
topThreeArr.push(...a)
|
|
}
|
|
let topThreeStr = ''
|
|
topThreeArr.map((item) => {
|
|
topThreeStr += `
|
|
<div class="info-wrap">
|
|
<div class="pic-wrap">
|
|
<img src="${item.avatar}" alt="">
|
|
</div>
|
|
<span class="nick">${item.nick.length > 6 ? item.nick.slice(0, 6) + '...' : item.nick}</span>
|
|
<span class="id">${item.erbanNo ? 'ID:' + item.erbanNo : ''}</span>
|
|
<span class="gift-num">${item.amount ? '礼物:' + (item.amount > 10000 ? (item.amount/10000).toFixed(2)+'W' : item.amount ) : ''}</span>
|
|
</div>
|
|
`
|
|
})
|
|
$('.topthree').html(topThreeStr)
|
|
|
|
//渲染非前三
|
|
let othersArr = rankList.slice(3)
|
|
let others = ''
|
|
othersArr.map((item, index) => {
|
|
others += `
|
|
<li>
|
|
<div class="others-index">${index + 4}</div>
|
|
<div class="others-info">
|
|
<img src="${item.avatar}" alt="">
|
|
<div class="wrap">
|
|
<div class="others-nick">${item.nick.length > 6 ? item.nick.slice(0, 6) + '...' : item.nick}</div>
|
|
<div class="others-id">ID:${item.erbanNo}</div>
|
|
</div>
|
|
</div>
|
|
<span class="others-gift-num">${item.amount}</span>
|
|
</li>
|
|
`
|
|
})
|
|
$('.others').html(others)
|
|
|
|
let liH = $('li').outerHeight()
|
|
let marginH = $(window).width()/10*0.32
|
|
if (page > 1) {
|
|
let len = $('li').length + 3
|
|
console.log(len);
|
|
if (len % 10 === 0) {
|
|
$('.others').animate({
|
|
scrollTop: (len - 13) * (liH + marginH)
|
|
}, function () {
|
|
toastMsg('加载完成~')
|
|
})
|
|
} else {
|
|
if (len % 10 > 7){
|
|
len = len - (len % 10 - 7)
|
|
}
|
|
$('.others').animate({
|
|
scrollTop: (len - 10) * (liH + marginH)
|
|
}, function () {
|
|
toastMsg('加载完成~')
|
|
})
|
|
}
|
|
}
|
|
page++
|
|
}
|
|
|
|
$(function () {
|
|
getInfoFromClient()
|
|
setTimeout(() => {
|
|
getProgress()
|
|
getRanking()
|
|
}, 50)
|
|
|
|
//进度定时器，一分钟刷新一次
|
|
setInterval(() => {
|
|
getProgress()
|
|
}, 60000);
|
|
|
|
//切换tab
|
|
$('.tab > img').on('click', function () {
|
|
if ($(this).index()) {
|
|
//人人有礼
|
|
$(this).attr('src', './images/right-active.png').siblings().attr('src', './images/left.png')
|
|
$('.right-content').show().siblings('.left-content').hide()
|
|
} else {
|
|
//限时上线
|
|
$(this).attr('src', './images/left-active.png').siblings().attr('src', './images/right.png')
|
|
$('.left-content').show().siblings('.right-content').hide()
|
|
}
|
|
})
|
|
//打开弹窗
|
|
$('.tag').on('click', 'div', function () {
|
|
let index = $(this).index()
|
|
if(!index){
|
|
$('.shade-content').css('background-image', "url('./images/shade-GBA.png')")
|
|
$('.shade-content div img').attr('src', './images/shade-GBA-content.png')
|
|
$('.shade-content div img').css('width', 'px2rem(624, )')
|
|
|
|
}else if(index == 1){
|
|
$('.shade-content').css('background-image', "url('./images/shade-rule.png')")
|
|
$('.shade-content div img').attr('src', './images/shade-rule-content.png')
|
|
$('.shade-content div img').css('width', 'px2rem(644, )')
|
|
}else{
|
|
$('.shade-content').css('background-image', "url('./images/shade-forward.png')")
|
|
$('.shade-content div img').attr('src', './images/shade-forward-content.png')
|
|
$('.shade-content div img').css('width', 'px2rem(620, )')
|
|
}
|
|
$('.shade-mask').fadeIn()
|
|
$('.shade-content div').scrollTop(0)
|
|
$('body').css('overflow', 'hidden')
|
|
})
|
|
//关闭弹窗
|
|
$('.close, .shade-mask').on('click', function () {
|
|
$('.shade-mask').fadeOut(200)
|
|
$('body').css('overflow', 'auto')
|
|
})
|
|
$('.shade-content').on('click', function (e) {
|
|
e.stopPropagation()
|
|
})
|
|
|
|
//加载更多
|
|
$('.next').on('click', function () {
|
|
getRanking()
|
|
})
|
|
|
|
|
|
//监听页面滚动
|
|
$(window).on('scroll', function () {
|
|
if ($(this).scrollTop() >= $(window).width()) {
|
|
$('.top').fadeIn(200)
|
|
} else {
|
|
$('.top').fadeOut(200)
|
|
}
|
|
})
|
|
// 置顶
|
|
$('.top').on('click', function () {
|
|
window.scrollTo(0, 0)
|
|
})
|
|
})
|