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-container" :style="{ top: statusBarHeight + 113 + 'px' }">
        <view class="filter-item">
          <text class="filter-label">{{ t('card.Form.f52') }}</text>
          <cwg-picker v-model="currentTypeIndex" :options="currentTypeOptions" />
        </view>

        <view class="filter-item" v-if="activeTab !== 'deduction'">
          <text class="filter-label">{{ t('card.Form.f45') }}</text>

          <cwg-picker v-model="statusFilterIndex" :options="statusOptions" />
        </view>

        <view class="filter-item">
          <text class="filter-label">{{ t('card.Form.f51') }}</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="#ea002a" />
        </view>
      </view>
      <!-- Content -->
      <view class="content">
        <!-- Recharge Records -->
        <RechargeList v-if="activeTab === 'recharge'" ref="rechargeListRef" :cardNo="cardNo"
          :typeIndex="currentTypeIndex" :statusIndex="statusFilterIndex" :dateFilter="dateFilter"
          :typeOptions="currentTypeOptions" />

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

        <!-- Deduction Records -->
        <DeductionList v-if="activeTab === 'deduction'" ref="deductionListRef" :cardNo="cardNo"
          :typeIndex="currentTypeIndex" :statusIndex="statusFilterIndex" :dateFilter="dateFilter1"
          :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 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 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();
const statusFilterIndex = ref();
const dateFilter = ref('');
const dateFilter1 = 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 show = ref(false)
const onDateConfirm = (e: any) => {
  if (activeTab.value == 'deduction') {
    dateFilter1.value = e.value;
  }
  dateFilter.value = e.formatted;
};
function open() {
  show.value = true
}
const resetFilters = () => {
  currentTypeIndex.value = undefined;
  statusFilterIndex.value = undefined;
  dateFilter.value = '';
  dateFilter1.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;
  -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>