gypsy-crm-frontend-vu/pages/customer/account-select.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Custom.Withdraw.Title1')" />
        <view class="account-selector">
            <template v-if="loading">
            </template>
            <template v-else-if="standardAccounts.length > 0">
                <!-- PC 端表格视图 -->
                <view class="account-table pc-view">
                    <!-- 表头：账户类型 -->
                    <view class="table-header">
                        <view class="header-cell type-cell">标准型账户</view>
                        <view class="header-cell" v-t="'vu.item9'"></view>
                        <view class="header-cell" v-t="'vu.item10'"></view>
                        <view class="header-cell" v-t="'vu.item11'"></view>
                        <!-- <view class="header-cell" v-t="'vu.item12'"></view> -->

                    </view>
                    <!-- 标准账户行 -->
                    <template v-for="account in standardAccounts" :key="account.id">
                        <view class="account-row" v-if="account.showCondition()" @click="onAccountSelect(account.id)"
                            :class="{ 'active': account.id == selectedAccountId }">
                            <view class="row-cell type-cell">
                                <radio-group @change="(e) => onAccountSelect(account.id)" class="radio-group">
                                    <label class="radio-label">
                                        <radio :value="account.id" :checked="selectedAccountId === account.id"
                                            color="#1e2a3a" />
                                        <image class="account-icon" :src="account.icon" mode="aspectFit" />
                                        <view class="account-info">
                                            <text class="account-name" v-t="account.name" />
                                            <text class="account-desc" v-t="account.description" />
                                        </view>
                                    </label>
                                </radio-group>
                            </view>
                            <view class="row-cell">{{ account.minDeposit }}</view>
                            <view class="row-cell">{{ account.minSpread }}</view>
                            <view class="row-cell">{{ account.maxLeverage }}</view>
                            <!-- <view class="row-cell">{{ account.minSpread }}</view> -->
                        </view>
                    </template>
                </view>

                <!-- 移动端轮播视图 -->
                <view class="mobile-view">
                    <swiper class="account-swiper" :current="currentSwiperIndex" circular indicator-dots
                        indicator-active-color="#cf1322" @change="onSwiperChange">
                        <swiper-item v-for="account in filteredAccounts" :key="account.id">
                            <view class="account-card" @click="onAccountSelect(account.id)"
                                :class="{ 'active': account.id == selectedAccountId }">
                                <image class="card-img" :src="account.icon" mode="aspectFit" />
                                <view class="card-title" v-t="account.name"></view>
                                <view class="card-tag">
                                    <text class="tag-label">{{ account.typeLabel }}</text>
                                </view>
                                <p class="card-desc" v-t="account.description"></p>
                                <view class="card-info-stack">
                                    <cwg-label-line-value :label="t('vu.item9')" :value="account.minDeposit" />
                                    <cwg-label-line-value :label="t('vu.item10')" :value="account.minSpread" />
                                    <cwg-label-line-value :label="t('vu.item11')" :value="account.maxLeverage" />
                                    <!-- <cwg-label-line-value :label="t('vu.item12')" :value="account.minSpread" /> -->
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
                <!-- 继续按钮 -->
                <view class="action-button">
                    <view class="btn" @click="handleContinue">
                        <text class="button-text" v-t="'forget.forget'" />
                    </view>
                </view>
            </template>
        </view>

        <!-- 条款说明 -->
        <view class="terms-section">
            <text v-t="'news_add_field.OpenAccount.Des1'"></text>
            <text class="pdfLink">
                <cwg-link type="pdf" title="news_add_field.OpenAccount.Des2" url="pdf/PrivacyPolicy2019_01.pdf"
                    target="_blank" />
            </text>
        </view>

    </cwg-page-wrapper>
</template>


<script setup>
import { ref, computed, onMounted, } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { customApi } from "@/service/custom";
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
const router = useRouter();
const { t } = useI18n();
const server = ref('')
const showLogin = ref(null)
const isTimeShow = ref(true)
const loading = ref(true)

onLoad((e) => {
    server.value = e.server
})
const typeList = computed(() => [
    {
        id: 7,
        type: 'StandardAccount',
        name: 'AccountType.StandardAccount',
        showCondition: () => showLogin.value && showLogin.value.indexOf('7') == -1,
        description: 'Custom.NewAccount.DesLogin5',
        minDeposit: '200 USD',
        minSpread: '0.01',
        maxLeverage: '1:1000',
        icon: '/static/images/info/bank-information-1.webp',
    },
    {
        id: 2,
        type: 'SeniorAccount',
        name: 'AccountType.SeniorAccount',
        showCondition: () => showLogin.value && showLogin.value.indexOf('2') == -1,
        description: 'Custom.NewAccount.DesLogin3',
        minDeposit: '200 USD',
        minSpread: '0.01',
        maxLeverage: '1:1000',
        icon: '/static/images/info/bank-information-2.webp',
    },
    {
        id: 8,
        type: 'CentAccount',
        name: 'AccountType.CentAccount',
        showCondition: () => showLogin.value && showLogin.value.indexOf('8') == -1 && isTimeShow.value,
        description: 'Custom.NewAccount.DesLogin8',
        minDeposit: '200 USD',
        minSpread: '0.01',
        maxLeverage: '1:500',
        icon: '/static/images/info/bank-information-3.webp',
    }
])
// 定义账户数据类型
const standardAccounts = computed(() => typeList.value.filter(account => account.showCondition()))


const getExcludeShowLogin = async () => {
    try {
        let res = await customApi.excludeShowLogin({});
        if (res.code == 200) {
            if (res.data == null) {
                showLogin.value = [];
            } else {
                showLogin.value = res.data.excludeShowLoginTypes;
            }
        } else {
            console.error('获取账户显示权限失败:', res.msg);
            showLogin.value = [];
        }
    } catch (error) {
        console.error('获取账户显示权限出错:', error);
        showLogin.value = [];
    } finally {
        loading.value = false;
    }
}
// 过滤后的账户列表
const filteredAccounts = computed(() => {
    return standardAccounts.value.filter(account => account.showCondition())
})

// 当前选中的账户 ID
const selectedAccountId = ref(7)

// 轮播图当前索引
const currentSwiperIndex = computed(() => {
    const index = filteredAccounts.value.findIndex(a => a.id === selectedAccountId.value)
    return index > -1 ? index : 0
})

// 账户选择事件
const onAccountSelect = (id) => {
    selectedAccountId.value = id
}

// 轮播图切换事件
const onSwiperChange = (e) => {
    const index = e.detail.current
    const account = filteredAccounts.value[index]
    if (account) {
        selectedAccountId.value = account.id
    }
}

// 继续按钮点击事件，向上传递选中的账户信息
const handleContinue = () => {
    router.push({
        path: "/pages/customer/create-account",
        query: { id: selectedAccountId.value, server: server.value },
    });
}
//获取显示权限
onMounted(() => {
    getExcludeShowLogin()
})
</script>

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

.account-selector {
    background-color: #fff;
    overflow: hidden;
    min-height: 400px;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #1e2a3a;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
    }

    .loading-text {
        font-size: 14px;
        color: #606266;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;

    white-space: nowrap;
}

.account-table {
    min-width: px2rpx(350);
    margin-bottom: px2rpx(10);
    /* 保证在小屏上可滚动 */
    display: flex;
    flex-direction: column;
    font-size: px2rpx(14);
    color: var(--bs-heading-color);
}

.table-header {
    display: flex;
    padding: px2rpx(10) 0;
    font-weight: 500;
    color: var(--bs-heading-color);

    .header-cell {
        flex: 1;
        text-align: center;
        padding: 0 px2rpx(8);
        white-space: normal;
        word-break: break-word;
    }

    .type-cell {
        flex: 2;
        text-align: left;
        padding-left: px2rpx(12);
    }
}

.professional-header {
    margin-top: px2rpx(8);
}

.account-row {
    display: flex;
    align-items: center;
    padding: px2rpx(12) 0;
    margin: px2rpx(12) 0;
    border: 1px solid rgba(108, 133, 149, 0.2);
    border-radius: px2rpx(8);

    &:hover {
        box-shadow: 0 10px 15px -3px rgba(7, 10, 12, 0.08), 0 4px 6px -4px rgba(7, 10, 12, 0.08), 0 0 4px 0 rgba(7, 10, 12, 0.08);
    }

    &.active {
        background-color: rgba(108, 133, 149, 0.07843);
    }

    .row-cell {
        flex: 1;
        text-align: center;
        padding: 0 px2rpx(8);
        font-size: px2rpx(12);
        color: #1e2a3a;
        white-space: normal;
        word-break: break-word;
    }

    .type-cell {
        flex: 2;
        text-align: left;
        padding-left: px2rpx(12);
    }
}

.radio-group {
    display: flex;
    align-items: center;
    width: 100%;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: px2rpx(6);
    width: 100%;
}

radio {
    transform: scale(0.8);
    margin-right: px2rpx(4);
}

.account-icon {
    width: px2rpx(48);
    height: px2rpx(48);
    margin-right: px2rpx(24);
    flex-shrink: 0;
}

.account-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;

    .account-name {
        font-size: px2rpx(14);
        font-weight: 500;
        color: #1e2a3a;
        margin-bottom: px2rpx(4);
    }

    .account-desc {
        font-size: px2rpx(12);
        color: #7f8c8d;
        line-height: 1.4;
    }
}

.mobile-view {
    display: none;
}

@media screen and (max-width: 600px) {
    .pc-view {
        display: none;
    }

    .mobile-view {
        display: block;
        padding: px2rpx(20) 0;
    }

    .account-swiper {
        min-height: px2rpx(480);
        width: 100%;

    }

    :deep(uni-swiper-item) {
        padding: 10px;
        box-sizing: border-box;
    }

    .account-card {
        background: #fff;
        border-radius: px2rpx(8);
        margin: px2rpx(2) px2rpx(2);
        padding: px2rpx(16);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 2px solid transparent;
        transition: all 0.3s;
        height: px2rpx(400);
        color: rgb(20, 29, 34);
        box-shadow:
            rgba(54, 61, 66, 0.15) 0px 0px 1px 0px,
            rgba(54, 61, 66, 0.04) 0px 2px 2px 0px,
            rgba(54, 61, 66, 0.12) 0px 2px 8px 0px,
            rgba(54, 61, 66, 0.08) 0px -2px 4px 0px;
        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;

        &.active {
            transform: translateY(px2rpx(-5));
        }

        .card-img {
            width: px2rpx(120);
            height: px2rpx(120);
            margin-bottom: px2rpx(20);
        }

        .card-title {
            font-size: px2rpx(24);
            font-weight: 700;
            color: #1e2a3a;
            margin-bottom: px2rpx(8);
        }

        .card-tag {
            background: #f0f2f5;
            padding: px2rpx(4) px2rpx(12);
            border-radius: px2rpx(20);
            margin-bottom: px2rpx(16);

            .tag-label {
                font-size: px2rpx(12);
                color: var(--bs-heading-color);
            }
        }

        .card-desc {
            font-size: px2rpx(14);
            color: #7f8c8d;
            line-height: 1.6;
            margin-bottom: px2rpx(24);
            height: px2rpx(44);
            overflow: hidden;
        }

        .card-info-stack {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: px2rpx(12);

            .info-row {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                position: relative;
                font-size: px2rpx(14);

                &::after {
                    content: "";
                    flex: 1;
                    margin: 0 px2rpx(10);
                    border-bottom: 1px dotted #ddd;
                    height: 1px;
                }

                .label {
                    color: var(--bs-heading-color);
                    order: 1;
                }

                .value {
                    color: #1e2a3a;
                    font-weight: 500;
                    order: 3;
                }
            }
        }
    }

    .action-button {
        justify-content: center !important;
        // padding: 0 px2rpx(20);

        .btn {
            width: 100%;
            min-width: unset !important;
        }
    }

    .terms-section {
        text-align: center;
        padding: 0 px2rpx(20);
    }
}

.action-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: px2rpx(40);

    .btn {
        width: px2rpx(320);
        background-color: #cf1322;
        padding: px2rpx(12) px2rpx(20);
        border-radius: px2rpx(8);
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.2s;

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

        .button-text {
            color: #fff;
            font-size: px2rpx(16);
            font-weight: 600;
        }
    }
}

.terms-section {
    margin: px2rpx(30) 0;
    font-size: px2rpx(14);
    line-height: 1.7;
    color: var(--bs-heading-color);
    text-align: center;

    .pdfLink {
        margin-left: px2rpx(4);

        a {
            color: var(--color-primary);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}
</style>