de-net/src/view/popup/popup.vue

<template>
    <div class="page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
        <template v-if="isLogin && homeVisibility">
            <v-head :show_more="true" :show_state="'home'" :user_info="userInfo"></v-head>
            <div class="content">
                <div class="balance">
                    <div class="wallet">
                        <img :src="require('@/assets/svg/icon-home-wallet.svg')" />
                        <font>Balance Valuation</font>
                    </div>
                    <div class="bill" @click="showTransactions">
                        <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
                        <img :src="require('@/assets/svg/icon-home-bill.svg')" />
                    </div>
                </div>
                <div class="amount">${{ canWithdrawBalance }}</div>
                <div class="area-btn">
                    <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
                    <div class="top-up-btn" @click="clickTopUp">Deposit</div>
                </div>
            </div>

            <div class="tab-bar">
                <div class="tab-item" 
                    :class="{ active: currentTabIndex == index }" 
                    v-for="(item, index) in tabList"
                    :key="index" 
                    @click="clickTab(item, index)">
                    <img :src="item.icon" class="icon" />
                    {{ item.label }}
                </div>
            </div>
            <div class="list-wrapper" ref="pageGiveListDom">
                <div class="give-list" v-if="currentTabIndex == 0">
                    <template v-if="giveList.length">
                        <div class="cell" 
                            :class="{'cell-center': item.type == 1}"
                            v-for="(item, index) in giveList" 
                            :key="index"
                            @click="clickListItem(item, index)">

                            <red-dot class="red-dots"
                                v-if="item.unReadMsgCount > 0"></red-dot>

                            <div class="img-wrapper">
                                <!-- 收到红包 -->
                                <template v-if="item.type == 1">
                                    <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
                                    <img class="icon-give" :src="
                                        require('@/assets/svg/icon-giveaways.svg')
                                    " />
                                </template>
                                <!-- 发出去红包 -->
                                <template v-else-if="2">
                                    <img 
                                        class="icon-big-give"
                                        :src="
                                        require('@/assets/svg/icon-list-big-give.svg')
                                    " />
                                </template>
                            </div>
                            <div class="info-wrapper"
                                :class="{'info-center': item.type == 1}">
                                <div class="left">
                                    <div class="nickname">
                                        {{
                                                item.type == 1
                                                    ? item.userInfo.nickName
                                                    : "Giveaways"
                                        }}
                                    </div>
                                    <div class="time">
                                        {{
                                                moment(item.timestamp).format(
                                                    "MM-DD HH:mm:ss"
                                                )
                                        }}
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="msg">
                                        <div class="bold">
                                            <!-- 收到的 -->
                                            <template v-if="item.type == 1">
                                                <!-- 进行中-->
                                                <template v-if="item.status == 0">
                                                    in progress
                                                </template>
                                                <!-- 已完成 -->
                                                <template v-else-if="item.status == 1">
                                                    <span class="blance">{{ item.amount }}</span>
                                                    <span class="coin-type">{{ item.currencySymbol || '' }}</span>
                                                    <img :src="item.currencyIconPath" alt="">
                                                </template>
                                                <!-- 已过期 -->
                                                <template v-else-if="item.status == 2">
                                                    Timeout
                                                </template>
                                            </template>
                                            <!-- 发出去的 -->
                                            <template v-else-if="item.type == 2">
                                                <span class="blance">-{{ item.amount }}</span>
                                                <span class="coin-type">{{ item.currencySymbol || '' }}</span>
                                                <img :src="item.currencyIconPath" alt="">
                                            </template>
                                        </div>
                                        <!-- 发出的红包显示 -->
                                        <div class="desc" v-if="item.type == 2">
                                            <!-- 未发送-->
                                            <template v-if="item.postTaskLuckdrop.reSendAvailable">
                                                Unpublished
                                            </template>
                                            <!-- 进行中 -->
                                            <template v-else-if="item.status == 1">
                                                {{item.postTaskLuckdrop.receivedCount}}/{{item.postTaskLuckdrop.totalCount}}
                                            </template>
                                            <!-- 2:已结束; 3:提前终止-->
                                            <template v-else-if="item.status == 2 || item.status == 3">
                                                ({{item.status == 2 ? 'Time expired' : 'Termination'}})
                                                {{
                                                        item.postTaskLuckdrop
                                                            .receivedCount
                                                }}/{{
                                                        item.postTaskLuckdrop
                                                            .totalCount
                                                }}
                                            </template>
                                            <!-- 红包提前终止/退款（进行中）显示-->
                                            <template v-if="item.status == 4">
                                                Terminating
                                            </template>

                                            <!-- 进行中或者未发送成功时显示 
                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
                                            <div  class="desc-bottom-bar">
                                                <!-- 没有终止红包时显示 -->
                                                <div v-if="item.postTaskLuckdrop.terminatedAvailable"
                                                    class="btn"
                                                    @click.stop="terminaHandler(item, index)">
                                                    Termination
                                                </div>
                                                
                                                <!-- 红包未发出显示 -->
                                                <div class="btn send-btn"
                                                    v-if="item.postTaskLuckdrop.reSendAvailable"       
                                                    @click.stop="sendTwitter(item)">
                                                    Send
                                                </div>
                                                <div v-else-if="item.srcContentId"
                                                    class="btn detail-btn"
                                                    @click.stop="clickListItem(item, index)">details</div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 发红包—— 未发出、进行中 隐藏 -->
                                    <img v-if="item.type != 2" 
                                        class="icon" 
                                        :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
                    </template>
                </div>
                <div class="more-list" v-else>
                    <div class="cell" 
                    v-for="(item, index) in moreTabList" 
                    :key="index"
                    @click="moreItemHandle(item)">
                        <img class="icon" :src="item.icon" />
                        <div class="info-wrapper">
                            <div class="left">
                                {{ item.label }}
                            </div>
                            <div class="right">
                                <img class="icon" :src="
                                    require('@/assets/svg/icon-cell-arrow-right.svg')
                                " />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <!-- login -->
        <popup-login v-if="!isLogin" @loginAction="loginAction" />
        <template v-if="isLogin && !homeVisibility">
            <!-- 交易列表 -->
            <popup-transactions v-if="transactionsVisibility" @back="transactionsBack" />
            <!-- 提现页 -->
            <popup-withdraw :amountValue="canWithdrawBalance" :walletWithdrawConfig="walletWithdrawConfig"
                v-if="withdrawVisibility" @back="withdrawBack" />
        </template>
        <modal :visible="modalVisible"   
            title="Early termination of Giveaway?"
            content="This operation will close the red envelope and refund the remaining amount within 2 days"
            cancelText="Termination"
            confirmText="Cancel"
            @cancel="modalCancel"
            @confirm="modalConfirm" />
    </div>
</template>

<script setup>
import { ref, onMounted, inject, onBeforeUnmount } from "vue";

import popupLogin from "@/view/popup/components/login.vue";
import popupTransactions from "@/view/components/popup-transactions";
import popupWithdraw from "@/view/components/popup-withdraw.vue";
import redDot from "@/view/components/red-dot.vue";
import modal from "@/view/popup/components/modal.vue";

import {
    getChromeStorage,
} from "@/uilts/chromeExtension";
import { getBalance, getMineLuckdropRecords } from "@/http/account";
import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
import { terminatedLuckdrop } from "@/http/redPacket";
import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
import Report from "@/log-center/log";
import router from "@/router/popup.js";
import VHead from '@/view/popup/components/head.vue'

let withdraw_info = inject('withdraw_info')
withdraw_info.paypal = {}

var moment = require("moment");

let pageWrapperDom = ref(null);
let pageGiveListDom = ref(null);

let isLogin = ref(false);
let homeVisibility = ref(false);
let transactionsVisibility = ref(false);
let withdrawVisibility = ref(false);
let modalVisible = ref(false);

let terminaTask = {};

let userInfo = ref({});
let canWithdrawBalance = ref(0);
withdraw_info.paypal.amount_value = canWithdrawBalance
withdraw_info.balance = 0

let isRequestWithdrawBalance = ref(false);

let currentTabIndex = ref(0);
let giveList = ref([]);

// 钱包未读数
let unReadCountWallet = ref(0);

let giveReqParams = {
    params: {
        pageNum: 1,
        pageSize: 10,
    },
    loadMore: false,
};


let walletWithdrawConfig = ref({
    withdrawUSDPaypalFee: 0,
    withdrawUSDPreMinAmount: 100,
    withdrawUSDSwitch: "",
    withdrawUSDPaypalFeeDesc: ''
});
withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig


let moreTabList = ref([
    {
        icon: require("@/assets/svg/icon-twitter.svg"),
        label: "Twitter",
        href: 'https://twitter.com/denet2022'
    }
    // , {
    //     icon: require("@/assets/svg/icon-discord.svg"),
    //     label: "Discord",
    //     href: 'https://discord.gg/wZSz9p8ddG'
    // }, {
    //     icon: require("@/assets/svg/icon-telegram.svg"),
    //     label: "Telegram",
    //     href: 'https://t.me/denetpro'
    // }
]);

let tabList = ref([
    {
        icon: require("@/assets/svg/icon-giveaways.svg"),
        label: "Giveaways",
    },
    {
        icon: require("@/assets/svg/icon-more.svg"),
        label: "More",
    },
]);

onMounted(() => {
    checkLoginState(() => {
        if (isLogin.value) {
            getAccountBalance();
            getLuckdropRecordsList();
            chrome.runtime.connect({ name: "popup" });
            Report.reportLog({
                pageSource: Report.pageSource.denetHomePage,
                businessType: Report.businessType.pageView,
            },{
                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
            });
        } else {
            Report.reportLog({
                pageSource: Report.pageSource.denetLogin,
                businessType: Report.businessType.pageView,
            });
        }
    });
    setMessageCount();
    setTimeout(() => {
        setMessageCount();
    }, 1600)
});

onBeforeUnmount(() => {
    readAllMsgByType({
        params: {
            msgType: 1
        }
    }).then(res => {
        setMessageCount();
    })
});

const setMessageCount = () => {
    getAllMessageInfo({params: {
    }}).then(res => {
        if(res.code == 0) {
            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
            unReadCountWallet.value = unReadCountWalletDetail;
            if(unReadCountTotal > 0) {
                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
                setBadgeInfo({data: {text}});
            } else {
                hideBadge();
            }
        }
    });
}

const moreItemHandle = (params) => {
    window.open(params.href);
}


/**
 * 获取账户余额
 */
const getAccountBalance = () => {
    isRequestWithdrawBalance.value = false;
    getBalance({}).then((res) => {
        isRequestWithdrawBalance.value = true;
        if (res.code == 0) {
            if (res.data) {
                canWithdrawBalance.value = res.data.allAssetValuationUSD;
                withdraw_info.balance = res.data.allAssetValuationUSD || 0
            }
        }
    });
};

const getUserInfo = (cb) => {
    getChromeStorage("userInfo", (res) => {
        cb && cb(res);
    });
};

/**
 * 检查登录状态
 */
const checkLoginState = (cb) => {
    getUserInfo((res) => {
        if (res && res.accessToken) {
            userInfo.value = res;
            isLogin.value = true;
            homeVisibility.value = true;
        } else {
            userInfo.value = {};
            isLogin.value = false;
        }
        cb && cb();
    });
};

const pageScroll = (e) => {
    let wrapperHeight = pageWrapperDom.value.offsetHeight;
    let pageGiveListHeight = pageGiveListDom.value.offsetHeight;
    let scrollTop = e.target.scrollTop || 0;
    if (currentTabIndex.value != 0) {
        return;
    }
    if (
        giveReqParams.loadMore === false &&
        wrapperHeight + scrollTop >= pageGiveListHeight
    ) {
        giveReqParams.loadMore = true;
        giveReqParams.params.pageNum++;
        getLuckdropRecordsList();
    }
};

/**
 * 获取红包列表
 */
const getLuckdropRecordsList = () => {
    getMineLuckdropRecords({
        params: giveReqParams.params,
    }).then((res) => {
        if (res.data && res.data.length) {
            if (giveReqParams.params.pageNum < 2) {
                giveList.value = res.data;
            } else {
                let data = giveList.value;
                data = data.concat(res.data);
                giveList.value = data;
            }
            giveReqParams.loadMore = false;
        }
    });
};

const clickTab = (params, index) => {
    currentTabIndex.value = index;
    console.log(params, index);
};

/**
 * 点击列表跳转到推文
 */
const clickListItem = (params) => {
    if (!params.srcContentId) {
        return;
    }
    let twitterUrl = "https://twitter.com/";
    let nickName = "";
    if (params.type == 1) {
        nickName = params.userInfo.nickName;
    } else if (params.type == 2) {
        nickName = userInfo.value.nickName;
    }
    let url = twitterUrl + nickName + "/status/" + params.srcContentId;

    chrome.tabs.create({
        url,
    });
};

/**
 * 交易列表返回
 */
const transactionsBack = () => {
    if (!homeVisibility.value) {
        if (transactionsVisibility.value) {
            transactionsVisibility.value = false;
        }
        homeVisibility.value = true;
    }
};

/**
 * 提现返回
 */
const withdrawBack = () => {
    if (!homeVisibility.value) {
        if (withdrawVisibility.value) {
            withdrawVisibility.value = false;
        }
        homeVisibility.value = true;
        getAccountBalance();
        giveReqParams.params.pageNum = 1;
        getLuckdropRecordsList();
    }
};


const showTransactions = () => {
//     // homeVisibility.value = false;
//     // transactionsVisibility.value = true;
    router.push('/transactions')
};

// const clickWithdraw = () => {
//     if (isRequestWithdrawBalance.value) {
//         homeVisibility.value = false;
//         withdrawVisibility.value = true;
//     }
// };

const loginAction = () => {
    Report.reportLog({
        pageSource: Report.pageSource.denetLogin,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.loginButton
    });
    login();
};

const login = () => {
    callEventPageMethod("POPUP_LOGIN", "", function (response) {
        console.log("res", response);
    });
};

/**
 * sendMessage
 */
const callEventPageMethod = (actionType, data, callback) => {
    chrome.runtime.sendMessage(
        { 
            actionType: actionType, 
            data: data 
        },
        function (response) {
            if (typeof callback === "function") callback(response);
        }
    );
};

/**
 * 点击发送，去发推
 */
const sendTwitter = (params) => {
    console.log(params)
    callEventPageMethod(
        "POPUP_PUBLISH_TWITTER_RED_PACK",
        { 
            srcContent: params.postTaskLuckdrop.srcContent, 
            postId: params.postTaskLuckdrop.postId 
        },
        function (response) {
            console.log("res", response);
        }
    );
};
// 点击提现
const clickWithdraw = () => {
    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.withdrawButton
    });
    router.push('/withdraw/home');
}
const clickTopUp = () => {
    Report.reportLog({
        pageSource: Report.pageSource.denetHomePage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.topupButton
    });
    router.push('/top-up/home');
}

const terminaHandler = (params, index) => {
    terminaTask = params;
    terminaTask.index = index;
    modalVisible.value = true;
}

const modalCancel = () => {
    //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭 
    modalVisible.value = false;
    let index = terminaTask.index;
    terminatedLuckdrop({
        params: {
            luckdropId: terminaTask.id
        }
    }).then(res => {
        if(res.code == 0) {
            giveList.value[index]['status'] = res.data.status;
            giveList.value[index]['postTaskLuckdrop']['reSendAvailable'] = false;
            giveList.value[index]['postTaskLuckdrop']['terminatedAvailable'] = false;
        }
    });
    terminaTask = {};
}

const modalConfirm = () => {
    modalVisible.value = false;
    terminaTask = {};
}

</script>

<style lang="scss">
html,
body {
    padding: 0 !important;
    margin: 0 !important;
}

.page-wrapper {
    width: 375px;
    height: 600px;
    box-sizing: border-box;
    overflow-y: scroll;

    .nav-bar {
        padding: 14px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item {
            display: flex;
            align-items: center;
            font-size: 13px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }

        .left {
            font-weight: 500;
        }

        .right {
            color: #b6b6b6;
        }
    }

    .content {
        padding: 20px;
        background-color: #F0F8FE;

        .icon-money {
            width: 70px;
            height: 70px;
        }

        .balance {
            display: flex;
            justify-content: space-between;
            .wallet {
                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 6px;
                    vertical-align: middle;
                }
                font {
                    color: #000;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
            .bill {
                position: relative;
                img {
                    width: 24px;
                    height: 24px;
                    cursor: pointer;
                }
                .red-dot {
                    position: absolute;
                    right: 0px;
                    top: -1px;
                }
            }
        }

        .amount {
            margin-top: 20px;
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 36px;
            line-height: 43px;
        }

        .area-btn {
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            font-size: 15px;

            .top-up-btn {
                cursor: pointer;
                border: 1px solid #1D9BF0;
                color: #fff;
                background: #1D9BF0;
                border-radius: 100px;
                width: 165px;
                height: 38px;
                text-align: center;
                margin-left: 8px;
                line-height: 36px;
            }

            .withdraw-btn {
                background: rgba(56, 154, 255, 0.01);
                border: 1px solid #1D9BF0;
                box-sizing: border-box;
                width: 165px;
                font-size: 15px;
                height: 38px;
                text-align: center;
                line-height: 36px;
                border-radius: 100px;
                color: #1D9BF0;
                display: inline-block;
                cursor: pointer;
            }
        }

        .msg {
            margin-top: 10px;
            font-size: 13px;
            color: #b6b6b6;
        }
    }

    .tab-bar {
        display: flex;
        align-items: center;
        position: sticky;
        position: -webkit-sticky;
        top: 0px;
        z-index: 1000;
        background-color: #fff;

        .tab-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 17px 0;
            box-sizing: border-box;
            border-bottom: 1px solid #ECECEC;
            cursor: pointer;

            .icon {
                width: 16px;
                height: 16px;
                margin-right: 5px;
                font-weight: 500;
                font-size: 16px;
            }
        }

        .active {
            border-bottom: 2px solid #000;
        }
    }

    .list-wrapper {
        min-height: 202px;

        .give-list {
            min-height: 202px;
            position: relative;

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

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

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

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

                    .icon-give {
                        position: absolute;
                        right: -4px;
                        bottom: 2px;
                    }

                    .icon-big-give {
                        margin-top: 14px;
                    }
                }

                .info-wrapper {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #d1d1d1;
                    box-sizing: border-box;
                    padding: 10px 14px 10px 0;

                    .left {
                        .nickname {
                            font-weight: 500;
                            font-size: 14px;
                            margin-bottom: 5px;
                        }

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

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

                        .msg {
                            .bold {
                                font-weight: 500;
                                font-size: 14px;
                                text-align: right;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;

                                .blance {
                                    margin-left: 3px;
                                    display: inline-block;
                                    max-width: 68px;
                                    word-break: break-all;
                                    line-height: 18px;
                                    color: #E29A2E;
                                }

                                .coin-type {
                                    margin-left: 3px;
                                }

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

                            .desc {
                                font-size: 12px;
                                color: #b6b6b6;
                                margin-top: 5px;
                                text-align: right;

                                .desc-bottom-bar {
                                    display: flex;
                                    align-items: center;
                                    justify-content: end;
                                    margin-top: 10px;

                                    .btn {
                                        min-width: 80px;
                                        height: 29px;
                                        padding: 0 8px;
                                        box-sizing: border-box;
                                        font-weight: 400;
                                        font-size: 14px;
                                        cursor: pointer;
                                        text-align: center;
                                        border-radius: 100px;
                                        color: #5E5E5E;
                                        border: 1px solid #DFDFDF;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }

                                    .send-btn {
                                        border: 1px solid #1D9BF0;
                                        color: #1D9BF0;
                                    }

                                    .detail-btn, .send-btn {
                                        margin-left: 8px;
                                    }
                                }
                            }
                        }

                        .icon {
                            width: 18px;
                            height: 24px;
                            margin-left: 4px;
                            margin-right: -5px;
                        }
                    }
                }
                .info-center {
                    align-items: center;
                }
            }
            .cell-center {
                align-items: center;
            }

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

        .more-list {
            .cell {
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 66px;
                box-sizing: border-box;
                padding-left: 20px;

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

                .info-wrapper {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #ECECEC;
                    box-sizing: border-box;
                    padding-right: 16px;

                    .left {
                        font-weight: 500;
                        font-size: 16px;
                    }

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

                        .icon {
                            width: 18px;
                            height: 24px;
                        }
                    }
                }
            }
        }
    }
}

.page-wrapper::-webkit-scrollbar {
    display: none;
}
</style>