ucard-person-app-front/pages/wallet/global-list.vue

<template>
    <cwg-page-wrapper>
        <view class="bank-transaction-page">
            <view class="filters-container" :style="{ top: statusBarHeight + 53 + 'px' }">
                <view class="filter-item">
                    <text class="filter-label">{{ t('global.p25') }}</text>
                    <cwg-filter-select v-model="payoutCurrency" :options="currencyList" />
                </view>
                <view class="filter-item">
                    <text class="filter-label">{{ t('card.Form.f45') }}</text>
                    <cwg-filter-select v-model="statusFilterIndex" :options="statusOptions" />
                </view>
                <view class="filter-item">
                    <text class="filter-label">{{ t('card.Form.f43') }}</text>
                    <cwg-filter-picker v-model="dateFilter"></cwg-filter-picker>
                </view>
                <view class="reset-btn" @click="resetFilters">
                    <uni-icons type="loop" size="16" color="#2563eb" />
                </view>
            </view>
            <view class="content">
                <GlobalList ref="globalListRef" :cardNumber="cardNumber" :payoutCurrency="payoutCurrency"
                    :statusIndex="statusFilterIndex" :dateFilter="dateFilter" />
            </view>
        </view>
    </cwg-page-wrapper>

</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useI18n } from 'vue-i18n';
import useGlobalStore from '@/stores/use-global-store';
import GlobalList from './components/GlobalList.vue';
import { globalStatusText1 } from '@/utils/dataMap';
import useCardStore from "@/stores/use-card-store";
const cardStore = useCardStore();
const globalStore = useGlobalStore()
const statusBarHeight = computed(() => globalStore.statusBarHeight);
const { t } = useI18n();
const cardNumber = ref('');
onLoad((options) => {
    cardNumber.value = options.cardNumber || '';
});

const statusOptions = computed(() => {
    return globalStatusText1
});
const currencyList = computed(() => {
    const res = cardStore.currencyList.map(item => { return { label: item.payoutCurrency, value: item.payoutCurrency } });
    return res;
});
const payoutCurrency = ref(-1);
const statusFilterIndex = ref(-1);
const dateFilter = ref([]);

const resetFilters = () => {
    payoutCurrency.value = -1;
    statusFilterIndex.value = -1;
    dateFilter.value = [];
};
</script>

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

.page-wrapper {
    padding: 0;
    border: 0;
}

.bank-transaction-page {
    // background-color: #f9fafb;
}

.wallet-header {
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
}

/* Header */
.header {
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    padding: px2rpx(16);
    padding-bottom: px2rpx(20);
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: px2rpx(16);
}

.header-title {
    display: flex;
    align-items: center;
    gap: px2rpx(8);
}

.title-text {
    color: #ffffff;
    font-size: px2rpx(20);
}

.stats-container {
    display: flex;
    gap: px2rpx(12);
}

.stat-card {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(px2rpx(10));
    border-radius: px2rpx(12);
    padding: px2rpx(12);
}

.stat-header {
    display: flex;
    align-items: center;
    gap: px2rpx(6);
    margin-bottom: px2rpx(8);
}

.icons {
    width: px2rpx(20);
    height: px2rpx(20);
}

.stat-label {
    font-size: px2rpx(12);
    color: rgba(255, 255, 255, 0.9);
}

.stat-value {
    font-size: px2rpx(20);
    color: #ffffff;
    display: block;
    margin-bottom: px2rpx(4);
}

.stat-count {
    font-size: px2rpx(11);
    color: rgba(255, 255, 255, 0.8);
}

/* Tabs */
.tabs-container {
    background-color: #ffffff;
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: px2rpx(6);
    padding: px2rpx(16);
    position: relative;
    transition: all 0.3s;
}

.tab-text {
    font-size: px2rpx(15);
    color: #9ca3af;
    transition: color 0.3s;
}

.tab-text-active {
    color: #2563eb;
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: px2rpx(3);
    background-color: #2563eb;
    border-radius: px2rpx(3) px2rpx(3) 0 0;
}

/* Content */
.content {
    padding: 0;
}

.filters-container {
    display: flex;
    align-items: center;
    gap: px2rpx(8);
    padding: px2rpx(12) px2rpx(16);
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
    // overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
    flex-shrink: 0;
    min-width: 0;
}

.filter-label {
    font-size: px2rpx(12);
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-picker {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: px2rpx(8);
    padding: px2rpx(6) px2rpx(8);
    display: flex;
    align-items: center;
    min-width: px2rpx(60);
    max-width: px2rpx(120);
    flex-shrink: 1;
}

.picker-value {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
    width: 100%;
    min-width: 0;
}

.picker-text {
    flex: 1;
    min-width: 0;
    font-size: px2rpx(12);
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-icon {
    flex-shrink: 0;
    width: px2rpx(14);
    height: px2rpx(14);
}

.reset-btn {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: px2rpx(8);
    padding: px2rpx(6) px2rpx(10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: px2rpx(36);
}
</style>