de-net/src/view/popup.vue

<template>
    <div class="page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
        <template v-if="isLogin && homeVisibility">
            <div class="nav-bar">
                <div class="item left">
                    <img :src="require('../assets/svg/icon-denet-logo.svg')" />
                    DeNet
                </div>
                <div class="item right" @click="showTransactions">
                    <img :src="require('../assets/svg/icon-option-list.svg')" />
                    Transactions
                </div>
            </div>
            <div class="content">
                <img
                    :src="require('../assets/svg/icon-money.svg')"
                    class="icon-money"
                />
                <div class="amount">${{ canWithdrawBalance / 100 }}</div>
                <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
                <div class="msg">({{walletWithdrawConfig.withdrawUSDPaypalFeeDesc}})</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"
                            v-for="(item, index) in giveList"
                            :key="index"
                            @click="clickListItem(item, index)"
                        >
                            <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
                                        :src="
                                            require('../assets/svg/icon-list-big-give.svg')
                                        "
                                    />
                                </template>
                            </div>
                            <div class="info-wrapper">
                                <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"
                                                >
                                                    ${{ item.amount / 100 }}
                                                </template>
                                                <!-- 已过期 -->
                                                <template
                                                    v-else-if="item.status == 2"
                                                >
                                                    Timeout
                                                </template>
                                            </template>
                                            <!-- 发出去的 -->
                                            <template
                                                v-else-if="item.type == 2"
                                            >
                                                -${{ item.amount / 100 }}
                                            </template>
                                        </div>
                                        <!-- 发出的红包显示 -->
                                        <div class="desc" v-if="item.type == 2">
                                            <!-- 未发送-->
                                            <template v-if="item.status == 0">
                                                Unpublished
                                            </template>
                                            <!-- 进行中 -->
                                            <template
                                                v-else-if="item.status == 1"
                                            >
                                                {{
                                                    item.postTaskLuckdrop
                                                        .receivedCount
                                                }}/{{
                                                    item.postTaskLuckdrop
                                                        .totalCount
                                                }}
                                            </template>
                                            <!-- 已结束 -->
                                            <template
                                                v-else-if="item.status == 2"
                                            >
                                                (Time expired)
                                                {{
                                                    item.postTaskLuckdrop
                                                        .receivedCount
                                                }}/{{
                                                    item.postTaskLuckdrop
                                                        .totalCount
                                                }}
                                            </template>
                                            <!-- 红包未发出显示 -->
                                            <div
                                                v-if="!item.postTaskLuckdrop.srcPublishStatus"
                                                class="send-btn"
                                                @click.stop="sendTwitter(item)"
                                            >
                                                Send
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 发红包，红包未发出隐藏-->
                                    <img
                                        v-if="
                                            !(
                                                item.type == 2 &&
                                                !item.postTaskLuckdrop.srcPublishStatus
                                            )
                                        "
                                        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"
                    >
                        <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 -->
        <option-login v-if="!isLogin" @loginAction="loginAction" />
        <template v-if="isLogin && !homeVisibility">
            <!-- 交易列表 -->
            <option-transactions
                v-if="transactionsVisibility"
                @back="transactionsBack"
            />
            <!-- 提现页 -->
            <option-withdraw
                :amountValue="canWithdrawBalance"
                :walletWithdrawConfig="walletWithdrawConfig"
                v-if="withdrawVisibility"
                @back="withdrawBack"
            />
        </template>
    </div>
</template>

<script setup>
/* eslint-disable */
import { ref, reactive, onMounted, watch } from "vue";
import optionTransactions from "./components/options-transactions";
import optionLogin from "./components/option-login.vue";
import optionWithdraw from "./components/option-withdraw.vue";
import {
    getChromeStorage,
} from "../uilts/chromeExtension";
import {
    setStorage,
    getStorage,
} from "../uilts/help";
import { getBalance, getMineLuckdropRecords, getWithdrawConfig } from "../http/account";
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 userInfo = ref({});
let canWithdrawBalance = ref(0);

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

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


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

let moreTabList = ref([
    {
        icon: require("../assets/svg/icon-twitter.svg"),
        label: "Twitter contact",
    },
    {
        icon: require("../assets/svg/icon-about.svg"),
        label: "About",
    },
]);

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();
            queryWithdrawConfig();
        }
    });
});

/**
 * 获取提现配置
 */
const queryWithdrawConfig = () => {
    getWithdrawConfig({
        params: {},
    }).then((res) => {
        console.log(res);
        if (res.code == 0) {
            walletWithdrawConfig.value = res.data;
        }
    });
};

/**
 * 获取账户余额
 */
const getAccountBalance = () => {
    getBalance({
        params: {
            currencyCode: "USD",
        },
    }).then((res) => {
        if (res.code == 0) {
            if (res.data) {
                canWithdrawBalance.value = res.data.canWithdrawBalance;
            }
        }
    });
};

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

/**
 * 检查登录状态
 */
const checkLoginState = (cb) => {
    getUserInfo((res) => {
        if (res && res.accessToken) {
            userInfo.value = res;
            setStorage("de-userInfo", 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, index) => {
    if(!params.srcContentId) {
        return;
    }
    let url = "";
    let twitterUrl = "https://twitter.com/";
    let nickName = "";
    if (params.type == 1) {
        nickName = params.userInfo.nickName;
    } else if (params.type == 2) {
        nickName = userInfo.value.nickName;
    }
    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();
        getLuckdropRecordsList();
    }
};

const showTransactions = () => {
    homeVisibility.value = false;
    transactionsVisibility.value = true;
};

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

const loginAction = () => {
    login();
};

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

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

/**
 * 点击发送，去发推
 */
const sendTwitter = (params) => {
    callEventPageMethod(
        "POPUP_PUBLISH_TWITTER_RED_PACK",
        { srcContent: params.postTaskLuckdrop.srcContent },
        function (response) {
            console.log("res", response);
        }
    );
};
</script>

<style lang="scss" scoped>
.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 {
        margin-top: 30px;
        text-align: center;

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

        .amount {
            margin-top: 16px;
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 42px;
        }

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

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

    .tab-bar {
        display: flex;
        align-items: center;
        margin-top: 25px;
        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 #d1d1d1;
            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;
                align-items: center;
                height: 66px;
                box-sizing: border-box;
                padding-left: 20px;
                cursor: pointer;

                .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;
                    }
                }
                .info-wrapper {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #d1d1d1;
                    box-sizing: border-box;
                    padding-right: 16px;
                    .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;
                            }
                            .desc {
                                font-size: 12px;
                                color: #b6b6b6;
                                display: flex;
                                align-items: center;
                                justify-content: end;
                                margin-top: 5px;

                                .send-btn {
                                    height: 24px;
                                    width: 54px;
                                    line-height: 24px;
                                    text-align: center;
                                    border-radius: 100px;
                                    border: 1px solid #389aff;
                                    color: #389aff;
                                    font-weight: 500;
                                    font-size: 14px;
                                    cursor: pointer;
                                    margin-left: 8px;
                                }
                            }
                        }
                        .icon {
                            width: 18px;
                            height: 24px;
                            margin-left: 4px;
                        }
                    }
                }
            }
            .icon-empty {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .more-list {
            .cell {
                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 #d1d1d1;
                    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>