1

components/cwg-filter-picker.vue

@@ -0,0 +1,57 @@
+<template>
+    <uni-datetime-picker v-model="dateFilter" type="daterange" :returnType="props.returnType">
+        <view class="filter-picker">
+            <view class="picker-value">
+                <text class="picker-text">{{ dateFilter1[0] && dateFilter1[1] ? `${dateFilter1[0]} - ${dateFilter1[1]}`
+                    :
+                    t('card.Form.f57') }}</text>
+                <uni-icons type="calendar" size="14" color="#6b7280" class="picker-icon" />
+            </view>
+        </view>
+    </uni-datetime-picker>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import dayjs from 'dayjs'
+type Option = {
+    value: string | number | undefined
+    label: string
+}
+const props = defineProps<{
+    modelValue?: string | number | null
+    returnType?: string
+}>()
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string | number | undefined): void
+    (e: 'change', option: Option): void
+}>()
+const { t } = useI18n()
+const dateFilter = ref<string | number | undefined>(props.modelValue)
+const dateFilter1 = computed(() => {
+    if (!dateFilter.value || dateFilter.value.length === 0) {
+        return ['', '']
+    }
+    if (props.returnType === 'timestamp') {
+        return (dateFilter.value as any[]).map((item) =>
+            typeof item === 'number'
+                ? dayjs(item).format('YYYY-MM-DD')
+                : item
+        )
+    }
+    return dateFilter.value
+})
+watch(
+    () => props.modelValue,
+    (val) => {
+        dateFilter.value = val
+    }
+)
+watch(
+    () => dateFilter.value,
+    (val) => {
+        emit('update:modelValue', val)
+    },
+    { immediate: true },
+)
+</script>

components/cwg-filter-select.vue

@@ -0,0 +1,67 @@
+<template>
+    <!-- 显示区域 -->
+    <view class="filter-select" :class="{ disabled }">
+        <view class="picker-value">
+            <uni-data-select v-model="value1" :localdata="optionList" :clear="false"
+                @change="onConfirm"></uni-data-select>
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type Option = {
+    value: string | number | undefined
+    text: string
+}
+
+const props = defineProps<{
+    modelValue?: string | number | null
+    options: Record<string, string> | Option[]
+    placeholder?: string
+    disabled?: boolean
+    showAll?: boolean
+}>()
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string | number | undefined): void
+}>()
+const value1 = ref(props.modelValue)
+watch(
+    () => props.modelValue,
+    (val) => {
+        value1.value = val === null ? undefined : val
+    },
+)
+const { t } = useI18n()
+const optionList = computed<Option[]>(() => {
+    let list: Option[] = []
+
+    if (Array.isArray(props.options)) {
+        list = props.options.map(i => ({
+            value: i.value,
+            text: i.label
+        }))
+    } else {
+        list = Object.entries(props.options).map(([value, label]) => ({
+            value: isNaN(Number(value)) ? value : Number(value),
+            text:
+                typeof label === 'string' && label.includes('.')
+                    ? t(label)
+                    : String(label)
+        }))
+    }
+
+    if (props.showAll !== true) {
+        list.unshift({
+            value: -1,
+            text: props.placeholder || t('State.All')
+        })
+    }
+
+    return list
+})
+function onConfirm(e: any) {
+    emit('update:modelValue', e)
+}
+</script>

locale/index.js

@@ -29,4 +29,24 @@ const localesList = [
   "tr",
 ];
 const messages = { ar, cn, de, en, es, fa, ko, ms, pt, th, tr, vn, zhHant, id };
-export { messages, localesList };
+const LANG_MAP = {
+  cn: 'zh-Hans',
+  zh: 'zh-Hans',
+  zhHans: 'zh-Hans',
+  zhHant: 'zh-Hant',
+  en: 'en',
+  ar: 'ar',
+  de: 'de',
+  es: 'es',
+  fa: 'fa',
+  ko: 'ko',
+  ms: 'ms',
+  pt: 'pt',
+  th: 'th',
+  tr: 'tr',
+  vn: 'vi',
+  vi: 'vi',
+  id: 'id',
+};
+
+export { messages, localesList, LANG_MAP };

pages/mine/language.vue

@@ -16,13 +16,16 @@
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { lang } from "@/composables/config";
-import { localesList } from "@/locale/index";
+import { localesList, LANG_MAP } from "@/locale/index";
 
 const { locale, t } = useI18n();
 const currentLang = ref(lang.value || locale.value);
 function changeLang(langValue: string) {
   locale.value = langValue;
   lang.value = langValue;
+  const localeValue = LANG_MAP[langValue] || 'zh-Hans';
+
+  uni.setLocale(localeValue);
   currentLang.value = langValue;
 }
 </script>

pages/recharge-record/components/DeductionList.vue

@@ -165,25 +165,13 @@ const fetchRecords = async (isLoadMore = false) => {
   try {
     const res = await ucardApi.getCardWithdrawPage({
       cardNumber: props.cardNumber,
-      type: props.typeIndex || undefined,
-      status: props.statusIndex || undefined,
-      beginDate: props.dateFilter,
+      type: props.typeIndex == -1 ? undefined : props.typeIndex,
+      status: props.statusIndex == -1 ? undefined : props.statusIndex,
+      beginDate: props.dateFilter[0] || undefined,
       endDate: (() => {
-        // 兼容时间戳和日期字符串
-        if (!props.dateFilter) return props.dateFilter;
-        let date = props.dateFilter;
-        if (/^\d+$/.test(String(date))) {
-          // 时间戳
-          return Number(date) + 24 * 60 * 60 * 1000;
-        } else {
-          // 日期字符串
-          const d = new Date(date);
-          if (!isNaN(d.getTime())) {
-            d.setDate(d.getDate() + 1);
-            return d.toISOString().slice(0, 10);
-          }
-          return date;
-        }
+        let date = props.dateFilter?.[1];
+        if (!date) return undefined;
+        return Number(date) + 24 * 60 * 60 * 1000 - 1
       })(),
       page: { current: page.value, row: pageSize },
     });

pages/recharge-record/components/RechargeList.vue

@@ -29,7 +29,7 @@
 
           <view class="record-right">
             <text class="amount-recharge">+{{ Number(record.amount || 0).toFixed(2) }} {{ record.currency || 'USD'
-            }}</text>
+              }}</text>
             <text class="fee-text">{{ t('global.p17') }} {{ Number(record.rechargeFee || 0).toFixed(2) }}</text>
           </view>
         </view>
@@ -203,10 +203,10 @@ const fetchRecords = async (isLoadMore = false) => {
   try {
     const res = await ucardApi.rechargeList({
       cardNumber: props.cardNumber,
-      rechargeType: props.typeIndex || undefined,
-      status: props.statusIndex || undefined,
-      startDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
-      endDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
+      rechargeType: props.typeIndex == -1 ? undefined : props.typeIndex,
+      status: props.statusIndex == -1 ? undefined : props.statusIndex,
+      startDate: props.dateFilter?.[0] ? dayjs(props.dateFilter[0]).format('YYYY-MM-DD') : undefined,
+      endDate: props.dateFilter?.[1] ? dayjs(props.dateFilter[1]).format('YYYY-MM-DD') : undefined,
       page: { current: page.value, row: pageSize.value },
     });
     const data = res.code === 200 && Array.isArray(res.data) ? res.data : [];

pages/recharge-record/components/TransactionList.vue

@@ -221,10 +221,10 @@ const fetchRecords = async (isLoadMore = false) => {
   try {
     const res = await ucardApi.transactionsList({
       cardNumber: props.cardNumber,
-      type: props.typeIndex || undefined,
-      status: props.statusIndex || undefined,
-      beginDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
-      endDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
+      type: props.typeIndex == -1 ? undefined : props.typeIndex,
+      status: props.statusIndex == -1 ? undefined : props.statusIndex,
+        beginDate: props.dateFilter?.[0] ? dayjs(props.dateFilter[0]).format('YYYY-MM-DD') : undefined,
+        endDate: props.dateFilter?.[1] ? dayjs(props.dateFilter[1]).format('YYYY-MM-DD') : undefined,
       page: { current: page.value, row: pageSize.value },
     });
     const data = res.code === 200 && Array.isArray(res.data) ? res.data : [];

pages/recharge-record/list.vue

@@ -14,7 +14,7 @@
         <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>
           <view v-if="activeTab === 'transaction'" class="tab-indicator" />
         </view>
 
@@ -29,25 +29,18 @@
       <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" />
+          <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-picker v-model="statusFilterIndex" :options="statusOptions" />
+          <cwg-filter-select 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" />
+          <cwg-filter-picker v-model="dateFilter"
+            :returnType="activeTab == 'deduction' ? 'timestamp' : 'string'"></cwg-filter-picker>
         </view>
 
         <view class="reset-btn" @click="resetFilters">
@@ -68,7 +61,7 @@
 
         <!-- Deduction Records -->
         <DeductionList v-if="activeTab === 'deduction'" ref="deductionListRef" :cardNumber="cardNumber"
-          :typeIndex="currentTypeIndex" :statusIndex="statusFilterIndex" :dateFilter="dateFilter1"
+          :typeIndex="currentTypeIndex" :statusIndex="statusFilterIndex" :dateFilter="dateFilter"
           :typeOptions="currentTypeOptions" />
       </view>
     </view>
@@ -85,13 +78,9 @@ 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 cardNumber = ref('');
 onLoad((options) => {
@@ -118,10 +107,9 @@ const statusOptions = computed(() => {
 console.log(statusOptions, 1212);
 
 // const statusOptions = ['全部', '成功', '处理中', '失败'];
-const currentTypeIndex = ref();
-const statusFilterIndex = ref();
-const dateFilter = ref('');
-const dateFilter1 = ref('');
+const currentTypeIndex = ref(-1);
+const statusFilterIndex = ref(-1);
+const dateFilter = ref([]);
 const pageTitle = computed(() => {
   if (activeTab.value === 'recharge') {
     return t('card.tab7'); // 充值记录
@@ -131,21 +119,11 @@ const pageTitle = computed(() => {
     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 = '';
+  currentTypeIndex.value = -1;
+  statusFilterIndex.value = -1;
+  dateFilter.value = [];
 };
 
 
@@ -154,7 +132,6 @@ const resetFilters = () => {
 watch(activeTab, () => {
   resetFilters();
 });
-
 </script>
 
 <style scoped lang="scss">
@@ -299,7 +276,7 @@ watch(activeTab, () => {
   position: sticky;
   top: 0;
   z-index: 10;
-  overflow-x: auto;
+  // overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 

pages/wallet/components/GlobalList.vue

@@ -223,10 +223,10 @@ const fetchRecords = async (isLoadMore = false) => {
     try {
         const res = await ucardApi.globalOrdersList({
             cardNumber: props.cardNumber,
-            payoutCurrency: props.payoutCurrency,
-            status: props.statusIndex == 0 ? undefined : props.statusIndex,
-            startDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
-            endDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
+            payoutCurrency: props.payoutCurrency === -1 ? undefined : props.payoutCurrency,
+            status: props.statusIndex === -1 ? undefined : props.statusIndex,
+            startDate: props.dateFilter?.[0] ? dayjs(props.dateFilter[0]).format('YYYY-MM-DD') : undefined,
+            endDate: props.dateFilter?.[1] ? dayjs(props.dateFilter[1]).format('YYYY-MM-DD') : undefined,
             page: { current: page.value, row: pageSize },
         });
         const data = res.code === 200 && Array.isArray(res.data) ? res.data : [];

pages/wallet/components/VaultodyList.vue

@@ -204,9 +204,9 @@ const fetchRecords = async (isLoadMore = false) => {
         const res = await ucardApi.getBlockchainTransactionPage({
             cardNumber: props.cardNumber,
             payoutCurrency: props.payoutCurrency,
-            status: props.statusIndex == 0 ? undefined : props.statusIndex,
-            startDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
-            endDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
+            status: props.statusIndex == -1 ? undefined : props.statusIndex,
+            startDate: props.dateFilter?.[0] ? dayjs(props.dateFilter[0]).format('YYYY-MM-DD') : undefined,
+            endDate: props.dateFilter?.[1] ? dayjs(props.dateFilter[1]).format('YYYY-MM-DD') : undefined,
             page: { current: page.value, row: pageSize },
         });
         const data = res.code === 200 && Array.isArray(res.data) ? res.data : [];

pages/wallet/components/WithdrawList.vue

@@ -199,9 +199,9 @@ const fetchRecords = async (isLoadMore = false) => {
         const res = await ucardApi.getBlockchainWithdrawPage({
             cardNumber: props.cardNumber,
             payoutCurrency: props.payoutCurrency,
-            transactionStatus: props.statusIndex == 0 ? undefined : props.statusIndex,
-            startDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
-            endDate: props.dateFilter ? dayjs(props.dateFilter).format('YYYY-MM-DD') : undefined,
+            transactionStatus: props.statusIndex == -1 ? undefined : props.statusIndex,
+            startDate: props.dateFilter?.[0] ? dayjs(props.dateFilter[0]).format('YYYY-MM-DD') : undefined,
+            endDate: props.dateFilter?.[1] ? dayjs(props.dateFilter[1]).format('YYYY-MM-DD') : undefined,
             page: { current: page.value, row: pageSize },
         });
         const data = res.code === 200 && Array.isArray(res.data) ? res.data : [];

pages/wallet/global-list.vue

@@ -4,22 +4,15 @@
             <view class="filters-container" :style="{ top: statusBarHeight + 53 + 'px' }">
                 <view class="filter-item">
                     <text class="filter-label">{{ t('global.p25') }}</text>
-                    <cwg-picker v-model="payoutCurrency" :options="currencyList" />
+                    <cwg-filter-select v-model="payoutCurrency" :options="currencyList" />
                 </view>
                 <view class="filter-item">
                     <text class="filter-label">{{ t('card.Form.f45') }}</text>
-                    <cwg-picker v-model="statusFilterIndex" :options="statusOptions" />
+                    <cwg-filter-select v-model="statusFilterIndex" :options="statusOptions" />
                 </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" />
+                    <cwg-filter-picker v-model="dateFilter"></cwg-filter-picker>
                 </view>
                 <view class="reset-btn" @click="resetFilters">
                     <uni-icons type="loop" size="16" color="#2563eb" />
@@ -46,8 +39,6 @@ const cardStore = useCardStore();
 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 cardNumber = ref('');
 onLoad((options) => {
     cardNumber.value = options.cardNumber || '';
@@ -60,22 +51,14 @@ const currencyList = computed(() => {
     const res = cardStore.currencyList.map(item => { return { label: item.payoutCurrency, value: item.payoutCurrency } });
     return res;
 });
-const payoutCurrency = ref();
-const statusFilterIndex = ref(0);
-const dateFilter = ref('');
-
-const show = ref(false)
-const onDateConfirm = (e: any) => {
-    dateFilter.value = e.formatted;
-};
-function open() {
-    show.value = true
-}
+const payoutCurrency = ref(-1);
+const statusFilterIndex = ref(-1);
+const dateFilter = ref([]);
 
 const resetFilters = () => {
-    payoutCurrency.value = '';
-    statusFilterIndex.value = 0;
-    dateFilter.value = '';
+    payoutCurrency.value = -1;
+    statusFilterIndex.value = -1;
+    dateFilter.value = [];
 };
 </script>
 
@@ -216,7 +199,7 @@ const resetFilters = () => {
     position: sticky;
     top: 0;
     z-index: 10;
-    overflow-x: auto;
+    // overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 

pages/wallet/vaultody-list.vue

@@ -4,18 +4,11 @@
             <view class="filters-container" :style="{ top: statusBarHeight + 53 + 'px' }">
                 <view class="filter-item">
                     <text class="filter-label">{{ t('card.Form.f45') }}</text>
-                    <cwg-picker v-model="statusFilterIndex" :options="statusOptions" />
+                    <cwg-filter-select v-model="statusFilterIndex" :options="statusOptions" />
                 </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" />
+                    <cwg-filter-picker v-model="dateFilter"></cwg-filter-picker>
                 </view>
                 <view class="reset-btn" @click="resetFilters">
                     <uni-icons type="loop" size="16" color="#2563eb" />
@@ -37,13 +30,9 @@ import { useI18n } from 'vue-i18n';
 import useGlobalStore from '@/stores/use-global-store';
 import VaultodyList from './components/VaultodyList.vue';
 import { vaultodyStatusText } 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 minDate = ref(new Date(2000, 0, 1).getTime());
-const maxDate = ref(new Date().getTime());
 const cardNumber = ref('');
 onLoad((options) => {
     cardNumber.value = options.cardNumber || '';
@@ -53,21 +42,13 @@ const statusOptions = computed(() => {
     return vaultodyStatusText
 });
 const payoutCurrency = ref();
-const statusFilterIndex = ref(0);
-const dateFilter = ref('');
-
-const show = ref(false)
-const onDateConfirm = (e: any) => {
-    dateFilter.value = e.formatted;
-};
-function open() {
-    show.value = true
-}
+const statusFilterIndex = ref(-1);
+const dateFilter = ref([]);
 
 const resetFilters = () => {
     payoutCurrency.value = '';
-    statusFilterIndex.value = 0;
-    dateFilter.value = '';
+    statusFilterIndex.value = -1;
+    dateFilter.value = [];
 };
 </script>
 
@@ -208,7 +189,7 @@ const resetFilters = () => {
     position: sticky;
     top: 0;
     z-index: 10;
-    overflow-x: auto;
+    // overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 

pages/wallet/withdraw-list.vue

@@ -4,18 +4,11 @@
             <view class="filters-container" :style="{ top: statusBarHeight + 53 + 'px' }">
                 <view class="filter-item">
                     <text class="filter-label">{{ t('card.Form.f45') }}</text>
-                    <cwg-picker v-model="statusFilterIndex" :options="statusOptions" />
+                    <cwg-filter-select v-model="statusFilterIndex" :options="statusOptions" />
                 </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" />
+                    <cwg-filter-picker v-model="dateFilter"></cwg-filter-picker>
                 </view>
                 <view class="reset-btn" @click="resetFilters">
                     <uni-icons type="loop" size="16" color="#2563eb" />
@@ -37,13 +30,9 @@ import { useI18n } from 'vue-i18n';
 import useGlobalStore from '@/stores/use-global-store';
 import WithdrawList from './components/WithdrawList.vue';
 import { withdrawStatus } 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 minDate = ref(new Date(2000, 0, 1).getTime());
-const maxDate = ref(new Date().getTime());
 const cardNumber = ref('');
 onLoad((options) => {
     cardNumber.value = options.cardNumber || '';
@@ -53,21 +42,13 @@ const statusOptions = computed(() => {
     return withdrawStatus
 });
 const payoutCurrency = ref();
-const statusFilterIndex = ref(0);
-const dateFilter = ref('');
-
-const show = ref(false)
-const onDateConfirm = (e: any) => {
-    dateFilter.value = e.formatted;
-};
-function open() {
-    show.value = true
-}
+const statusFilterIndex = ref(-1);
+const dateFilter = ref([]);
 
 const resetFilters = () => {
     payoutCurrency.value = '';
-    statusFilterIndex.value = 0;
-    dateFilter.value = '';
+    statusFilterIndex.value = -1;
+    dateFilter.value = [];
 };
 </script>
 
@@ -208,7 +189,7 @@ const resetFilters = () => {
     position: sticky;
     top: 0;
     z-index: 10;
-    overflow-x: auto;
+    // overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 

static/scss/global/global.scss

@@ -573,4 +573,50 @@ body {
     gap: px2rpx(4);
     padding: px2rpx(3) px2rpx(8) px2rpx(3) px2rpx(3);
     border-radius: px2rpx(12);
+}
+
+.filter-select {
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: px2rpx(8);
+    padding: px2rpx(6);
+    display: flex;
+    align-items: center;
+    min-width: px2rpx(90);
+    max-width: px2rpx(120);
+    flex-shrink: 1;
+    // overflow: hidden;
+
+    div {
+        // width: 100% !important;
+    }
+
+    .uni-select {
+        width: 100% !important;
+        padding: 0 !important;
+        border: none !important;
+        min-height: px2rpx(14) !important;
+    }
+
+    .uni-select__selector {
+        min-width: 100px !important;
+        max-width: 300px !important;
+        width: max-content !important;
+    }
+
+    .uni-select__selector-item {
+        white-space: nowrap !important;
+        padding: 0 12px !important;
+    }
+
+    .uni-select__input-text {
+        color: #6a6a6a;
+        font-size: 12px;
+        margin: 1px 0;
+        padding: 0 !important;
+    }
+
+    .padding-top-bottom {
+        padding: 0 !important;
+    }
 }