【add】个人中心提现、列表接口联调、交互

src/assets/svg/icon-empty-list.svg

@@ -0,0 +1,3 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.1719 5.93555H10.834L3.82617 31.6113L3.75 54.0645H56.25V32.1856L49.1719 5.93555ZM14.1738 10.3125H45.832L51.7969 32.1856H39.7676L35.3906 38.7481H24.6094L20.2324 32.1856H8.20898L14.1738 10.3125Z" fill="#F2F2F2"/>
+</svg>

src/assets/svg/icon-withdraw-status.svg

@@ -0,0 +1,3 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 0.25C19.8398 0.25 0.25 19.8398 0.25 44C0.25 68.1602 19.8398 87.75 44 87.75C68.1602 87.75 87.75 68.1602 87.75 44C87.75 19.8398 68.1602 0.25 44 0.25ZM61.2363 57.4473L58.4434 61.2559C58.1895 61.6074 57.7012 61.6758 57.3496 61.4219L41.1973 49.6445C40.9922 49.498 40.875 49.2637 40.875 49.0098V22.125C40.875 21.6953 41.2266 21.3438 41.6562 21.3438H46.3535C46.7832 21.3438 47.1348 21.6953 47.1348 22.125V46.2949L61.0605 56.3633C61.4121 56.6074 61.4902 57.0957 61.2363 57.4473Z" fill="#389AFF"/>
+</svg>

src/entry/background.js

@@ -1,19 +1,54 @@
-console.log('hello world background todo something~')
+console.log("hello world background todo something~");
 
-import { backTwitterPinLoginToken ,backTwitterPinLoginCode} from '../logic/twitter.js'
+import {
+    backTwitterPinLoginToken,
+    backTwitterPinLoginCode,
+} from "../logic/twitter.js";
 
+import { setChromeStorage } from "../uilts/chromeExtension";
+
+chrome.runtime.onMessage.addListener(callback);
+
+function callback(req, sender, sendResponse) {
+    if (req) {
+        switch (req.method) {
+            case "POPUP_LOGIN":
+                popupLogin(sendResponse);
+                break;
+            case "POPUP_PUBLISH_TWITTER_RED_PACK":
+                setChromeStorage({
+                    popupShowPublishDialog: JSON.stringify({
+                        show: true,
+                        srcContent: req.data.srcContent,
+                    }),
+                });
+                chrome.tabs.create({
+                    url: "https://twitter.com",
+                });
+                break;
+        }
+    }
+    return true; // remove this line to make the call sync!
+}
+
+//
+function popupLogin() {
+    backTwitterPinLoginToken();
+}
 
 // 消息通讯
 chrome.runtime.onConnect.addListener(function (port) {
     port.onMessage.addListener(function (res) {
         switch (res.state) {
-            case 'CONTENT_SEND_CODE':
-                port.postMessage({ state: 'BACK_TWITTER_LOGIN_SUCCESS' })
-                backTwitterPinLoginCode(res.code)
-                break
-            case 'CONTENT_TWITTER_LOGIN':
-                backTwitterPinLoginToken()
-                break
+            case "CONTENT_SEND_CODE":
+                port.postMessage({
+                    state: "BACK_TWITTER_LOGIN_SUCCESS",
+                });
+                backTwitterPinLoginCode(res.code);
+                break;
+            case "CONTENT_TWITTER_LOGIN":
+                backTwitterPinLoginToken();
+                break;
         }
-    })
-})
+    });
+});

src/entry/content.js

@@ -1,36 +1,57 @@
-var port = chrome.runtime.connect({ name: "hello" });
+var port = chrome.runtime.connect({
+    name: "hello",
+});
 
 import {
-	contentTwitterPinLogin, renderDom, showGiveDialogHandler, showIframeHandler, hideIframeHandler,
-	showTwitterPublishDialogHandler, setIframeRedPacket
-} from '../logic/twitter.js'
+    contentTwitterPinLogin,
+    renderDom,
+    showGiveDialogHandler,
+    showIframeHandler,
+    hideIframeHandler,
+    showTwitterPublishDialogHandler,
+    setIframeRedPacket,
+} from "../logic/twitter.js";
+
+import { getChromeStorage } from "../uilts/chromeExtension";
 
 port.onMessage.addListener(function (res) {
-	switch (res.state) {
-		case 'BACK_TWITTER_LOGIN_SUCCESS':
-			showGiveDialogHandler();
-			break;
-	}
-})
+    switch (res.state) {
+        case "BACK_TWITTER_LOGIN_SUCCESS":
+            showGiveDialogHandler();
+            break;
+    }
+});
 
 window.onload = () => {
-	contentTwitterPinLogin(port)
-	renderDom(port);
-	setIframeRedPacket()
-}
+    contentTwitterPinLogin(port);
+    renderDom(port);
+    setIframeRedPacket();
+
+    getChromeStorage("popupShowPublishDialog", (res) => {
+        console.log("popupShowPublishDialog", res);
+        if (res && res.show) {
+            setTimeout(() => {
+                showTwitterPublishDialogHandler({
+                    srcContent: res.srcContent,
+                });
+            }, 1500);
+            chrome.storage.local.remove("popupShowPublishDialog");
+        }
+    });
+};
 
 window.onmessage = (res) => {
-	if (res.data && res.data.actionType) {
-		switch (res.data.actionType) {
-			case "IFRAME_SHOW_IFREME":
-				showIframeHandler();
-				break;
-			case "IFRAME_HIDE_IFREME":
-				hideIframeHandler();
-				break;
-			case "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG":
-				showTwitterPublishDialogHandler(res.data.publishRes)
-				break;
-		}
-	}
-}
+    if (res.data && res.data.actionType) {
+        switch (res.data.actionType) {
+            case "IFRAME_SHOW_IFREME":
+                showIframeHandler();
+                break;
+            case "IFRAME_HIDE_IFREME":
+                hideIframeHandler();
+                break;
+            case "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG":
+                showTwitterPublishDialogHandler(res.data.publishRes);
+                break;
+        }
+    }
+};

src/http/account.js

@@ -0,0 +1,45 @@
+import {
+  service
+} from "./request";
+
+export function getBalance(params) {
+  return service({
+    url: `/wallet/account/getBalance`,
+    method: 'post',
+    data: params
+  })
+}
+
+
+export function transactionsList(params) {
+  return service({
+    url: `/wallet/account/listDetail`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function getWithdrawConfig(params) {
+  return service({
+    url: `/wallet/withdraw/getConfig`,
+    method: 'post',
+    data: params
+  })
+}
+
+
+export function withdrawRequest(params) {
+  return service({
+    url: `/wallet/withdraw/request`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function getMineLuckdropRecords(params) {
+  return service({
+    url: `/post/luckdrop/getMineLuckdropRecords`,
+    method: 'post',
+    data: params
+  })
+}

src/view/components/option-withdraw.vue

@@ -8,74 +8,217 @@
             />
             Withdraw
         </div>
-        <div class="content">
-            <div class="logo-wrapper">
-                <div class="title">Withdraw to</div>
-                <img
-                    class="icon"
-                    :src="
-                        require('../../assets/svg/icon-withdraw-paypal-logo.svg')
-                    "
-                />
-            </div>
+        <template v-if="!isSubmit">
+            <div class="content">
+                <div class="logo-wrapper">
+                    <div class="title">Withdraw to</div>
+                    <img
+                        class="icon"
+                        :src="
+                            require('../../assets/svg/icon-withdraw-paypal-logo.svg')
+                        "
+                    />
+                </div>
+
+                <div class="form-wrapper">
+                    <div class="form-item">
+                        <div class="label">PayPal account</div>
+                        <div class="input-wrapper">
+                            <el-input
+                                type="text"
+                                v-model="
+                                    requestWithdrawParams.withdrawReceiveAccount
+                                "
+                                placeholder="Enter PayPal account"
+                                :input-style="{
+                                    'box-shadow': 'none',
+                                    height: '48px',
+                                    'border-radius': '8px',
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div class="form-item">
+                        <div class="label">Withdrawal amount</div>
+                        <div class="input-wrapper amount-wrapper">
+                            <el-input
+                                type="text"
+                                @input="onAmountInput"
+                                v-model="requestWithdrawParams.amountValue"
+                                placeholder="$0"
+                                :input-style="{
+                                    'box-shadow': 'none',
+                                    width: '220px',
+                                    height: '46px',
+                                    'border-radius': '8px',
+                                }"
+                            />
+                            <div
+                                @click="withdrawalAll"
+                                class="withdrawal-all-btn"
+                            >
+                                Withdrawal All
+                            </div>
+                        </div>
+                    </div>
 
-            <div class="form-wrapper">
-                <div class="form-item">
-                    <div class="label">PayPal account</div>
-                    <div class="input-wrapper">
-                        <el-input
-                            type="text"
-                            v-model="account"
-                            placeholder="Enter PayPal account"
-                            :input-style="{
-                                'box-shadow': 'none',
-                                height: '48px',
-                                'border-radius': '8px',
-                            }"
-                        />
+                    <div class="error-msg" v-if="showWithdrawError">
+                        *提现金额不足以支付Paypal手续费
                     </div>
                 </div>
-                <div class="form-item">
-                    <div class="label">Withdrawal amount</div>
-                    <div class="input-wrapper amount-wrapper">
-                        <el-input
-                            type="text"
-                            v-model="amount"
-                            placeholder="$0"
-                            :input-style="{
-                                'box-shadow': 'none',
-                                width: '220px',
-                                height: '46px',
-                                'border-radius': '8px',
-                            }"
-                        />
-                        <div class="withdrawal-all-btn">Withdrawal All</div>
+
+                <div class="bottom-msg">
+                    <div>
+                        final amount
+                        <span
+                            >${{
+                                (requestWithdrawParams.amountValue * 100 -
+                                    walletWithdrawConfig.withdrawUSDPaypalFee) /
+                                    100 >
+                                0
+                                    ? (requestWithdrawParams.amountValue * 100 -
+                                          walletWithdrawConfig.withdrawUSDPaypalFee) /
+                                      100
+                                    : 0
+                            }}</span
+                        >
                     </div>
+                    <div>(Paypal charges fee: 4.4% + $0.3)</div>
                 </div>
             </div>
-
-            <div class="bottom-msg">
+            <div @click="withdraw" class="confirm-btn">Confirm</div>
+        </template>
+        <template v-else>
+            <div class="withdraw-status">
+                <img
+                    :src="require('../../assets/svg/icon-withdraw-status.svg')"
+                    alt=""
+                />
                 <div>
-                    final amount
-                    <span>$0</span>
+                    <div class="title">Submitted successfully</div>
+                    <div class="desc">
+                        Please wait for a while,<br />
+                        then check the balance with paypal
+                    </div>
                 </div>
-                <div>(Paypal charges fee: 4.4% + $0.3)</div>
             </div>
-        </div>
-        <div class="confirm-btn">Confirm</div>
+            <div class="confirm-btn">Done</div>
+        </template>
     </div>
 </template>
 
 <script setup>
-import { defineEmits, ref } from "vue";
+/* eslint-disable */
+import { defineProps, defineEmits, ref, onMounted, watch } from "vue";
+
+import { getWithdrawConfig, withdrawRequest } from "../../http/account";
+
+const props = defineProps({
+    amountValue: {
+        type: [Number, String],
+        default: false,
+    },
+});
+
+let walletWithdrawConfig = ref({
+    withdrawUSDPaypalFee: 25,
+    withdrawUSDPreMinAmount: 100,
+    withdrawUSDSwitch: "",
+});
+
+let requestWithdrawParams = ref({
+    amountValue: "",
+    currencyCode: "USD",
+    withdrawChannel: 1, // 1: paypal
+    withdrawReceiveAccount: "",
+});
+
+let canWithdrawBalance = ref(0);
+
+let showWithdrawError = ref(false);
+let isSubmit = ref(false);
+
+onMounted(() => {
+    queryWithdrawConfig();
+});
 
-let amount = ref('');
-let account = ref('');
+watch(
+    () => props.amountValue,
+    (newVal) => {
+        canWithdrawBalance.value = newVal;
+    }
+);
+
+const queryWithdrawConfig = () => {
+    getWithdrawConfig({
+        params: {},
+    }).then((res) => {
+        console.log(res);
+        if (res.code == 0) {
+            walletWithdrawConfig.value = res.data;
+        }
+    });
+};
+
+const withdrawalAll = () => {
+    if (canWithdrawBalance.value && canWithdrawBalance.value > 100) {
+        requestWithdrawParams.value.amountValue =
+            canWithdrawBalance.value / 100;
+    }
+};
 
+const withdraw = () => {
+    console.log("requestWithdrawParams.value", requestWithdrawParams.value);
+    let params = {
+        ...requestWithdrawParams.value,
+    };
+    params.amountValue = params.amountValue * 100;
+    withdrawRequest({
+        params,
+    }).then((res) => {
+        if (res.code == 0) {
+            canWithdrawBalance.value =
+                canWithdrawBalance.value - params.amountValue;
+            requestWithdrawParams.value = {
+                amountValue: "",
+                currencyCode: "USD",
+                withdrawChannel: 1, // 1: paypal
+                withdrawReceiveAccount: "",
+            };
+            isSubmit.value = true;
+        }
+    });
+};
 
 const emits = defineEmits("back");
 const back = () => {
-    emits("back", {});
+    if (isSubmit.value) {
+        isSubmit.value = false;
+    } else {
+        emits("back", {});
+    }
+};
+
+const onAmountInput = (value) => {
+    value = value
+        .replace(/[^\d.]/g, "")
+        .replace(/\.{2,}/g, ".")
+        .replace(".", "$#$")
+        .replace(/\./g, "")
+        .replace("$#$", ".")
+        .replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3")
+        .replace(/^\./g, "");
+    requestWithdrawParams.value.amountValue = value;
+    let amount = value * 100;
+    if (
+        amount > 0 &&
+        amount < walletWithdrawConfig.value.withdrawUSDPaypalFee
+    ) {
+        showWithdrawError.value = true;
+    } else {
+        showWithdrawError.value = false;
+    }
+    return value;
 };
 </script>
 
@@ -137,13 +280,18 @@ const back = () => {
                     }
                 }
             }
+            .error-msg {
+                font-size: 13px;
+                color: #ff0000;
+                margin-top: -15px;
+            }
         }
 
         .bottom-msg {
             font-size: 13px;
             color: #9d9d9d;
             text-align: right;
-            margin-top: 90px;
+            margin-top: 60px;
             span {
                 font-weight: 500;
                 font-size: 15px;
@@ -152,6 +300,23 @@ const back = () => {
         }
     }
 
+    .withdraw-status {
+        text-align: center;
+        img {
+            margin-top: 40px;
+            margin-bottom: 34px;
+        }
+        .title {
+            font-weight: 500;
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+        .desc {
+            font-size: 15px;
+            color: rgba($color: #000000, $alpha: 0.5);
+        }
+    }
+
     .confirm-btn {
         width: 335px;
         height: 60px;

src/view/components/options-transactions.vue

@@ -1,35 +1,103 @@
 <template>
     <div class="com-wrapper">
         <div class="nav-bar">
-            <img :src="require('../../assets/svg/icon-bar-arrow-left.svg')" class="icon" 
-            @click="back" />
+            <img
+                :src="require('../../assets/svg/icon-bar-arrow-left.svg')"
+                class="icon"
+                @click="back"
+            />
             Transactions
         </div>
-        <div class="list-wrapper">
-            <div class="content">
+        <div class="list-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="content" ref="listContent">
                 <div
                     class="cell"
-                    v-for="(item, index) in giveList"
-                    :key="index">
+                    v-for="(item, index) in dataList"
+                    :key="index"
+                >
                     <div class="img-wrapper">
-                        <img
-                            class="icon-avatar"
-                            src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
-                        />
-                        <img
-                            class="icon-give"
-                            :src="
-                                require('../../assets/svg/icon-giveaways.svg')
-                            "
-                        />
+                        <!-- 收入-任务红包领取 -->
+                        <template v-if="item.bizType == 1">
+                            <img
+                                class="icon-avatar"
+                                :src="item.bizData.avatarUrl"
+                            />
+                            <img
+                                class="icon-give"
+                                :src="
+                                    require('../../assets/svg/icon-giveaways.svg')
+                                "
+                            />
+                        </template>
+                        <!-- 收入-任务红包结余退款， -->
+                        <template v-else-if="item.bizType == 2">
+                            <img
+                                style="margin-left:-4px"
+                                :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-withdraw-paypal-list.svg')
+                                "
+                            />
+                        </template>
+                        <!-- 支出-paypal提现 -->
+                        <template v-else-if="item.bizType == -1">
+                            <img
+                                style="margin-left:-4px"
+                                :src="
+                                    require('../../assets/svg/icon-withdraw-paypal-list.svg')
+                                "
+                            />
+                        </template>
                     </div>
                     <div class="info-wrapper">
                         <div class="left">
-                            <div class="nickname">Benedict22</div>
-                            <div class="time">03-12 13:36</div>
+                            <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">
+                                    Giveaways
+                                </template>
+                                <template v-else-if="item.bizType == -1">
+                                    Withdrawal to PayPal
+                                </template>
+                            </div>
+                            <div class="time">{{moment(item.createTimestamp).format('MM-DD hh:mm:ss')}}</div>
                         </div>
                         <div class="right">
-                            <div class="msg">$0.51</div>
+                            <div class="msg">
+                                <!-- 提现失败 -->
+                                <template v-if="item.bizType == 3">
+                                    <div class="balance">
+                                        -${{item.balance/100}} (returned)     
+                                    </div>
+                                    <div class="desc">
+                                        Withdrawal failed
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <template v-if="item.bizType == -1">-</template>
+                                    {{item.balance/100}}
+                                </template>
+                                
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -41,17 +109,70 @@
 <script setup>
 /* eslint-disable */
 import { onMounted, ref, defineProps, defineEmits } from "vue";
-let giveList = ref([]);
+
+import { transactionsList } from "../../http/account";
+var moment = require('moment');
+
+let dataList = ref([]);
+let listWrapper = ref(null);
+let listContent = ref(null);
+
+let listReqParams = {
+    params: {
+        pageNum: 1,
+        pageSize: 10,
+    },
+    loadMore: false,
+};
+
+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(() => {
-    giveList.value.length = 100;
+    getTransactionsList();
 });
 
-const emits = defineEmits(['showHome'])
+const emits = defineEmits(["showHome"]);
 
 const back = () => {
-    emits('showHome', {})
-}
+    emits("showHome", {});
+};
+
+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
+    ) {
+        listReqParams.loadMore = true;
+        listReqParams.params.pageNum++;
+        getTransactionsList();
+    }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -74,6 +195,13 @@ const back = () => {
         width: 100%;
         height: calc(100% - 51px);
         overflow-y: scroll;
+        position: relative;
+        .icon-empty {
+            position: absolute;
+            left: 50%;
+            top: 20%;
+            transform: translateX(-50%);
+        }
         .cell {
             display: flex;
             justify-content: space-between;
@@ -124,6 +252,15 @@ const back = () => {
                     .msg {
                         font-weight: 500;
                         font-size: 14px;
+                        .balance {
+                            font-weight: 500;
+                            font-size: 12px;
+                            margin-bottom: 4px;
+                        }
+                        .desc {
+                            font-weight: 500;
+                            font-size: 12px;
+                        }
                     }
                     .icon {
                         width: 18px;

src/view/popup.vue

@@ -16,9 +16,9 @@
                     :src="require('../assets/svg/icon-money.svg')"
                     class="icon-money"
                 />
-                <div class="amount">$3.75</div>
+                <div class="amount">${{ canWithdrawBalance / 100 }}</div>
                 <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
-                <div class="msg">(Paypal charges $0.25 fee)</div>
+                <div class="msg">(Paypal charges fee: 4.4% + $0.3)</div>
             </div>
             <div class="tab-bar">
                 <div
@@ -34,39 +34,148 @@
             </div>
             <div class="list-wrapper" ref="pageGiveList">
                 <div class="give-list" v-if="currentTabIndex == 0">
-                    <div
-                        class="cell"
-                        v-for="(item, index) in giveList"
-                        :key="index"
-                    >
-                        <div class="img-wrapper">
-                            <img
-                                class="icon-avatar"
-                                src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
-                            />
-                            <img
-                                class="icon-give"
-                                :src="
-                                    require('../assets/svg/icon-giveaways.svg')
-                                "
-                            />
-                        </div>
-                        <div class="info-wrapper">
-                            <div class="left">
-                                <div class="nickname">Benedict22</div>
-                                <div class="time">03-12 13:36</div>
+                    <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="right">
-                                <div class="msg">$0.51</div>
-                                <img
-                                    class="icon"
-                                    :src="
-                                        require('../assets/svg/icon-cell-arrow-right.svg')
-                                    "
-                                />
+                            <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.status == 0"
+                                                class="send-btn"
+                                                @click.stop="sendTwitter(item)"
+                                            >
+                                                Send
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- 发红包，红包未发出隐藏-->
+                                    <img
+                                        v-if="
+                                            !(
+                                                item.type == 2 &&
+                                                item.status == 0
+                                            )
+                                        "
+                                        class="icon"
+                                        :src="
+                                            require('../assets/svg/icon-cell-arrow-right.svg')
+                                        "
+                                    />
+                                </div>
                             </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
@@ -74,9 +183,7 @@
                         v-for="(item, index) in moreTabList"
                         :key="index"
                     >
-                        <div class="img-wrapper">
-                            <img class="icon" :src="item.icon" />
-                        </div>
+                        <img class="icon" :src="item.icon" />
                         <div class="info-wrapper">
                             <div class="left">
                                 {{ item.label }}
@@ -94,24 +201,35 @@
                 </div>
             </div>
         </template>
-        <option-login
-            v-if="!isLogin"
-            @loginSuccess="loginSuccess" />
+        <!-- login -->
+        <option-login v-if="!isLogin" @loginSuccess="loginSuccess" />
+        <!-- 交易列表 -->
         <option-transactions
             v-if="isLogin && !homeVisibility && transactionsVisibility"
-            @showHome="onShowHome" />
+            @showHome="onShowHome"
+        />
+        <!-- 提现页 -->
         <option-withdraw
-            v-if="isLogin && !homeVisibility && optionWithdraw"
-            @back="withdrawBack" />
+            :amountValue="canWithdrawBalance"
+            v-if="isLogin && !homeVisibility && withdrawVisibility"
+            @back="withdrawBack"
+        />
     </div>
 </template>
 
 <script setup>
 /* eslint-disable */
-import { ref, reactive, onMounted } from "vue";
+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,
+    setStorage,
+    getStorage,
+} from "../uilts/chromeExtension";
+import { getBalance, getMineLuckdropRecords } from "../http/account";
+var moment = require("moment");
 
 let pageWrapper = ref(null);
 let pageGiveList = ref(null);
@@ -121,9 +239,20 @@ 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 moreTabList = ref([
     {
         icon: require("../assets/svg/icon-twitter.svg"),
@@ -146,9 +275,117 @@ let tabList = ref([
     },
 ]);
 
+const login = () => {
+    callEventPageMethod("POPUP_LOGIN", "", function (response) {
+        console.log("res", response);
+    });
+};
+
+const callEventPageMethod = (method, data, callback) => {
+    chrome.runtime.sendMessage(
+        { method: method, data: data },
+        function (response) {
+            if (typeof callback === "function") callback(response);
+        }
+    );
+};
+
+const getAccountBalance = () => {
+    getBalance({
+        params: {
+            currencyCode: "USD",
+        },
+    }).then((res) => {
+        if (res.code == 0) {
+            if (res.data) {
+                canWithdrawBalance.value = res.data.canWithdrawBalance;
+            }
+        }
+    });
+};
+
+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 clickListItem = (params, index) => {
+    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,
+    });
+    console.log(url);
+};
+
+const pageScroll = (e) => {
+    let wrapperHeight = pageWrapper.value.offsetHeight;
+    let pageGiveListHeight = pageGiveList.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 getUserInfo = (cb) => {
+    getChromeStorage("userInfo", (res) => {
+        cb && cb(res);
+    });
+};
+
+const checkLoginState = (cb) => {
+    let res = getStorage("de-userInfo");
+    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();
+    });
+};
+
 onMounted(() => {
-    giveList.value.length = 100;
+    checkLoginState(() => {
+        if (isLogin.value) {
+            getAccountBalance();
+            getLuckdropRecordsList();
+        }
+    });
 });
+
 const clickTab = (params, index) => {
     currentTabIndex.value = index;
     console.log(params, index);
@@ -169,6 +406,8 @@ const withdrawBack = () => {
             withdrawVisibility.value = false;
         }
         homeVisibility.value = true;
+        getAccountBalance();
+        getLuckdropRecordsList();
     }
 };
 
@@ -187,23 +426,14 @@ const clickWithdraw = () => {
     withdrawVisibility.value = true;
 };
 
-const pageScroll = (e) => {
-    let wrapperHeight = pageWrapper.value.offsetHeight;
-    let pageGiveListHeight = pageGiveList.value.offsetHeight;
-    let scrollTop = e.target.scrollTop || 0;
-    let loadMore = false;
-    if (
-        loadMore.value === false &&
-        wrapperHeight + scrollTop >= pageGiveListHeight
-    ) {
-        // loadMore = true;
-        // pageData.pageNum++;
-        // getListData((res) => {
-        // 	if (res.data.length) {
-        // 		loadMore = false;
-        // 	}
-        // });
-    }
+const sendTwitter = (params) => {
+    callEventPageMethod(
+        "POPUP_PUBLISH_TWITTER_RED_PACK",
+        { srcContent: params.postTaskLuckdrop.srcContent },
+        function (response) {
+            console.log("res", response);
+        }
+    );
 };
 </script>
 
@@ -314,7 +544,10 @@ const pageScroll = (e) => {
     }
 
     .list-wrapper {
+        min-height: 202px;
         .give-list {
+            min-height: 202px;
+            position: relative;
             .cell {
                 display: flex;
                 justify-content: space-between;
@@ -322,6 +555,7 @@ const pageScroll = (e) => {
                 height: 66px;
                 box-sizing: border-box;
                 padding-left: 20px;
+                cursor: pointer;
 
                 .img-wrapper {
                     position: relative;
@@ -346,7 +580,7 @@ const pageScroll = (e) => {
                     align-items: center;
                     border-bottom: 1px solid #d1d1d1;
                     box-sizing: border-box;
-                    padding-right: 20px;
+                    padding-right: 16px;
                     .left {
                         .nickname {
                             font-weight: 500;
@@ -363,16 +597,48 @@ const pageScroll = (e) => {
                         align-items: center;
                         cursor: pointer;
                         .msg {
-                            font-weight: 500;
-                            font-size: 14px;
+                            .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 {
@@ -382,12 +648,10 @@ const pageScroll = (e) => {
                 height: 66px;
                 box-sizing: border-box;
                 padding-left: 20px;
-                .img-wrapper {
-                    .icon {
-                        width: 42px;
-                        height: 42px;
-                        border-radius: 50%;
-                    }
+                .icon {
+                    width: 42px;
+                    height: 42px;
+                    border-radius: 50%;
                 }
                 .info-wrapper {
                     flex: 1;
@@ -397,7 +661,7 @@ const pageScroll = (e) => {
                     align-items: center;
                     border-bottom: 1px solid #d1d1d1;
                     box-sizing: border-box;
-                    padding-right: 20px;
+                    padding-right: 16px;
 
                     .left {
                         font-weight: 500;