多链

src/http/publishApi.js

@@ -61,7 +61,7 @@ export function getUser(params) {
 
 export function getCurrencyInfo(params) {
   return service({
-    url: `/currency/getCurrencyInfo`,
+    url: `/currency/v2/getCurrencyInfo`,
     method: 'post',
     data: params
   })
@@ -69,7 +69,7 @@ export function getCurrencyInfo(params) {
 
 export function searchCurrencyInfo(params) {
   return service({
-    url: `/currency/searchCurrencyInfo`,
+    url: `/currency/v2/searchCurrencyInfo`,
     method: 'post',
     data: params
   })

src/view/components/currency-list.vue

@@ -22,24 +22,24 @@
                             {{ item.type == 1 ? 'Cash' : 'Crypto' }}
                         </div>
                         <div class="item-detail" v-for="(data, idx) in item.data" :key="idx"
-                            @click="selectCurrency(data)">
+                            @click="selectCurrency(data.currencies)">
                             <div class="left">
-                                <img class="icon-currency" :src="data.iconPath" />
+                                <img class="icon-currency" :src="data.currencies[0].iconPath" />
                                 <div class="currency-info">
-                                    <div class="name">{{ data.currencyCode == 'USD' ? 'USD' : data.tokenSymbol }}</div>
-                                    <div class="desc">{{ data.currencyCode == 'USD' ? 'Paypal' : data.currencyName }}
+                                    <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>
                                 </div>
                             </div>
                             <div class="right">
                                 <div class="num">
-                                    <a-tooltip :title="data.balance">
-                                        {{ getBit(data.balance) }}
+                                    <a-tooltip :title="data.currencies[0].balance">
+                                        {{ getBit(data.currencies[0].balance) }}
                                     </a-tooltip>
                                 </div>
-                                <div class="amount" v-if="data.currencyType == 2">
-                                    <a-tooltip :title="'$'+data.usdEstimateBalance">
-                                        ${{ getBit(data.usdEstimateBalance) }}
+                                <div class="amount" v-if="data.currencies[0].currencyType == 2">
+                                    <a-tooltip :title="'$'+data.currencies[0].usdEstimateBalance">
+                                        ${{ getBit(data.currencies[0].usdEstimateBalance) }}
                                     </a-tooltip>
                                 </div>
                             </div>
@@ -53,23 +53,23 @@
             </div>
             <!-- 显示搜索结果列表 -->
             <div class="search-list" v-else>
-                <div class="item-detail" v-for="(data, idx) in searchList" :key="idx" @click="selectCurrency(data)">
+                <div class="item-detail" v-for="(data, idx) in searchList" :key="idx" @click="selectCurrency(data.currencies)">
                     <div class="left">
-                        <img class="icon-currency" :src="data.iconPath" />
+                        <img class="icon-currency" :src="data.currencies[0].iconPath" />
                         <div class="currency-info">
-                            <div class="name">{{ data.currencyCode == 'USD' ? 'USD' : data.tokenSymbol }}</div>
-                            <div class="desc">{{ data.currencyName }}</div>
+                            <div class="name">{{ data.currencies[0].currencyCode == 'USD' ? 'USD' : data.currencies[0].tokenSymbol }}</div>
+                            <div class="desc">{{ data.currencies[0].currencyName }}</div>
                         </div>
                     </div>
                     <div class="right">
                         <div class="num">
-                            <a-tooltip :title="data.balance">
-                                {{ getBit(data.balance) }}
+                            <a-tooltip :title="data.currencies[0].balance">
+                                {{ getBit(data.currencies[0].balance) }}
                             </a-tooltip>
                         </div>
-                        <div class="amount" v-if="data.currencyType == 2">
-                            <a-tooltip :title="'$'+data.usdEstimateBalance">
-                                ${{ getBit(data.usdEstimateBalance) }}
+                        <div class="amount" v-if="data.currencies[0].currencyType == 2">
+                            <a-tooltip :title="'$'+data.currencies[0].usdEstimateBalance">
+                                ${{ getBit(data.currencies[0].usdEstimateBalance) }}
                             </a-tooltip>
                         </div>
                     </div>

src/view/components/currency-select.vue

@@ -0,0 +1,122 @@
+<!-- 货币列表 -->
+<template>
+    <div class="list-item" v-for="(item, index) in props.list" :key="index">
+        <div class="item-title">
+            <img class="icon" :src="item.chainInfo.iconPath" />
+            {{item.chainInfo.chainName}}
+        </div>
+        <div class="item-detail" @click="selectCurrency(item)">
+            <div class="left">
+                <img class="icon-currency" :src="item.iconPath" />
+                <div class="currency-info">
+                    <div class="name">{{ item.currencyCode == 'USD' ? 'USD' : item.tokenSymbol }}</div>
+                    <div class="desc">{{ item.currencyCode == 'USD' ? 'Paypal' : item.currencyName }}</div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="num">
+                    <a-tooltip :title="item.balance">
+                        {{ getBit(item.balance) }}
+                    </a-tooltip>
+                </div>
+                <div class="amount" v-if="item.currencyType == 2">
+                    <a-tooltip :title="'$'+item.usdEstimateBalance">
+                        ${{ getBit(item.usdEstimateBalance) }}
+                    </a-tooltip>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { getBit } from "@/uilts/help";
+
+let props = defineProps({
+    list: {
+        type: Array,
+        default: [],
+    }
+})
+let emits = defineEmits(['selectCurrency']);
+let selectCurrency = (params) => {
+    emits('selectCurrency', params);
+}
+</script>
+
+<style scoped lang="scss">
+.list-item {
+    .item-title {
+        display: flex;
+        align-items: center;
+        height: 42px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        background: #f7f7f7;
+        font-weight: 500;
+        font-size: 14px;
+        color: #a2a2a2;
+
+        .icon {
+            width: 24px;
+            height: 24px;
+            margin-right: 6px;
+        }
+    }
+    .item-detail {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 20px;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        .left {
+            display: flex;
+
+            .icon-currency {
+                width: 24px;
+                height: 24px;
+                margin-right: 12px;
+            }
+
+            .currency-info {
+                .name {
+                    font-weight: 500;
+                    font-size: 15px;
+                    margin-bottom: 5px;
+                }
+
+                .desc {
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #a2a2a2;
+                }
+            }
+        }
+
+        .right {
+            text-align: right;
+            max-width: calc(100% - 150px);
+            
+            .num, .amount {
+                word-break: break-all;
+            }
+
+            .num {
+                font-weight: 500;
+                font-size: 15px;
+                margin-bottom: 5px;
+            }
+
+            .amount {
+                font-weight: 400;
+                font-size: 12px;
+                color: #a2a2a2;
+            }
+        }
+    }
+}
+</style>

src/view/iframe/publish/components/top-up.vue

@@ -14,16 +14,18 @@
                         />{{currentCurrencyInfo.tokenSymbol}}
                     </div>  
                 </div>
-                <div class="item">
-                    <div class="label">
-                        Deposit network
-                    </div>
+                <div class="item" :class="{ position: props.list.length > 1 }" @mouseover="showCurrencyLayer" @mouseout="hideCurrencyLayer">
+                    <div class="label">Deposit network</div>
                     <div class="content">
-                        <img
-                            class="icon"
-                            :src="require('@/assets/svg/icon-BNB.svg')"
-                        />
-                        BNB Smart Chain (BEP20)
+                        <img class="icon" :src="currentCurrencyInfo.chainInfo.iconPath" />
+                        {{ currentCurrencyInfo.chainInfo.chainName }}
+                        <img v-if="props.list.length > 1" class="down" :src=" require('@/assets/svg/icon-botton-up.svg') " />
+                    </div>
+                    <div class="currency-pop-select" v-show="showCurrencySelect">
+                        <currency-select
+                            :list="props.list"
+                            @selectCurrency="selectCurrency">
+                        </currency-select>
                     </div>
                 </div>
             </div>
@@ -47,13 +49,14 @@
 
 <script setup>
 /* eslint-disable */
-import { defineProps, defineEmits, onMounted, ref } from "vue";
+import { defineProps, defineEmits, onMounted, ref, watch } from "vue";
 import { getTokenRechargeAddress } from "@/http/pay";
 import { ElMessage } from 'element-plus'
+import currencySelect from "@/view/components/currency-select.vue";
 
 let QRCode = require('qrcode')
 let ClipboardJS = require('clipboard')
-
+let showCurrencySelect = ref(false);
 let tokenRechargeAddress = ref('');
 
 const props = defineProps({
@@ -66,7 +69,11 @@ const props = defineProps({
     asyncIng: {
         type: Boolean,
         default: false
-    }
+    },
+    list: {
+        type: Array,
+        default: []
+    },
 })
 
 const emits = defineEmits(['doneHandle']);
@@ -117,6 +124,20 @@ const copyToken = () => {
     });
 }
 
+const selectCurrency = (params) => {
+    showCurrencySelect.value = false;
+    emits('selectCurrency', params, false);
+}
+
+const showCurrencyLayer = () => {
+    if (props.list.length > 1) {
+        showCurrencySelect.value = true;
+    }
+}
+
+const hideCurrencyLayer = () => {
+    showCurrencySelect.value = false;
+}
 
 const doneHandle = () => {
     emits('topUpDone', {});
@@ -140,7 +161,14 @@ const getTokenAddress = () => {
 
 onMounted(() => {
     getTokenAddress();
-}) 
+})
+
+watch(
+    () => props.currentCurrencyInfo,
+    (newVal) => {
+        if (newVal) getTokenAddress();
+    }
+)
 
 </script>
 
@@ -153,7 +181,6 @@ onMounted(() => {
     position: relative;
     .content-wrapper {
         height: calc(100% - 60px);
-        overflow-y: scroll;
         .top {
             width: 100%;
             display: flex;
@@ -168,6 +195,7 @@ onMounted(() => {
                 }
 
                 .content {
+                    position: relative;
                     height: 44px;
                     width: 100%;
                     border-radius: 8px;
@@ -183,8 +211,28 @@ onMounted(() => {
                         height: 20px;
                         margin-right: 6px;
                     }
+                    .down {
+                        position: absolute;
+                        right: 10px;
+                        width: 12px;
+                    }
+                }
+                &.position {
+                    position: relative;
+                    cursor: pointer;
+                    .currency-pop-select {
+                        position: absolute;
+                        width: 375px;
+                        max-height: 480px;
+                        top: 66px;
+                        right: 0px;
+                        z-index: 1000;
+                        box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
+                        background-color: #fff;
+                        border-radius: 20px;
+                        overflow-y: scroll;
+                    }
                 }
-
             }
         }
         .qrcode-wrapper {

src/view/iframe/publish/components/top-up2.vue

@@ -10,14 +10,18 @@
                 />{{currentCurrencyInfo.tokenSymbol}}
             </div>
         </div>
-        <div class="item">
+        <div class="item" :class="{ position: props.list.length > 1 }" @mouseover="showCurrencyLayer" @mouseout="hideCurrencyLayer">
             <div class="token-l">Network</div>
             <div class="token-r">
-                <img
-                    class="icon"
-                    :src="require('@/assets/svg/icon-BNB.svg')"
-                />
-                BNB Smart Chain (BEP20)
+                <img class="icon" :src="currentCurrencyInfo.chainInfo.iconPath" />
+                {{ currentCurrencyInfo.chainInfo.chainName }}
+                <img v-if="props.list.length > 1" class="down" :src=" require('@/assets/svg/icon-botton-up.svg') " />
+            </div>
+            <div class="currency-pop-select" v-show="showCurrencySelect">
+                <currency-select
+                    :list="props.list"
+                    @selectCurrency="selectCurrency">
+                </currency-select>
             </div>
         </div>
         <div class="item none">
@@ -38,15 +42,16 @@
 
 <script setup>
 /* eslint-disable */
-import { defineProps, defineEmits, onMounted, ref } from "vue";
+import { defineProps, defineEmits, onMounted, ref, watch } from "vue";
 import { getTokenRechargeAddress } from "@/http/pay";
 import { ElMessage } from 'element-plus'
+import currencySelect from "@/view/components/currency-select.vue";
 
 let QRCode = require('qrcode')
 let ClipboardJS = require('clipboard')
 
 let tokenRechargeAddress = ref('');
-
+let showCurrencySelect = ref(false);
 const props = defineProps({
     currentCurrencyInfo: {
         type: Object,
@@ -57,10 +62,14 @@ const props = defineProps({
     asyncIng: {
         type: Boolean,
         default: false
-    }
+    },
+    list: {
+        type: Array,
+        default: []
+    },
 })
 
-const emits = defineEmits(['doneHandle']);
+const emits = defineEmits(['doneHandle', 'selectCurrency']);
 
 const createQRCode = (str) => {
     var canvas = document.getElementById('canvas')
@@ -107,6 +116,20 @@ const copyToken = () => {
     });
 }
 
+const selectCurrency = (params) => {
+    showCurrencySelect.value = false;
+    emits('selectCurrency', params, false);
+}
+
+const showCurrencyLayer = () => {
+    if (props.list.length > 1) {
+        showCurrencySelect.value = true;
+    }
+}
+
+const hideCurrencyLayer = () => {
+    showCurrencySelect.value = false;
+}
 
 const doneHandle = () => {
     emits('topUpDone', {});
@@ -130,7 +153,14 @@ const getTokenAddress = () => {
 
 onMounted(() => {
     getTokenAddress();
-}) 
+})
+
+watch(
+    () => props.currentCurrencyInfo,
+    (newVal) => {
+        if (newVal) getTokenAddress();
+    }
+)
 
 </script>
 
@@ -158,6 +188,10 @@ onMounted(() => {
         .token-r {
             font-size: 16px;
             font-weight: 500;
+            .down {
+                width: 9px;
+                margin-left: 4px;
+            }
         }
         img {
             width: 20px;
@@ -165,6 +199,22 @@ onMounted(() => {
             vertical-align: middle;
             margin-right: 6px;
         }
+        &.position {
+            position: relative;
+            cursor: pointer;
+            .currency-pop-select {
+                position: absolute;
+                width: 375px;
+                max-height: 480px;
+                top: 36px;
+                right: 0px;
+                z-index: 1000;
+                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
+                background-color: #fff;
+                border-radius: 20px;
+                overflow-y: scroll;
+            }
+        }
     }
     .desc {
         color: #A9A9A9;

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

@@ -5,8 +5,8 @@
                 height: dialogHeight + 'px',
                 width: showComType != 'preview' ? '600px' : '880px'}">   
             <div class="pop-mask"  
-                v-show="showCurrencyPop" 
-                @click.stop="showCurrencyPop = false"></div>
+                v-show="showCurrencyPop || showCurrencySelect" 
+                @click.stop="showCurrencyPop = false; showCurrencySelect=false"></div>
 
             <!-- 头部 -->
             <div class="head">
@@ -53,6 +53,8 @@
                 <top-up v-if="showComType == 'topUp'" 
                     :asyncIng="asyncIng"
                     :currentCurrencyInfo="tempCurrentCurrencyInfo"
+                    :list="tempCurrentCurrencyList"
+                    @selectCurrency="selectCurrencyAfter"
                     @topUpDone="topUpDone"></top-up>
 
                 <!-- 表单填写容器 -->
@@ -65,6 +67,13 @@
                             @selectCurrency="selectCurrency"
                             @setCurrencyList="setCurrentCurrencyInfo"></currency-list>
                     </div>
+                    <div class="currency-pop-select" v-show="showCurrencySelect">
+                        <currency-select 
+                            ref="currencySelectDom"
+                            :list="tempCurrentCurrencyList"
+                            @selectCurrency="selectCurrencyAfter">
+                        </currency-select>
+                    </div>
 
                     <div class="left" v-if="showComType != 'preview'">
                         <div class="gift-pack-wrapper">
@@ -365,6 +374,8 @@
                                         <top-up2
                                             :asyncIng="asyncIng"
                                             :currentCurrencyInfo="tempCurrentCurrencyInfo"
+                                            :list="tempCurrentCurrencyList"
+                                            @selectCurrency="selectCurrencyAfter"
                                             @topUpDone="topUpDone">
                                         </top-up2>
                                         <div class="card-title">
@@ -452,7 +463,7 @@ import {create, all} from "mathjs";
 
 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";
@@ -467,6 +478,7 @@ const math = create(all, config);
 
 //临时货币信息
 let tempCurrentCurrencyInfo = ref({});
+let tempCurrentCurrencyList = ref([]);
 
 let paypalClientId = ref("");
 let payConfig = ref({});
@@ -518,6 +530,7 @@ let showMessageBox = ref(false);
 
 // 展示货币列表pop
 let showCurrencyPop = ref(false);
+let showCurrencySelect = ref(false);
 
 // 展示更多按钮下的选项
 let showMoreOption = ref(false);
@@ -767,24 +780,40 @@ const confirm = () => {
  * 货币列表-选中货币
  */
 const selectCurrency = (params) => {
+    tempCurrentCurrencyList.value = params;
+    depositGuide.value = false;
+    if (params.length > 1) {
+        showCurrencyPop.value = false;
+        showCurrencySelect.value = true;
+    } else {
+        selectCurrencyAfter(params[0])
+    }
+};
+
+const selectCurrencyAfter = (params, openWindow = true) => {
     tempCurrentCurrencyInfo.value = params;
     depositGuide.value = false;
-    if(params.currencyCode != "USD" && params.balance < params.minAmount) {
+    showCurrencySelect.value = false;
+    currentCurrencyInfo.value = params;
+    setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
+    if (openWindow === false) {
+        return
+    };
+    if (params.currencyCode != "USD" && params.balance < params.minAmount) {
         let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
         messageBoxBlock({
             title: `Whether to deposit ${tokenSymbol}`,
             content: `Insufficient ${tokenSymbol} balance`,
         });
     } else {
-        currentCurrencyInfo.value = params;
-        setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
+        setCurrentCurrencyListInfo(tempCurrentCurrencyList.value);
         showCurrencyPop.value = false;
         finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
         calcDomZoom();
         resetFormIpt();
         onIptSetErrorTxt();
     }
-};
+}
 
 const calcDomZoom = () => {
     nextTick(() => {
@@ -806,6 +835,10 @@ const setLocalSelectCurrencyInfo = (params = {}) => {
     setChromeStorage({ selectCurrencyInfo : JSON.stringify(params)})    
 }
 
+const setCurrentCurrencyListInfo = (params = {}) => {
+    setChromeStorage({ selectCurrencyList : JSON.stringify(params)})    
+}
+
 /**
  * 获取完货币列表
  */
@@ -833,8 +866,10 @@ const messageBoxConfirm = () => {
 const messageBoxCancel = () => {
     currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
     setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
+    setCurrentCurrencyListInfo(tempCurrentCurrencyList.value);
     showMessageBox.value = false;
     showCurrencyPop.value = false;
+    showCurrencySelect.value = false;
     calcDomZoom();
     resetFormIpt();
     onIptSetErrorTxt();
@@ -860,6 +895,7 @@ const topUpDone = () => {
     depositGuide.value = false;
     asyncIng.value = false;
     showCurrencyPop.value = false;
+    showCurrencySelect.value = false;
     showComType.value = 'default';
     calcDomZoom();
     onIptSetErrorTxt()
@@ -1001,6 +1037,7 @@ const initParams = () => {
     submitIng.value = false;
     isBack.value = false;
     showCurrencyPop.value = false;
+    showCurrencySelect.value = false;
     openAntiBot.value = false;
 
     tempCurrentCurrencyInfo.value = {};
@@ -1456,6 +1493,10 @@ const getCurrencyInfo = async () => {
                 });
             }
         })
+
+        getChromeStorage('selectCurrencyList', (res) => {
+            tempCurrentCurrencyList.value = res;
+        })
     }
 }
 
@@ -1621,6 +1662,19 @@ onMounted(() => {
                 border-radius: 20px;
                 overflow-y: scroll;
             }
+            
+            .currency-pop-select {
+                position: absolute;
+                width: 375px;
+                max-height: 480px;
+                top: 85px;
+                left: 88px;
+                z-index: 1000;
+                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
+                background-color: #fff;
+                border-radius: 20px;
+                overflow-y: scroll;
+            }
 
             .left,
             .right {

src/view/popup/top-up/home.vue

@@ -2,6 +2,16 @@
     <!-- 公共组件 -->
     <div class="info">
         <v-head :title="'Deposit'" :show_more="true" :show_help="false" :back_url="'/'"></v-head>
+        <template v-if="showCurrencySelect">
+            <div class="selectDiv">
+                <currency-select 
+                    ref="currencySelectDom"
+                    :list="tempCurrentCurrencyList"
+                    @selectCurrency="selectCurrencyAfter">
+                </currency-select>
+            </div>
+            <div class="selectBg" @click="showCurrencySelect = false"></div>
+        </template>
         <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency" :page="'top-up'"></currency-list>
     </div>
 
@@ -10,20 +20,33 @@
 <script setup>
 import VHead from '@/view/popup/components/head.vue'
 import CurrencyList from "@/view/components/currency-list.vue";
-import { inject, onMounted } from 'vue'
+import currencySelect from "@/view/components/currency-select.vue";
+import { inject, onMounted, ref } from 'vue'
 import router from "@/router/popup.js";
 import Report from "@/log-center/log";
 
 let top_up_info = inject('top_up_info')
+let showCurrencySelect = ref(false)
+let tempCurrentCurrencyList = ref([])
 
-function selectCurrency(_params) {
+function selectCurrency(params) {
+    tempCurrentCurrencyList.value = params;
+    if (params.length > 1) {
+        showCurrencySelect.value = true;
+    } else {
+        selectCurrencyAfter(params[0])
+    }
+}
+function selectCurrencyAfter(_params) {
     top_up_info.token = _params.currencyName || ''
     top_up_info.token_chain = _params.tokenChain 
+    top_up_info.chainInfo = _params.chainInfo
     // top_up_info.token_chain = 'BNB Smart Chain (BEP20)'
     top_up_info.token_symbol = _params.tokenSymbol || ''
     top_up_info.currency_code = _params.currencyCode
     top_up_info.icon_token = _params.iconPath || ''
     top_up_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+    showCurrencySelect.value = false
     router.push({ path: '/top-up/info'});
 }
 
@@ -41,4 +64,25 @@ onMounted(() => {
     height: 100%;
     overflow: hidden;
 }
+.selectDiv {
+    position: absolute;
+    z-index: 1000;
+    width: 375px;
+    max-height: 480px;
+    padding-bottom: 30px;
+    left: 0;
+    bottom: 0;
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    overflow-y: scroll;
+}
+.selectBg {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba($color: #000000, $alpha: 0.6);
+}
 </style>

src/view/popup/top-up/info.vue

@@ -18,9 +18,9 @@
                 <div class="net">
                     <div class="title">NetWork</div>
                     <div class="box">
-                        <img :src="top_up_info.icon_net" alt="">
+                        <img :src="top_up_info.chainInfo.iconPath" alt="">
                         <!-- <span>{{ top_up_info.token_chain }}</span> -->
-                        <span>BNB Smart Chain (BEP20)</span>
+                        <span>{{top_up_info.chainInfo.chainName}}</span>
                     </div>
                 </div>
             </div>

src/view/popup/withdraw/home.vue

@@ -2,6 +2,16 @@
     <!-- 公共组件 -->
     <div class="info">
         <v-head :title="'Withdraw'" :show_more="true" :show_help="true" :back_url="'/'"></v-head>
+        <template v-if="showCurrencySelect">
+            <div class="selectDiv">
+                <currency-select 
+                    ref="currencySelectDom"
+                    :list="tempCurrentCurrencyList"
+                    @selectCurrency="selectCurrencyAfter">
+                </currency-select>
+            </div>
+            <div class="selectBg" @click="showCurrencySelect = false"></div>
+        </template>
         <currency-list style="height: calc(100% - 48px);" :filterEmptyBalance="true" @selectCurrency="selectCurrency" ></currency-list>
     </div>
 
@@ -10,18 +20,33 @@
 <script setup>
 import VHead from '@/view/popup/components/head.vue'
 import CurrencyList from "@/view/components/currency-list.vue";
+import currencySelect from "@/view/components/currency-select.vue";
 import router from "@/router/popup.js";
 import Report from "@/log-center/log";
-import { inject, onMounted } from 'vue'
+import { inject, onMounted, ref } from 'vue'
+
 let withdraw_info = inject('withdraw_info')
+let showCurrencySelect = ref(false)
+let tempCurrentCurrencyList = ref([])
 
-function selectCurrency(_params) {
+function selectCurrency(params) {
+    tempCurrentCurrencyList.value = params;
+    if (params.length > 1) {
+        showCurrencySelect.value = true;
+    } else {
+        selectCurrencyAfter(params[0])
+    }
+}
 
+function selectCurrencyAfter(_params) {
     if (_params.currencyCode == 'USD') {
         withdraw_info.currency_code = _params.currencyCode
+        withdraw_info.chainInfo = _params.chainInfo
+        showCurrencySelect.value = false
         router.push('/withdraw/paypal')
     } else {
         withdraw_info.source = 'home'
+        withdraw_info.chainInfo = _params.chainInfo
         withdraw_info.balance = _params.balance
         withdraw_info.token_symbol = _params.tokenSymbol || ''
         withdraw_info.currency_name = _params.currencyName || ''
@@ -30,9 +55,9 @@ function selectCurrency(_params) {
         withdraw_info.currency_code = _params.currencyCode
         withdraw_info.icon_token = _params.iconPath || ''
         withdraw_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+        showCurrencySelect.value = false
         router.push('/withdraw/info')
     }
-
 }
 
 onMounted(() => {
@@ -49,4 +74,25 @@ onMounted(() => {
     height: 100%;
     overflow: hidden;
 }
+.selectDiv {
+    position: absolute;
+    z-index: 1000;
+    width: 375px;
+    max-height: 480px;
+    padding-bottom: 30px;
+    left: 0;
+    bottom: 0;
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    overflow-y: scroll;
+}
+.selectBg {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba($color: #000000, $alpha: 0.6);
+}
 </style>

src/view/popup/withdraw/info.vue

@@ -16,9 +16,9 @@
         <div class="net">
           <div class="title">Withdrawal Network</div>
           <div class="box">
-            <img :src="withdraw_info.icon_net" alt="">
+            <img :src="withdraw_info.chainInfo.iconPath" alt="">
             <!-- <span>{{ withdraw_info.token_chain }}</span> -->
-            <span>BNB Smart Chain (BEP20)</span>
+            <span>{{withdraw_info.chainInfo.chainName}}</span>
             <!-- <img :src="require('@/assets/svg/icon-botton-up.svg')" alt="" class="up"> -->
           </div>
         </div>