gypsy-crm-frontend-vu/pages/customer/settings.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
            <uni-row class="form-row uni-row1">
                <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                    <AccountList />
                    <TransactionCharts />
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                    <ActivitiesSwiper />
                    <Timeline />
                </uni-col>
            </uni-row>
        <!-- </view> -->

    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { customApi } from '@/service/custom';
import useUserStore from "@/stores/use-user-store";
import useRouter from "@/hooks/useRouter";
const router = useRouter();
import AccountList from './components/AccountList.vue';
import TransactionCharts from './components/TransactionCharts.vue';
import ActivitiesSwiper from './components/ActivitiesSwiper.vue';
import Timeline from './components/Timeline.vue';
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

const getInfoAgentTransfer = computed(() => userInfo.value.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('Custom.Recording.Transfer') }] : [])
]));

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: 'type'
                },
                {
                    prop: 'channelName',
                    label: t('Custom.PaymentHistory.PaymentMethod'),
                    formatter: ({ row }) => isZh.value ? row.channelName : row.channelEnName,
                    align: 'left'
                },
                {
                    prop: 'amount',
                    label: t('Custom.PaymentHistory.Amount'),
                    formatter: ({ row }) => row.amount + ' ' + row.currency,
                    align: 'left'
                },
                {
                    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'),
                    formatter: ({ row }) => row.note || '--',
                    align: 'left'
                }
            ]
        case 2: // 杠杆修改记录
            return [
                {
                    prop: 'login',
                    label: t('Custom.Recording.TradingAccount'),
                    align: 'center',
                    formatter: ({ row }) => row.login || '--'
                },
                {
                    prop: 'oldLeverage',
                    label: t('Custom.Recording.OldLever'),
                    align: 'center',
                    formatter: ({ row }) => row.oldLeverage ? `1:${row.oldLeverage}` : '--'
                },
                {
                    prop: 'newLeverage',
                    label: t('Custom.Recording.NewLever'),
                    align: 'center',
                    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'),
                    formatter: ({ row }) => row.note || '--',
                    align: 'left'
                }
            ]
        case 3: // 转账记录
        case 5: // 内部转账记录
            return [
                {
                    prop: 'withdrawLogin',
                    label: t('Custom.Recording.TransferAccounts'),
                    align: 'center',
                    formatter: ({ row }) => row.withdrawLogin || '--'
                },
                {
                    prop: 'depositLogin',
                    label: t('Custom.Recording.IntoAccount'),
                    align: 'center',
                    formatter: ({ row }) => row.depositLogin || '--',
                },
                {
                    prop: 'withdrawCurrency',
                    label: t('Custom.Recording.CurrencyType'),
                    align: 'center',
                    formatter: ({ row }) => row.withdrawCurrency || '--',
                },
                {
                    prop: 'withdrawAmount',
                    label: t('Custom.Recording.Amount'),
                    align: 'center',
                    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'),
                    formatter: ({ row }) => row.note || '--',
                    align: 'left'
                }
            ]
        case 4: // 活动申请记录
            return [
                {
                    prop: 'login',
                    label: t('Custom.Recording.TradingAccount'),
                    align: 'center',
                    formatter: ({ row }) => row.login || '--'
                },
                {
                    prop: 'loginType',
                    label: t('Custom.Recording.AccountType'),
                    align: 'center',
                    slot: 'accountType'
                },
                {
                    prop: 'title',
                    label: t('Custom.Recording.ActivityName'),
                    align: 'center',
                    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'),
                    formatter: ({ row }) => row.note || '--',
                    align: 'left'
                }
            ]
    }
}

// 当前列配置
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-warning',
        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: var(--color-navy-700);
        }
    }
}

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