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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="info-card">
            <view class="content-title">
                <view v-t="'Home.page_customer.item4'"></view>
            </view>
            <view class="search-bar">
                <cwg-combox v-model:value="search.type" :options="typeMap" :placeholder="t('placeholder.choose')" />
                <cwg-combox v-model:value="search.orderStatus" :options="orderStatusMap"
                    :placeholder="t('Custom.PaymentHistory.StatusPlaceholder')" />
                <uni-easyinput v-model="search.login" :placeholder="t('placeholder.login')" />
                <uni-datetime-picker type="daterange" v-model="search.date"
                    :placeholder="t('placeholder.Start') + ' - ' + t('placeholder.End')" />
            </view>
            <cwg-tabel ref="tableRef" :columns="columns" :queryParams="search" :api="listApi" :show-operation="false"
                :showPagination="false">
                <template #avatar="{ row }">
                    <image :src="row.avatar" class="avatar" mode="widthFix" />
                    <cwg-file :path="row.path" />
                </template>
                <template #type="{ row }">
                    <view class="status-badge">{{typeMap.find(item => item.value === row.type)?.text}}
                    </view>
                </template>
                <template #status="{ row }">
                    <OrderStatusMachineCell :row="row" @cancel="handleOrderCancel" @action="handleOrderAction" />
                </template>
                <template #btn="{ row }">
                    <text :class="['operation-btn', row.status !== 4 ? 'disabled' : '']" @click="openAddFile(row)">
                        <cwg-icon name="crm-image" :size="16" color="#1d293d" />
                        <text v-t="'State.Again'" />
                    </text>
                </template>
            </cwg-tabel>
        </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 { financialApi } from '@/service/financial';
import OrderStatusMachineCell from './components/OrderStatusMachineCell.vue'
const search = ref({})
const typeMap = computed(() => ([
    { value: null, text: t('Custom.PaymentHistory.All') },
    { value: 1, text: t('Custom.PaymentHistory.Deposit') },
    { value: 2, text: t('Custom.PaymentHistory.Withdrawals') }
]));
const orderStatusMap = computed(() => ([
    { value: null, text: t('Custom.PaymentHistory.All') },
    { value: 1, text: t('State.ToBeProcessed') },
    { value: 2, text: t('State.Completed') },
    { value: 3, text: t('State.InTheProcessing') },
    { value: 4, text: t('State.Refused') },
    { value: 5, text: t('State.expireTime') },
    { value: 6, text: t('State.Cancelled') },
]));

const handleOrderCancel = (row) => {
    console.log('取消订单:', row)
    // 处理取消逻辑
}

const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));
// 表格列配置
const columns = ref([
    {
        prop: 'serial',
        label: t('Custom.PaymentHistory.Serial'),
        align: 'left'
    },
    {
        prop: 'login',
        label: t('Custom.PaymentHistory.TradingAccount'),
        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'
    }
])

const addFileDialog = ref(null);
const listApi = ref(null)
listApi.value = financialApi.BalanceList
</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>