gypsy-crm-frontend-vu/pages/customer/wallet-history.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('wallet.item57')" />
        <view class="info-card">
            <cwg-complex-search :fields="filterFields" v-model="searchParams" @search="handleSearch"
                @reset="handleReset" />
            <cwg-tabel ref="tableRef" :columns="columns" :immediate="false" :mobilePrimaryFields="mobilePrimaryFields"
                :queryParams="search" :api="listApi" :show-operation="false">
                <template #source="{ row }">
                    <text v-if="row.source == 'RAFFLE'" v-t="'wallet.item49_5'"></text>
                    <text v-if="row.source == 'TRANSFER'" v-t="'wallet.item49_4'"></text>
                    <text v-if="row.source == 'MANAGER'" v-t="'wallet.item49_1'"></text>
                    <text v-if="row.source == 'INTERESTRATE'" v-t="'news_add_field1.NewYear24.itemW1'"></text>
                    <text v-if="row.source == 'CASHBACK'" v-t="'news_add_field1.NewYear24.itemW2'"></text>
                </template>
                <template #amount="{ row }">
                    <text>{{ numberFormat(row.amount || 0) }}</text>
                </template>
            </cwg-tabel>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, nextTick, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { onLoad } from '@dcloudio/uni-app'
import { customApi } from '@/service/custom';
import { useFilters } from '@/composables/useFilters'
const { numberFormat, numberDecimal } = useFilters()

const search = reactive({
    startDate: '',
    endDate: ''
})

// 表格列配置
const columns = computed(() => [
    {
        prop: 'serial',
        label: t('wallet.item58'),
        align: 'left'
    },
    {
        prop: 'addTime',
        label: t('wallet.item59'),
        align: 'left'
    },
    {
        prop: 'source',
        label: t('wallet.item60'),
        slot: 'source',
        align: 'left'
    },
    {
        prop: 'amount',
        label: t('wallet.item61'),
        slot: 'amount',
        align: 'center'
    }
])

const mobilePrimaryFields = computed(() => [
    {
        prop: 'serial',
        label: t('wallet.item58'),
        align: 'left'
    },
    {
        prop: 'source',
        label: t('wallet.item60'),
        slot: 'source',
        align: 'left'
    },
    {
        prop: 'amount',
        label: t('wallet.item61'),
        slot: 'amount',
        align: 'right'
    }
])

// 动态传入筛选字段配置
const filterFields = computed(() => [
    { key: 'date', label: t('placeholder.Start') + ' - ' + t('placeholder.End'), type: 'daterange' }
])
const searchParams = ref({})
const tableRef = ref(null)
const handleSearch = (params) => {
    Object.assign(search, params)
    if (params.date && params.date.length === 2) {
        search.startDate = params.date[0]
        search.endDate = params.date[1]
    } else {
        search.startDate = ''
        search.endDate = ''
    }
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}

const handleReset = (params) => {
    Object.assign(search, params)
    search.startDate = ''
    search.endDate = ''
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}

const listApi = ref(null)
listApi.value = customApi.walletHistoryList

onLoad((e) => {
    nextTick(() => {
        tableRef.value.refreshTable()
    })
})
</script>

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

.search-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: px2rpx(16);
    margin: px2rpx(16) 0;

    .cwg-combox,
    .uni-easyinput,
    .uni-date {
        width: px2rpx(240) !important;
        flex: none;
    }
}
</style>