de-net/src/view/iframe/treasure-hunt/components/receive-list.vue

<!-- 领取人列表组件 -->
<template>
    <div class="content">
        <img v-show="receive.loading" :src="require('@/assets/svg/icon-loading-gray2.svg')" alt="" class="loading" />
        <img v-if="receive.list.length == 0 && receive.end" :src="require('@/assets/svg/icon-empty-list.svg')" alt=""
            class="empty" />
        <div class="list" v-else @scroll="handleScroll($event)">
            <div class="item" v-for="item in receive.list" :key="item.userInfo.uid">
                <div class="left">
                    <img :src="item.userInfo.avatarUrl" alt="" @click="clickItem(item)" />
                </div>
                <div class="right">
                    <div>
                        <div class="name" @click="clickItem(item)">{{ item.userInfo.nickName }}</div>
                        <div class="time">{{ getBeforeTimeFormat(item.timestamp) }}</div>
                    </div>
                    <div>
                        <div class="money">${{ item.amountUsdValue }}</div>
                        <div class="count" :class="{ 'hide': Number(item.inviteNewFansCount) == 0 }">
                            invited:{{ item.inviteNewFansCount }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { receiveListV2 } from '@/http/treasure'
import { onMounted, reactive, inject, defineProps, watch } from 'vue'
import { getBeforeTimeFormat } from "@/uilts/help"
let state = inject('state')
let receive = reactive({
    end: false,
    list: []
})
let props = defineProps({
    sortType: {
        type: Number,
        default: 2,
    }
})
watch(props, () => {
    sortType = props.sortType
    page_num = 1
    receive.loading = true
    receive.list = []
    receive.end = false
    list()
})
let page_num = 1
let page_size = 10
let sortType = 2;
let list_end = false
onMounted(() => {
    receive.loading = true
    list()
})

const clickItem = (item) => {
    window.open(`https://twitter.com/${item.userInfo.nickName}`)
}

function handleScroll(e) {
    if (list_end) {
        return
    }
    e = e.target
    if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
        if (page_num * page_size == receive.list.length) {
            page_num++
            list()
        }
        list_end = true
    }
}

const list = () => {
    receiveListV2({
        params: {
            postId: state.postId,
            pageNum: page_num,
            pageSize: page_size,
            sortType
        }
    }).then((res) => {
        if (res.code == 0) {
            receive.loading = false
            if (page_num < 2) {
                receive.list = res.data || [];
            } else {
                receive.list = receive.list.concat(res.data)
            }
            receive.end = true
            list_end = false
        }
    })
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    height: 100%;
    overflow-y: auto;
    background: #fff;

    .footer {
        background: #fff;
        padding: 10px 16px 25px 16px;
    }

    .error {
        height: 204px;
        color: #BABABA;
        background-color: #fff;
        font-weight: 500;
        font-size: 15px;
        line-height: 204px;
        text-align: center;

    }

    .list {
        height: 100%;
        background: #fff;
        overflow-y: auto;

        .item {
            height: 60px;
            display: flex;
            align-items: center;

            .left {
                width: 58px;
                text-align: center;

                img {
                    cursor: pointer;
                    border-radius: 50px;
                    width: 30px;
                    height: 30px;
                }
            }

            .right {
                flex: 1;
                box-shadow: inset 0px -1px 0px #F2F2F2;

                display: flex;
                align-items: center;
                height: 100%;
                justify-content: space-between;

                .name {
                    color: #000000;
                    font-weight: 500;
                    font-size: 15px;
                    cursor: pointer;
                    margin-bottom: 5px;
                }

                .time {
                    color: #A6A6A6;
                    font-weight: 400;
                    font-size: 12px;
                    margin-right: 17px;
                }

                .money {
                    color: #FCB936;
                    font-weight: 500;
                    font-size: 13px;
                    margin-right: 16px;
                    text-align: right;

                }

                .count {
                    margin-right: 16px;
                    color: #A9A9A9;
                    font-weight: 400;
                    font-size: 12px;
                    text-align: right;
                    margin-top: 5px;
                }

                .hide {
                    visibility: hidden;

                }
            }
        }
    }
}

.loading {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    animation: rotation 1s linear infinite;
}

.empty {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}
</style>