ucard-person-app-front/pages/recharge-record/list.vue

<template>
  <cwg-page-wrapper :isHeaderFixed="true">
    <view class="bank-transaction-page">
      <cwg-header color="#000" :title="pageTitle" />
      <!-- Tabs -->
      <view class="tabs-container" :style="{ top: statusBarHeight + 60 + 'px' }">
        <view :class="['tab-item', { 'tab-active': activeTab === 'recharge' }]" @click="activeTab = 'recharge'">
          <cwg-icon class="icons" name="plus-filled" :size="18"
            :color="activeTab === 'recharge' ? '#ea002a' : '#9ca3af'" />
          <view :class="['tab-text', { 'tab-text-active': activeTab === 'recharge' }]">{{ t('card.Status.t18') }}</view>
          <view v-if="activeTab === 'recharge'" class="tab-indicator" />
        </view>

        <view :class="['tab-item', { 'tab-active': activeTab === 'transaction' }]" @click="activeTab = 'transaction'">
          <cwg-icon class="icons" name="list" :size="18" :color="activeTab === 'transaction' ? '#ea002a' : '#9ca3af'" />
          <view :class="['tab-text', { 'tab-text-active': activeTab === 'transaction' }]">{{ t('Shop.Index.Transaction')
            }}</view>
          <view v-if="activeTab === 'transaction'" class="tab-indicator" />
        </view>

        <view :class="['tab-item', { 'tab-active': activeTab === 'deduction' }]" @click="activeTab = 'deduction'">
          <cwg-icon class="icons" name="trending-down" :size="18"
            :color="activeTab === 'deduction' ? '#ea002a' : '#9ca3af'" />
          <view :class="['tab-text', { 'tab-text-active': activeTab === 'deduction' }]">{{ t('card.tab20') }}
          </view>
          <view v-if="activeTab === 'deduction'" class="tab-indicator" />
        </view>
      </view>
      <view class="filters-scroll">
        <view class="filters-container" :style="{ top: statusBarHeight + 113 + 'px' }">
          <view class="filter-item">
            <text class="filter-label">{{ t('card.Form.f52') }}</text>
            <cwg-filter-select v-model="currentTypeIndex" :options="currentTypeOptions" />
          </view>

          <view class="filter-item" v-if="activeTab !== 'deduction'">
            <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.f51') }}</text>
            <cwg-filter-picker v-model="dateFilter"
              :returnType="activeTab == 'deduction' ? 'timestamp' : 'string'"></cwg-filter-picker>
          </view>

          <view class="reset-btn" @click="resetFilters">
            <uni-icons type="loop" size="16" color="#ea002a" />
          </view>
        </view>
      </view>

      <!-- Content -->
      <view class="content">
        <!-- Recharge Records -->
        <RechargeList v-if="activeTab === 'recharge'" ref="rechargeListRef" :cardNumber="cardNumber"
          :typeIndex="currentTypeIndex" :statusIndex="statusFilterIndex" :dateFilter="dateFilter"
          :typeOptions="currentTypeOptions" />

        <!-- Transaction Records -->
        <TransactionList v-if="activeTab === 'transaction'" ref="transactionListRef" :cardNumber="cardNumber"
          :typeIndex="currentTypeIndex" :statusIndex="statusFilterIndex" :dateFilter="dateFilter"
          :typeOptions="currentTypeOptions" />

        <!-- Deduction Records -->
        <DeductionList v-if="activeTab === 'deduction'" ref="deductionListRef" :cardNumber="cardNumber"
          :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 RechargeList from './components/RechargeList.vue';
import TransactionList from './components/TransactionList.vue';
import DeductionList from './components/DeductionList.vue';
import { rechargeType, transactionTypeMap, WITHDRAW_TYPE_MAP, transactionStatusMap, rechargeStatusMap } from '@/utils/dataMap';
const globalStore = useGlobalStore()
const statusBarHeight = computed(() => globalStore.statusBarHeight);
const { t } = useI18n();
const activeTab = ref<'recharge' | 'transaction' | 'deduction'>('recharge');
const cardNumber = ref('');
onLoad((options) => {
  cardNumber.value = options.cardNumber || '';
});
const currentTypeOptions = computed(() => {
  if (activeTab.value === 'recharge') {
    return rechargeType;
  } else if (activeTab.value === 'transaction') {
    return transactionTypeMap;
  } else {
    return WITHDRAW_TYPE_MAP;
  }
});
const statusOptions = computed(() => {
  if (activeTab.value === 'recharge') {
    return rechargeStatusMap;
  } else if (activeTab.value === 'transaction') {
    return transactionStatusMap;
  } else {
    return [];
  }
});
console.log(statusOptions, 1212);

// const statusOptions = ['全部', '成功', '处理中', '失败'];
const currentTypeIndex = ref(-1);
const statusFilterIndex = ref(-1);
const dateFilter = ref([]);
const pageTitle = computed(() => {
  if (activeTab.value === 'recharge') {
    return t('card.tab7'); // 充值记录
  } else if (activeTab.value === 'transaction') {
    return t('card.tab2'); // 交易记录
  } else {
    return t('card.tab20'); // 扣款记录
  }
});

const resetFilters = () => {
  currentTypeIndex.value = -1;
  statusFilterIndex.value = -1;
  dateFilter.value = [];
};



// 监听 tab 切换，重置查询条件
watch(activeTab, () => {
  resetFilters();
});
</script>

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

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

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

.wallet-header {
  background: #fff;
  color: #000 !important;

  .header {
    color: #000 !important;
  }
}

/* Header */
.header {
  background: linear-gradient(90deg, #ea002a 0%, #eb4e6b 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: #ea002a;
}

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

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

.filters-container {
  display: flex;
  align-items: center;
  gap: px2rpx(8);
  padding: px2rpx(12) px2rpx(6);
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  // overflow-x: auto;
  // overflow-y: visible;
  -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;
}

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