[edit][filterFiatCurrency]

src/view/components/currency-list.vue

@@ -3,62 +3,52 @@
     <div class="currency-list-wrapper">
         <div class="search-input-wrapper">
             <input class="input" v-model="keywords" @input="onInput" placeholder="Search name or paste address" />
-            <img :src="require('../../assets/svg/icon-form-refresh.svg')" class="icon"
-            @click="refresh">
-            <img :src="require('../../assets/svg/icon-clear-search.svg')" class="icon-clear"
-            v-if="keywords"
-            @click="clearIpt" >
+            <img :src="require('../../assets/svg/icon-form-refresh.svg')" class="icon" @click="refresh">
+            <img :src="require('../../assets/svg/icon-clear-search.svg')" class="icon-clear" v-if="keywords"
+                @click="clearIpt">
         </div>
         <div class="list-wrapper">
             <div class="page-list" v-if="!showSearch">
                 <div class="list-item" v-for="(item, index) in currencyInfoList" :key="index">
-                    <div class="item-title">
-                        <img
-                            class="icon"
-                            :src="item.type == 1 ? require('../../assets/svg/icon-currency-category-01.svg') : require('../../assets/svg/icon-currency-category-02.svg')"
-                        />
-                        {{item.type == 1 ? 'Legal Tender' : 'Token'}}
-                    </div>
-                    <div class="item-detail" 
-                        v-for="(data, idx) in item.data"
-                        :key="idx"
-                        @click="selectCurrency(data)">
-                        <div class="left">
-                            <img
-                                class="icon-currency"
-                                :src="data.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>
-                            </div>
+
+                    <template v-if="props.page != 'top-up' || item.type != 1">
+                        <div class="item-title">
+                            <img class="icon"
+                                :src="item.type == 1 ? require('../../assets/svg/icon-currency-category-01.svg') : require('../../assets/svg/icon-currency-category-02.svg')" />
+                            {{ item.type == 1 ? 'Legal Tender' : 'Token' }}
                         </div>
-                        <div class="right">
-                            <div class="num">{{data.balance}}</div>
-                            <div class="amount" v-if="data.currencyType == 2">${{data.usdEstimateBalance}}</div>
+                        <div class="item-detail" v-for="(data, idx) in item.data" :key="idx"
+                            @click="selectCurrency(data)">
+                            <div class="left">
+                                <img class="icon-currency" :src="data.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>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <div class="num">{{ data.balance }}</div>
+                                <div class="amount" v-if="data.currencyType == 2">${{ data.usdEstimateBalance }}</div>
+                            </div>
                         </div>
-                    </div>
+                    </template>
                 </div>
+
             </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)">
                     <div class="left">
-                        <img
-                            class="icon-currency"
-                            :src="data.iconPath"
-                        />
+                        <img class="icon-currency" :src="data.iconPath" />
                         <div class="currency-info">
-                            <div class="name">{{data.currencyName}}</div>
-                            <div class="desc">{{data.tokenSymbol}}</div>
+                            <div class="name">{{ data.currencyName }}</div>
+                            <div class="desc">{{ data.tokenSymbol }}</div>
                         </div>
                     </div>
                     <div class="right">
-                        <div class="num">{{data.balance}}</div>
-                        <div class="amount" v-if="data.currencyType == 2">${{data.usdEstimateBalance}}</div>
+                        <div class="num">{{ data.balance }}</div>
+                        <div class="amount" v-if="data.currencyType == 2">${{ data.usdEstimateBalance }}</div>
                     </div>
                 </div>
                 <div class="no-data">
@@ -71,10 +61,16 @@
 
 <script setup>
 /* eslint-disable */
-import { defineEmits, ref, onMounted } from "vue";
-import {getCurrencyInfo, searchCurrencyInfo} from "@/http/publishApi";
-import {debounce} from "@/uilts/help";
+import { defineEmits, ref, onMounted, defineProps } from "vue";
+import { getCurrencyInfo, searchCurrencyInfo } from "@/http/publishApi";
+import { debounce } from "@/uilts/help";
 
+const props = defineProps({
+    page: {
+        type: String,
+        default: '',
+    }
+})
 let keywords = ref('');
 let showSearch = ref(false);
 let currencyInfoList = ref([]);
@@ -88,7 +84,7 @@ const selectCurrency = (params) => {
 
 const onInput = (val) => {
     console.log(keywords.value);
-    if(keywords.value) {
+    if (keywords.value) {
         showSearch.value = true;
         searchCurrency(keywords.value);
     } else {
@@ -99,7 +95,7 @@ const onInput = (val) => {
 
 const clearIpt = () => {
     keywords.value = '';
-    showSearch.value = false;   
+    showSearch.value = false;
     searchList.value = [];
 }
 
@@ -110,18 +106,19 @@ const refresh = () => {
 /**
  * 搜索结果列表
  */
-const searchCurrency = debounce(function(searchWords) {
+const searchCurrency = debounce(function (searchWords) {
     searchCurrencyInfo({
         params: {
             pageNum: 1,
             pageSize: 100,
-            searchWords
+            searchWords,
+            filterFiatCurrency: props.page == 'top-up'
         }
     }).then(res => {
-        if(res.code == 0) {
-            if(res.data.currencyCategories && res.data.currencyCategories.length) {
+        if (res.code == 0) {
+            if (res.data.currencyCategories && res.data.currencyCategories.length) {
                 let list = res.data.currencyCategories[0];
-                if(list && list.data && list.data.length) {
+                if (list && list.data && list.data.length) {
                     searchList.value = list.data;
                 } else {
                     searchList.value = [];
@@ -138,24 +135,25 @@ const searchCurrency = debounce(function(searchWords) {
  */
 const getCurrencyInfoList = () => {
     let params = {
-        params : {
+        params: {
             pageNum: 1,
-            pageSize: 100
+            pageSize: 100,
+            filterFiatCurrency: props.page == 'top-up'
         }
     };
     getCurrencyInfo(params).then(res => {
-        if(res.code == 0) {
+        if (res.code == 0) {
             currencyInfoList.value = res.data.currencyCategories;
-            if(params.params.pageNum < 2) {
-                emits('setCurrencyList', {list: currencyInfoList.value})
+            if (params.params.pageNum < 2) {
+                emits('setCurrencyList', { list: currencyInfoList.value })
             }
         }
-    })  
+    })
 }
 
 onMounted(() => {
     getCurrencyInfoList();
-}) 
+})
 
 </script>
 
@@ -174,6 +172,7 @@ onMounted(() => {
         align-items: center;
         justify-content: space-between;
         position: relative;
+
         .input {
             background: #f1f1f1;
             border-radius: 110px;
@@ -196,9 +195,11 @@ onMounted(() => {
             cursor: pointer;
         }
     }
+
     .list-wrapper {
         height: calc(100% - 60px);
         overflow-y: auto;
+
         .list-item {
             .item-title {
                 display: flex;
@@ -210,6 +211,7 @@ onMounted(() => {
                 font-weight: 500;
                 font-size: 14px;
                 color: #a2a2a2;
+
                 .icon {
                     width: 24px;
                     height: 24px;
@@ -217,48 +219,56 @@ onMounted(() => {
                 }
             }
         }
+
         .item-detail {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 20px;
+            box-sizing: border-box;
+            cursor: pointer;
+
+            .left {
                 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;
-                        }
-                    }
+                .icon-currency {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 12px;
                 }
-                .right {
-                    text-align: right;
-                    .num {
+
+                .currency-info {
+                    .name {
                         font-weight: 500;
                         font-size: 15px;
                         margin-bottom: 5px;
                     }
-                    .amount {
+
+                    .desc {
                         font-weight: 400;
                         font-size: 12px;
                         color: #a2a2a2;
                     }
                 }
+            }
+
+            .right {
+                text-align: right;
+
+                .num {
+                    font-weight: 500;
+                    font-size: 15px;
+                    margin-bottom: 5px;
+                }
+
+                .amount {
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #a2a2a2;
+                }
+            }
         }
+
         .search-list {
             .no-data {
                 font-weight: 500;

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

@@ -2,7 +2,7 @@
     <!-- 公共组件 -->
     <div class="info">
         <v-head :title="'TopUp'" :show_more="true" :show_refresh="true" :back_url="'/'"></v-head>
-        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency"></currency-list>
+        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency" :page="'top-up'"></currency-list>
     </div>
 
 </template>

src/view/popup/withdraw/home.vue

@@ -2,7 +2,7 @@
     <!-- 公共组件 -->
     <div class="info">
         <v-head :title="'Withdraw'" :show_more="true" :back_url="'/'"></v-head>
-        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency"></currency-list>
+        <currency-list style="height: calc(100% - 48px);" @selectCurrency="selectCurrency" ></currency-list>
     </div>
 
 </template>