web
/
h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>BEX会员等级</title>
    <link rel="stylesheet" href="/css/vip.css">
</head>

<body>
    <div class="container">

        <div class="header">
            <svg id="backButton" width="16" height="16" viewBox="0 0 16 16" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M10.4 13.6L4.8 8L10.4 2.4" stroke="white" stroke-width="1.6" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
            <div class="header-title" data-i18n="headerTitle">BEX会员等级</div>
            <div></div>
        </div>

        <div class="vip-card">
            <i class="vip-bg"></i>
            <div class="vip-box">
                <div class="vip-card-header">
                    <div class="vip-level-badge">
                        <div class="vip-level-title" data-i18n="vipLevelTitle">会员等级</div>
                        <div class="vip-level-text" data-field="vipLevel"></div>
                    </div>
                </div>


                <div class="progress-items">
                    <div class="progress-item">
                        <div class="progress-label" data-i18n="progressContribution"> <span
                                data-field="contribution"></span> </div>
                        <div class="progress-bar">
                            <div class="progress-bar-fill" data-field="contributionProgress"></div>
                        </div>
                    </div>
                    <div class="progress-item">
                        <div class="progress-label" data-i18n="progressStaking"><span data-field="staking"></span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-bar-fill" data-field="stakingProgress"></div>
                        </div>
                    </div>
                </div>
                <div class="vip-card-tip" data-i18n="vipTip">*满足以上条件即可升级至 VIP3</div>

            </div>
        </div>

        <!-- <div class="section-title" data-i18n="benefitsTitle">等级权益</div> -->

        <div class="benefits-tabs" id="benefitsTabs">
            <div class="benefits-tab active" data-tab="requirements" data-i18n="benefitsTabRequirements">等级权益</div>
            <div class="benefits-tab" data-tab="benefits" data-i18n="benefitsTabBenefits">升级规则</div>
        </div>

        <div class="benefits-table" id="benefitsTable">
            <div>
                <div class="benefits-header requirements-header" style="display: none;">
                    <div data-i18n="benefitsVipLevel" class="td">会员等级</div>
                    <div data-i18n="benefitsContribution" class="td">贡献值</div>
                    <div data-i18n="benefitsStaking" class="td">个人质押要求</div>
                </div>
                <div class="benefits-header benefits-ben-header">
                    <div data-i18n="benefitsVipLevel" class="td">会员等级</div>
                    <div data-i18n="benefitsTeamReward" class="td">团队质押动态奖励</div>
                    <div data-i18n="benefitsTradeReturn" class="td">交易返佣比例</div>
                </div>
                <div id="benefitsBody" style="display: none;"></div>
                <div id="benefitsBodyAlt"></div>
            </div>
        </div>


        <div class="contribution-section" id="contributionSection">
            <div class="contribution-title" data-i18n="contributionTitle">贡献值获取方式</div>
            <div class="contribution-card" id="contributionCard">
            </div>
            <div class="contribution-tip" data-i18n="contributionTip">*降级规则: 所有级别如贡献值下降，原级别保留 1 个月；下个月如继续未达标，则降级至对应实际级别
            </div>
        </div>

        <div class="description-modal" id="descriptionModal" style="display: none;">
            <div class="modal-overlay" id="modalOverlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title" data-i18n="modalTitle">说明</span>
                    <svg class="modal-close" id="modalClose" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </div>
                <div class="modal-body">
                    <p id="modalDescription"></p>
                </div>
            </div>
        </div>

        <div class="loading-overlay" id="loadingOverlay" style="display: none;">
            <div class="loading-content">
                <div class="loading-spinner"></div>
                <span class="loading-text" data-i18n="loadingText">加载中...</span>
            </div>
        </div>

        <div class="error-overlay" id="errorOverlay" style="display: none;">
            <div class="error-content">
                <div class="error-icon">!</div>
                <span class="error-text" data-i18n="errorText">加载失败，请稍后重试</span>
                <button class="error-retry" id="retryBtn" data-i18n="retryBtn">重试</button>
            </div>
        </div>
    </div>

    <script src="/js/app.js"></script>
    <script>
        (function () {
            const translations = {
                'zh': {
                    headerTitle: 'BEX会员等级',
                    vipLevelTitle: '会员等级',
                    progressContribution: '距离升级至 {nextVipLevel} 还需要 <span data-field="contribution"></span> (当前贡献值: <span data-field="personalValue"></span>)',
                    progressStaking: '距离升级至 {nextVipLevel} 还需要个人质押 <span data-field="staking"></span> (当前质押: <span data-field="personalStakeValue"></span>)',
                    vipTip: '*满足以上条件即可升级至 {nextVipLevel}',
                    benefitsTitle: '等级权益',
                    benefitsTabRequirements: '等级权益',
                    benefitsTabBenefits: '升级规则',
                    benefitsVipLevel: '会员等级',
                    benefitsContribution: '贡献值',
                    benefitsStaking: '个人质押要求',
                    benefitsTeamReward: '团队质押动态奖励',
                    benefitsTradeReturn: '交易返佣比例',
                    benefitsDailyLimit: '提币额度',
                    benefitsFeeDiscount: '手续费折扣',
                    benefitsCustomerService: '专属客服',
                    benefitsAirDrop: '空投权益',
                    contributionTitle: '贡献值获取方式',
                    contributionPersonal: '个人质押：质押 <span class="highlight" data-field="rules.personalStaking">100枚</span> = <span class="highlight">1个</span>贡献值',
                    contributionTeam: '团队质押：质押 <span class="highlight" data-field="rules.teamStaking">1000枚</span> = <span class="highlight">1个</span>贡献值',
                    contributionSpot: '现货交易：团队交易 <span class="highlight" data-field="rules.spotTrading">5000$</span> = <span class="highlight">1个</span>贡献值',
                    contributionFutures: '合约交易：团队交易 <span class="highlight" data-field="rules.futuresTrading">50,0000$</span> = <span class="highlight">1个</span>贡献值',
                    contributionTip: '*降级规则: 所有级别如贡献值下降，原级别保留 1 个月；下个月如继续未达标，则降级至对应实际级别',
                    loadingText: '加载中...',
                    errorText: '加载失败，请稍后重试',
                    retryBtn: '重试',
                    contributionUnit: '1个',
                    stakingUnit: '枚',
                    teamRewardUnit: '%',
                    tradeReturnUnit: '%',
                    modalTitle: '说明'
                },
                'en': {
                    headerTitle: 'BEX VIP Level',
                    vipLevelTitle: 'VIP Level',
                    progressContribution: 'Need <span data-field="contribution"></span> more contribution points to upgrade to {nextVipLevel} (Current: <span data-field="personalValue"></span>)',
                    progressStaking: 'Need <span data-field="staking">799</span> more staking coins to upgrade to {nextVipLevel} (Current: <span data-field="personalStakeValue"></span>)',
                    vipTip: '*Meet the above conditions to upgrade to {nextVipLevel}',
                    benefitsTitle: 'Level Benefits',
                    benefitsTabRequirements: 'Upgrade Requirements',
                    benefitsTabBenefits: 'Benefits',
                    benefitsVipLevel: 'VIP Level',
                    benefitsContribution: 'Contribution',
                    benefitsStaking: 'Personal Staking',
                    benefitsTeamReward: 'Team Reward',
                    benefitsTradeReturn: 'Team commission ratio',
                    benefitsDailyLimit: 'Withdrawal Limit',
                    benefitsFeeDiscount: 'Fee Discount',
                    benefitsCustomerService: 'VIP Support',
                    benefitsAirDrop: 'Airdrop',
                    contributionTitle: 'How to Earn Contribution',
                    contributionPersonal: 'Personal Staking: Stake <span class="highlight" data-field="rules.personalStaking">100 coins</span> = <span class="highlight">1</span> contribution',
                    contributionTeam: 'Team Staking: Stake <span class="highlight" data-field="rules.teamStaking">1000 coins</span> = <span class="highlight">1</span> contribution',
                    contributionSpot: 'Spot Trading: Team trade <span class="highlight" data-field="rules.spotTrading">5000$</span> = <span class="highlight">1</span> contribution',
                    contributionFutures: 'Futures Trading: Team trade <span class="highlight" data-field="rules.futuresTrading">50,0000$</span> = <span class="highlight">1</span> contribution',
                    contributionTip: '*Downgrade Rule: If contribution drops, current level is retained for 1 month; if still not met next month, downgrade to actual level',
                    loadingText: 'Loading...',
                    errorText: 'Failed to load, please try again later',
                    retryBtn: 'Retry',
                    contributionUnit: '1',
                    stakingUnit: 'coins',
                    teamRewardUnit: '%',
                    tradeReturnUnit: '%',
                    modalTitle: 'Description'
                }
            };

            function getUrlParam(name) {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(name);
            }

            function getCurrentLang() {
                const lang = getUrlParam('lang');
                if (lang === 'en') {
                    return 'en';
                }
                return 'zh';
            }

            function applyTranslations(lang, nextVipLevel) {
                const translation = translations[lang] || translations['en'];
                const elements = document.querySelectorAll('[data-i18n]');

                elements.forEach(element => {
                    const key = element.dataset.i18n;
                    if (translation[key]) {
                        let text = translation[key];
                        if (nextVipLevel) {
                            text = text.replace(/{nextVipLevel}/g, 'VIP' + nextVipLevel);
                        }
                        element.innerHTML = text;
                    }
                });

                document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
            }

            const API_URL = '/api/v1';

            const loadingOverlay = document.getElementById('loadingOverlay');
            const errorOverlay = document.getElementById('errorOverlay');
            const retryBtn = document.getElementById('retryBtn');
            const benefitsBody = document.getElementById('benefitsBody');
            const benefitsBodyAlt = document.getElementById('benefitsBodyAlt');
            const backButton = document.getElementById('backButton');
            const benefitsTabs = document.querySelectorAll('.benefits-tab');
            const contributionCard = document.getElementById('contributionCard');
            const descriptionModal = document.getElementById('descriptionModal');
            const modalOverlay = document.getElementById('modalOverlay');
            const modalClose = document.getElementById('modalClose');
            const modalDescription = document.getElementById('modalDescription');

            benefitsTabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    const tabName = this.dataset.tab;
                    benefitsTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    if (tabName === 'requirements') {
                        document.querySelector('.requirements-header.requirements-header').style.display = 'none';
                        document.querySelector('.benefits-header.benefits-ben-header').style.display = 'grid';
                        benefitsBody.style.display = 'none';
                        benefitsBodyAlt.style.display = 'block';
                    } else {
                        document.querySelector('.requirements-header.requirements-header').style.display = 'grid';
                        document.querySelector('.benefits-header.benefits-ben-header').style.display = 'none';
                        benefitsBody.style.display = 'block';
                        benefitsBodyAlt.style.display = 'none';
                    }
                });
            });

            backButton.addEventListener('click', function () {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('closeWebview');
                }
            });

            function showDescriptionModal(description) {
                modalDescription.textContent = description;
                descriptionModal.style.display = 'flex';
            }

            function hideDescriptionModal() {
                descriptionModal.style.display = 'none';
            }

            modalOverlay.addEventListener('click', hideDescriptionModal);
            modalClose.addEventListener('click', hideDescriptionModal);

            function showLoading() {
                loadingOverlay.style.display = 'flex';
                errorOverlay.style.display = 'none';
            }

            function hideLoading() {
                loadingOverlay.style.display = 'none';
            }

            function showError() {
                loadingOverlay.style.display = 'none';
                errorOverlay.style.display = 'flex';

                document.getElementById('benefitsTabs').style.display = 'none';
                document.getElementById('benefitsTable').style.display = 'none';
                document.getElementById('contributionSection').style.display = 'none';
            }

            function renderBenefitsRows(vipList) {
                if (!Array.isArray(vipList) || vipList.length === 0) {
                    console.warn('VIP列表数据为空或格式错误');
                    return;
                }

                benefitsBody.innerHTML = '';
                const lang = getCurrentLang();
                const translation = translations[lang] || translations['en'];
                const stakingUnit = lang === 'zh' ? '枚' : 'coins';

                vipList.forEach(item => {
                    const row = document.createElement('div');
                    row.className = 'benefits-row';
                    row.dataset.vip = item.vipLevel;

                    row.innerHTML = `
                        <div class="vip-name td">
                            <img src="/images/vip${item.vipLevel}.png" alt="${item.vipName}">
                            <span>${item.vipName}</span>
                        </div>
                        <div class="td">${item.contributionValue}</div>
                        <div class="td">${item.personalPledgeRequirements}${stakingUnit}</div>
                    `;

                    benefitsBody.appendChild(row);
                });
            }

            function renderBenefitsAltRows(vipList) {
                if (!Array.isArray(vipList) || vipList.length === 0) {
                    console.warn('VIP列表数据为空或格式错误');
                    return;
                }

                benefitsBodyAlt.innerHTML = '';
                const lang = getCurrentLang();
                const translation = translations[lang] || translations['en'];
                const stakingUnit = lang === 'zh' ? '枚' : 'coins';

                vipList.forEach(item => {
                    const row = document.createElement('div');
                    row.className = 'benefits-row';
                    row.dataset.vip = item.vipLevel;

                    row.innerHTML = `
                        <div class="vip-name td">
                            <img src="/images/vip${item.vipLevel}.png" alt="${item.vipName}">
                            <span>${item.vipName}</span>
                        </div>
                        <div class="td">${item.teamStakingDynamicRewards}${translation.teamRewardUnit}</div>
                        <div class="td">${item.transactionRefundRatio}${translation.tradeReturnUnit}</div>
                    `;

                    benefitsBodyAlt.appendChild(row);
                });
            }

            function renderContributionItems(contributionRuleConfigs) {
                const lang = getCurrentLang();
                const translation = translations[lang] || translations['en'];
                const stakingUnit = lang === 'zh' ? '枚' : ' coins';
                const currencySymbol = lang === 'zh' ? '￥' : '$';

                const ruleCodeMap = {
                    'PERSONAL_STAKE': { key: 'personalStaking', i18nKey: 'contributionPersonal', unit: stakingUnit },
                    'TEAM_STAKE': { key: 'teamStaking', i18nKey: 'contributionTeam', unit: stakingUnit },
                    'SPOT_TRADE': { key: 'spotTrading', i18nKey: 'contributionSpot', unit: currencySymbol },
                    'FUTURES_TRADE': { key: 'futuresTrading', i18nKey: 'contributionFutures', unit: currencySymbol }
                };

                const rules = {};
                const items = [];
                const order = ['PERSONAL_STAKE', 'TEAM_STAKE', 'SPOT_TRADE', 'FUTURES_TRADE'];

                contributionRuleConfigs.forEach(item => {
                    const mapping = ruleCodeMap[item.ruleCode];
                    if (mapping) {
                        rules[mapping.key] = item.threshold + mapping.unit;
                        items.push({
                            ruleCode: item.ruleCode,
                            key: mapping.key,
                            i18nKey: mapping.i18nKey,
                            value: item.threshold + mapping.unit,
                            description: item.description,
                            orderIndex: order.indexOf(item.ruleCode)
                        });
                    }
                });

                items.sort((a, b) => a.orderIndex - b.orderIndex);

                contributionCard.innerHTML = '';

                items.forEach(item => {
                    const itemDiv = document.createElement('div');
                    itemDiv.className = 'contribution-item';
                    itemDiv.innerHTML = translation[item.i18nKey].replace(
                        new RegExp(`<span class="highlight" data-field="rules\\.${item.key}">[^<]*</span>`, 'g'),
                        `<span class="highlight">${item.value}</span>`
                    );

                    if (item.description) {
                        const infoIcon = document.createElement('div');
                        infoIcon.className = 'contribution-info-icon';
                        infoIcon.innerHTML = `<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">
                                <circle cx="12" cy="12" r="10"></circle>
                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                                <line x1="12" y1="17" x2="12.01" y2="17"></line>
                            </svg>`;
                        infoIcon.addEventListener('click', () => showDescriptionModal(item.description));
                        itemDiv.appendChild(infoIcon);
                    }

                    contributionCard.appendChild(itemDiv);
                });

                return rules;
            }

            function insertData(data) {
                const vipBenefitManagements = data?.vipBenefitManagements || [];
                const contributionRuleConfigs = data?.contributionRuleConfigs || [];

                if (vipBenefitManagements.length > 0) {
                    renderBenefitsRows(vipBenefitManagements);
                    renderBenefitsAltRows(vipBenefitManagements);
                }

                const rules = renderContributionItems(contributionRuleConfigs);

                const currentVipLevel = data?.vipLevel || 0;
                const personalValue = data?.personalValue || 0;
                const personalStakeValue = data?.personalStakeValue || 0;

                const currentLevelInfo = vipBenefitManagements.find(item => item.vipLevel === currentVipLevel);
                const nextLevelInfo = vipBenefitManagements.find(item => item.vipLevel === currentVipLevel + 1);

                let contributionProgress = 0;
                let stakingProgress = 0;
                let contributionNeeded = 0;
                let stakingNeeded = 0;

                if (nextLevelInfo) {
                    const currentContribution = currentLevelInfo ? currentLevelInfo.contributionValue || 0 : 0;
                    const currentStaking = currentLevelInfo ? currentLevelInfo.personalPledgeRequirements || 0 : 0;

                    const nextContribution = nextLevelInfo.contributionValue || 0;
                    const nextStaking = nextLevelInfo.personalPledgeRequirements || 0;

                    const contributionDelta = mathSub(nextContribution, currentContribution);
                    const stakingDelta = mathSub(nextStaking, currentStaking);

                    const currentContributionIncrement = mathSub(personalValue, currentContribution);
                    const currentStakingIncrement = mathSub(personalStakeValue, currentStaking);
                    
                    contributionNeeded = Math.max(0, mathSub(contributionDelta, currentContributionIncrement));
                    stakingNeeded = Math.max(0, mathSub(stakingDelta, currentStakingIncrement));

                    contributionProgress = contributionDelta > 0 ? Math.min(100, Math.max(0, (currentContributionIncrement / contributionDelta) * 100)) : 0;
                    stakingProgress = stakingDelta > 0 ? Math.min(100, Math.max(0, (currentStakingIncrement / stakingDelta) * 100)) : 0;
                } else {
                    contributionProgress = 100;
                    stakingProgress = 100;
                }

                const lang = getCurrentLang();
                const stakingUnit = lang === 'zh' ? '枚' : ' coins';

                const elements = document.querySelectorAll('[data-field]');

                elements.forEach(element => {
                    const field = element.dataset.field;
                    let value = getNestedValue(data, field);

                    if (field === 'vipLevel' && data.vipName) {
                        value = data.vipName;
                    }

                    if (field.startsWith('rules.')) {
                        const ruleKey = field.replace('rules.', '');
                        value = rules[ruleKey];
                    }

                    if (field === 'contribution') {
                        value = contributionNeeded + (lang === 'zh' ? '贡献值' : ' contribution');
                    }

                    if (field === 'staking') {
                        value = stakingNeeded + stakingUnit;
                    }

                    if (field === 'personalValue') {
                        value = value + (lang === 'zh' ? '贡献值' : ' contribution');
                    }

                    if (field === 'personalStakeValue') {
                        value = value + stakingUnit;
                    }

                    if (field === 'contributionProgress') {
                        value = contributionProgress.toFixed(0);
                    }

                    if (field === 'stakingProgress') {
                        value = stakingProgress.toFixed(0);
                    }

                    if (value !== undefined && value !== null) {
                        if (field.includes('Progress')) {
                            element.style.width = value + '%';
                        } else {
                            element.textContent = value;
                        }
                    }
                });
            }

            function getNestedValue(obj, path) {
                return path.split('.').reduce((current, key) => {
                    return current && current[key] !== undefined ? current[key] : undefined;
                }, obj);
            }

            let token = '';
            async function getFilterFromNative() {
                try {
                    const filter = await window.flutter_inappwebview.callHandler('getToken');
                    token = filter;
                    return filter;
                } catch (e) {
                    console.error('JSBridge 调用失败', e);
                    return null;
                }
            }

            async function fetchData() {
                showLoading();

                try {
                    const headers = {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'user-lang': getCurrentLang(),
                        ...globalHeaders
                    };

                    if (token) {
                        headers['Authorization'] = token;
                    }

                    const response = await fetch(API_URL + '/userVipInfo/info', {
                        method: 'GET',
                        headers: headers,
                        credentials: 'include',
                        timeout: 10000
                    });

                    if (!response.ok) {
                        throw new Error(`请求失败! status: ${response.status}`);
                    }

                    const result = await response.json();
                    const data = result.data || {};
                    const currentVipLevel = data.vipLevel || 0;
                    const nextVipLevel = currentVipLevel + 1;
                    applyTranslations(getCurrentLang(), nextVipLevel);
                    insertData(data);
                    hideLoading();

                } catch (error) {
                    console.error('Data fetch error:', error);
                    showError()
                    hideLoading();
                }
            }

            retryBtn.addEventListener('click', fetchData);

            document.addEventListener('DOMContentLoaded', async function () {
                const lang = getCurrentLang();
                applyTranslations(lang);
                await getFilterFromNative();
                fetchData();
            });
        })();
    </script>
</body>

</html>