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

<template>
    <cwg-popup :title="t('Tips.DeleteAccount')" :visible="props.visible" :showFooter="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>
        <cwg-tabel ref="tableRef" :columns="columns" :queryParams="search" :api="listApi">
            <template #avatar="{ row }">
                <image :src="row.avatar" class="avatar" mode="widthFix" />
                <cwg-file :path="row.path" />
            </template>
            <template #type="{ row }">
                <view class="status-badge">{{ getAccountTypeText(row.type) }}
                </view>
            </template>
            <template #action="{ row, index }">
                <view class="expand-btn" @click="doDetail(row)">
                    <!-- <cwg-icon name="crm-trash-can" :size="16" color="#1d293d" /> -->
                    <view v-t="'Tips.TransactionRecord'"></view>
                </view>
            </template>
        </cwg-tabel>
        <TransactionDialogs ref="transactionDialogsRef" v-model:visible="transactionDialogVisible"
            :loginInfo="selectedLoginInfo" />
    </cwg-popup>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { customApi } from '@/service/custom'
import TransactionDialogs from './TransactionDialogs.vue'
const { t } = useI18n()

const props = defineProps({
    // 是否显示弹窗
    visible: {
        type: Boolean,
        default: false
    },
    // 分页信息
    pagerInfo: {
        type: Object,
        default: () => ({
            current: 1,
            row: 10,
            pageTotal: 0,
            rowTotal: 0
        })
    }
})

const emit = defineEmits(['update:visible', 'page-change', 'view-record'])
// 表格列配置
const columns = ref([
    {
        prop: 'login',
        label: t('Label.TradingAccount'),
        align: 'left'
    },
    {
        prop: 'platform',
        label: t('Label.PlatformType'),
        align: 'left'
    },
    {
        prop: 'type',
        label: t('Label.AccountType'),
        align: 'left',
        slot: 'type',
    },
    {
        prop: 'status',
        label: t('PersonalManagement.Label.State'),
        slot: 'status',
        align: 'left'
    },
    {
        label: t('Label.Action'),
        slot: 'action'
    }
])

// 列表数据
const tableData = ref([])
const loading = ref(false)

// 账户类型映射
const accountTypeMap = {
    1: 'AccountType.ClassicAccount',
    2: 'AccountType.SeniorAccount',
    3: 'AccountType.AgencyAccount',
    5: 'AccountType.SpeedAccount',
    6: 'AccountType.SpeedAccount',
    7: 'AccountType.StandardAccount',
    8: 'AccountType.CentAccount'
}

// 判断是否在7月28日之后
const isAfterJuly28 = () => {
    const today = new Date()
    const july28 = new Date(today.getFullYear(), 6, 28)
    return today > july28
}

// 获取账户类型文本
const getAccountTypeText = (type) => {
    if (type === 3 && isAfterJuly28()) {
        return '--'
    }
    const key = accountTypeMap[type]
    return key ? t(key) : '--'
}

// 查看交易记录
const selectedLoginInfo = ref({})
const transactionDialogVisible = ref(false)
const doDetail = (row) => {
    selectedLoginInfo.value = row
    transactionDialogVisible.value = true
}

const listApi = ref(null)
listApi.value = customApi.deleteAccountList

</script>

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

.delete-account-dialog {
    background-color: var(--color-white);
    border-radius: px2rpx(8);
    overflow: hidden;

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

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: px2rpx(30) px2rpx(30) px2rpx(20);

    .dialog-title {
        font-size: px2rpx(20);
        font-weight: 600;
        color: #333;
    }
}

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

.expand-btn {
    display: inline-flex;
    align-items: center;
    height: px2rpx(24);
    padding: 0 px2rpx(16);
    border: none;
    background-color: var(--color-secondary-focus);
    color: var(--color-white);
    font-size: px2rpx(13);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;

    .icon {
        transition: transform 0.3s ease;
    }
}

.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: #999;
    }
}
</style>