de-net/src/view/components/nft-group-list.vue

<template>
    <div class="list" v-show="detail && detail.length">
        <div class="list-content">
            <div
                class="item"
                :key="index"
                v-for="(item, index) in detail"
                @click="clickHandler(item)">
                <div class="logo">
                    <img :src="item.nftGroupIcon" />
                    <div class="badge" v-if="showBadge && item.newPostCount > 0">
                        {{item.newPostCount}}
                    </div>
                </div>
                <div class="text">{{item.nftGroupName}}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, ref, defineEmits, defineProps, watch } from 'vue'
import { listJoinNftGroup } from '@/http/nft'

const props = defineProps({
    showBadge: {
        type: Boolean,
        default: false,
    }
})

let pageNum = 1;
let pageSize = 1000;
let detail = ref(null);
let emits = defineEmits(['clickCallBack', 'updateList']);

watch(detail, (newVal) => {
    emits('updateList', newVal);
})

const clickHandler = (item) => {
    emits('clickCallBack', item);
}

const getDetail = () => {
    listJoinNftGroup({
        params: {
            pageNum,
            pageSize
        }
    }).then(res => {
        let { data } = res;
        if (data !== null) {
            detail.value = data;
        } else {
            emits('updateList', data);
        }
    })
}

const onPageVisbile = () => {
    document.addEventListener('visibilitychange', function () {
        let isHidden = document.hidden;
        if (!isHidden) {
            getDetail();
        }
    });
}

onBeforeMount(() => {
    getDetail();
    onPageVisbile();
})
</script>

<style lang='scss'>
body {
    margin: 0;
    padding: 0;
    user-select: none;
}

.list {
    overflow-y: auto;
    .item {
        display: flex;
        height: 48px;
        margin: 2px 0;
        cursor: pointer;
        flex-direction: row;
        align-items: center;
        .logo {
            width: 38px;
            height: 38px;
            border: 1px solid #E3E3E3;
            border-radius: 6px;
            background: #FFFFFF;
            margin-right: 16px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 6px;
            }

            .badge {
                min-width: 16px;
                min-height: 16px;
                padding: 0 4px;
                font-weight: 600;
                font-size: 12px;
                color: #fff;
                background: #1D9BF0;
                border: 1px solid #F7F9F9;
                border-radius: 100px;
                box-sizing: border-box;
                position: absolute;
                top: -8px;
                left: 29px;
                min-width: 18px;
                min-height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .text {
            display: flex;
            flex: 1;
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
        }
    }
}
</style>