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('card.Form.f52') }}</text>
                    <picker :value="currentTypeIndex" :range="currentTypeOptions" @change="onTypeChange"
                        class="filter-picker">
                        <view class="picker-value">
                            <text class="picker-text">{{ currentTypeOptions[currentTypeIndex] }}</text>
                            <uni-icons type="down" size="14" color="#6b7280" class="picker-icon" />
                        </view>
                    </picker>
                </view>

                <view class="filter-item">
                    <text class="filter-label">{{ t('card.Form.f45') }}</text>
                    <picker :value="statusFilterIndex" :range="statusOptions" @change="onStatusChange"
                        class="filter-picker">
                        <view class="picker-value">
                            <text class="picker-text">{{ statusOptions[statusFilterIndex] }}</text>
                            <uni-icons type="down" size="14" color="#6b7280" class="picker-icon" />
                        </view>
                    </picker>
                </view>

                <view class="filter-item">
                    <text class="filter-label">{{ t('card.Form.f43') }}</text>
                    <view class="filter-picker" @click="open">
                        <view class="picker-value">
                            <text class="picker-text">{{ dateFilter || t('card.Form.f57') }}</text>
                            <uni-icons type="calendar" size="14" color="#6b7280" class="picker-icon" />
                        </view>
                    </view>

                    <cwg-date-picker v-model:show="show" v-model="dateFilter" mode="date" @confirm="onDateConfirm"
                        :minDate="minDate" :maxDate="maxDate" />
                </view>

                <view class="reset-btn" @click="resetFilters">
                    <uni-icons type="loop" size="16" color="#2563eb" />
                </view>
            </view>
            <!-- Content -->
            <view class="content">
                <!-- Recharge Records -->
                <GlobalList ref="globalListRef" :cardNo="cardNo" :typeIndex="currentTypeIndex"
                    :statusIndex="statusFilterIndex" :dateFilter="dateFilter" :typeOptions="currentTypeOptions" />
            </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';
const globalStore = useGlobalStore()
const statusBarHeight = computed(() => globalStore.statusBarHeight);
const { t } = useI18n();
const minDate = ref(new Date(2000, 0, 1).getTime());
const maxDate = ref(new Date().getTime());

const activeTab = ref<'recharge' | 'transaction' | 'deduction'>('recharge');
const cardNo = ref('');
onLoad((options) => {
    cardNo.value = options.cardNo || '';
});

const statusOptions = computed(() => {
    return globalStatusText1
});
const currentTypeIndex = ref(0);
const statusFilterIndex = ref(0);
const dateFilter = ref('');

const rechargeTypeOptions = [t('card.Form.f43'), '银行卡充值', '支付宝充值', '微信充值'];
const transactionTypeOptions = [t('card.Form.f43'), '商品购买', '提现', '转账', '生活缴费', '话费充值'];
const deductionTypeOptions = [t('card.Form.f43'), '服务费', '手续费', '罚款'];

const currentTypeOptions = computed(() => {
    if (activeTab.value === 'recharge') {
        return rechargeTypeOptions;
    } else if (activeTab.value === 'transaction') {
        return transactionTypeOptions;
    } else {
        return deductionTypeOptions;
    }
});

const onTypeChange = (e: any) => {
    currentTypeIndex.value = e.detail.value;
};

const onStatusChange = (e: any) => {
    statusFilterIndex.value = e.detail.value;
};
const show = ref(false)
const onDateConfirm = (e: any) => {
    dateFilter.value = e.formatted;
};
function open() {
    show.value = true
}
const onDateChange = (e: any) => {
    dateFilter.value = e.detail.value;
};

const resetFilters = () => {
    currentTypeIndex.value = 0;
    statusFilterIndex.value = 0;
    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>