gypsy-crm-frontend-vu/pages/follow/account-management.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="container">
            <view class="row">
                <view class="col-12">
                    <view class="border-0 card-header">
                        <view class="d-flex flex-wrap gap-3 align-items-center justify-content-between mb-3">
                            <h3 class="mb-0" style="align-self: flex-start" v-t="'Documentary.TundManagement.item9'"></h3>
                            <button class="btn btn-secondary btn-shadow waves-effect" @click="toSubscribeList">
                                <view class="d-flex align-items-center">
                                    <cwg-icon icon="crm-plus" :size="16" color="#fff" />
                                    <text v-t="'Documentary.TundManagement.item44'" />
                                </view>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="content-container list-content-empty" v-if="accountDataLoading || accountData.length > 0">
            <uni-loading v-if="accountDataLoading" />
            <view class="field-container" v-else>
                    <view class="account-l-con" v-for="(item, index) in accountData" :key="index">
                        <view class="tit">
                            <view>
                                <i class="el-icon-success green-icon"></i><text class="tit-tit"
                                    v-t="'Documentary.TundManagement.item13'"></text>
                                - {{ item.followLogin || "--" }}
                            </view>
                        </view>
                        <view class="account-grid">
                            <view class="account-grid-item">
                                <view class="sub" v-t="'Label.TradingAccount'"></view>
                                <view class="num">{{ item.followLogin || "--" }}</view>
                            </view>
                            <view class="account-grid-item">
                                <view class="sub" v-t="'Label.PlatformType'"></view>
                                <view class="num">{{ item.followPlatform || "--" }}</view>
                            </view>
                            <view class="account-grid-item">
                                <view class="sub" v-t="'Label.AccountType'"></view>
                                <view class="num">
                                    <text>{{ groupTypeName(item.followLoginType) }}</text>
                                </view>
                            </view>
                            <view class="account-grid-item">
                                <view class="sub" v-t="'Label.Leverage'"></view>
                                <view class="num">
                                    <text v-if="item.followLeverage">1:{{ item.followLeverage }}</text>
                                    <text v-else>{{ "--" }}</text>
                                </view>
                            </view>
                            <view class="account-grid-item">
                                <view class="sub" v-t="'Label.Balance'"></view>
                                <view class="num">
                                    {{ numberFormat(item.followBalance) }}
                                </view>
                            </view>
                            <view class="account-grid-item">
                                <view class="sub" v-t="'Label.Equity'"></view>
                                <view class="num">{{ numberFormat(item.followEquity) }}</view>
                            </view>
                        </view>
                    </view>
            </view>
        </view>
        <view v-else class="content-container list-content-empty">
            <view class="list-empty-state">
                <cwg-empty-state />
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed, ref, nextTick, onMounted, reactive, watch } from 'vue';
import { isAfterJuly28 } from '@/utils/dateUtils'
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { documentaryApi } from '@/service/documentary';
import { useFilters } from '@/composables/useFilters'
const { numberFormat, numberDecimal } = useFilters()
import useRouter from "@/hooks/useRouter";
const router = useRouter()
// 账户类型
function groupTypeName(type) {
    const typeMap = {
        '1': t('AccountType.ClassicAccount'),
        '2': t('AccountType.SeniorAccount'),
        '3': isAfterJuly28() ? '--' : t('AccountType.AgencyAccount'),
        '5': t('AccountType.SpeedAccount'),
        '6': t('AccountType.SpeedAccount'),
        '7': t('AccountType.StandardAccount'),
        '8': t('AccountType.CentAccount')
    }
    return typeMap[type] || ''
}
const toSubscribeList = () => {
    console.log(111111);

    router.push('/pages/follow/trading-center')
}
//获取客户信号源账户
const accountDataLoading = ref(false)
const accountData = ref([])
const accountPager = ref({
    current: 1,
    row: 10,
    rowTotal: 0,
    pageTotal: 0
})
const getDealLogin = async () => {
    accountDataLoading.value = true;
    let res = await documentaryApi.followDealSubscribeLoginList({
        platform: null,
        page: {
            current: accountPager.value.current,
            row: accountPager.value.row,
        },
    });
    if (res.code == 200) {
        accountData.value = res.data || []
        accountPager.value.rowTotal = res.page.rowTotal;
        accountPager.value.pageTotal = res.page.pageTotal;
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
    }
    accountDataLoading.value = false;
}


onMounted(() => {
    getDealLogin()
})

</script>

<style scoped lang="scss">
@import "@/uni.scss";
.btn{
  margin: 0;
}
.content-container {
    .field-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: px2rpx(16);
        width: 100%;
        min-width: 0;
        overflow: hidden;

        @media (max-width: 991px) {
            grid-template-columns: 1fr;
        }

        .account-l-con {
            background-color: transparent;
            border-radius: px2rpx(8);
            padding: px2rpx(20);
            margin-bottom: px2rpx(16);
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--bs-border-color);

            &:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            .tit {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: px2rpx(20);
                padding-bottom: px2rpx(12);
                border-bottom: 1px solid var(--bs-border-color);

                view:first-child {
                    display: flex;
                    align-items: center;
                    gap: px2rpx(8);

                    .green-icon {
                        color: #28a745;
                        font-size: px2rpx(16);
                    }

                    .tit-tit {
                        font-size: px2rpx(16);
                        font-weight: 600;
                        color: var(--bs-emphasis-color);
                    }

                    text:last-child {
                        font-size: px2rpx(14);
                        font-weight: 500;
                        color: var(--bs-body-color);
                    }
                }

                .caozuo {
                    display: flex;
                    gap: px2rpx(12);

                    i {
                        font-size: px2rpx(18);
                        color: var(--bs-body-color);
                        transition: all 0.2s ease;

                        &:hover {
                            color: #eb3f57;
                            cursor: pointer;
                        }

                        &:active {
                            transform: scale(0.9);
                        }
                    }
                }
            }

            .account-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: px2rpx(16);
                width: 100%;
                box-sizing: border-box;

                @media (max-width: 480px) {
                    grid-template-columns: repeat(3, 1fr);
                }

                .account-grid-item {
                    /* 🔥 核心修复 3：去掉强制最小宽度，避免超宽 */
                    /* min-width: px2rpx(200); */
                    margin-bottom: px2rpx(16);

                    .sub {
                        font-size: px2rpx(12);
                        font-weight: 500;
                        color: var(--bs-body-color);
                        margin-bottom: px2rpx(4);
                        text-transform: uppercase;
                        letter-spacing: px2rpx(0.5);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .num {
                        font-size: px2rpx(14);
                        font-weight: 400;
                        color: var(--bs-emphasis-color);
                        line-height: 1.4;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

}

.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content-title-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);
        margin-bottom: px2rpx(24);


        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-error);
            color: #fff;
            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-primary1 {
            background-color: #cf1322;
            ;
        }

        .btn-primary2 {
            background-color: var(--color-secondary-focus);
        }
    }
}
</style>