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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="container">
            <view
                class="app-page-head card-header d-flex gap-3 flex-wrap align-items-center justify-content-between border-0">
                <view class="app-page-head mb-0">
                    <h1 class="app-page-title" v-t="'Custom.Withdraw.Title1'"></h1>
                </view>
            </view>
            <uni-loading v-if="standardAccounts.length === 0" />
            <view class="row" v-else>
                <view class="col-12">
                    <p class="tips"><span v-t="'news_add_field.OpenAccount.Des1'"></span>
                        <span class="pdfLink">
                            <cwg-link type="pdf" title="news_add_field.OpenAccount.Des2"
                                url="pdf/PrivacyPolicy2019_01.pdf" target="_blank" />
                        </span>
                    </p>
                </view>
                <view class="col-lg-4" v-for="account in standardAccounts" :key="account.id">
                    <view class="card overflow-hidden card-action action-border-primary">
                        <view class="card-header bg-light border-0 p-4 accordion-b utton text-white bg">
                            <!-- <view class="ribbon">Premium</view> -->
                            <h4 class="text-white" v-t="account.name"></h4>
                            <view class="mb-4" v-t="account.description"></view>
                            <view class="display-6 fw-bold  text-white lh-1 price-monthly">{{ account.minDeposit }}
                                <span class="h6 text-white" v-t="'vu.item9'"></span>
                            </view>
                        </view>
                        <view class="row-cell"></view>
                        <view class="row-cell"></view>
                        <view class="card-body p-4">
                            <view class="fs-5 list-inline text-dark">
                                <view class="d-flex gap-2 align-items-center py-1"> <i
                                        class="fa-regular fa-circle-check text-success"></i> {{ t('vu.item10') }}: {{
                                    account.minSpread }}
                                </view>
                                <view class="d-flex gap-2 align-items-center py-1"> <i
                                        class="fa-regular fa-circle-check text-success"></i> {{ t('vu.item11') }}: {{
                                    account.maxLeverage }}
                                </view>
                            </view>
                        </view>
                        <view class="card-footer p-4 pt-0 border-0">
                            <button @click="handleContinue(account.id)"
                                class="btn btn-danger waves-effect waves-light w-100"><i class="fi fi-rs-check"></i>
                                {{ t('Btn.item13') }}</button>
                        </view>
                    </view>
                </view>
            </view>
        </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',
        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',
        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',
        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 handleContinue = (id) => {
    router.push({
        path: "/pages/customer/create-account",
        query: { id, server: server.value },
    });
}
//获取显示权限
onMounted(() => {
    getExcludeShowLogin()
})
</script>

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

.bg {
    background-image: url('/static/images/vu/account-bg.png');
    background-size: cover;
    background-position: center bottom;
}
.tips{
    line-height: px2rpx(24);
}
</style>