peko-h5/view/peko/activity/act-ocean/js/record.js

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 recordList = []
let page = 1
let pageSize = 10
let canNext
let isLock = true
const getUserRecord = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listDrawRecord',
        data: {
            page,
            pageSize
        },
        success (res) {
            if (res.code === 200) {
                if (res.data.length === pageSize) {
                    // 能够继续请求下一页
                    canNext = true
                } else {
                    canNext = false
                }
                recordList.push(...res.data)
                renderRecord(res)
                isLock = true
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('网络错误')
        }
    })
}
// 渲染游戏记录
const renderRecord = (res) => {
    if (recordList.length === 0) {
        $('.record-list').hide();
        $('.img').show();
    } else {
        $('.record-list').show();
        $('.img').hide();
        var str = '';
        let str2 = '';
        let drawId = [];;
        var results = [];
        console.log(res.data)
        res.data.forEach((res, index) => {
            drawId.push(res.drawId);
            str += `
            <li style="margin-bottom: 0.8rem;">
                <h3>${dateFormat(res.drawTime, 'yy-MM-dd hh:mm:ss')}</h3>
                <div class="goldBox">
                    <span>遊戲獎勵：</span>
                    <span class="gold">${res.reward}钻石</span>
                </div>
                <div class="marine_organism"></div>
                <p style="display: ${res.drawStatus == 1 ? 'none' : 'block'};" class="fasle">哎呀~猜錯了o(╥﹏╥)o</p>
                <p style="display: ${res.drawStatus == 1 ? 'block' : 'none'};" class="true">厲害~猜對了୧(๑•̀◡•́๑)૭</p>
            </li>
        `
            results.push(res.results);
        });
        $('.record-list').append(str)
        results.forEach((res, index) => {
            res.forEach(val => {
                $('.record-list li').eq(index).children('.marine_organism').append(`<span class='${drawId[index] == val.itemId ? 'active' : ''}'><img src="${val.itemUrl}" alt=""><b>+${val.costPiece}</b></span>`)
            })
        });
    }

}
$(function () {
    getInfoFromClient()
    setTimeout(function () {
        getUserRecord()
    }, 50)
    // 监听滚动
    $('ul').scroll(function () {
        let scrollTop = $(this).scrollTop()
        let scrollHeight = $('ul')[0].scrollHeight
        let ulHeight = $(this).innerHeight()
        if (scrollTop + ulHeight + 100 >= scrollHeight) {
            if (isLock) {
                // 请求下一页
                if (canNext) {
                    getUserRecord(page++)
                    isLock = false
                }
            }
        }
    })
})