gypsy-crm-frontend-vu/pages/customer/components/TransactionDialogs.vue

<template>
    <cwg-popup :title="t('Tips.TransactionRecord')" :visible="props.visible" :showFooters="false"
        @update:visible="$emit('update:visible', $event)">
        <scroll-view scroll-y class="account-list" :style="{ maxHeight: '40vh' }">
            <view v-if="loading" class="loading-state">
                <uni-load-more :status="loading ? 'loading' : 'noMore'" />
            </view>
        </scroll-view>
        <view class="search-bar">
            <uni-datetime-picker type="daterange" v-model="search.date"
                :placeholder="t('placeholder.Start') + ' - ' + t('placeholder.End')" @change="handleDateChange"
                class="date-picker" />
        </view>
        <cwg-tabel ref="tableRef" :columns="columns" :queryParams="search" :api="listApi" />
    </cwg-popup>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { customApi } from '@/service/custom'
const { t } = useI18n()
const props = defineProps({
    // 是否显示弹窗
    visible: {
        type: Boolean,
        default: false
    },
    loginInfo: {
        type: Object,
        default: () => ({})
    }
})

// 表格列配置
const columns = ref([
    {
        prop: 'login',
        label: t('Label.TradingAccount'),
        align: 'left'
    },
    {
        prop: 'openPrice',
        label: t('Label.OpenPrice'),
        align: 'left'
    },
    {
        prop: 'closePrice',
        label: t('Label.ClosePrice'),
        align: 'left',
    },
    {
        prop: 'openTime',
        label: t('Label.OpenTime'),
        align: 'left'
    },
    {
        props: 'closeTime',
        label: t('Label.CloseTime'),
        align: 'left'
    }
])
const loading = ref(false)
const handleDateChange = (val) => {
    search.value.startDate = val[0]
    search.value.endDate = val[1]
    getChart()
}
const search = ref({})
// 监听 visible 变化
watch(() => props.visible, (val) => {
    if (val) {
        search.value = {}
        search.value.date = []
        // 使用 setTimeout 确保在下一个事件循环赋值
        const { login, platform } = props.loginInfo
        const now = new Date();
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
        const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        const transactionDate = [
            firstDay.toISOString().split('T')[0],
            lastDay.toISOString().split('T')[0]
        ];
        const startDate = transactionDate[0]
        const endDate = transactionDate[1]
        search.value = { login, platform, startDate, endDate }
        setTimeout(() => {
            search.value.date = [startDate, endDate];
        }, 0)
    } else {
        search.value = {}
    }
})
const listApi = ref(null)
listApi.value = customApi.historyList
</script>

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

.delete-account-dialog {
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: px2rpx(8);
    overflow: hidden;

    @media (min-width: 768px) {
        width: px2rpx(800);
    }
}


.dialog-content {
    padding: px2rpx(20);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: px2rpx(60) 0;

    .empty-text {
        margin-top: px2rpx(20);
        font-size: px2rpx(18);
        color: var(--bs-heading-color);
    }
}

.date-picker {
    margin-left: px2rpx(20);
    width: px2rpx(300) !important;
}
</style>