de-net-website/src/components/currency-list.vue

<template>
    <template v-if="!isSelect">
        <div class="header">
            <input
                class="input" 
                @input="onInput"
                v-model="keywords"
                placeholder="Search name" />
            <img
                class="icon-clear"
                src="../static/img/icon-clear-search.svg" 
                v-if="keywords"
                @click="clearIpt" >
        </div>
        <div class="list-wrapper" :class="{min: showSearch}">
            <template v-if="!showSearch">
                <div
                    class="list-item"
                    :key="index"
                    v-for="(item, index) in currencyInfoList">
                    <div
                        class="item-title"
                        v-if="item.data.length">
                        <template v-if="item.type == 1">
                            <img class="icon" src="../static/img/icon-currency-category-01.svg" />
                            <span>Cash</span>
                        </template>
                        <template v-else>
                            <img class="icon" src="../static/img/icon-currency-category-02.svg" />
                            <span>Crypto</span>
                        </template>
                    </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.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>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no-data" v-if="show_empty">
                    Not found
                </div>
            </template>
            <template v-else>
                <div
                    class="item-detail"
                    :key="idx"
                    v-for="(data, idx) in searchList"
                    @click="selectCurrency(data)">
                    <div class="left">
                        <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].currencyName }}</div>
                        </div>
                    </div>
                </div>
                <div class="no-data" v-if="!searchList.length">
                    Not found
                </div>
            </template>
        </div>
    </template>
    <template v-else>
        <div class="list-wrapper">
            <div class="list-item">
                <div
                    :key="idx"
                    v-for="(data, idx) in isSelectData"
                    @click="selectItem(data)">
                    <div class="item-title">
                        <img class="icon" :src="data.chainInfo.iconPath" />
                        {{data.chainInfo.chainName}}
                    </div>
                    <div class="item-detail">
                        <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>
                </div>
            </div>
        </div>
    </template>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, defineEmits } from 'vue';
import Api from '../static/http/api';
import { postRequest } from '../static/http';
import { debounce } from '../static/utils';

const keywords = ref('');
const showSearch = ref(false);
const currencyInfoList = ref([]);
const searchList = ref([]);
const show_empty = ref(false);
const isSelect = ref(false);
const isSelectData = ref(null);
const listReqParams = {
    params: {
        pageNum: 1,
        pageSize: 100,
    },
    loadMore: false,
};
const emits = defineEmits(['selectCurrencyItem'])

const clearIpt = () => {
    keywords.value = '';
    showSearch.value = false;
    searchList.value = [];
}
const onInput = (val: any) => {
    console.log(keywords.value);
    if (keywords.value) {
        showSearch.value = true;
        searchCurrency(keywords.value);
    } else {
        showSearch.value = false;
        searchList.value = [];
    }
}

const searchCurrency = debounce(function (searchWords: any) {
    postRequest(Api.searchCurrencyInfo, {
        params: {
            pageNum: 1,
            pageSize: 100,
            searchWords,
            filterFiatCurrency: false
        }
    }).then(res => {
        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) {
                    searchList.value = list.data;
                } else {
                    searchList.value = [];
                }
            } else {
                searchList.value = [];
            }
        }
    })
}, 500)

const getCurrencyInfoList = () => {
    postRequest(Api.getCurrencyInfo, {
        params: {
            pageNum: listReqParams.params.pageNum,
            pageSize: listReqParams.params.pageSize,
            filterFiatCurrency: true,
            filterEmptyBalance: false
        }
    }).then(res => {
        if (res.code == 0) {
            let resData = res.data;
            if (resData && resData.currencyCategories.length) {
                if (listReqParams.params.pageNum < 2) {
                    currencyInfoList.value = res.data.currencyCategories;   
                    if(resData.currencyCategories.length == 1 && (!resData.currencyCategories[0]['data'] || !resData.currencyCategories[0]['data'].length)) {
                        show_empty.value = true
                    }
                } else {
                    let data = currencyInfoList.value;
                    let currencyCategories = resData.currencyCategories;
                    data = data.concat(currencyCategories);
                    currencyInfoList.value = data;
                }
                listReqParams.loadMore = false;
            } else {
                show_empty.value = true
            }
        }
    })
}

const selectItem = (data: any) => {
    emits('selectCurrencyItem', data);
}

const selectCurrency = (data: any) => {
    if (data.currencies.length > 1) {
        isSelect.value = true;
        isSelectData.value = data.currencies;
    } else {
        emits('selectCurrencyItem', data.currencies[0]);
    }
}

onBeforeMount(() => {
    getCurrencyInfoList()
})

</script>

<style lang="less" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background: #F7F7F7;
    .input {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: #f1f1f1;
        border-radius: 110px;
        box-sizing: border-box;
        border: none;
        outline: none;
        padding: 10px 80px 10px 22px;
        color: #adadad;
    }
    input::placeholder {
        color: #adadad;
    }
    .icon-clear {
        position: absolute;
        right: 6%;
        cursor: pointer;
    }
}

.list-wrapper {
    overflow-y: auto;
    max-height: calc(420px - 60px);
    &.min {
        min-height: 200px;
    }
    .list-item {
        .item-title {
            display: flex;
            align-items: center;
            height: 42px;
            padding: 0 10px;
            box-sizing: border-box;
            background: #fafafa;
            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;
                margin-top: 4px;
            }

            .currency-info {
                .name {
                    font-weight: 500;
                    font-size: 15px;
                    margin-bottom: 5px;
                    word-break: break-all;
                }

                .desc {
                    font-weight: 400;
                    font-size: 12px;
                    color: #a2a2a2;
                }
            }
        }
    }
    .no-data {
        font-weight: 500;
        font-size: 22px;
        color: #BBBBBB;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>