优化房间帮ui
This commit is contained in:
Dragon
215
view/peko/modules/roomRank/js/index.js
Normal file
215
view/peko/modules/roomRank/js/index.js
Normal file
@@ -0,0 +1,215 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
var urlData = getQueryString();
|
||||
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 listType = 1;
|
||||
var experImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_exper_';
|
||||
var charmImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_charm_';
|
||||
var typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总
|
||||
// 初始化函数
|
||||
$(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)
|
||||
}
|
||||
})
|
||||
getRankingsWealth();
|
||||
}, 100)
|
||||
})
|
||||
// 榜单切换
|
||||
$('.largestBox .tab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
listType = i;
|
||||
$('.largestBox .tab div').removeClass('tabColor1').removeClass('tabColor2')
|
||||
$(this).addClass(`tabColor${listType}`);
|
||||
$('.largestBox .dayTab div').removeClass('dayTabColor1').removeClass('dayTabColor2');
|
||||
$('.largestBox .dayTab div').eq(0).addClass(`dayTabColor${listType}`);
|
||||
typeWealth = 'day';
|
||||
if (listType == 1) {
|
||||
getRankingsWealth();
|
||||
} else {
|
||||
getReciveRankingsWealth();
|
||||
}
|
||||
})
|
||||
// 日榜切换
|
||||
$('.largestBox .dayTab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass(`dayTabColor${listType}`).siblings().removeClass('dayTabColor1').removeClass('dayTabColor2');
|
||||
if (i == 1) {
|
||||
typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总
|
||||
} else if (i == 2) {
|
||||
typeWealth = 'week';
|
||||
} else if (i == 3) {
|
||||
typeWealth = 'month';
|
||||
}
|
||||
if (listType == 1) {
|
||||
getRankingsWealth();
|
||||
} else {
|
||||
getReciveRankingsWealth();
|
||||
}
|
||||
})
|
||||
// 爱意榜接口
|
||||
function getRankingsWealth () {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '/room/rankings',
|
||||
data: {
|
||||
roomUid: urlData.roomUid,
|
||||
type: typeWealth,
|
||||
page: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
listDomFun(res, 1);
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 魅力榜接口
|
||||
function getReciveRankingsWealth () {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '/room/recive/rankings',
|
||||
data: {
|
||||
roomUid: urlData.roomUid,
|
||||
type: typeWealth,
|
||||
page: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
listDomFun(res, 2);
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染样式
|
||||
function listDomFun (res, num) {
|
||||
$('.largestBox ul li').remove();
|
||||
// 处理前三
|
||||
var top3 = res.data.rankings.slice(0, 3);
|
||||
if (top3.length < 3) {
|
||||
let arr = new Array(3 - top3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: '虚位以待',
|
||||
goldAmount: '',
|
||||
})
|
||||
top3.push(...arr);
|
||||
}
|
||||
top3.forEach((res, i) => {
|
||||
if (res.avatar == './images/logo.png') {
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).hide();
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon`).hide();
|
||||
} else {
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).show();
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon`).show();
|
||||
}
|
||||
$(`.largestBox .top3 .no${i + 1} .box .tx`).attr('src', res.avatar);
|
||||
$(`.largestBox .top3 .no${i + 1} .box .ts`).attr('uid', res.uid);
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp1`).text(res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick);
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).removeClass('boy').removeClass('woman')
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).addClass(`${res.gender == 1 ? 'boy' : 'woman'}`);
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp img`).attr('src', res.gender == 1 ? './images/boy.png' : './images/woman.png');
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`)
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`)
|
||||
$(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessing(res.goldAmount, 10000, 1, 'W'));
|
||||
})
|
||||
// 处理非前三
|
||||
var notTop3 = res.data.rankings.slice(3);
|
||||
var str = '';
|
||||
notTop3.forEach((res, i) => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="num">${i + 4}</div>
|
||||
<img src="${res.avatar}" uid=${res.uid} alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>${res.nick}</p>
|
||||
<img src="${experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`}" alt="" class="icon1">
|
||||
<img src="${charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`}" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>${unitProcessing(res.goldAmount, 10000, 1, 'W')}</p>
|
||||
<span>${num == 1 ? '爱意值' : '魅力值'}</span>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.largestBox ul').append(str);
|
||||
}
|
||||
// 点击前三跳转房间
|
||||
$('.largestBox').on('click', '.top3 .no .box .ts', function () {
|
||||
var uid = $(this).attr('uid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击非前三跳转房间
|
||||
$('.largestBox').on('click', 'ul li .tx', function () {
|
||||
var uid = $(this).attr('uid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openPersonPage(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user