|
@@ -14,53 +14,45 @@
|
|
|
<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" v-if="!searchList.length">
|
|
@@ -73,10 +65,16 @@
|
|
|
|
|
|
<script setup>
|
|
|
/* eslint-disable */
|
|
|
-import { defineEmits, ref, onMounted } from "vue";
|
|
|
+import { defineEmits, ref, onMounted, defineProps } from "vue";
|
|
|
import {getCurrencyInfo, searchCurrencyInfo, syncChainTokenRechargeRecord} from "@/http/publishApi";
|
|
|
-import {debounce} from "@/uilts/help";
|
|
|
+import { debounce } from "@/uilts/help";
|
|
|
|
|
|
+const props = defineProps({
|
|
|
+ page: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ }
|
|
|
+})
|
|
|
let keywords = ref('');
|
|
|
let showSearch = ref(false);
|
|
|
let currencyInfoList = ref([]);
|
|
@@ -91,7 +89,7 @@ const selectCurrency = (params) => {
|
|
|
|
|
|
const onInput = (val) => {
|
|
|
console.log(keywords.value);
|
|
|
- if(keywords.value) {
|
|
|
+ if (keywords.value) {
|
|
|
showSearch.value = true;
|
|
|
searchCurrency(keywords.value);
|
|
|
} else {
|
|
@@ -102,7 +100,7 @@ const onInput = (val) => {
|
|
|
|
|
|
const clearIpt = () => {
|
|
|
keywords.value = '';
|
|
|
- showSearch.value = false;
|
|
|
+ showSearch.value = false;
|
|
|
searchList.value = [];
|
|
|
}
|
|
|
|
|
@@ -121,18 +119,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 = [];
|
|
@@ -149,19 +148,20 @@ 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 })
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
@@ -182,7 +182,7 @@ const asyncTokenRechRecord = (cb) => {
|
|
|
|
|
|
onMounted(() => {
|
|
|
getCurrencyInfoList();
|
|
|
-})
|
|
|
+})
|
|
|
|
|
|
</script>
|
|
|
|
|
@@ -201,6 +201,7 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
+
|
|
|
.input {
|
|
|
background: #f1f1f1;
|
|
|
border-radius: 110px;
|
|
@@ -229,9 +230,11 @@ onMounted(() => {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.list-wrapper {
|
|
|
height: calc(100% - 60px);
|
|
|
overflow-y: auto;
|
|
|
+
|
|
|
.list-item {
|
|
|
.item-title {
|
|
|
display: flex;
|
|
@@ -243,6 +246,7 @@ onMounted(() => {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #a2a2a2;
|
|
|
+
|
|
|
.icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
@@ -250,48 +254,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;
|