ucard-person-app-front/src/views/cards.vue

<template>
    <div>
        <div class="add-apply" @click="addApply" v-if="kycList.length > 0 && cardList.length > 0 ">{{ t('cards.p10') }}</div>
        <FirstApply v-if="cardList.length == 0" />
        <VirtualCard v-else />
    </div>
</template>

<script setup lang="ts">
import VirtualCard from '@/components/VirtualCard.vue'
import FirstApply from '@/components/FirstApply.vue'
import { ucardApi } from '@/api/ucard'
import type { CardInfo } from '@/api/ucard'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/use-user-store'
const userStore = useUserStore()
const router = useRouter()
const { t } = useI18n()
const globalStore = useGlobalStore()
const cardList = ref<CardInfo[]>([])
const kycList = ref<CardInfo[]>([])

const getCardList = async () => {
    globalStore.setFullScreenLoading(true)
    try {
        const [response1, response2] = await Promise.all([
            ucardApi.cardList({ page: { current: 1, row: 10 } }),
            ucardApi.cardKycTypesList({ page: { current: 1, row: 10 } }),
        ])

        const mergedMap = new Map()

        let [data1, data2] = await Promise.all([response1.data, response2.data])
        // data2 = data2.map((i) => {
        //     return { ...i, kycStatus: 1,applyStatus :null }
        // })
        if (data1.length > 0) {
            data1.forEach((item: any) => {
                mergedMap.set(item.cardTypeId, { ...item })
            })
        }
        if (data2.length > 0) {
            data2.forEach((item: any) => {
                const existing = mergedMap.get(item.cardTypeId) || {}
                const { id, ...rest } = existing
                mergedMap.set(item.cardTypeId, { ...rest, ...item, id })
            })
        }
        const mergedArray = Array.from(mergedMap.values())
        let a = mergedArray.map((i) => {
            if (i.cardNo) {
                i.isOk = true
            } else {
                i.isOk = false
                i.cardNo = '**** **** **** ****'
            }
            return i
        })
        // 待申请
        let b = mergedArray.filter((i) => {
            return i.kycStatus == null
        })
        // 已申请-银行卡
        let c = a.filter((i) => {
            return i.kycStatus != null
        })
        cardList.value = c
        kycList.value = b
        console.log(c,'cardList');
        console.log(b,'kycList');

        userStore.saveUserCard(cardList.value)
    } catch (error) {
    } finally {
        globalStore.setFullScreenLoading(false)
    }
}

const addApply = () => {
    router.push('/select/card')
}

onMounted(async () => {
    getCardList()
})
</script>

<style scoped lang="scss">
.add-apply {
    position: fixed;
    top: 14px;
    right: 10px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 100px;
    padding: 0 10px;
    height: 30px;
    background: #ea002a;
    border-radius: 100px;
    font-size: 14px;
    color: #ffffff;
}
</style>