ucard-person-app-front/pages/card/select.vue

<template>
    <cwg-page-wrapper>
        <view class="page">
            <view class="select-card-desc">{{ t('pages.card.select') }}</view>
            <view class="card-types-container">
                <swiper class="card-types-wrapper" :circular="false" :duration="300" :current="currentCardIndex"
                    @change="handleSwiperChange">
                    <swiper-item v-for="(type, index) in cardTypes" :key="index" class="card-box">
                        <image src="/static/images/select-card-1.png" mode="aspectFit" />
                        <view class="card-info">
                            <view class="card-title">{{ type.cardName }}</view>
                            <view class="card-content">{{ type.cardDesc }}</view>
                            <view class="card-list">
                                <view class="card-item">
                                    <text class="label">{{ t('card.New.n6') }}</text>
                                    <text>{{ type.currency || 'USD' }}</text>
                                </view>
                                <view class="card-item">
                                    <text class="label">{{ t('card.New.n7') }}</text>
                                    <text>{{ type.rechargeMinQuota }} USD</text>
                                </view>
                                <view class="card-item">
                                    <text class="label">{{ t('card.New2.n8') }}</text>
                                    <text>{{ type.rechargeMaxQuota }} USD</text>
                                </view>
                                <view class="card-item">
                                    <text class="label">{{ t('card.New.n9') }}</text>
                                    <text>{{ type.rechargeFeeRate }} %</text>
                                </view>
                                <view class="card-item one">
                                    <text class="label">{{ t('card.New.n4') }}</text>
                                    <text>
                                        <text v-if="type.originalCardFee > type.cardFee" class="strike strike1">{{
                                            type.originalCardFee }}</text>
                                        <text class="strike1">{{ type.cardFee }} USD</text>
                                    </text>
                                </view>
                                <view class="card-item" v-if="isPromotionActive">
                                    <text class="k"></text>
                                    <text class="v strike1" v-t="'card.New3.p13'"></text>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="swiper-indicators" v-if="cardTypes.length > 1">
                    <view v-for="(card, index) in cardTypes" :key="card.id || index" class="indicator-dot"
                        :class="{ active: index === currentCardIndex }" @click="currentCardIndex = index"></view>
                </view>
            </view>
            <view class="fixed-btn">
                <view class="cwg-button">
                    <u-button type="primary" block @click="handleSubmit">{{ t('card.Btn.Next') }}</u-button>
                </view>
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import type { CardType } from '@/api/ucard'
import { useI18n } from 'vue-i18n'
import useRouter from '@/hooks/useRouter'
import useGlobalStore from '@/stores/use-global-store'
import { ucardApi } from '@/api/ucard'
const isPromotionActive = computed(() => {
    const now = new Date();
    return now <= new Date('2026-01-31T23:59:59');
})
const globalStore = useGlobalStore()
const router = useRouter()
const { t } = useI18n()
const cardTypes = ref<CardType[]>([])
const currentCardIndex = ref(0)

function handleSwiperChange(e: any) {
    const current = e.detail?.current ?? 0
    currentCardIndex.value = current
}

async function getCardTypes() {
    globalStore.setFullScreenLoading(true)
    try {
        const [response1, response2] = await Promise.all([
            ucardApi.cardTypesList(),
            ucardApi.applyList({
                page: { current: 1, row: 100 },
            }),
        ])
        const [data1, data2] = await Promise.all([response1.data, response2.data])

        const recordTypeIds = new Set(
            data2.map((item) => {
                if (item.status != 'fail' && item.status != 'cancel') {
                    return item.cardTypeId
                }
            }),
        )
        const result1 = data1
        const result2 = result1.filter((item) => !recordTypeIds.has(item.cardTypeId))
        // const result3 = result2.filter((item) => item.supportHolderRegin.includes(this.businessForm.country))
        cardTypes.value = [...result2]
        console.log(cardTypes.value, 1212);

        globalStore.setFullScreenLoading(false)
    } catch (error) {
        console.log(error)
        globalStore.setFullScreenLoading(false)
        cardTypes.value = []
    }
}

function handleSubmit() {
    const selectedCard = cardTypes.value[currentCardIndex.value]
    if (!selectedCard) {
        uni.showToast({
            title: t('cards.selectCard') || '请先选择卡片',
            icon: 'none'
        })
        return
    }
    router.push({
        path: '/pages/card/apply',
        query: {
            cardTypeId: selectedCard.cardTypeId,
            type: selectedCard.type,
        },
    })
}

onMounted(() => {
    getCardTypes()
})
</script>

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

.page {
    padding-bottom: px2rpx(100);
}

.select-card-desc {
    color: #474747;
    width: 100%;
    text-align: left;
    font-size: var(--font-size-16);
    line-height: px2rpx(24);
    margin-bottom: px2rpx(20);
}

.card-types-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: px2rpx(40);
}

.card-types-wrapper {
    width: 100%;
    height: px2rpx(600);
}

:deep(.swiper-item) {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.card-box {
    width: 100%;
    height: 100%;
    border-radius: px2rpx(20);
    // padding: px2rpx(16);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    overflow-y: auto;

    image {
        width: 100%;
        height: auto;
        max-height: px2rpx(200);
        flex-shrink: 0;
    }
}

.card-info {
    width: 100%;
    margin-top: px2rpx(16);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    margin: px2rpx(24) 0 px2rpx(12) 0;
    font-weight: 600;
    font-size: px2rpx(22);
    line-height: px2rpx(28);
    text-align: left;
    color: #1a1a1a;
}

.card-content {
    font-size: var(--font-size-16);
    color: #474747;
    margin: 0 0 px2rpx(26) 0;
    text-align: left;
    line-height: px2rpx(24);
}

.card-list {
    width: 100%;
    padding: px2rpx(12) 0;
    margin: 0;
    box-shadow: 0 4px 20px rgba(140, 145, 143, 0.194);
    border-radius: px2rpx(10);
    background: #fff;
}

.card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px2rpx(14);
    color: #1a1a1a;
    padding: px2rpx(12) px2rpx(24);
    transition: all 0.3s ease;
    position: relative;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    line-height: px2rpx(20);

    text {
        display: inline-block;
    }
}

.label {
    width: px2rpx(200);
    font-weight: 600;
    font-size: px2rpx(14);
    line-height: px2rpx(20);
    color: #8e8a8a;
}

.card-item:last-child {
    margin-bottom: 0;
}

.swiper-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: px2rpx(16);
    gap: px2rpx(8);
}

.indicator-dot {
    width: px2rpx(9);
    height: px2rpx(9);
    border-radius: 50%;
    background: var(--gray);
    transition: all 0.3s ease;

    &.active {
        background-color: var(--main-yellow);
        transform: scale(1.2);
    }
}

.card-list {
    .one {
        margin: px2rpx(12) px2rpx(24);
        padding: px2rpx(12) 0;
        border-top: 1px dashed #beb6b6;
        color: #329644;
        font-family: Roboto;
        font-size: px2rpx(28);
        font-style: normal;
        font-weight: 700;
        line-height: px2rpx(36);
        align-items: flex-end;

        .label {
            color: #343434;
            font-family: Roboto;
            font-size: px2rpx(16);
            font-style: normal;
            font-weight: 600;
            line-height: px2rpx(24);
            width: px2rpx(100);
        }

        .strike {
            display: inline-block;
            padding-right: px2rpx(12);
            text-decoration-line: line-through;
            text-decoration-color: #333;
            text-decoration-thickness: px2rpx(1);
            text-decoration-skip-ink: none;
            font-size: px2rpx(20);
        }


    }
}

.fixed-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: px2rpx(16);
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.strike1 {
    color: var(--main-yellow);
}
</style>