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

<template>
    <view class="account-card">
        <!-- 折叠/展开按钮 -->
        <button class="collapse-btn" @click="toggleExpand">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                :class="['chevron-icon', { expanded: isExpanded }]">
                <path d="M6 15l6 -6l6 6" />
            </svg>
        </button>

        <!-- 标签区域 -->
        <view class="labels-container">
            <view class="labels">
                <template v-for="(label, index) in account.labels" :key="index">
                    <view v-if="label" class="label-badge">
                        {{ label }}
                    </view>
                </template>
            </view>
            <view class="account-number"># {{ account.accountNumber }}</view>
            <view class="account-nickname">{{ nickName }}</view>
        </view>

        <!-- 主要内容区域（余额和操作按钮） -->
        <view class="main-content">
            <!-- 余额 -->
            <view class="balance">
                <text class="balance-number">{{ balanceInteger }}</text>
                <text class="balance-decimal">{{ balanceDecimal }} {{ account.currency }}</text>
            </view>

            <!-- 移动端圆形按钮组（≤1100px显示） -->
            <view class="mobile-buttons">
                <!-- 交易 -->
                <view class="circle-btn" @click="handleAction('trade')">
                    <view class="circle-icon">
                        <cwg-icon name="crm-trade" :size="16" color="#2e3a47" />
                    </view>
                    <text class="circle-label" v-t="'Shop.Index.Transaction'" />
                </view>
                <!-- 入金（带限制包装，此处简化） -->
                <view class="circle-btn" @click="toDeposit" v-if="!isDemo">
                    <view class="circle-icon">
                        <cwg-icon name="crm-deposit" :size="16" color="#2e3a47" />
                    </view>
                    <text class="circle-label" v-t="'Home.page_customer.item2'" />
                </view>

                <!-- 出金 -->
                <view class="circle-btn" @click="toWithdraw" v-if="!isDemo">
                    <view class="circle-icon">
                        <cwg-icon name="crm-withdraw" :size="16" color="#2e3a47" />
                    </view>
                    <text class="circle-label" v-t="'Home.page_customer.item3'" />
                </view>

                <!-- 转账 -->
                <view class="circle-btn" @click="toTransfer" v-if="!isDemo">
                    <view class="circle-icon">
                        <cwg-icon name="crm-transfer" :size="16" color="#2e3a47" />
                    </view>
                    <text class="circle-label" v-t="'Custom.Index.Transfer'" />
                </view>

                <!-- 更多（三点） -->
                <cwg-dropdown @open="onOpen" @close="onClose" :menu-list="customMenuList"
                    @menuClick="handleCustomClick">
                    <view class="circle-btn">
                        <view class="circle-icon">
                            <cwg-icon name="crm-ellipsis-vertical" :size="16" color="#2e3a47" />
                        </view>
                        <text class="circle-label" v-t="'Latest.More'" />
                    </view>
                </cwg-dropdown>

            </view>

            <!-- 桌面端按钮组（>1100px显示） -->
            <view class="desktop-buttons">
                <view class="action-btn primary" @click="handleAction('trade')">
                    <span class="btn-icon">
                        <cwg-icon name="crm-trade" :size="16" color="#fff" />
                    </span>
                    <text v-t="'Shop.Index.Transaction'" />
                </view>
                <view class="action-btn" @click="toDeposit" v-if="!isDemo">
                    <span class="btn-icon">
                        <cwg-icon name="crm-deposit" :size="16" color="#2e3a47" />
                    </span>
                    <text v-t="'Home.page_customer.item2'" />
                </view>
                <view class="action-btn" @click="toWithdraw" v-if="!isDemo">
                    <span class="btn-icon">
                        <cwg-icon name="crm-withdraw" :size="16" color="#2e3a47" />
                    </span>
                    <text v-t="'Home.page_customer.item3'" />
                </view>
                <view class="action-btn" @click="toTransfer" v-if="!isDemo">
                    <span class="btn-icon">
                        <cwg-icon name="crm-transfer" :size="16" color="#2e3a47" />
                    </span>
                    <text v-t="'Custom.Index.Transfer'" />
                </view>
                <cwg-dropdown @open="onOpen" @close="onClose" :menu-list="customMenuList"
                    @menuClick="handleCustomClick">
                    <view class="action-btn icon-only">
                        <cwg-icon name="crm-ellipsis-vertical" :size="16" color="#2e3a47" />
                    </view>
                </cwg-dropdown>

            </view>
        </view>
        <view ref="infoBottomRef" class="info-bottom" :style="{
            height: isExpanded ? infoBottomHeight + 'px' : '0px',
            transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
        }">
            <!-- 底部信息区域（折叠时隐藏） -->
            <view class="info-section">
                <view class="info-column">
                    <cwg-label-line-value :label="t('Label.Leverage')" :value="account.actualLeverage" />
                    <cwg-label-line-value label="浮动盈/亏" :value="account.floatingPL" />
                    <cwg-label-line-value :label="t('Label.Balance')" :value="account.balanceWithSymbol" />
                </view>
                <view class="info-column">
                    <cwg-label-line-value :label="t('Label.Equity')" :value="account.equityWithSymbol" />
                    <cwg-label-line-value :label="t('Label.Credit')" :value="account.creditWithSymbol" />
                    <cwg-label-line-value label="平台" :value="account.platform" />
                </view>
            </view>
            <!-- 额外操作行（服务器、登录、更改密码，折叠时隐藏） -->
            <view class="extra-actions">
                <!-- 登录复制行 -->
                <view class="copy-row">
                    <span class="label">{{ account.platform }} 登陆</span>
                    <span class="value">{{ account.login }}</span>
                    <view class="copy-btn" @click="copy(account.login)">
                        <cwg-icon name="copy" :size="16" color="#2e3a47" />
                    </view>
                </view>

                <!-- 更改交易密码按钮 -->
                <view class="change-password-btn" @click="handleAction('changePassword1')" v-if="!isDemo">
                    <span class="btn-icon">
                        <cwg-icon name="crm-xg" :size="16" color="#2e3a47" />
                    </span>
                    更改交易密码
                </view>
            </view>
        </view>

        <!-- 通知区域（预留） -->
        <view class="notificators"></view>
        <TerminalDialog v-model:visible="terminalDialogVisible" />
        <!-- <TerminalNickNameDialog v-model:visible="terminalNickNameDialogVisible" :account="account"
            @save="saveNickName" /> -->
        <TerminalChangePasswordDialog v-model:visible="terminalChangePasswordDialogVisible" :pwdType="pwdType"
            :account="account" />
        <TerminalInfoDialog v-model:visible="terminalInfoDialogVisible" :accountNumber="accountInfo.login"
            :form="accountInfo" :fieldList="fieldList" />
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, onBeforeUnmount } from 'vue';
import useRouter from "@/hooks/useRouter";
const router = useRouter();
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import TerminalDialog from './TerminalDialog.vue'
import TerminalChangePasswordDialog from './TerminalChangePasswordDialog.vue'
import TerminalInfoDialog from './TerminalInfoDialog.vue'

const props = defineProps<{
    account: Account;
}>();
const accountInfo = ref(props.account)
// 定义账户数据类型
export interface Account {
    labels: string[];          // 标签数组，如 ['真实', 'MT4', 'Standard']
    accountNumber: string;      // 账号，如 '85319215'
    nickName: string;           // 昵称，如 '标准账户'
    balance: number;            // 余额数字
    currency: string;           // 货币，如 'USD'
    actualLeverage: string;     // 实际杠杆，如 '1:2000'
    maxLeverage: string;        // 调整杠杆，如 '1:2000'
    floatingPL: string;         // 浮动盈亏，如 '0.00 USD'
    creditWithSymbol: string;         // 可用保证金，如 '0.00 USD'
    equityWithSymbol: string;             // 净值，如 '0.00 USD'
    platform: string;           // 平台，如 'MT4'
    server: string;             // 服务器，如 'Exness-Real28'
    login: string;              // 登录名，如 '85319215'
    balanceWithSymbol: string;              // 余额，如 '85319215'
}
const isDemo = computed(() => accountInfo.value.listType == 'demo')

const fieldList = ref([
    { label: '账户类型', key: 'nickname', copyable: false },
    { label: t('Label.Leverage'), key: 'actualLeverage', copyable: false },
    { label: '浮动盈/亏', key: 'floatingPL', copyable: false },
    { label: t('Label.Balance'), key: 'balanceWithSymbol', copyable: false },
    { label: t('Label.Equity'), key: 'equityWithSymbol', copyable: false },
    { label: t('Label.Credit'), key: 'creditWithSymbol', copyable: false },
    { label: '平台', key: 'platform', copyable: false },
    { label: '账号', key: 'login', copyable: true }
])
const nickName = ref(accountInfo.value.nickName)

const infoBottomRef = ref(null);
const infoBottomHeight = ref(0);
// 测量高度
const updateSubmenuHeight = () => {
    const el = infoBottomRef.value.$el;
    if (el) {
        // 获取内容实际高度（可能需要暂时移除过渡影响）
        const height = el.scrollHeight || el.offsetHeight;
        if (height > 0) {
            infoBottomHeight.value = height;
        }
    }
};

// 折叠状态
const isExpanded = ref(false);

// 切换折叠
const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
    if (isExpanded.value) {
        nextTick(() => {
            updateSubmenuHeight();
        });
    }
};


const terminalDialogVisible = ref(false)
const terminalChangePasswordDialogVisible = ref(false)
const terminalInfoDialogVisible = ref(false)
const pwdType = ref(1)
// 处理按钮操作
const handleAction = (type: string) => {
    console.log(type == 'info', type, 'info');
    switch (type) {
        case 'trade':
            terminalDialogVisible.value = true
            break;
        case 'changePassword1':
            pwdType.value = 1
            terminalChangePasswordDialogVisible.value = true
            break;
        case 'changePassword2':
            pwdType.value = 2
            terminalChangePasswordDialogVisible.value = true
            break;
        case 'info':
            console.log(type);
            terminalInfoDialogVisible.value = true
            break;
        default:
            break;
    }
};

const customMenuList = computed(() => !isDemo.value ? [{ label: '修改交易密码', type: 'changePassword1' }, { label: '修改投资者密码', type: 'changePassword2' }, { label: '账户信息', type: 'info' }] : [{ label: '账户信息', type: 'info' }])


const handleCustomClick = (item, index) => {


    handleAction(item.value.type)
}


// 复制文本
const copy = (text: string) => {
    uni.setClipboardData({ data: text });
};



// 按钮对应的操作方法
const toDeposit = () => {
    router.push(`/pages/customer/deposit?login=${accountInfo.value.login}&type=${accountInfo.value.type}&balance=${accountInfo.value.balance}&currency=${accountInfo.value.currency}`)
}

const toWithdraw = () => {
    router.push(`/pages/customer/withdrawal?login=${accountInfo.value.login}&type=${accountInfo.value.type}&balance=${accountInfo.value.balance}&currency=${accountInfo.value.currency}`)
}

const toTransfer = () => {
    router.push(`/pages/customer/transfer?login=${accountInfo.value.login}&type=${accountInfo.value.type}&balance=${accountInfo.value.balance}&currency=${accountInfo.value.currency}`)
}
// 格式化余额，拆分为整数和小数部分
const balanceInteger = computed(() => {
    return Math.floor(accountInfo.value.balance).toString();
});
const balanceDecimal = computed(() => {
    const parts = accountInfo.value.balance.toFixed(2).split('.');
    return parts[1] ? '.' + parts[1] : '.00';
});
// 在组件挂载后初始化高度
onMounted(() => {
    nextTick(() => {
        updateSubmenuHeight();
    });
    window.addEventListener('resize', handleResize);
    isExpanded.value = accountInfo.value.isExpanded;
});
// 监听窗口 resize
const handleResize = () => {
    if (isExpanded.value) {
        updateSubmenuHeight();
    }
};
onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
});
</script>

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

.account-card {
    border-radius: px2rpx(16);
    padding: px2rpx(16);
    margin-bottom: px2rpx(16);
    position: relative;
    border: 1px solid rgba(108, 133, 149, 0.12);
    color: #2e3a47;

    .collapse-btn {
        position: absolute;
        top: px2rpx(12);
        right: px2rpx(12);
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        color: #6c8595;
        width: px2rpx(32);
        height: px2rpx(32);
        display: flex;
        align-items: center;
        justify-content: center;

        .chevron-icon {
            transition: transform 0.3s;

            &.expanded {
                transform: rotate(180deg);
            }
        }
    }

    .labels-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: px2rpx(8);

        margin-bottom: px2rpx(16);
        padding-right: px2rpx(40); // 为折叠按钮留出空间

        .labels {
            display: flex;
            gap: px2rpx(8);
        }

        .label-badge {
            background-color: rgba(108, 133, 149, 0.08);
            border-radius: px2rpx(4);
            padding: px2rpx(4) px2rpx(8);
            font-size: px2rpx(12);
            color: #6c8595;
            font-weight: 500;
        }

        .account-number {
            font-size: px2rpx(18);
            font-weight: 600;
            line-height: 1.3;
        }

        .account-nickname {
            font-size: px2rpx(14);
            color: #6c8595;
        }
    }

    .main-content {
        .balance {
            margin-bottom: px2rpx(16);

            .balance-number {
                font-size: px2rpx(32);
                font-weight: 700;
            }

            .balance-decimal {
                font-size: px2rpx(16);
                color: #6c8595;
                margin-left: px2rpx(4);
            }
        }

        // 移动端按钮组（默认显示）
        .mobile-buttons {
            display: flex;
            justify-content: center;
            gap: px2rpx(0);
            margin-bottom: px2rpx(16);
            flex-wrap: wrap;

            .circle-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                width: px2rpx(64);

                .circle-icon {
                    width: px2rpx(48);
                    height: px2rpx(48);
                    border-radius: 50%;
                    background-color: #f5f7f9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #2e3a47;
                    transition: background-color 0.2s;

                    &:hover {
                        background-color: #e9ecef;
                    }

                    svg {
                        width: px2rpx(24);
                        height: px2rpx(24);
                    }
                }

                .circle-label {
                    font-size: px2rpx(12);
                    margin-top: px2rpx(4);
                    color: #6c8595;
                }
            }
        }

        // 桌面端按钮组（默认隐藏，屏幕>1100px时显示）
        .desktop-buttons {
            display: none;

            .action-btn {
                background: transparent;
                border: 1px solid rgba(108, 133, 149, 0);
                border-radius: px2rpx(8);
                padding: px2rpx(8) px2rpx(20);
                font-size: px2rpx(14);
                color: #2e3a47;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: px2rpx(8);
                cursor: pointer;
                transition: all 0.2s;
                height: px2rpx(40);
                box-sizing: border-box;
                background-color: rgba(108, 133, 149, 0.08);

                &.primary {
                    background-color: var(--color-navy-700);
                    color: #fff;

                    svg {
                        stroke: #fff;
                    }

                    &:hover {
                        background-color: var(--color-navy-600);
                    }
                }

                &:hover {
                    border: 1px solid rgba(108, 133, 149, 0.2);
                }

                .btn-icon {
                    display: flex;
                    align-items: center;

                    svg {
                        width: px2rpx(18);
                        height: px2rpx(18);
                    }
                }

                &.icon-only {
                    padding: px2rpx(8);
                }
            }
        }
    }

    .info-section {
        display: flex;
        gap: px2rpx(24);
        padding: px2rpx(16) 0;
        border-top: 1px solid rgba(108, 133, 149, 0.12);
        border-bottom: 1px solid rgba(108, 133, 149, 0.12);
        margin: px2rpx(16) 0;

        .info-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: px2rpx(12);
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: px2rpx(14);

            .label {
                color: #6c8595;
            }

            .line {
                flex: 1;
                height: 1px;
                border-top: 1px dashed rgba(108, 133, 149, 0.5);
                margin-bottom: px2rpx(1);

            }

            .value {
                font-weight: 500;
                color: #2e3a47;
            }
        }
    }

    @media screen and (max-width: 768px) {
        .info-section {
            flex-direction: column;
            gap: px2rpx(12);
        }
    }

    .extra-actions {
        display: flex;
        align-items: center;
        gap: px2rpx(8);
        margin-bottom: px2rpx(12);

        .copy-row {
            display: flex;
            align-items: center;
            gap: px2rpx(8);

            font-size: px2rpx(14);

            .label {
                color: #6c8595;
                min-width: px2rpx(70);
            }

            .value {
                flex: 1;
                color: #2e3a47;
                font-family: monospace;
            }

            .copy-btn {
                background: transparent;
                border: 1px solid rgba(108, 133, 149, 0);
                padding: 0;
                cursor: pointer;
                color: #6c8595;
                width: px2rpx(32);
                height: px2rpx(32);
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;

                svg {
                    width: px2rpx(20);
                    height: px2rpx(20);
                }

                &:hover {
                    background-color: rgba(108, 133, 149, 0.05);
                    border: 1px solid rgba(108, 133, 149, 0.2);
                }
            }
        }

        .change-password-btn {
            background: transparent;
            box-sizing: border-box;
            border: 1px solid rgba(108, 133, 149, 0);
            border-radius: px2rpx(8);
            padding: px2rpx(8) px2rpx(16);
            font-size: px2rpx(14);
            color: #2e3a47;
            display: inline-flex;
            gap: px2rpx(8);
            cursor: pointer;
            margin: 0;
            // transition: all 0.2s;

            .btn-icon svg {
                width: px2rpx(16);
                height: px2rpx(16);
            }

            &:hover {
                background-color: rgba(108, 133, 149, 0.05);
                border: 1px solid rgba(108, 133, 149, 0.2);
            }
        }
    }

    .info-bottom {
        overflow: hidden;
    }

    .notificators {
        // 预留通知区域
    }
}

// 响应式：屏幕宽度 > 1100px 时，隐藏移动端按钮，显示桌面端按钮
@media screen and (min-width: 1100px) {
    .account-card {
        .main-content {
            .mobile-buttons {
                display: none;
            }

            .desktop-buttons {
                display: flex;
                gap: px2rpx(8);
                justify-content: flex-end;
            }
        }
    }
}
</style>