de-net-hotload/src/pages/tab-group.vue

<template>
    <div class="tab-group-page" ref="pageWrapperDom" @scroll="pageScroll">
        <div class="list-wrapper" ref="listWrapperDom">

            <template v-if="listData.length">
                <div class="list-item" v-for="(item, index) in listData" :key="index" @click="clickItem(item, index)">
                    <div class="left">
                        <img :src="item.avatarUrl" class="icon-avatar">
                    </div>
                    <div class="right">
                        <div class="top">
                            <div class="icon-nft-wrapper">
                                <el-popover :width="340" placement="right-start" trigger="hover" popper-style="background: #FFFFFF;
                                        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
                                        border-radius: 20px;
                                        padding: 20px;
                                        box-sizing: border-box;
                                        margin-top: -1px">
                                    <template #reference>
                                        <img v-if="item.nftItem" :src="item.nftItem.imagePath" class="icon-nft"
                                            @click.stop="">
                                    </template>
                                    <template #default>
                                        <div class="preview-nft" v-if="item.nftItem">
                                            <img :src="item.nftItem.imagePath" class="icon-nft-big">
                                            <div class="content">
                                                <div class="nft-name">
                                                    {{ item.nftItem.nftItemName }}
                                                </div>
                                                <div class="nft-desc">
                                                    <div v-if="item.nftItem.metadata"
                                                        v-html="item.nftItem.metadata.description"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-popover>
                            </div>
                            <div class="nick-name" :style="{
                                color: eleThemeStyle.color
                            }">
                                {{ item.nickName }}
                            </div>
                            <div class="screen-name" :style="{
                                color: eleThemeStyle.screenName
                            }">
                                @{{ item.screenName }}
                            </div>
                        </div>
                        <div class="post-content" :style="{
                            color: eleThemeStyle.color
                        }" v-html="item.textContent"></div>
                    </div>
                </div>
            </template>
            <template v-if="loading && !listData.length">
                <img :src="require('@/assets/svg/icon-tweet-loading.svg')" class="icon-loading">
            </template>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getGroupPostList, getTwitterNftGroupInfo } from '@/http/nft'
import { getQueryString } from '@/uilts/help.js'
import { ElPopover } from "element-plus";
import messageCenter from "@/uilts/messageCenter";
import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";


let twitterAccount = '';
let groupInfo = {};

let listData = ref([])
let listWrapperDom = ref(null);
let pageWrapperDom = ref(null);
let loading = ref(false);

let eleThemeStyle = reactive({
    color: '#000',
    screenName: '#566370',
    borderColor: '#F0F3F4',
})

let listReqParams = {
    params: {
        pageSize: 100,
        preTimestamp: ''
    },
    loadMore: false,
    isInit: false,
};

const clickItem = (data) => {
    if (data.srcContentId) {
        let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
        
        messageCenter.send({
            info: {
                actionType: MESSAGE_ENUM.IFRAME_PAGE_JUMP
            },
            data: {
                url
            }
        })
    }
}

const onRuntimeMsg = () =>{
    messageCenter.listen(MESSAGE_ENUM.CONTENT_REFRESH_TAB_GROUP_LIST, () => { 
        listReqParams.params.preTimestamp = ''
        initData();
    })
    messageCenter.listen(MESSAGE_ENUM.CONTENT_GROUP_LIST_SCROLL, (data) => { 
        nextPage(data);
    })
    messageCenter.listen(MESSAGE_ENUM.CONTENT_SEND_GROUP_NAV_TOP, (data) => { 
        styleHandler(data);
    })
    messageCenter.listen(MESSAGE_ENUM.CONTENT_SYS_THEME_CHANGE, (data) => { 
        setPageThemeStyle(data);
    })
}

const nextPage = (params) => {
    let { wrapperHeight, wrapperScrollTop, contentHeight } = params;
    if (wrapperHeight + wrapperScrollTop >= (contentHeight - 50)) {
        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
            pageWrapperDom.value.style.overflowY = 'auto'
        }
    }
};

const pageScroll = (e) => {
    messageCenter.send({
        info: {
            actionType: MESSAGE_ENUM.IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP,
        },
        data: {
            scrollTop: e.target.scrollTop
        }
    })
}

const styleHandler = (data) => {
    if (data.top > 53) {
        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
            pageWrapperDom.value.style.overflowY = 'hidden'
        }
    } else {
        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
            pageWrapperDom.value.style.overflowY = 'auto'
        }
        innerPageNext(data);
    }
}

const innerPageNext = (data) => {
    let wrapperHeight = pageWrapperDom.value.offsetHeight;
    let listContentHeight = listWrapperDom.value.offsetHeight;
    let scrollTop = data.scrollTop || 0;
    if (
        listReqParams.loadMore === false &&
        wrapperHeight + scrollTop >= (listContentHeight - 100)
    ) {
        listReqParams.loadMore = true;
        let dataLength = listData.value.length;
        if (dataLength) {
            listReqParams.params.preTimestamp = listData.value[dataLength - 1]['createTimestamp'];
        }
        if (listReqParams.params.preTimestamp) {
            getListData();
        }
    }
}

const getListData = () => {
    getGroupPostList({
        params: {
            pageSize: listReqParams.params.pageSize,
            preTimestamp: listReqParams.params.preTimestamp,
            groupId: groupInfo.nftGroupId
        }
    }).then(res => {
        loading.value = false;
        if (res.code == 0) {
            let resData = res.data;
            if (resData.length) {
                for (let i = 0; i < resData.length; i++) {
                    let nftItem = resData[i]["nftItem"];
                    if (nftItem) {
                        let matedata = nftItem['metadata'];
                        if (matedata) {
                            resData[i]["nftItem"]['metadata'] = JSON.parse(matedata);
                        }
                    }
                }

                if (!listReqParams.params.preTimestamp) {
                    listData.value = resData;
                } else {
                    let data = listData.value;
                    data = data.concat(resData);
                    listData.value = data;
                }
                listReqParams.loadMore = false;
            }
        }
    })
}

const initData = () => {
    loading.value = true;
    let { windowLocation } = JSON.parse(getQueryString('params'));
    if (windowLocation.pathname) {
        let arr = windowLocation.pathname.split('/');
        if (arr.length >= 2) {
            twitterAccount = arr[1];
            if (twitterAccount) {
                getTwitterNftGroupInfo({
                    params: {
                        twitterAccount
                    }
                }).then(res => {
                    if (res.code == 0) {
                        groupInfo = res.data || {};
                        if (!groupInfo.nftGroupId) return;
                        // loading.value = true;
                        getListData()
                    }
                })
            }
        }
    }
}

const setPageThemeStyle = (params) => {
    let { twitterTheme } = params;

    if (twitterTheme == 'light') {
        eleThemeStyle.color = '#000';
        eleThemeStyle.screenName = '#566370';
        eleThemeStyle.borderColor = '#F0F3F4';
        document.querySelector('body').style.backgroundColor = '#fff'
    } else if (twitterTheme == 'dark') {
        eleThemeStyle.color = '#fff';
        eleThemeStyle.screenName = '#fff';
        eleThemeStyle.borderColor = '#000';
        document.querySelector('body').style.backgroundColor = '#000'
    }
};

onMounted(() => {
    onRuntimeMsg();
    initData();
    messageCenter.send({
        info: {
            actionType: MESSAGE_ENUM.IFREME_TAB_GROUP_SET_IFRAME_HEIGHT,
        },
        data: {
            height: listWrapperDom.value.offsetHeight + 10
        }
    })
}) 
</script>

<style  lang="scss">
html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.el-popper__arrow {
    display: none !important;
}

// @media (prefers-color-scheme: light) {
//     body {
//         background: #fff;
//     }
// }

// @media (prefers-color-scheme: dark) {
//     body {
//         background: #000 !important;
//     }
//     .list-item {
//         border-bottom: 1px solid #000 !important;
//     }
//     .nick-name {
//         color: #fff !important;
//     }

//     .screen-name {
//         color: #fff !important;
//     }

//     .post-content {
//         color: #fff !important;
//     }
// }

.preview-nft {
    box-sizing: border-box;
    // position: absolute;
    // left: 26px;
    // top: 0px;
    // z-index: 1999;
    // display: none;

    .icon-nft-big {
        width: 300px;
        height: 300px;
        object-fit: cover;
    }

    .content {
        margin-top: 19px;

        .nft-name {
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
            color: #000;
        }

        .nft-desc {
            font-weight: 400;
            font-size: 14px;
            color: #787878;
            // margin-bottom: 18px;
        }

        .nft-date {
            font-weight: 500;
            font-size: 12px;
            color: #ACACAC;
        }
    }
}

.tab-group-page {
    height: 100%;
    overflow-y: hidden;

    &::-webkit-scrollbar {
        width: 2px;
    }

    &::-webkit-scrollbar-track {
        background: rgb(241, 241, 241);
    }

    &::-webkit-scrollbar-thumb {
        background: rgb(136, 136, 136);
        border-radius: 8px;
    }

    .list-wrapper {

        .list-item:hover {
            background: rgba($color: #000000, $alpha: 0.03);
        }

        .list-item {
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            border-bottom: 1px solid #F0F3F4;
            cursor: pointer;

            .left {
                margin-right: 10px;

                .icon-avatar {
                    width: 47px;
                    height: 47px;
                    border-radius: 50%;
                }
            }

            .right {
                flex: 1;

                .top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 7px;
                    position: relative;

                    .icon-nft-wrapper {
                        height: 24px;
                        margin-right: 8px;

                        .icon-nft {
                            width: 24px;
                            height: 24px;
                            // object-fit: cover;
                        }
                    }

                    .icon-nft-wrapper:hover {
                        .preview-nft {
                            // display: block;
                        }
                    }

                    .nick-name,
                    .screen-name {
                        font-size: 15px;
                    }

                    .nick-name {
                        font-weight: 600;
                        color: #000;
                        margin-right: 8px;
                    }

                    .screen-name {
                        color: #566370;
                    }
                }

                .post-content {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    color: #000;
                    font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                    word-break: break-all;
                    white-space: pre-line;
                }
            }
        }
    }

    .icon-loading {
        width: 26px;
        height: 26px;
        display: block;
        margin: 20px auto;
        animation: loading infinite 0.8s linear;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>