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()
                isLock = true
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤')
        }
    })
}
// 渲染遊戲記錄
const renderRecord = () => {
    if (recordList.length === 0) {
        $('.record-list').html('<li class="no-record">暫無遊戲記錄</li>')
    } else {
        let str = ''
        recordList.map((item, index) => {
            let drawId = item.drawId
            let itemType = item.itemType
            // 渲染li裏面的ul
            let str1 = ''
            let userCostPiece = ''  //用戶投註情況
            let userReward = ''     //用戶獎勵情況
            item.results.map((item1, index) => {
                if (itemType === 1) {
                    userCostPiece = '+' + item1.costPiece
                } else {
                    userCostPiece = item1.multiple * 10 + '*' + item1.costPiece
                }

                str1 += `
                    <li class="animal-item">
                        <div><img src="${item1.itemUrl}" alt=""></div>
                        <span>${userCostPiece}</span>
                    </li>
                `

                if (item1.itemId === drawId) {
                    $('.none').html(str1)
                    $('.none').find('li').eq(index).addClass('active')
                    str1 = $('.none').html()
                }
            })

            if (itemType === 1) {
                if (item.reward) {
                    userReward = `
                        <span class="diamond-num">${item.reward}</span>
                        <img src="./images/record/diamond.png" alt="" class="diamond-pic"></img>
                    `
                } else {
                    userReward = `
                        <span class="diamond-num">未猜中</span>
                    `
                }
            } else {
                if (item.reward) {
                    userReward = `
                        <span class="diamond-num">
                            ${item.itemName} (${item.price}<img src="./images/record/diamond.png" alt="" class="diamond-pic1">) *${item.reward / item.price}個 (共計${item.reward}<img src="./images/record/diamond.png" alt="" class="diamond-pic1"></img>)
                        </span>   
                    `

                } else {
                    userReward = `
                        <span class="diamond-num">未猜中</span>
                    `
                }
            }

            // 渲染li
            let text = ''
            if (item.drawStatus === 1) {
                text = '厲害~猜對了(*^▽^*)'
            } else {
                text = '哎呀~猜錯了o(╥﹏╥)o'
            }
            str += `
                <li class="record-item">
                    <div class="time">${dateFormat(item.drawTime, "yyyy-MM-dd hh:mm:ss")}</div>
                    <div class="award">
                        <span class="text">遊戲獎勵：</span>
                        <p>
                            ${userReward}
                        </p>
                    </div>
                    <ul class="award-animal clearfix">
                        ${str1}
                    </ul>
                    <div class="tip">${text}</div>
                <li>
            `
        })
        $('.record-list').html(str)
    }

}
$(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
                }
            }
        }
    })
})