Merge branch 'feature_220712_US_pay' into dev_1.1.5-1

# Conflicts:
#	src/logic/content/twitter.js
#	src/manifest.json
#	src/view/iframe/red-packet/luck-draw.vue
#	src/view/iframe/red-packet/red-packet.vue
#	src/view/popup/tabbar-page/wallter/popup.vue

src/entry/background.js

@@ -33,6 +33,10 @@ import {
     facebookShareSuccess
 } from "@/logic/background/facebook";
 
+import {
+    closeAchPayNoticeHandler
+} from "@/logic/background/denet";
+
 //加载bg.js 执行
 setMessageCount();
 
@@ -208,6 +212,9 @@ function onMessageMethod(req, sender, sendResponse) {
                         }
                     });
                     break
+                case 'CONTENT_CLOSE_ACH_PAY_NOTICE':
+                    closeAchPayNoticeHandler();
+                    break;
             }
         }
     } catch (error) {

src/entry/content.js

@@ -52,11 +52,16 @@ import {
 } from "@/logic/content/facebook.js"
 import { toolBox, toolbox_fixed_tweetId } from '@/logic/content/ToolBox.js'
 
+import {
+    injectDenet
+} from "@/logic/content/denet.js";
+
 chrome.storage.onChanged.addListener(changes => {
     initExecuteScript(changes)
 })
 
 window.onload = () => {
+    injectDenet();
     init();
     initFacebookContent();
     chrome.runtime.sendMessage({

src/http/account.js

@@ -50,4 +50,21 @@ export function getFrontConfig(params) {
     method: 'post',
     data: params
   })
-}
+}
+
+export function usdRechargeRequestByAchpay(params) {
+  return service({
+    url: `/wallet/recharge/usdRechargeRequestByAchpay`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function calcRechargePayAmount(params) {
+  return service({
+    url: `/wallet/pay/calcRechargePayAmount`,
+    method: 'post',
+    data: params
+  })
+}
+

src/http/configAPI.js

@@ -1,4 +1,4 @@
-export const appVersionCode = 15
+export const appVersionCode = 16
 
 const api = {
 	production: 'https://api.denetme.net',
@@ -27,3 +27,5 @@ export const pageUrl = page[process.env.NODE_ENV]
 export const discordAuthRedirectUri = `${pageUrl}/auth/discordCallback`;
 
 export const faceShareRedirectUrl = `${pageUrl}/facebook/shareCallback`;
+
+export const payAchNoticeUrl = `${pageUrl}/ach_pay/pay_notice`;

src/iframe/ach-cashier.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/ach-pay/cashier.vue'
+
+const app = createApp(App);
+
+app.mount('#app');

src/logic/background/denet.js

@@ -0,0 +1,22 @@
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+
+export const closeAchPayNoticeHandler = async () => {
+    let {id} = await getCurrentTab();
+
+    chrome.tabs.remove(
+        id, () => {
+            getChromeStorage('achPayInfo', (res) => {
+                chrome.storage.local.remove("achPayInfo");
+                if(res && res.tab) {
+                    chrome.tabs.highlight({ windowId: res.tab.windowId, tabs: res.tab.index })
+                }
+            })
+        }
+    )
+}
+
+const getCurrentTab = async () => {
+    let queryOptions = { active: true, lastFocusedWindow: true };
+    let [tab] = await chrome.tabs.query(queryOptions);
+    return tab || {};
+}

src/logic/content/denet.js

@@ -0,0 +1,15 @@
+import { payAchNoticeUrl } from '@/http/configAPI'
+
+export const injectDenet = () => {
+    closeAchPayNotice();
+}
+
+
+const closeAchPayNotice = () => {
+    if (window.location.href.indexOf(payAchNoticeUrl) > -1) {
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_CLOSE_ACH_PAY_NOTICE",
+            data: {}
+        }, () => { });
+    }
+}

src/logic/content/twitter.js

@@ -2410,12 +2410,8 @@ export const loginSuccessHandle = () => {
 }
 
 export const showPublishDialog = () => {
-    let bigBtn = document.getElementById('de-btn');
-    let smallBtn = document.getElementById('de-btn3');
-
-    if (bigBtn) {
-        bigBtn.click();
-    } else if (smallBtn) {
+    let smallBtn = document.getElementById('de-btn1');
+    if(smallBtn) {
         smallBtn.click();
     }
 }

src/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "DeNet",
     "description": "Growing more twitter followers with Denet",
-    "version": "1.1.5",
+    "version": "1.1.5.1",
     "background": {
         "service_worker": "/js/background.js"
     },
@@ -98,7 +98,8 @@
                 "/iframe/joined-group-list.html",
                 "/iframe/tool-box-guide.html",
                 "/iframe/tool-box.html",
-                "/iframe/test.html"
+                "/iframe/test.html",
+                "/iframe/ach-cashier.html"
             ],
             "matches": [
                 "<all_urls>"

src/view/components/currency-list.vue

@@ -36,7 +36,7 @@
                                 <img class="icon-currency" :src="data.currencies[0].iconPath" />
                                 <div class="currency-info">
                                     <div class="name">{{ data.currencies[0].currencyCode == 'USD' ? 'USD' : data.currencies[0].tokenSymbol }}</div>
-                                    <div class="desc">{{ data.currencies[0].currencyCode == 'USD' ? 'Paypal' : data.currencies[0].currencyName }}
+                                    <div class="desc">{{ data.currencies[0].currencyName }}
                                     </div>
                                 </div>
                             </div>
@@ -133,6 +133,7 @@ let listReqParams = {
         pageSize: 100,
     },
     loadMore: false,
+    requestIng: false
 };
 let show_empty = ref(false);
 const emits = defineEmits(["selectCurrency", "setCurrencyList", "addGeneralLottery"]);
@@ -165,6 +166,7 @@ const refresh = () => {
             refreshRotate.value = false;
         }, 1000)
         asyncTokenRechRecord(() => {
+            listReqParams.params.pageNum = 1;
             getCurrencyInfoList();
         })
     }
@@ -200,7 +202,15 @@ const searchCurrency = debounce(function (searchWords) {
 /**
  * 获取货币列表
  */
-const getCurrencyInfoList = () => {
+const getCurrencyInfoList = (_params = {}) => {
+
+    if(listReqParams.requestIng) {
+        return;
+    }
+    listReqParams.requestIng = true;
+    if(_params.pageNum) {
+        listReqParams.params.pageNum = _params.pageNum;
+    }
     let params = {
         params: {
             pageNum: listReqParams.params.pageNum,
@@ -210,6 +220,7 @@ const getCurrencyInfoList = () => {
         }
     };
     getCurrencyInfo(params).then(res => {
+        listReqParams.requestIng = false;
         if (res.code == 0) {
             let resData = res.data;
             if (resData && resData.currencyCategories.length) {
@@ -222,14 +233,25 @@ const getCurrencyInfoList = () => {
                 } else {
                     let data = currencyInfoList.value;
                     let currencyCategories = resData.currencyCategories;
-                    data = data.concat(currencyCategories);
-                    currencyInfoList.value = data;
+
+                    if(currencyCategories.length) {
+                        let tokenData = currencyCategories.find(item => item.type == 2);
+                        if(tokenData && tokenData.data && tokenData.data.length) {
+                            let index = data.findIndex(item => item.type == 2);
+                            let tokenList = data[index]['data'];
+                            data[index]['data'] = tokenList.concat(tokenData.data);
+                            currencyInfoList.value = data;
+                        }
+                    }
+
                 }
                 listReqParams.loadMore = false;
             }else{
                 show_empty.value = true
             }
         }
+    }).catch(err => {
+        listReqParams.requestIng = false;
     })
 }
 
@@ -275,7 +297,8 @@ onMounted(() => {
 })
 
 defineExpose({
-    getCurrencyInfoList
+    getCurrencyInfoList,
+    refresh
 })
 
 </script>

src/view/components/custom-card-cover.vue

@@ -47,7 +47,10 @@
             }}</span>
         </div>
         <div class="money-area">
-            <div class="txt">{{data.currencyCode == 'USD' ? 'USD' : data.tokenSymbol}} GIVEAWAY</div>
+            <div class="txt">
+                <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
+                &nbsp;GIVEAWAY
+            </div>
             <div class="coin">
                 <img :src="data.currencyIconUrl || imgHeaderCover" />
                 <span id="preview-after-amount"
@@ -115,7 +118,8 @@ const props = defineProps({
             return {
                 totalCount: 0,
                 amountValue: 0,
-                tokenSymbol: "",
+                tokenSymbol: '',
+                currencyCode: '',
                 type: 1,
                 validityDuration: '',
                 countDown: '',
@@ -180,9 +184,15 @@ onMounted(() => {
         .txt {
             font-weight: 800;
             font-size: 16px;
-            text-align: center;
             letter-spacing: 0.3px;
             color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                color: #F9C545;
+            }
         }
 
         .coin {

src/view/components/custom-card-horizontal-cover.vue

@@ -25,7 +25,8 @@
             </div>
             <div class="content-text">
                 <div class="title">
-                    {{data.tokenSymbol}} GIVEAWAY
+                    <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
+                    &nbsp;GIVEAWAY
                 </div>
                 <div class="center"
                     :style="{
@@ -98,7 +99,8 @@ const props = defineProps({
             return {
                 totalCount: 0,
                 amountValue: 0,
-                tokenSymbol: "",
+                tokenSymbol: '',
+                currencyCode: '',
                 type: 1,
                 validityDuration: '',
                 customPosterUrl: '',
@@ -176,6 +178,10 @@ watch(() => props.data, () => {
             font-weight: 800;
             font-size: 16px;
             color: #ffffff;
+
+            span {
+                color: #F9C545;
+            }
         }
         .center {
             padding: 12px 0;

src/view/components/input-action-sheet.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="input-action-sheet-wrapper" v-if="visible" :style="{position: position}">
+        <div class="input-action-sheet-content">
+            <div class="title">
+                {{title}}
+            </div>
+            <div class="input-wrapper">
+                <input class="input" 
+                    v-model="inputVal"
+                    placeholder="0"
+                    autofocus
+                    @input="onValueInput"
+                    @blur="onValueBlur">
+            </div>
+            <div class="btn-wrapper">
+                <div class="btn cancel" @click="cancel">
+                    {{cancelText}}
+                </div>
+                <div class="btn confirm" @click="confirm">
+                    {{confirmText}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from "vue";
+
+let inputVal = ref('');
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    position: {
+        type: String,
+        default: 'fixed'
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    cancelText: {
+        type: String,
+        default: 'Cancel',
+    },
+    confirmText: {
+        type: String,
+        default: 'Continue',
+    },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+
+const onValueInput = () => {
+    inputValHandler();
+}
+
+const onValueBlur = () => {
+    inputValHandler();
+}
+
+
+const inputValHandler = () => {
+    let val = inputVal.value;
+    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
+
+    if(val == '00') {
+        val = '0'
+    }
+    if(val.indexOf('.') > -1){ //校验 例：00.12 => 0.12
+        let arr = val.split('.');
+        if(arr[0].startsWith('0')) {
+            let num = +arr[0];
+            val = num + '.' + arr[1];
+        }
+    }
+
+    inputVal.value = val;
+    return val;
+}
+
+const cancel = () => {
+    emits("cancel", { });
+}
+
+const confirm = () => {
+    if(inputVal.value > 0) {
+        emits("confirm", { inputVal: inputVal.value });
+    }
+}
+
+</script>
+
+<style scoped lang="scss">
+.input-action-sheet-wrapper {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    .input-action-sheet-content {
+        width: 335px;
+        min-height: 186px;
+        background: #fff;
+        border-radius: 20px;
+        padding: 20px 15px;
+        box-sizing: border-box;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 1000;
+        transform: translate(-50%, -50%);
+
+        .title {
+            font-weight: 600;
+            font-size: 16px;
+        }
+        
+        .input-wrapper {
+            width: 100%;
+            border: 1px solid #DFDFDF;
+            border-radius: 5px;
+            box-sizing: border-box;
+            height: 42px;
+            margin: 17px 0 23px 0;
+
+            .input {
+                width: 100%;
+                height: 100%;
+                outline: none;
+                border: none;
+                padding: 0 10px;
+                box-sizing: border-box;
+                border-radius: 5px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .input::placeholder {
+                color: #B3B3B3;
+            }
+        }
+
+        .btn-wrapper {
+            display: flex;
+            justify-content: space-between;
+
+            .btn {
+                width: 150px;
+                height: 47px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 500;
+                font-size: 16px;
+                box-sizing: border-box;
+                border-radius: 1000px;
+                cursor: pointer;
+            }
+
+            .cancel {
+                border: 1px solid #CFCFCF;
+            }
+
+            .confirm {
+                color: #fff;
+                background: #1D9BF0;
+            }
+        }
+    }
+}
+</style>

src/view/components/message-box.vue

@@ -2,18 +2,17 @@
 <template>
     <div class="msg-box-overlay" v-if="dialogVisible">
         <div class="content-wrapper">
-            <div class="title">{{title}}</div>
-            <div class="desc">{{content}}</div>
+            <div class="title" :class="{'fill': !content}">{{title}}</div>
+            <div class="desc" v-if="content">{{content}}</div>
             <div class="btn-wrapper">
-                <div class="btn cancel" @click="cancel">Not yet</div>
-                <div class="btn confirm" @click="confirm">Deposit</div>
+                <div class="btn cancel" @click="cancel">{{cancelTxt}}</div>
+                <div class="btn confirm" @click="confirm">{{confirmTxt}}</div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-/* eslint-disable */
 import { ref, defineEmits, defineProps } from "vue";
 const props = defineProps({
     dialogVisible: {
@@ -28,6 +27,14 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    cancelTxt: {
+        type: String,
+        default: 'Cancel',
+    },
+    confirmTxt: {
+        type: String,
+        default: 'Completed',
+    }
 });
 
 const emits = defineEmits(["cancel", "confirm"]);
@@ -60,7 +67,7 @@ const confirm = () => {
         left: 50%;
         top: 50%;
         width: 375px;
-        min-height: 220px;
+        // min-height: 220px;
         background: #FFFFFF;
         border-radius: 20px;
         padding: 20px;
@@ -72,7 +79,13 @@ const confirm = () => {
             font-weight: 600;
             font-size: 20px;
             margin-bottom: 13px;
+            box-sizing: border-box;
         }
+
+        .fill {
+            padding: 20px 0;
+        }
+
         .desc {
             height: 68px;
             font-weight: 400;

src/view/components/popup-transactions.vue

@@ -283,7 +283,7 @@ const setMessageCount = () => {
         if(res.code == 0) {
             let {unReadCountTotal = 0 } = res.data;
             if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : text+'';
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
                 setBadgeInfo({data: {text}});
             } else {
                 hideBadge();

src/view/components/popup-withdraw.vue

@@ -200,7 +200,7 @@ const withdrawCalcAmountDebounce = debounce(function () {
  */
 const withdraw = () => {
     console.log("requestWithdrawParams.value", requestWithdrawParams.value);
-    if (withdrawIng.value) {
+    if (withdrawIng.value || calcReq.value || showWithdrawError.value || showWithdrawIptError.value) {
         return;
     }
 

src/view/iframe/ach-pay/cashier.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="cashier-wrapper">
+        <form ref="formDom" :action="pageData.formData.actionUrl" method="post" id="submitForm">
+            <input type="hidden" name="callbackUrl" :value="pageData.formData.callbackUrl">
+            <input type="hidden" name="currency" :value="pageData.formData.currency">
+            <input type="hidden" name="merType" :value="pageData.formData.merType">
+            <input type="hidden" name="merchantNo" :value="pageData.formData.merchantNo">
+            <input type="hidden" name="merchantOrderNo" :value="pageData.formData.merchantOrderNo">
+            <input type="hidden" name="noticeUrl" :value="pageData.formData.noticeUrl">
+            <input type="hidden" name="orderAmount" :value="pageData.formData.orderAmount">
+            <input type="hidden" name="productDetail" :value="pageData.formData.productDetail">
+            <input type="hidden" name="sign" :value="pageData.formData.sign">
+            <input type="hidden" name="timeStamp" :value="pageData.formData.timeStamp">
+            <input type="hidden" name="version" :value="pageData.formData.version">
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, nextTick } from "vue";
+import {usdRechargeRequestByAchpay} from "@/http/account"
+import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
+
+let formDom = ref(null);
+
+let pageData = reactive({
+    formData: {
+        actionUrl: '',
+        callbackUrl: '',
+        currency: '',
+        merType: '',
+        merchantNo: '',
+        merchantOrderNo: '',
+        noticeUrl: '',
+        orderAmount: '',
+        productDetail: '',
+        sign: '',
+        timeStamp: '',
+        version: '',
+    }
+})
+
+const getLocalPayInfo = async () => {
+    let payInfo = await getChromeStorage('achPayInfo');
+
+    if(payInfo && payInfo.amountValue) {
+        let achPayInfo = {
+            amountValue: '',
+            tab: payInfo.tab
+        };
+        setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+        usdRechargeRequestByAchpay({
+            params: {
+                amountValue: payInfo.amountValue
+            }
+        }).then(res => {
+            if(res.code == 0) {
+                pageData.formData = res.data;
+                nextTick(() => {
+                    formDom.value && formDom.value.submit();
+                })
+            }
+        })
+    }
+}
+
+
+onMounted(() => {
+    getLocalPayInfo();
+}) 
+
+</script>
+
+<style scoped lang="scss">
+.cashier-wrapper {
+}
+</style>

src/view/iframe/publish/components/follow-input.vue

@@ -57,7 +57,6 @@
 </template>
 
 <script setup>
-/* eslint-disable */
 import { reactive, ref, onMounted, defineEmits, defineProps, watch } from "vue";
 import {searchTwitterUser} from "@/http/publishApi";
 import {getChromeStorage} from "@/uilts/chromeExtension"
@@ -123,7 +122,6 @@ onMounted(() => {
 watch(
     () => props.atUserList,
     (newVal) => {
-        console.log(newVal, '222')
     },
     {
         deep: true

src/view/iframe/publish/components/give-dialog-head.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="head">
+        <div class="left">
+            <!-- 关闭按钮 -->
+            <div class="close-btn" @click="close">
+                <template v-if="publishType == 'TOOL_BOX'">
+                    <img  class="icon-close"
+                    :src="require('@/assets/svg/icon-close.svg')"
+                    v-if="toolBoxPageData.activePage == 'EDITOR'"/>
+                    <img class="icon-close"
+                        :src="require('@/assets/svg/icon-back.svg')"
+                        v-else/>
+                </template>
+                <template v-else>
+                    <img  class="icon-close"
+                    :src="require('@/assets/svg/icon-close.svg')"
+                    v-if="showComType == 'default'"/>
+                    <img class="icon-close"
+                        :src="require('@/assets/svg/icon-back.svg')"
+                        v-else/>
+                </template>
+            </div>
+            <!-- 标题 -->
+            <div class="title">
+                {{title}}
+            </div>
+        </div>
+        <div class="right">
+            <!-- 更多按钮 -->
+            <img :src="require('@/assets/svg/icon-more-l.svg')"
+                class="more"
+                @click="showMoreOption = true">
+            <div class="area-option" 
+                v-if="showMoreOption" 
+                @click="showMoreOption = false">
+                <div class="option">
+                    <div class="item" @click="goTransactionsList()">
+                        <img :src="require('@/assets/svg/icon-menu.svg')">
+                        <span>Transaction History</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps } from "vue";
+
+const props = defineProps({
+    publishType: {
+        type: String,
+        default: 'REDPACKET'
+    },
+    showComType: {
+        type: String,
+        default: 'default'
+    },
+    toolBoxPageData: {
+        type: Object,
+        default: () => {
+            return {
+                activePage: 'EDITOR' //PREVIEW
+            }
+        }
+    },
+    title: {
+        type: String,
+        default: 'DeNet'
+    },
+})
+
+const emits = defineEmits(["close"]);
+
+// 展示更多按钮下的选项
+let showMoreOption = ref(false);
+
+const goTransactionsList = () => {
+    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
+}
+
+const close = () => {
+    emits('close', {})
+}
+
+</script>
+
+<style lang="scss" scoped>
+.head {
+    border-bottom: 1px solid #ececec;
+    height: 48px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 14px;
+
+    .left {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .close-btn {
+            display: flex;
+            align-items: center;
+            width: max-content;
+            margin-right: 12px;
+            cursor: pointer;
+        }
+    }
+
+    .right {
+        .more {
+            cursor: pointer;
+        }
+
+        .area-option {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 111;
+
+            .option {
+                position: absolute;
+                top: 43px;
+                right: 15px;
+                background: #fff;
+                filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
+                width: 240px;
+                border-radius: 15px;
+                overflow: hidden;
+
+                .item {
+                    width: 100%;
+                    height: 50px;
+                    display: flex;
+                    align-items: center;
+                    cursor: pointer;
+                    border-top: 1px solid #E9E9E9;
+
+                    img {
+                        margin-left: 15px;
+                        width: 30px;
+                        height: 30px;
+                        margin-right: 6px;
+                    }
+
+                    span {
+                        font-weight: 500;
+                        font-size: 14px;
+                    }
+                }
+
+                .item:first-child {
+                    border-top: 0;
+                }
+
+                .item:hover {
+                        background: #F5F5F5;
+                }
+            }
+        }
+    }
+}
+</style>

src/view/iframe/publish/components/paypal-button.vue → src/view/iframe/publish/components/pay-button.vue

@@ -1,20 +1,24 @@
 <template>
-<!-- paypal 支付按钮 -->
+<!-- pay 支付按钮 -->
     <div class="pay-wrapper">
         <slot name="balance"></slot>
         <div class="pay-btn">
             <div class="iframe-pay"
-                v-show="currentCurrencyInfo.currencyCode == 'USD'"
-                @click="paypalPay">
-                <iframe
+                v-show="currentCurrencyInfo.currencyCode == 'USD'">
+                <div class="token-pay" 
+                    @click="clickPayUSD">
+                    Pay {{finalAmountData.rechargeAmountValue > 0 ? finalAmountData.rechargeAmountValue : finalAmountData.orderAmountValue}} {{currentCurrencyInfo.tokenSymbol}}
+                </div>
+
+                <!-- <iframe
                     class="iframe-pay"
                     ref="iframe"
-                    :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe>
+                    :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe> -->
             </div>
             <div class="token-pay" 
                 :class="{ disabled: Number(currentCurrencyInfo.balance) < Number(payConfig.amount) }"
                 v-if="currentCurrencyInfo.currencyCode != 'USD'"
-                @click="tokenPay">
+                @click="balancePay">
                 Pay {{payConfig.amount || 0}} {{currentCurrencyInfo.tokenSymbol}}
             </div>
         </div>
@@ -22,20 +26,22 @@
 </template>
 
 <script setup>
-import { onMounted, ref, defineProps, defineEmits, watch } from "vue";
+import { onMounted, ref, defineProps, defineEmits, watch, defineExpose } from "vue";
 
 import {payTaskLuckdropWithBalance} from "@/http/publishApi"
 import Report from "@/log-center/log"
+import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
 
 const props = defineProps({
     finalAmountData: {
         type: Object,
         default: () => {
             return {
-                currencyCode: "",
+                balance: "",
                 feeAmountValue: 0,
-                finalAmountValue: 0,
-                requestAmountValue: 0
+                feeDesc: 0,
+                orderAmountValue: 0,
+                rechargeAmountValue: 0
             }
         },
     },
@@ -62,30 +68,20 @@ let payIng = false;
 watch(
     () => props.finalAmountData.finalAmountValue,
     (newVal) => {
-        iframe.value.contentWindow.postMessage({ 
-            actionType: "setAmount", amount: newVal
-        },
-            "*"
-        );
+        // iframe.value.contentWindow.postMessage({ 
+        //     actionType: "setAmount", amount: newVal
+        // },
+        //     "*"
+        // );
     },
     {
         deep: true
     }
 );
 
-const emits = defineEmits(["payPalFinsh"]);
+const emits = defineEmits(["payFinish"]);
 
-const paypalPay = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.previewPage,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.confirmButton
-    }, {
-        type: 'paypal'
-    });  
-};
-
-const tokenPay = () => {  
+const balancePay = () => {  
     Report.reportLog({
         pageSource: Report.pageSource.previewPage,
         businessType: Report.businessType.buttonClick,
@@ -104,7 +100,7 @@ const tokenPay = () => {
         }
     }).then(res => {
         if(res.code == 0) {
-            emits("payPalFinsh", {...res.data, payNetwork: 'bsc'});
+            emits("payFinish", {...res.data});
         }
         payIng = false;
     }).catch(() => {
@@ -112,23 +108,50 @@ const tokenPay = () => {
     })
 }
 
+const clickPayUSD = () => {
+    if(props.finalAmountData.rechargeAmountValue > 0) {
+        setTimeout(() => {
+            emits("showDepositMask", {});
+        }, 1000)
+        chrome.tabs.getCurrent(tab =>{
+            let achPayInfo = {
+                amountValue: props.finalAmountData.rechargeAmountValue,
+                tab: tab
+            };
+            let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
+            setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+            chrome.tabs.create({
+                url: guideUrl
+            });
+        })
+
+    } else {
+        balancePay();
+    }
+}
+
 onMounted(() => {
-    window.addEventListener("message", function (event) {
-        if (event.data && event.data.actionType) {
-            switch (event.data.actionType) {
-                case "payCallBack":
-                    console.log(
-                        "payCallBack",
-                        event.data.orderData,
-                        event.data.transaction
-                    );
-                    emits("payPalFinsh", {...event.data, payNetwork: 'paypal'});
-                    break;
-            }
-        }
-    });
+    // window.addEventListener("message", function (event) {
+    //     if (event.data && event.data.actionType) {
+    //         switch (event.data.actionType) {
+    //             case "payCallBack":
+    //                 console.log(
+    //                     "payCallBack",
+    //                     event.data.orderData,
+    //                     event.data.transaction
+    //                 );
+    //                 emits("payFinish", {...event.data, payNetwork: 'pay'});
+    //                 break;
+    //         }
+    //     }
+    // });
 });
 
+defineExpose({
+    balancePay
+})
+
 </script>
 
 <style lang="scss" scoped>

src/view/iframe/publish/components/preview-card.vue

@@ -22,6 +22,7 @@
                             totalCount: baseFormData.totalCount,
                             amountValue: baseFormData.amountValue,
                             tokenSymbol: currentCurrencyInfo.tokenSymbol,
+                            currencyCode: currentCurrencyInfo.currencyCode,
                             currencyIconUrl: currentCurrencyInfo.iconPath,
                             type: baseFormData.type,
                             validityDuration: baseFormData.validityDuration,
@@ -62,6 +63,7 @@
                             totalCount: baseFormData.totalCount,
                             amountValue: baseFormData.amountValue,
                             tokenSymbol: currentCurrencyInfo.tokenSymbol,
+                            currencyCode: currentCurrencyInfo.currencyCode,
                             currencyIconUrl: currentCurrencyInfo.iconPath,
                             type: baseFormData.type,
                             validityDuration: baseFormData.validityDuration,

src/view/iframe/publish/give-dialog.vue

@@ -9,51 +9,14 @@
                 v-show="showCurrencyPop || showCurrencySelect"
                 @click.stop="showCurrencyPop = false; showCurrencySelect=false">
             </div>
-
-            <!-- 头部 -->
-            <div class="head">
-                <div class="left">
-                    <!-- 关闭按钮 -->
-                    <div class="close-btn" @click="close">
-                        <template v-if="publishType == 'TOOL_BOX'">
-                            <img  class="icon-close"
-                            :src="require('@/assets/svg/icon-close.svg')"
-                            v-if="toolBoxPageData.activePage == 'EDITOR'"/>
-                            <img class="icon-close"
-                                :src="require('@/assets/svg/icon-back.svg')"
-                                v-else/>
-                        </template>
-                        <template v-else>
-                            <img  class="icon-close"
-                            :src="require('@/assets/svg/icon-close.svg')"
-                            v-if="showComType == 'default'"/>
-                            <img class="icon-close"
-                                :src="require('@/assets/svg/icon-back.svg')"
-                                v-else/>
-                        </template>
-                    </div>
-                    <!-- 标题 -->
-                    <div class="title">
-                        {{publishType == 'REDPACKET' ? currentComData[showComType]["title"] : 'Tool Box' }}
-                    </div>
-                </div>
-                <div class="right">
-                    <!-- 更多按钮 -->
-                    <img :src="require('@/assets/svg/icon-more-l.svg')"
-                        class="more"
-                        @click="showMoreOption = true">
-                    <div class="area-option" 
-                        v-if="showMoreOption" 
-                        @click="showMoreOption = false">
-                        <div class="option">
-                            <div class="item" @click="goTransactionsList()">
-                                <img :src="require('@/assets/svg/icon-menu.svg')">
-                                <span>Transaction History</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            
+            <!-- head -->
+            <give-dialog-head  
+                :title="publishType == 'REDPACKET' ? currentComData[showComType]['title'] : 'Tool Box'"
+                :publishType="publishType" 
+                :showComType="showComType"
+                :toolBoxPageData="toolBoxPageData"
+                @close="close"></give-dialog-head>
 
             <!-- 内容 -->
             <div class="body">
@@ -359,19 +322,19 @@
                                         <div class="card-list">
                                             <div class="item">
                                                 <div class="l">Giveaway Amount</div>
-                                                <div class="r"></div>
+                                                <div class="r order-amount">${{finalAmountData.orderAmountValue}}</div>
                                             </div>
                                             <div class="item">
                                                 <div class="l">Balance</div>
-                                                <div class="r"></div>
+                                                <div class="r txt">${{finalAmountData.balance}}</div>
                                             </div>
                                             <div class="item">
-                                                <div class="l">Paypal charges fee ()</div>
-                                                <div class="r"></div>
+                                                <div class="l">Paypal charges fee ({{finalAmountData.feeDesc}})</div>
+                                                <div class="r txt">${{finalAmountData.feeAmountValue}}</div>
                                             </div>
                                             <div class="item">
                                                 <div class="l">Deposit Amount</div>
-                                                <div class="r"></div>
+                                                <div class="r deposit-amount">${{finalAmountData.rechargeAmountValue}}</div>
                                             </div>
                                         </div>
                                     </template>
@@ -409,18 +372,18 @@
 
                         <!-- paypal支付按钮 -->
                         <div class="payment" v-show="showComType == 'preview'">
-                            <paypal-button
+                            <pay-button
+                                ref="payButtonDom"
                                 v-if="isMoneyRewardCpd"
                                 :finalAmountData="finalAmountData"
                                 :payConfig="{
-                                    paypalClientId,
                                     feeDesc: payConfig.feeDesc,
-                                    paypalHtml,
                                     amount: baseFormData.amountValue,
                                     postId
                                 }"
                                 :currentCurrencyInfo="currentCurrencyInfo"
-                                @payPalFinsh="payPalFinsh">
+                                @showDepositMask="showDepositMessageBox = true"
+                                @payFinish="payFinish">
                                 <template v-slot:balance>
                                     <div class="balance" v-if="Number(baseFormData.amountValue) <= Number(currentCurrencyInfo.balance)">
                                         <img class="icon" src="@/assets/subject/icon-balance.png" />
@@ -434,7 +397,7 @@
                                             @click="updateCurrencyBanlce"/>
                                     </div>
                                 </template>
-                            </paypal-button>
+                            </pay-button>
                             <div v-else class="btn-wrap" @click="payStatusHandle(1)"><div class="custom-submit">Confirm</div></div>
                         </div>
                         </template>
@@ -448,9 +411,17 @@
             :dialogVisible="showMessageBox"
             :title="messageBoxData.title"
             :content="messageBoxData.content"
+            cancelTxt="Not yet"
+            confirmTxt="Deposit"
             @cancel="messageBoxCancel"
-            @confirm="messageBoxConfirm"
-        ></message-box>
+            @confirm="messageBoxConfirm"></message-box>
+
+        <!-- 预览页充值 -->
+        <message-box
+            :dialogVisible="showDepositMessageBox"
+            title="Is the Deposit Completed?"
+            @cancel="depositAchCancel"
+            @confirm="depositAchConfirm"></message-box>
 
         <!-- 裁剪 -->
         <div class="dialog" v-if="cropperDialog">
@@ -488,11 +459,11 @@
 </template>
 
 <script setup>
-import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide, getCurrentInstance, computed } from "vue";
-import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
+import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide, computed } from "vue";
+import { postPublish, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
 import { getInviteGuildInfo, getInviteGuildInfoByOpenApi, saveInviteGuildInfo } from "@/http/discordApi";
 import { payCalcFee, getPayConfig } from "@/http/pay";
-import { getFrontConfig } from "@/http/account";
+import { getFrontConfig, calcRechargePayAmount } from "@/http/account";
 import { uploadSignature, uploadFile } from '@/http/media';
 import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
 import { debounce, getBit } from "@/uilts/help"
@@ -504,22 +475,22 @@ import "element-plus/es/components/loading/style/css";
 import 'vue-cropper/dist/index.css'
 import { VueCropper }  from "vue-cropper";
 import {create, all} from "mathjs";
+import { message } from 'ant-design-vue';
 
 import messageBox from "@/view/components/message-box.vue";
 import currencyList from "@/view/components/currency-list.vue";
 import currencySelect from "@/view/components/currency-select.vue";
 import previewCard from "@/view/iframe/publish/components/preview-card";
 import followInput from "@/view/iframe/publish/components/follow-input";
-import paypalButton from "@/view/iframe/publish/components/paypal-button";
+import payButton from "@/view/iframe/publish/components/pay-button";
 import topUp from "@/view/iframe/publish/components/top-up.vue";
 import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
 import toolBox from '@/view/iframe/publish/tool-box/index.vue'
 import giveawayPoster from '@/view/iframe/publish/components/giveaway-poster.vue';
+import giveDialogHead from "@/view/iframe/publish/components/give-dialog-head";
 import GlobalTip from '@/view/components/global-tip.vue'
 import customCardCover from '@/view/components/custom-card-cover.vue'
 
-const currentInstance = getCurrentInstance();
-
 import CustomizedRewardEditPopup from '@/view/iframe/publish/components/customized-reward-edit';
 
 const config = {
@@ -531,9 +502,7 @@ const math = create(all, config);
 let tempCurrentCurrencyInfo = ref({});
 let tempCurrentCurrencyList = ref([]);
 
-let paypalClientId = ref("");
 let payConfig = ref({});
-let paypalHtml = ref("");
 let installStatus = ref(false);
 let timer = ref(null);
 provide('installStatus', installStatus)
@@ -609,15 +578,16 @@ let isBack = ref(false);
 // 展示消息提示 
 let showMessageBox = ref(false);
 
+let showDepositMessageBox = ref(false);
+
 // 展示货币列表pop
 let showCurrencyPop = ref(false);
 let showCurrencySelect = ref(false);
 
-// 展示更多按钮下的选项
-let showMoreOption = ref(false);
-
 // 货币列表的dom
-let currencyListDom = ref('');
+let currencyListDom = ref(null);
+
+let payButtonDom = ref(null);
 
 // 刷新按钮旋转
 let refreshRotate = ref(false);
@@ -910,7 +880,7 @@ const selectCurrencyPopHandle = () => {
         showCurrencyPop.value = true;
         nextTick(() => {
             if(currencyListDom.value) {
-                currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
+                currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList({pageNum: 1});
             }
         })
     }
@@ -924,7 +894,7 @@ const getPayAmount = async (amountValue) => {
         params: {
             amountValue,
             currencyCode: currentCurrencyInfo.value.currencyCode,
-            payChannel: 'paypal',
+            payChannel: 'ach',
         },
     });
     if (res.code == 0) {
@@ -1228,8 +1198,12 @@ const submitRequest = async () => {
 
     // 法币支付需要计算费率
     if(formData.amountCurrencyCode == "USD") { 
-        let payAmountRes = await getPayAmount(amountValue);
-        formData["payAmountValue"] = payAmountRes.finalAmountValue;
+        // 获取充值金额
+        await calcRechPayAmount({
+            currencyCode: currentCurrencyInfo.value.currencyCode,
+            orderAmountValue: baseFormData.amountValue,
+            payChannel: 'ach'
+        });
     }
     let data = {
         params: {
@@ -1299,38 +1273,26 @@ const setDiscordIptTxt = ({text}) => {
     formList[index]['text'] = text;
 }
 
+const calcRechPayAmount = async (params) => {
+    let res = await calcRechargePayAmount({
+        params : params
+    })
+
+    if (res.code == 0) {
+        let { feeDesc } = res.data;
+        payConfig.value.feeDesc = feeDesc;
+        finalAmountData.value = res.data;
+    }
+    return res.data;
+}
+
 /**
  * 支付完成回调
  */
-const payPalFinsh = (params) => {
-    let {payNetwork, payStatus} = params;
-    // token 支付
-    if(payNetwork == 'bsc') {
-        payStatusHandle(payStatus);
-    } else {
-        // 法币支付
-        let transaction = params.transaction;
-        let loadingInstance = ElLoading.service({
-            background: "rgba(0,0,0,.3)",
-        });
-        verifyPaypalResult({
-            params: {
-                paypalTransactionId: transaction.id,
-                postId: publishRes.postId,
-                paypalClientId: paypalClientId.value,
-            },
-        }).then((res) => {
-            loadingInstance.close();
-            if (res.code == 0) {
-                if (res.data) {
-                    payStatusHandle(res.data.payStatus)
-                }
-            }
-        })
-        .catch(() => {
-            loadingInstance.close();
-        });
-    }
+const payFinish = (params) => {
+    let {payStatus} = params;
+    // 余额支付
+    payStatusHandle(payStatus);
 };
 
 const payStatusHandle = (payStatus) => {
@@ -1342,22 +1304,10 @@ const payStatusHandle = (payStatus) => {
             initParams();
             break;
         case 2:
-            // ElMessage({
-            //     message: "Pay Fail",
-            //     type: "warning",
-            // });
             break;
         case 3:
-            // ElMessage({
-            //     message: "Pay Exceptions",
-            //     type: "warning",
-            // });
             break;
         case 4:
-            // ElMessage({
-            //     message: "Pay Exceptions",
-            //     type: "warning",
-            // });
             break;
     }
 }
@@ -1545,18 +1495,6 @@ const formSwitchChange = (val, params, index) => {
     closeDiscordTask(val, params, index);
 }
 
-
-const hideTask = (params, index) => {
-    formList[index]['checked'] = false;
-    formList[index]['show'] = false;
-    closeDiscordTask(false, {type: 7}, index)
-}
-
-const clickDropdown = (params, index) => {
-    formList[index]['show'] = true;
-    formList[index]['checked'] = true;
-}
-
 const closeDiscordTask = (val, params, index) => {
     if(params.type == 7) {
         if(!val) {
@@ -1814,7 +1752,6 @@ const setPayConfig = () => {
     }).then((res) => {
         if (res.code == 0) {
             payConfig.value = res.data;
-            paypalClientId.value = res.data.paypalClientId;
         }
     });
 };
@@ -1827,7 +1764,6 @@ const setFrontConfig = () => {
         params: {},
     }).then((res) => {
         if (res.code == 0) {
-            paypalHtml.value = res.data.paypalHtml;
             lotteryMaxHourDuration = res.data.lotteryMaxHourDuration;
             toolBoxPageData.postEditorLinkInputDescImage = res.data.postEditorLinkInputDescImage;
             toolBoxPageData.postEditorDefaultLinkTitle = res.data.postEditorDefaultLinkTitle;
@@ -1835,11 +1771,6 @@ const setFrontConfig = () => {
     });
 };
 
-const goTransactionsList = () => {
-    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
-}
-
-
 /**
  * 默认获取上次选中的货币信息
  */
@@ -1853,23 +1784,18 @@ const getCurrencyInfo = async (_params) => {
     let { loop = false} = _params || {};
     let {accessToken = ''} = await getChromeStorage('userInfo') || {};
     if (accessToken) {
-        getChromeStorage('selectCurrencyInfo', (res) => {
-            if(res && res.currencyCode) {
-                getCurrencyInfoByCode({
-                    params: {
-                        currencyCode: res.currencyCode
-                    }
-                }).then(res => {
-                    if(res.code == 0 && res.data) {
-                        currentCurrencyInfo.value = res.data;
-                        tempCurrentCurrencyInfo.value = res.data;
-                        if(!loop) {
-                            onIptSetErrorTxt();
-                        }
-                    }
-                });
+        let {currencyCode = ''} = await getChromeStorage('selectCurrencyInfo') || {};
+
+        if(currencyCode) {
+            let currencyInfoRes = await getCurrencyByCode({currencyCode});
+            if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
+                currentCurrencyInfo.value = currencyInfoRes.data;
+                tempCurrentCurrencyInfo.value = currencyInfoRes.data;
+                if(!loop) {
+                    onIptSetErrorTxt();
+                }
             }
-        })
+        }
 
         getChromeStorage('selectCurrencyList', (res) => {
             if (showCurrencySelect.value === false) {
@@ -1879,6 +1805,15 @@ const getCurrencyInfo = async (_params) => {
     }
 }
 
+const getCurrencyByCode = async (params) => {
+    let res = await getCurrencyInfoByCode({
+        params: {
+            currencyCode: params.currencyCode
+        }
+    })
+    return res || {};
+}
+
 const selectPublishMode = (params, index) => {
     selectModeInfo.index = index;
     selectModeInfo.type = params.type;
@@ -2006,6 +1941,26 @@ const submitReward = (reward) => {
     onIptSetErrorTxt();
 }
 
+const depositAchCancel = () => {
+    showDepositMessageBox.value = false;
+}
+
+const depositAchConfirm = async () => {
+    let currencyInfoRes = await getCurrencyByCode({currencyCode: currentCurrencyInfo.value.currencyCode});
+
+    if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
+        showDepositMessageBox.value = false;
+        currentCurrencyInfo.value = currencyInfoRes.data;
+
+        let {balance} = currencyInfoRes.data;
+        if(balance > finalAmountData.value.orderAmountValue) {
+            // payButtonDom.value && payButtonDom.value.balancePay();
+        } else {
+            message.info('Deposit failed, please try again later');
+        }
+    }
+}
+
 onMounted(() => {
     setFrontConfig();
     setPayConfig();
@@ -2078,88 +2033,6 @@ onMounted(() => {
             z-index:900;
         }
 
-        .head {
-            border-bottom: 1px solid #ececec;
-            height: 48px;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 14px;
-
-            .left {
-                display: flex;
-                align-items: center;
-                .title {
-                    font-size: 16px;
-                    font-weight: 500;
-                }
-
-                .close-btn {
-                    display: flex;
-                    align-items: center;
-                    width: max-content;
-                    margin-right: 12px;
-                    cursor: pointer;
-                }
-            }
-
-            .right {
-                .more {
-                    cursor: pointer;
-                }
-
-                .area-option {
-                    width: 100%;
-                    height: 100%;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    z-index: 111;
-
-                    .option {
-                        position: absolute;
-                        top: 43px;
-                        right: 15px;
-                        background: #fff;
-                        filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
-                        width: 240px;
-                        border-radius: 15px;
-                        overflow: hidden;
-
-                        .item {
-                            width: 100%;
-                            height: 50px;
-                            display: flex;
-                            align-items: center;
-                            cursor: pointer;
-                            border-top: 1px solid #E9E9E9;
-
-                            img {
-                                margin-left: 15px;
-                                width: 30px;
-                                height: 30px;
-                                margin-right: 6px;
-                            }
-
-                            span {
-                                font-weight: 500;
-                                font-size: 14px;
-                            }
-                        }
-
-                        .item:first-child {
-                            border-top: 0;
-                        }
-
-                        .item:hover {
-                                background: #F5F5F5;
-                        }
-                    }
-                }
-            }
-        }
-
         .body {
             box-sizing: border-box;
             height: calc(100% - 48px);
@@ -2712,7 +2585,7 @@ onMounted(() => {
         }
     }
     .card-list {
-        padding: 20px;
+        padding: 10px 20px;
         border-radius: 20px;
         border: 1px solid #E6E6E6;
         .item {
@@ -2723,7 +2596,28 @@ onMounted(() => {
             font-size: 14px;
             font-weight: 500;
             box-shadow: inset 0px -1px 0px #EAEAEA;
+
+            .order-amount {
+                font-weight: 600;
+                font-size: 20px;
+            }
+
+            .txt {
+                font-weight: 500;
+                font-size: 16px;
+                color: #9A9A9A;
+            }
+
+            .deposit-amount {
+                font-weight: 600;
+                font-size: 20px;
+                color: #1D9BF0;
+            }
+        }
+        .item:last-child {
+            box-shadow: none;
         }
+
     }
 }
 

src/view/iframe/red-packet/luck-draw.vue

@@ -225,22 +225,25 @@
                 </div>
             </template> -->
             <!-- <template v-else> -->
-            <custom-card-cover :data="{
-                totalCount: state.detail.totalCount,
-                amountValue: state.detail.amountValue,
-                tokenSymbol: state.detail.currencySymbol,
-                currencyIconUrl: state.detail.currencyIconPath,
-                type: PlayType.lottery,
-                validityDuration: state.count_down_time,
-                countDown: state.count_down_time,
-                userInfo: {
-                    nickName: state.detail.postUserInfo.name,
-                    avatarUrl: state.detail.postUserInfo.avatarUrl
-                },
-                rewardType: state.detail.rewardType,
-                customizedReward: state.detail.customizedReward,
-                customPosterUrl: state.detail.customPosterInstalled
-            }" @clickOpenRedPacket="clickOpenRedPacket"></custom-card-cover>
+                <custom-card-cover 
+                    :data="{
+                        totalCount: state.detail.totalCount,
+                        amountValue: state.detail.amountValue,
+                        tokenSymbol: state.detail.currencySymbol,
+                        currencyCode: state.detail.amountCurrencyCode,
+                        currencyIconUrl: state.detail.currencyIconPath,
+                        type: PlayType.lottery,
+                        validityDuration: state.count_down_time,
+                        countDown: state.count_down_time,
+                        userInfo: {
+                            nickName: state.detail.postUserInfo.name,
+                            avatarUrl: state.detail.postUserInfo.avatarUrl
+                        },
+                        rewardType: state.detail.rewardType,
+                        customizedReward: state.detail.customizedReward,
+                        customPosterUrl: state.detail.customPosterInstalled
+                    }"
+                    @clickOpenRedPacket = "clickOpenRedPacket"></custom-card-cover>
             <!-- </template> -->
         </div>
 

src/view/iframe/red-packet/red-packet.vue

@@ -233,21 +233,24 @@
         </div>
       </template>
       <template v-else> -->
-      <custom-card-cover :data="{
-        totalCount: state.detail.totalCount,
-        amountValue: state.detail.amountValue,
-        tokenSymbol: state.detail.currencySymbol,
-        currencyIconUrl: state.detail.currencyIconPath,
-        type: PlayType.common,
-        validityDuration: state.detail.validityDuration,
-        userInfo: {
-          nickName: state.detail.postUserInfo.name,
-          avatarUrl: state.detail.postUserInfo.avatarUrl
-        },
-        rewardType: state.detail.rewardType,
-        customizedReward: state.detail.customizedReward,
-        customPosterUrl: state.detail.customPosterInstalled
-      }" @clickOpenRedPacket="clickOpenRedPacket"></custom-card-cover>
+        <custom-card-cover 
+          :data="{
+              totalCount: state.detail.totalCount,
+              amountValue: state.detail.amountValue,
+              tokenSymbol: state.detail.currencySymbol,
+              currencyCode: state.detail.amountCurrencyCode,
+              currencyIconUrl: state.detail.currencyIconPath,
+              type: PlayType.common,
+              validityDuration: state.detail.validityDuration,
+              userInfo: {
+                  nickName: state.detail.postUserInfo.name,
+                  avatarUrl: state.detail.postUserInfo.avatarUrl
+              },
+              rewardType: state.detail.rewardType,
+              customizedReward: state.detail.customizedReward,
+              customPosterUrl: state.detail.customPosterInstalled
+          }"
+          @clickOpenRedPacket = "clickOpenRedPacket"></custom-card-cover>
       <!-- </template> -->
     </div>
 

src/view/popup/currency-detail.vue

@@ -34,21 +34,17 @@
     </div>
     <div class="bottom">
       <template v-if="showSendBtn">
-        <div class="btn send-btn" @click="showSendGiveawayDialog(currencyInfo)">
+        <div class="btn send-btn" v-if="showUSDepositBtn" @click="showSendGiveawayDialog(currencyInfo)">
           <img :src="require('@/assets/svg/icon-send-giveaway.svg')" /> 
           Send Giveaway
         </div>
         <div class="btn-wrapper">
-          <div class="button "
-            v-if="currencyInfo.currencyCode != 'USD'"
-            @click="clickDeposit">Deposit</div>
+          <div class="button left" v-if="showUSDepositBtn" @click="clickDeposit">Deposit</div>
           <div class="button" @click="clickWithdraw">Withdrawal</div>
         </div>
       </template>
       <template v-else>
-        <div class="btn deposit-btn"
-          v-if="currencyInfo.currencyCode != 'USD'"
-          @click="clickDeposit">Deposit</div>
+        <div class="btn deposit-btn" v-if="showUSDepositBtn" @click="clickDeposit">Deposit</div>
         <div class="btn withdrawal-btn" @click="clickWithdraw">Withdrawal</div>
       </template>
     </div>
@@ -63,6 +59,12 @@
         </div>
         <div class="selectBg" @click="showCurrencySelect = false"></div>
     </template>
+    <input-action-sheet 
+      :visible="showDepositInput"
+      title="Enter the USD amount to be deposited"
+      position="absolute"
+      @cancel="cancelDeposit"
+      @confirm="confirmDeposit"></input-action-sheet>
   </div>
 </template>
 
@@ -77,6 +79,7 @@ import {setChromeStorage} from "@/uilts/chromeExtension"
 
 import VHead from '@/view/popup/components/head.vue'
 import currencySelect from "@/view/components/currency-select.vue";
+import inputActionSheet from "@/view/components/input-action-sheet.vue";
 import { getBit } from "@/uilts/help";
 
 let currenciesData = ref([]);
@@ -90,6 +93,10 @@ let currencyOpertionType = '';
 
 let showSendBtn = ref(true);
 
+let showUSDepositBtn = ref(true);
+
+let showDepositInput = ref(false);
+
 
 
 const selectCurrency = (params) => {
@@ -122,18 +129,20 @@ const clickWithdraw = () => {
 
 const withdrawHandle = (_params) => {
   withdraw_info.chainInfo = _params.chainInfo;
+  withdraw_info.source = 'home'
+  withdraw_info.balance = _params.balance
+  withdraw_info.token_symbol = _params.tokenSymbol || ''
+  withdraw_info.currency_name = _params.currencyName || ''
+  withdraw_info.token_chain = _params.tokenChain || ''
+  withdraw_info.currency_code = _params.currencyCode
+  withdraw_info.icon_token = _params.iconPath || ''
+  withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+
   if (_params.currencyCode == 'USD') {
       withdraw_info.currency_code = _params.currencyCode
+      withdraw_info.paypal.amount_value = _params.balance
       router.push('/withdraw/paypal')
   } else {
-      withdraw_info.source = 'home'
-      withdraw_info.balance = _params.balance
-      withdraw_info.token_symbol = _params.tokenSymbol || ''
-      withdraw_info.currency_name = _params.currencyName || ''
-      withdraw_info.token_chain = _params.tokenChain || 'BNB Chain'
-      withdraw_info.currency_code = _params.currencyCode
-      withdraw_info.icon_token = _params.iconPath || ''
-      withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
       console.log(withdraw_info.chainInfo.iconPath)
       router.push('/withdraw/info')
   }
@@ -154,7 +163,14 @@ const clickDeposit = () => {
       showCurrencySelect.value = true;
       currencyOpertionType = "DEPOSIT";
     } else if(currenciesData.value.length == 1){
-      depositHandle(currenciesData.value[0]);
+      let currencyInfo = currenciesData.value[0];
+      if(currencyInfo.currencyCode == 'USD') {
+        // 法币充值
+        showDepositInput.value = true;
+          
+      } else {
+        depositHandle(currencyInfo);
+      }
     }
 }
 
@@ -212,6 +228,28 @@ const setLocalSelectCurrencyInfo = (params = {}) => {
     setChromeStorage({ selectCurrencyInfo : JSON.stringify(params)})    
 }
 
+const cancelDeposit = () => {
+  showDepositInput.value = false;
+}
+
+const confirmDeposit = (params) => {
+  let {inputVal} = params;
+  showDepositInput.value = false;
+
+  // chrome.tabs.getCurrent(tab =>{
+  //   console.log(tab);
+      let achPayInfo = {
+          amountValue: inputVal
+      };
+      let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
+      setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+      chrome.tabs.create({
+          url: guideUrl
+      });
+  // })
+}
+
 onMounted(() => {
     let {params = '{}'} = router.currentRoute.value.query;
 
@@ -225,7 +263,10 @@ onMounted(() => {
         totalBalance,
         totalUsdEstimateBalance
       };
-      console.log(currencyInfo.value )
+      if(currencyInfo.value.currencyCode == 'USD') {
+        //set USD deposit btn show status
+        
+      }
     } 
     if(window.location.pathname.indexOf('/home.html') > -1) {
       showSendBtn.value = false;
@@ -340,7 +381,7 @@ onMounted(() => {
       justify-content: space-between;
 
       .button {
-        width: 163px;
+        flex: 1;
         height: 50px;
         border: 1px solid #d7e8f4;
         display: flex;
@@ -353,6 +394,10 @@ onMounted(() => {
         color: #1D9BF0;
         cursor: pointer;
       }
+
+      .left {
+        margin-right: 20px;
+      }
     }
   }
 

src/view/popup/tabbar-page/wallter/popup.vue

@@ -25,8 +25,12 @@
             </div>
         </div>
 
-        <currency-list v-if="userInfo.accessToken" style="height: calc(100% - 103px);" ref="currencyListDom"
-            :showRefresh="false" :page="'top-up'" @selectCurrency="selectCurrency"></currency-list>
+        <currency-list 
+            v-if="userInfo.accessToken"
+            style="height: calc(100% - 103px);"
+            ref="currencyListDom"
+            :showRefresh="false"
+            @selectCurrency="selectCurrency"></currency-list>
     </div>
 </template>
 
@@ -53,7 +57,7 @@ var moment = require("moment");
 
 let userInfo = ref({});
 let canWithdrawBalance = ref(0);
-withdraw_info.paypal.amount_value = canWithdrawBalance
+withdraw_info.paypal.amount_value = 0;
 withdraw_info.balance = 0
 
 let isRequestWithdrawBalance = ref(false);
@@ -190,8 +194,8 @@ const refreshList = () => {
     }, 1000)
 
     getAccountBalance();
-    if (currencyListDom.value) {
-        currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
+    if(currencyListDom.value) {
+        currencyListDom.value.refresh && currencyListDom.value.refresh();
     }
 }