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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Home.page_customer.item7')" />
        <view class="info-card">
            <cwg-complex-search :fields="filterFields" v-model="searchParams" @search="handleSearch"
                @reset="handleReset" />
            <cwg-tabel ref="tableRef" :columns="currentColumns" :immediate="false" :queryParams="search" :api="listApi"
                :show-operation="false">
                <!-- 状态列自定义渲染 -->
                <template #status="{ row }">
                    <view v-if="getStatusText(row)" class="status-tag" :class="getStatusClass(row.status)">
                        {{ getStatusText(row) }}
                    </view>
                    <view v-else></view>
                </template>
                <!-- 账户类型列自定义渲染 -->
                <template #accountType="{ row }">
                    {{ getAccountTypeText(row.type || row.loginType) }}
                </template>
                <!-- 金额列格式化 -->
                <template #amount="{ row }">
                    <view>-{{ formatNumber(row.withdrawAmount || row.amount) }}</view>
                </template>
                <!-- 备注列格式化 -->
                <template #note="{ row }">
                    <view>{{ formatNote(row.approveDesc) }}</view>
                </template>
            </cwg-tabel>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { customApi } from '@/service/custom';
import useUserStore from "@/stores/use-user-store";
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const search = ref({
    type: 1
})
const getInfoAgentTransfer = computed(() => userInfo.value.customInfo?.agentTransfer)
const typeMap = computed(() => ([
    { value: 1, text: t('Custom.Recording.NewAccount') },
    // { value: 2, text: t('Custom.Recording.LeverageApply') },
    { value: 3, text: t('Custom.Recording.InternalTransfer') },
    // { value: 4, text: t('Custom.Recording.ActivitiesApply') },
    ...(getInfoAgentTransfer.value == 1 ? [{ value: 5, text: t('Home.page_ib.item9') }] : [])
]));
const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));

// 账户类型映射
const accountTypeMap = {
    1: 'AccountType.ClassicAccount',
    2: 'AccountType.SeniorAccount',
    5: 'AccountType.SpeedAccount',
    6: 'AccountType.SpeedAccount',
    7: 'AccountType.StandardAccount',
    8: 'AccountType.CentAccount'
}
// 拒绝原因映射（示例）
const reasons = ref({})
// 根据类型获取列配置
const getColumnsByType = (type: number) => {
    switch (type) {
        case 1: // 开户记录
            return [
                {
                    prop: 'platform',
                    label: t('Custom.Recording.Platform'),
                    align: 'left'
                },
                {
                    prop: 'type',
                    label: t('Custom.PaymentHistory.payType'),
                    align: 'left',
                    slot: 'accountType'
                },
                {
                    prop: 'withdrawCurrency',
                    label: t('Custom.Recording.CurrencyType'),
                    align: 'left',
                    formatter: ({ row }) => row.currency || '--',
                },
                {
                    prop: 'leverage',
                    label: t('Custom.Recording.Lever'),
                    formatter: ({ row }) => `1: ${row.leverage}` || '--',
                    align: 'left'
                },
                {
                    prop: 'addTime',
                    label: t('Custom.PaymentHistory.ApplicationDate'),
                    type: 'date',
                    dateFormat: 'YYYY-MM-DD HH:mm',
                    align: 'left'
                },
                {
                    prop: 'status',
                    label: t('Custom.Recording.Status'),
                    slot: 'status',
                    align: 'left'
                },
                {
                    prop: 'note',
                    label: t('Custom.Recording.Note'),
                    type: 'note',
                    align: 'left'
                }
            ]
        case 2: // 杠杆修改记录
            return [
                {
                    prop: 'login',
                    label: t('Custom.Recording.TradingAccount'),
                    align: 'left',
                    formatter: ({ row }) => row.login || '--'
                },
                {
                    prop: 'oldLeverage',
                    label: t('Custom.Recording.OldLever'),
                    align: 'left',
                    formatter: ({ row }) => row.oldLeverage ? `1:${row.oldLeverage}` : '--'
                },
                {
                    prop: 'newLeverage',
                    label: t('Custom.Recording.NewLever'),
                    align: 'left',
                    formatter: ({ row }) => row.newLeverage ? `1:${row.newLeverage}` : '--'
                },
                {
                    prop: 'addTime',
                    label: t('Custom.PaymentHistory.ApplicationDate'),
                    type: 'date',
                    dateFormat: 'YYYY-MM-DD HH:mm',
                    align: 'left'
                },
                {
                    prop: 'status',
                    label: t('Custom.PaymentHistory.Status'),
                    slot: 'status',
                    align: 'left'
                },
                {
                    prop: 'note',
                    label: t('Custom.Recording.Note'),
                    type: 'note',
                    align: 'left'
                }
            ]
        case 3: // 转账记录
        case 5: // 内部转账记录
            return [
                {
                    prop: 'withdrawLogin',
                    label: t('Custom.Recording.TransferAccounts'),
                    align: 'left',
                    formatter: ({ row }) => row.withdrawLogin || '--'
                },
                {
                    prop: 'depositLogin',
                    label: t('Custom.Recording.IntoAccount'),
                    align: 'left',
                    formatter: ({ row }) => row.depositLogin || '--',
                },
                {
                    prop: 'withdrawCurrency',
                    label: t('Custom.Recording.CurrencyType'),
                    align: 'left',
                    formatter: ({ row }) => row.withdrawCurrency || '--',
                },
                {
                    prop: 'withdrawAmount',
                    label: t('Custom.Recording.Amount'),
                    align: 'left',
                    slot: 'amount'
                },
                {
                    prop: 'addTime',
                    label: t('Custom.PaymentHistory.ApplicationDate'),
                    type: 'date',
                    dateFormat: 'YYYY-MM-DD HH:mm',
                    align: 'left'
                },
                {
                    prop: 'status',
                    label: t('Custom.PaymentHistory.Status'),
                    slot: 'status',
                    align: 'left'
                },
                {
                    prop: 'note',
                    label: t('Custom.Recording.Note'),
                    type: 'note',
                    align: 'left'
                }
            ]
        case 4: // 活动申请记录
            return [
                {
                    prop: 'login',
                    label: t('Custom.Recording.TradingAccount'),
                    align: 'left',
                    formatter: ({ row }) => row.login || '--'
                },
                {
                    prop: 'loginType',
                    label: t('Custom.Recording.AccountType'),
                    align: 'left',
                    slot: 'accountType'
                },
                {
                    prop: 'title',
                    label: t('Custom.Recording.ActivityName'),
                    align: 'left',
                    formatter: ({ row }) => row.title || '--'
                },
                {
                    prop: 'addTime',
                    label: t('Custom.PaymentHistory.ApplicationDate'),
                    type: 'date',
                    dateFormat: 'YYYY-MM-DD HH:mm',
                    align: 'left'
                },
                {
                    prop: 'status',
                    label: t('Custom.PaymentHistory.Status'),
                    slot: 'status',
                    align: 'left'
                },
                {
                    prop: 'note',
                    label: t('Custom.Recording.Note'),
                    type: 'note',
                    align: 'left'
                }
            ]
    }
}
// 动态传入筛选字段配置
const filterFields = computed(() => [
    { key: 'type', type: 'select', label: t('Custom.PaymentHistory.payType'), placeholder: t('placeholder.choose'), options: typeMap.value, defaultValue: 1 },
    { key: 'date', label: t('placeholder.Start') + ' - ' + t('placeholder.End'), type: 'daterange' }
])
const searchParams = ref({})
const tableRef = ref(null)
const handleSearch = (params) => {
    search.value = params
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}

const handleReset = (params) => {
    search.value = params
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}
// 当前列配置
const currentColumns = computed(() => getColumnsByType(search.value.type))
// 获取状态文本
const getStatusText = (row: any) => {
    const status = row.status
    // 根据不同记录类型处理状态
    if (search.value.type === 1) {
        if (status === 1) return t('State.ToBeProcessed')
        if (status === 2 && row.accountStatus === 2) return t('State.Completed')
        if (status === 2 && (row.accountStatus === 1 || !row.accountStatus)) return t('State.InTheProcessing')
        if (status === 3) return t('State.Refused')
    } else if (search.value.type === 2) {
        if (status === 1) return t('State.ToBeProcessed')
        if (status === 2 && row.leverageStatus === 2) return t('State.Completed')
        if (status === 2 && row.leverageStatus === 1) return t('State.InTheProcessing')
        if (status === 3) return t('State.Refused')
    } else if (search.value.type === 3 || search.value.type === 5) {
        if (status === 1) return t('State.ToBeProcessed')
        if (status === 2 && row.withdrawStatus === 2 && row.depositStatus === 2) return t('State.Completed')
        if (status === 2 && (row.withdrawStatus === 1 || row.depositStatus === 1)) return t('State.InTheProcessing')
        if (status === 3 || row.withdrawStatus === 3 || row.depositStatus === 3) return t('State.Refused')
    } else {
        // 活动申请等
        if (status === 1) return t('State.ToBeProcessed')
        if (status === 2) return t('State.Completed')
        if (status === 3) return t('State.Refused')
    }
    return ''
}
// 获取状态样式类
const getStatusClass = (status: number) => {
    const classMap: Record<number, string> = {
        1: 'status-pending',
        2: 'status-success',
        3: 'status-processing',
        4: 'status-danger'
    }
    return classMap[status] || ''
}
// 获取账户类型文本
const getAccountTypeText = (type: number) => {
    const key = accountTypeMap[type as keyof typeof accountTypeMap]
    return key ? t(key) : '--'
}
// 格式化数字
const formatNumber = (value: string | number) => {
    if (!value) return '--'
    const num = Number(value)
    return isNaN(num) ? '--' : num.toFixed(2)
}
// 格式化备注
const formatNote = (approveDesc: string) => {
    if (!approveDesc) return '--'
    const reason = reasons.value[approveDesc as keyof typeof reasons.value]
    if (reason) {
        return isZh.value ? reason.content : reason.enContent
    }
    return approveDesc
}
const listApi = ref(null)
listApi.value = customApi.CustomRecordAccount
</script>

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

.avatar {
    width: px2rpx(60);
    height: px2rpx(60);
    border-radius: 4px;
}

.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px2rpx(20);
    font-weight: 500;

    .content-title-btns {
        margin: px2rpx(8) 0;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);

        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-error);
            color: white;
            padding: 0 px2rpx(12);
            border: none;
            font-size: px2rpx(14);
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: px2rpx(8);
        }

        .btn-primary:active {
            background-color: #cf1322;
            ;
        }
    }
}

.operation-btn {
    :deep(span) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(4);
        cursor: pointer;
        background-color: var(--color-slate-150);
        padding: px2rpx(8) 0;
    }
}

.operation-btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.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>