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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="account-selector">
            <!-- PC 端表格视图 -->
            <view class="account-table pc-view">
                <!-- 表头：账户类型 -->
                <view class="table-header">
                    <view class="header-cell type-cell">标准型账户</view>
                    <view class="header-cell">最低入金</view>
                    <view class="header-cell">最小手数</view>
                    <view class="header-cell">最大杠杆</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>
                </template>
            </view>

            <!-- 移动端轮播视图 -->
            <view class="mobile-view">
                <swiper class="account-swiper" :current="currentSwiperIndex" circular indicator-dots
                    indicator-active-color="#1e2a3a" @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="'最低入金'" :value="account.minDeposit" />
                                <cwg-label-line-value :label="'最小手数'" :value="account.minSpread" />
                                <cwg-label-line-value :label="'最大杠杆'" :value="account.maxLeverage" />
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 继续按钮 -->
        <view class="action-button">
            <view class="btn" @click="handleContinue">
                <text class="button-text">继续</text>
            </view>
        </view>
        <!-- 条款说明 -->
        <view class="terms-section">
            <text v-t="'news_add_field.OpenAccount.Des1'"></text>
            <text class="pdfLink">
                <a href="/static/pdf/PrivacyPolicy2019_01.pdf" target="_blank"
                    v-t="'news_add_field.OpenAccount.Des2'"></a>
            </text>
        </view>

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


<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { userToken } from "@/composables/config";
import { customApi } from "@/service/custom";
import { ucardApi } from "@/api/ucard";
import useUserStore from "@/stores/use-user-store";
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
const router = useRouter();
const { t, locale } = useI18n();
const userStore = useUserStore();
const server = ref('')
const showLogin = ref([])
const isTimeShow = ref(true)

onLoad((e) => {
    server.value = e.server
})

// 定义账户数据类型
const standardAccounts = ref([
    {
        id: 7,
        type: 'StandardAccount',
        name: 'AccountType.StandardAccount',
        showCondition: () => showLogin.value.indexOf('7') === -1,
        description: 'Custom.NewAccount.DesLogin5',
        minDeposit: '50 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.indexOf('2') === -1,
        description: 'Custom.NewAccount.DesLogin3',
        minDeposit: '200 USD',
        minSpread: '0.01',
        maxLeverage: '1:2000',
        icon: '/static/images/info/bank-information-2.webp',
    },
    {
        id: 8,
        type: 'CentAccount',
        name: 'AccountType.CentAccount',
        showCondition: () => showLogin.value.indexOf('8') === -1 && isTimeShow.value,
        description: 'Custom.NewAccount.DesLogin8',
        minDeposit: '10 USD',
        minSpread: '0.01',
        maxLeverage: '1:1000',
        icon: '/static/images/info/bank-information-3.webp',
    }
])

// 过滤后的账户列表
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 },
    });
}
</script>

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

.account-selector {
    background-color: #fff;
    overflow: hidden;
}

.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: #333;
}

.table-header {
    display: flex;
    padding: px2rpx(10) 0;
    font-weight: 500;
    color: #666;

    .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 {
        height: px2rpx(520);
        width: 100%;

    }

    .account-card {
        background: #fff;
        border-radius: px2rpx(8);
        margin: px2rpx(2) px2rpx(20);
        padding: px2rpx(30);
        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: #666;
            }
        }

        .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: #666;
                    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: #1e2a3a;
        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: #666;
    text-align: center;

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

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

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