de-net-hotload/src/components/popup-transactions.vue

<template>
    <div class="com-wrapper" ref="listWrapper" @scroll="listScroll">
        <template v-if="!dataList.length">
            <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
        </template>
        <div class="list-wrapper" ref="listContent">
            <div>
                <div class="cell" v-for="(item, index) in dataList" :key="index">
                    <red-dot class="red-dots" v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
                    <div class="img-wrapper">
                        <!-- 收入- 任务红包领取 -->
                        <template
                            v-if="item.bizType == 1 || item.bizType == 5 || item.bizType == 10 || item.bizType == 11 || item.bizType == 12">
                            <img class="icon-avatar" style="margin-right: 0"
                                :src="item.bizType != 12 && item.bizData ? item.bizData.avatarUrl : require('@/assets/svg/icon-treasure-return.svg')" />
                            <img class="icon-give" style="right: -4px"
                                :src="item.bizType == 10 || item.bizType == 11 || item.bizType == 12 ? require('@/assets/svg/icon-small-treasure.svg') : require('@/assets/svg/icon-get-giveaways-s.svg')" />
                        </template>

                        <!-- 收入- 任务红包结余退款， -->
                        <template v-else-if="item.bizType == 2 || item.bizType == 6">
                            <img style="margin-left:-4px; width: 38px" :src="
                                require('@/assets/svg/icon-give-refund-list.svg')
                            " />
                        </template>
                        <!-- 收入 - 提现 -- 失败退款 -->
                        <template v-else-if="item.bizType == 3">
                            <img style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-list-withdraw.svg')
                            " />
                        </template>
                        <!-- 收入-充值 -->
                        <template v-else-if="item.bizType == 4">
                            <img style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-list-top-up.svg')
                            " />
                        </template>
                        <!-- 收入 - 盲盒 -->
                        <template v-else-if="item.bizType == 7">
                            <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
                                v-if="item.bizData && item.bizData.imagePath" />
                            <img class="icon-avatar" style="margin-left:-4px"
                                :src="require('@/assets/svg/icon-wallter-list-blind-box.svg')" v-else />
                            <img class="icon-give" :src="require('@/assets/svg/icon-list-withdraw-s.svg')" />
                        </template>
                        <!-- 收入 - 盲盒 -->
                        <template v-else-if="item.bizType == 8">
                            <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
                                v-if="item.bizData && item.bizData.imagePath" />
                            <img class="icon-avatar" style="margin-left:-4px"
                                :src="require('@/assets/svg/icon-wallter-list-blind-box.svg')" v-else />
                            <img class="icon-give" :src="require('@/assets/svg/icon-get-giveaways-s.svg')" />
                        </template>
                        <!-- 支出 - 提现 -->
                        <template v-else-if="item.bizType == -1">
                            <img style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-list-withdraw.svg')
                            " />
                        </template>
                        <!-- 支出-任务红包余额支付 -->
                        <template v-else-if="item.bizType == -2">
                            <img class="icon-avatar" style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-big-give.svg')
                            " />
                            <img class="icon-give" :src="
                                require('@/assets/svg/icon-list-withdraw-s.svg')
                            " />
                        </template>
                        <!-- 支出-买盲盒 -->
                        <template v-else-if="item.bizType == -3">
                            <img style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-wallter-list-blind-box.svg')
                            " />
                        </template>
                        <template v-else-if="item.bizType == -4">
                            <img class="icon-avatar" style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-big-give.svg')
                            " />
                            <img class="icon-give" :src="
                                require('@/assets/svg/icon-list-withdraw-s.svg')
                            " />
                        </template>
                        <!-- 交易链手续费 -->
                        <template v-else-if="item.bizType == -5">
                            <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
                                v-if="item.bizData && item.bizData.imagePath" />
                            <img class="icon-avatar" style="margin-left:-4px"
                                :src="require('@/assets/img/icon-box2.png')" v-else />
                            <img class="icon-give" :src="require('@/assets/svg/icon-transaction-s.svg')" />
                        </template>
                        <!-- 支出-夺宝 -->
                        <template v-else-if="item.bizType == -6">
                            <img class="icon-avatar" style="margin-left:-4px" :src="
                                require('@/assets/svg/icon-big-give.svg')
                            " />
                            <img class="icon-give" :src="
                                require('@/assets/svg/icon-list-withdraw-s.svg')
                            " />
                        </template>
                    </div>
                    <div class="info-wrapper">
                        <div class="left">
                            <div class="nickname">
                                <template v-if="item.bizType == 1">
                                    Giveaways ({{ item.bizData.nickName }})
                                </template>
                                <template v-else-if="item.bizType == 2">
                                    Giveaways Refund
                                </template>
                                <template v-else-if="item.bizType == 3">
                                    Withdrawal Refund
                                </template>
                                <template v-else-if="item.bizType == 4">
                                    Deposit
                                </template>
                                <template v-else-if="item.bizType == 5">
                                    Winning the lottery
                                </template>
                                <template v-else-if="item.bizType == 6">
                                    Lottery Refund
                                </template>
                                <template v-else-if="item.bizType == 7">
                                    Sell NFT Mystery box*{{ (item.bizData && item.bizData.nftItemCount || '') }}
                                </template>
                                <template v-else-if="item.bizType == 8">
                                    NFT Refund
                                </template>
                                <template v-else-if="item.bizType == 10 || item.bizType == 11">
                                    Get Treasure Chest
                                </template>
                                <template v-else-if="item.bizType == 12">
                                    Treasure Chest Refund
                                </template>
                                <template v-else-if="item.bizType == -1">
                                    Withdrawal
                                </template>
                                <template v-else-if="item.bizType == -2">
                                    Giveaways
                                </template>
                                <template v-else-if="item.bizType == -3">
                                    Buy NFT Mystery box*{{ (item.bizData && item.bizData.nftItemCount || '') }}
                                </template>
                                <template v-else-if="item.bizType == -4">
                                    Lottery Giveaway
                                </template>
                                <template v-else-if="item.bizType == -5">
                                    Transaction Royalties
                                </template>
                                <template v-else-if="item.bizType == -6">
                                    Send Treasure Chest
                                </template>
                            </div>
                            <div class="time">{{ moment(item.createTimestamp).format('MM-DD HH:mm:ss') }}</div>
                        </div>
                        <div class="right">
                            <div class="msg">
                                <template v-if="item.bizType == -1">
                                    <!-- 提现支出-状态（0：已申请，1：支付中，2：提现成功，3：提现失败） -->
                                    <template
                                        v-if="item.bizData.withdrawStatus == 0 || item.bizData.withdrawStatus == 1">
                                        <div>
                                            <div class="balance"
                                                :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
                                                <span class="amount">
                                                    <a-tooltip :title="'-' + item.trxAmountValue">
                                                        -{{ getBit(item.trxAmountValue) || 0 }}
                                                    </a-tooltip>
                                                </span>
                                                <div class="trx-amount-currency-info">
                                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol
                                                    }}</span>
                                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                                </div>
                                            </div>
                                            <div class="desc">
                                                in progress
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else-if="item.bizData.withdrawStatus == 2">
                                        <div class="balance"
                                            :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
                                            <span class="amount">
                                                <a-tooltip :title="'-' + item.trxAmountValue">
                                                    -{{ getBit(item.trxAmountValue) || 0 }}
                                                </a-tooltip>
                                            </span>
                                            <div class="trx-amount-currency-info">
                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else-if="item.bizData.withdrawStatus == 3">
                                        <div>
                                            <div class="balance"
                                                :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
                                                <span class="amount">
                                                    <a-tooltip :title="'-' + item.trxAmountValue">
                                                        -{{ getBit(item.trxAmountValue) || 0 }}
                                                    </a-tooltip>
                                                </span>
                                                <div class="trx-amount-currency-info">
                                                    <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol
                                                    }}</span>
                                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                                </div>
                                            </div>
                                            <div class="desc">
                                                Withdrawal failed
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="balance"
                                            :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
                                            <span class="amount">
                                                <a-tooltip :title="'-' + item.trxAmountValue">
                                                    -{{ getBit(item.trxAmountValue) || 0 }}
                                                </a-tooltip>
                                            </span>
                                            <div class="trx-amount-currency-info">
                                                <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
                                                <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                            </div>
                                        </div>
                                    </template>
                                </template>

                                <template v-else>
                                    <div class="balance"
                                        :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">

                                        <!--支出—— -2：零钱余额支付 、-3： NFT盲盒余额支付 -->
                                        <span class="amount"
                                            v-if="item.bizType == -2 || item.bizType == -3 || item.bizType == -4 || item.bizType == -5 || item.bizType == -6">
                                            <a-tooltip :title="'-' + item.trxAmountValue">
                                                -{{ getBit(item.trxAmountValue) || 0 }}
                                            </a-tooltip>
                                        </span>
                                        <!-- 收入—— bizType：1、2、3、4 -->
                                        <span class="amount" v-else>
                                            <a-tooltip :title="'+' + item.trxAmountValue">
                                                +{{ getBit(item.trxAmountValue) || 0 }}
                                            </a-tooltip>
                                        </span>

                                        <div class="trx-amount-currency-info">
                                            <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import redDot from "@/components/red-dot.vue";
import messageCenter from "@/uilts/messageCenter";
import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
import { transactionsList } from "@/http/account";
import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
import { getBit } from "@/uilts/help";

let moment = require('moment');
let dataList = ref([]);
let listWrapper = ref(null);
let listContent = ref(null);
let listReqParams = {
    params: {
        pageNum: 1,
        pageSize: 20,
    },
    loadMore: false,
};

let isReadMsg = ref(true);

const getTransactionsList = () => {
    transactionsList({
        params: listReqParams.params,
    }).then((res) => {
        console.log(res);
        if (res.code == 0) {
            let resData = res.data;
            if (resData.length) {
                for (let i = 0; i < resData.length; i++) {
                    resData[i]["bizData"] = JSON.parse(resData[i]["bizData"]);
                }

                if (listReqParams.params.pageNum < 2) {
                    dataList.value = resData;
                } else {
                    let data = dataList.value;
                    data = data.concat(resData);
                    dataList.value = data;
                }
                listReqParams.loadMore = false;
            }
        }
    });
};

onMounted(() => {
    messageCenter.send({
        actionType: MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP,
        data: {}
    });
    setTimeout(() => {
        isReadMsg.value = false;
        readAllMsgByType({
            params: {
                msgType: 2 // 1:任务红包 2:钱包明细
            }
        }).then(() => {
            setMessageCount();
        })
    }, 2000)
    getTransactionsList();
});

const setMessageCount = () => {
    getAllMessageInfo({
        params: {
        }
    }).then(res => {
        if (res.code == 0) {
            let { unReadCountTotal = 0 } = res.data;
            if (unReadCountTotal > 0) {
                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
                messageCenter.send({
                    actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO,
                    data: { text }
                })
            } else {
                messageCenter.send({
                    actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE,
                    data: {}
                })
            }
        }
    });
}

const listScroll = (e) => {
    let wrapperHeight = listWrapper.value.offsetHeight;
    let listContentHeight = listContent.value.offsetHeight;
    let scrollTop = e.target.scrollTop || 0;
    if (
        listReqParams.loadMore === false &&
        wrapperHeight + scrollTop >= listContentHeight - 30
    ) {
        listReqParams.loadMore = true;
        listReqParams.params.pageNum++;
        getTransactionsList();
    }
};
</script>

<style lang="scss" scoped>
.com-wrapper {
    height: 100%;
    position: relative;
    overflow-y: auto;

    .icon-empty {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
    }

    .com-nav-bar {
        padding: 14px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 13px;

        .icon {
            width: 16px;
            margin-right: 6px;
            cursor: pointer;
        }
    }

    .list-wrapper {
        width: 100%;
        // height: calc(100% - 51px);
        // height: 100%;

        .cell {
            display: flex;
            justify-content: space-between;
            min-height: 66px;
            box-sizing: border-box;
            padding-left: 20px;
            position: relative;

            .red-dots {
                position: absolute;
                right: 4px;
                top: 4px;
            }

            .img-wrapper {
                position: relative;
                margin-right: 16px;
                box-sizing: border-box;
                margin-top: 11px;

                .icon-avatar {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    margin-right: 4px;
                }

                .icon-give {
                    position: absolute;
                    right: -2px;
                    top: 19px;
                }
            }

            .info-wrapper {
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                padding: 10px 12px 10px 0;

                .left {
                    .nickname {
                        font-weight: 500;
                        font-size: 14px;
                        margin-bottom: 5px;
                        word-break: break-all;
                        max-width: 140px;
                    }

                    .time {
                        font-size: 12px;
                        color: #B0B0B0;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    .msg {
                        font-weight: 500;
                        font-size: 14px;
                        display: flex;
                        align-items: center;

                        .amount {
                            color: #E86F00;
                            max-width: 110px;
                            min-width: 20px;
                            display: inline-block;
                            word-break: break-all;
                            text-align: right;
                        }

                        .name {
                            margin-left: 3px;
                            max-width: 130px;
                            line-height: 14px;
                            font-size: 13px;
                            word-break: break-all;
                        }

                        img {
                            width: 14px;
                            height: 14px;
                            margin-left: 4px;
                        }

                        .balance {
                            text-align: right;
                            display: flex;
                            align-items: center;

                            .trx-amount-currency-info {
                                display: flex;
                                align-items: center;
                            }
                        }

                        .balance-direction {
                            flex-direction: column;
                            align-items: flex-end;
                        }

                        .desc {
                            text-align: right;
                            font-weight: 400;
                            font-size: 12px;
                            color: #797979;
                            margin-top: 4px;
                        }
                    }

                    .icon {
                        width: 18px;
                        height: 24px;
                    }
                }
            }
        }
    }
}
</style>