ucard-person-app-front/pages/wallet/balance.vue

<template>
    <cwg-page-wrapper>
        <view class="page">
            <view class="apply-card-footer">
                <cwg-load-more-wrapper :loading="loading" :finished="finished" @reach-bottom="loadMore">
                    <view v-if="cardList.length > 0">
                        <view class="kyc-list">
                            <view v-for="item in cardList" :key="item.id" class="kyc-item">
                                <view class="g">
                                    <view class="g-l">
                                        <view class="g-item">
                                            <view class="label a1 ellipsis">
                                                <text v-if="item.type == '1'" v-t="'card.Status.t16'"></text>
                                                <text v-if="item.type == '2'" v-t="'card.Status.t17'"></text>
                                                <text v-if="item.type == '3'" v-t="'card.Status.t18'"></text>
                                                <text v-if="item.type == '4'" v-t="'card.Status.t19'"></text>
                                                <text v-if="item.type == '5'" v-t="'card.Status.t20'"></text>
                                                <text v-if="item.type == '6'" v-t="'card.Status.t21'"></text>
                                            </view>
                                            <view class="status" :class="statusClass1(item.status)">
                                                <text v-if="item.status == '2'" v-t="'card.Status.t1'"></text>
                                                <text v-else-if="item.status == '3'" v-t="'card.Status.t2'"></text>
                                                <text v-else v-t="'card.Status.t3'"></text>
                                            </view>
                                        </view>
                                        <view class="g-item g-item1">
                                            <view v-t="'card.Form.f55'" class="label1 a2"></view>
                                            <view class="label a1">{{ item.amount }} USD</view>
                                        </view>
                                        <view class="g-item g-item1">
                                            <view v-t="'card.Form.f30'" class="label1 a2"></view>
                                            <view class="label a1">{{ item.fee }} USD</view>
                                        </view>
                                        <view class="g-item">
                                            <view class="label a3"></view>
                                            <view class="label a3">{{ item.addTime }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <cwg-empty-state v-if="cardList.length == 0" :title="t('empty-state.t1')"
                        :text="t('empty-state.c1')" />
                </cwg-load-more-wrapper>
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { showToast } from "@/utils/toast";
import { onLoad } from '@dcloudio/uni-app'
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
import { ucardApi } from "@/api/ucard";

const { t } = useI18n();
const router = useRouter();
onLoad((options) => {
    // id.value = options.id
    // type.value = options.type
})
const status: Record<string, string> = {
    success: t('card.Status.t6'),
    fail: t('card.Status.t7'),
    processing: t('card.Status.t3'),
    wait_process: t('card.Status.t3'),
    cancel: t('card.New2.p3'),
}
function statusClass1(status: string) {
    switch (status) {
        case 2:
            return 'status-default status-success'
        case 3:
            return 'status-default status-error'
        default:
            return 'status-default'
    }
}


// 分页字段
const page = ref(1)
const pageSize = 10

// 状态
const loading = ref(false)
const finished = ref(false)
const loadingInit = ref(true) // 控制首次加载避免闪 empty

const cardList = ref<CardInfo[]>([])
const search = ref({})
// 加载列表
async function getCardList(isLoadMore = false) {
    if (loading.value || finished.value) return
    loading.value = true

    try {
        const res = await ucardApi.getRecordPage({
            page: { current: page.value, row: pageSize }
        })

        const data = res.code === 200 ? res.data || [] : []

        if (isLoadMore) {
            cardList.value.push(...data)
        } else {
            cardList.value = data
        }

        // 判断是否还有更多
        if (data.length < pageSize) {
            finished.value = true
        }
    } catch (e) {
        console.error(e)
    } finally {
        loading.value = false
        loadingInit.value = false
    }
}

// 父组件触底触发
function loadMore() {
    console.log(234234);

    if (finished.value || loading.value) return
    page.value++
    getCardList(true)
}

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

<style scoped lang="scss">
@import "@/uni.scss";

.apply-card-footer {
    width: 100%;
}

.kyc-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: px2rpx(12);
    border-bottom: 1px solid var(--border, #333);
    font-size: px2rpx(16);
    background: var(--action-bg);
    border-radius: px2rpx(16);
    margin-bottom: px2rpx(16);
    border: 1px solid rgba(214, 255, 0, 0.2);
    box-shadow: 0 px2rpx(2) px2rpx(8) rgba(0, 0, 0, 0.08);
    gap: px2rpx(16);
}

.kyc-item:last-child {
    border-bottom: none;
}

.g {
    width: 100%;

    img {
        width: px2rpx(56);
        height: px2rpx(35);
    }

    .g-l {
        width: 100%;
        margin: 0;

        .g-item {
            margin-bottom: 0;
        }

        .g-item1 {
            justify-content: start;
            align-items: center;
        }

        .label {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 600;
            font-size: px2rpx(14);
            line-height: px2rpx(20);
            text-align: left;
            color: #1a1a1a;
            width: px2rpx(180);
        }

        .label1 {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 600;
            font-size: px2rpx(14);
            line-height: px2rpx(20);
            text-align: left;
            color: #1a1a1a;
            max-width: px2rpx(180);
            padding-right: px2rpx(10);
        }

        .a2 {
            color: #6b7280;
            font-size: px2rpx(12);
            line-height: px2rpx(16);
        }

        .a3 {
            color: #8e8a8a;
            font-family: Roboto;
            font-size: px2rpx(14);
            font-style: normal;
            font-weight: 400;
            line-height: px2rpx(36);
            letter-spacing: px2rpx(0.07);
            text-align: end;
        }
    }

    /* .g-l1 {
        margin-left: 0;
    } */
}
</style>