peko-h5/view/peko/modules/room_rank/js/index.js

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);
        }
    }
})