gypsy-crm-frontend-vu/pages/follow/transfer-history.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Ib.Report.Tit1')" />
        <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 #symbol="{ row }">
                    <view class="symbol-cell">
                        <view class="pair">{{ row.ticket || '--' }}</view>
                        <view class="desc">{{ getAccountTypeText(row.loginType) }} - {{ row.login || '--' }}</view>
                    </view>
                </template>
                <template #profit="{ row }">
                    <view class="symbol-cell">
                        <text>{{ row.amount || 0 }}</text>
                    </view>
                </template>
                <template #accountType="{ row }">
                    {{ getAccountTypeText(row.type || row.loginType) }}
                </template>
                <template #status="{ row }">
                    <view class="symbol-cell">
                        <text v-t="'State.ToBeProcessed'" v-if="row.status == 1"></text>
                        <text v-t="'State.InTheProcessing'" v-if="row.status == 2 && row.tradeStatus == 1"></text>
                        <text v-t="'State.Completed'" v-if="row.status == 2 && row.tradeStatus == 2"></text>
                        <text v-t="'State.Refused'" v-if="row.status == 3 || row.tradeStatus == 3"></text>
                    </view>
                </template>
            </cwg-tabel>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, nextTick, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { onLoad } from '@dcloudio/uni-app'
const { t, locale } = useI18n();
import { documentaryApi } from '@/service/documentary';
import { useAccountOptions } from '@/composables/useAccountOptions'
const { loginOptions, isLoaded, isSuccess } = useAccountOptions()
const search = reactive({
    login: null,
    type: null,
    orderStatus: null,
    date: null
})
// 账户类型映射
const accountTypeMap = {
    1: 'AccountType.ClassicAccount',
    2: 'AccountType.SeniorAccount',
    5: 'AccountType.SpeedAccount',
    6: 'AccountType.SpeedAccount',
    7: 'AccountType.StandardAccount',
    8: 'AccountType.CentAccount'
}
// 获取账户类型文本
const getAccountTypeText = (type: number) => {
    const key = accountTypeMap[type as keyof typeof accountTypeMap]
    return key ? t(key) : '--'
}
// 表格列配置
const columns = computed(() => [
    {
        prop: 'ticket',
        label: t('Documentary.TundManagement.item5'),
        align: 'center',
        formatter: ({ row }) => row.ticket || '--'
    },
    {
        prop: 'login',
        label: t('Documentary.console.item4'),
        align: 'center',
        formatter: ({ row }) => row.login || '--'
    },
    {
        prop: 'loginType',
        label: t('Label.Type'),
        align: 'center',
        slot: 'accountType'
    },
    {
        prop: 'amount',
        label: t('Label.Amount'),
        align: 'center',
        formatter: ({ row }) => row.amount || '0' | NumberFormat1
    },
    {
        prop: 'addTime',
        label: t('Documentary.TundManagement.item6'),
        align: 'center',
        formatter: ({ row }) => row.addTime || '--'
    },
    {
        prop: 'approveTime',
        label: t('Documentary.TundManagement.item7'),
        align: 'center',
        formatter: ({ row }) => row.approveTime || '--'
    },
    {
        prop: 'status',
        label: t('Label.State'),
        align: 'center',
        slot: 'status'
    },
    {
        prop: 'approveDesc',
        label: t('Label.Note'),
        align: 'center',
        className: 'bor-r',
        type: 'note'
    }
])

const mobilePrimaryFields = computed(() => [
    {
        prop: 'symbol',
        label: t('Documentary.TundManagement.item5'),      // 交易品种
        align: 'left',
        slot: 'symbol'
    },
    {
        prop: 'profit',
        label: t('Label.Amount'),     // 利润, USD
        slot: 'profit',
        align: 'right'
    },
    {
        prop: 'more',
        type: 'more',
        width: 20,
        align: 'right'
    },
])
const orderStatusMap = computed(() => ([
    { value: null, text: t('Custom.PaymentHistory.All') },
    { value: 0, text: t('State.ToBeProcessed') },
    { value: 1, text: t('State.InTheProcessing') },
    { value: 2, text: t('State.Completed') },
    { value: 3, text: t('State.Refused') },
]));
const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));

// 动态传入筛选字段配置
const filterFields = computed(() => [
    {
        key: 'status', type: 'select', label: t('Custom.PaymentHistory.Status'), placeholder: t('placeholder.choose'), options: orderStatusMap.value, defaultValue: null
    },
    { 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)

    // search.login = params.login && Number(params.login)
    // console.log(params.login, 12);
    search.platform = loginOptions.find(item => item.value == params.login)?.platform || ''
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}

const handleReset = (params) => {
    Object.assign(search, params)
    search.platform = loginOptions.find(item => item.value == params.login)?.platform || ''
    nextTick(() => {
        tableRef.value.refreshTable()
    })
}
const listApi = ref(null)
listApi.value = documentaryApi.followTransferList

const getSymbolParts = (sym: string) => {
    if (!sym) return ['', '']
    const s = String(sym).toUpperCase()
    if (s.includes('/')) {
        const [base, quote] = s.split('/')
        return [base, quote]
    }
    const base = s.slice(0, 3)
    const quote = s.slice(3)
    return [base, quote]
}
const formatCmdName = (cmd: string) => {
    const v = String(cmd || '').toLowerCase()
    if (v.includes('sell')) return '卖出'
    if (v.includes('buy')) return '买入'
    return cmd || ''
}
const getCmdColorClass = (cmd: string) => {
    const v = String(cmd || '').toLowerCase()
    if (v.includes('sell')) return 'is-sell'
    if (v.includes('buy')) return 'is-buy'
    return ''
}
const getProfitColorClass = (profit: any) => {
    const n = Number(profit)
    if (!Number.isFinite(n) || n === 0) return ''
    return n > 0 ? 'is-profit' : 'is-loss'
}

onLoad((e) => {
    console.log(e, 'e')
    if (e.login) {
        // ✅ 必须转数字！你的 value 是数字类型
        search.login = Number(e.login)
    }
})
</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;
}

.symbol-cell {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex-direction: column;

    .pair {
        font-weight: 600;
        color: var(--color-slate-900);
    }

    .desc {
        color: var(--color-slate-600);
    }
}

.is-sell,
.is-loss {
    color: #eb483f;
}

.is-buy,
.is-profit {
    color: #46cd7c;
}




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