const screen = document.querySelector('#screen'); const tabs = document.querySelector('#tabs'); const dialog = document.querySelector('#dialog'); const toast = document.querySelector('#toast'); const historyStack = []; let page = 'home', expired = false, hidden = false, claimed = false, reward = false; let balance = 1784159.47, toastTimer; const entries = []; const money = (value, decimals = 0) => value.toLocaleString('en-US', {minimumFractionDigits:decimals, maximumFractionDigits:decimals}); const tabNames = {home:'首页', order:'收益', team:'团队', me:'我的'}; const paths = {home:'M3 10 12 3l9 7v10H14v-6h-4v6H3z',order:'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-3 5 8 3-3 8-8-3z',team:'M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 1c-5 0-8 3-8 6v2h16v-2c0-3-3-6-8-6zm8-9a4 4 0 0 1 0 8 6 6 0 0 0 0-8zm1 9c4 1 5 3 5 6v2h-4v-2a9 9 0 0 0-1-6z',me:'M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 11c-6 0-9 3-9 6 0 2 2 3 9 3s9-1 9-3c0-3-3-6-9-6z'}; const shortcuts = [ ['充值','deposit','¥','#9b4e14','#fcebd5'],['提现','withdraw','↗','#127b4d','#d3f6df'], ['幸运抽奖','draw','✦','#06679c','#d9f0f8'],['提现记录','withdrawRecords','▤','#6344b9','#e8e0fc'], ['红包','cash','¥','#a4492b','#ffded5'],['消息','messages','●','#2863b5','#dce8fb'], ['客服','customer','◉','#483ab1','#dedcfa'],['提现凭证','proof','¥','#a52e50','#fbdde6'] ]; function title(label, right = '') { const back = tabNames[page] ? '' : ''; return '
'+back+'

'+label+'

'+right+'
'; } function go(label, target, cls = '') { return ''; } function quick(items, originalIcons = false) { return '
'+items.map(([label,target,icon,accent='#2547ba',tint='#edf1ff'], index) => go((originalIcons ? '' : '')+''+label+'',target)).join('')+'
'; } function menu(items) { return '
'+items.map(([label,target,icon]) => go(''+label+'',target)).join('')+'
'; } function notify(message) { toast.textContent = message; toast.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(() => toast.classList.remove('show'),2300); } function showDialog(html) { document.querySelector('#dialog-body').innerHTML = html; if (!dialog.open) dialog.showModal(); } function navigate(target) { if (page === target) return; if (tabNames[target]) historyStack.length = 0; else historyStack.push(page); page = target; render(); } function project(index) { return '
金币堆叠

黄金矿场

周期（天）： 5

剩余名额： 1/1

每日收益 141.6

累计收益 708

'+go('投入 1,500','project','wide '+(index===0?'orange':'primary'))+'
'; } function incomeCard(index) { const times = expired ? [0,0,0,0] : [40,23,23,40]; return '

优质黄金

金币堆叠
到期时间2025/08/28 13:49:47
平均每小时收益85
累计收益'+(claimed && !expired && index===0?'10,285':'0')+'
投入金额4,000
'+times.map((time,i)=>''+time+''+['天','时','分','秒'][i]+'').join('')+'
'+(expired||claimed?'+0':'+10,285')+'
'; } function metric(value,label) {return ''+value+''+label+'';} function walletBalance() {return '
'+money(balance,2)+'可用余额（演示）
';} function field(label,placeholder,type='text') { return ''; } function demoForm(body, label = '提交') { return '
'+body+'
'; } function records(kind) { const rows = entries.filter(entry=>kind==='bill'||entry.kind===kind); if (!rows.length && kind==='deposit') return '

暂无模拟充值记录。

'; const samples = kind==='bill' ? ['提现退回','项目收益','提现','项目本金'] : ['审核中','已通过','未通过']; return rows.map(entry=>'
'+entry.label+''+money(entry.amount)+'
本地演示记录
').join('') + (kind==='deposit'?'':samples.map(item=>'
'+(kind==='bill'?item:'订单号： 20250703002383855')+''+ (kind==='bill'?'':item)+'
2025-08-24 15:58:03'+ (kind==='bill'?'50,000':'153,900')+'
').join('')); } function transfer(kind) { const deposit = kind==='deposit', label = deposit?'充值':'提现'; const top = title(label,deposit?go('记录','depositRecords','right'):''); const choices = [500,1500,4000,6000,10000,15000,25000,50000,100000]; const presets = '
充值金额
'+choices.map(n=>'').join('')+'
'; return top+'
'+(deposit?'':walletBalance())+'
'+(deposit?presets:'')+'
演示金额，仅供预览'+(deposit?'':go('提现记录','withdrawRecords','link'))+'
'; } const views = { home:()=>'
'+money(balance,2)+'余额现金
⌁
'+quick(shortcuts,true)+'
◀ 132****7890 提现 49,020（演示）

◈ 主要项目

'+[0,1,2].map(project).join('')+'
', order:()=>title('收益')+'
'+[0,1].map(incomeCard).join('')+'
', team:()=>title('邀请详情')+'
邀请好友查看团队与邀请奖励
'+[0,1,2,3].map((n)=>'
'+metric(n?'第'+n+'级':'合计','层级')+(n?metric([10,2,1][n-1]+'%','返佣比例'):'')+metric(n?'10':'27','人数')+metric('100','返佣')+'
').join('')+'
邀请码： 6265844
邀请链接
演示邀请链接

分享方式

'+['WhatsApp','Telegram','Facebook','Twitter','短信'].map(name=>'').join('')+'
', me:()=>'
◈   132****3344
邀请码： 6265844
简体中文
'+(hidden?'••••••':money(balance,2))+'
'+quick([['我的钱包','wallet','▣'],['充值记录','depositRecords','↘'],['提现记录','withdrawRecords','↗'],['余额账单','bill','▤']])+menu([['联系客服','customer','◉'],['常见问题','faq','?'],['修改密码','password','▣']])+menu([['意见反馈','feedback','✎'],['关于我们','about','ⓘ'],['使用条款','terms','▤'],['下载应用','download','▯'],['退出登录','login','↪']])+'打开管理后台 ↗
', wallet:()=>title('我的钱包')+'
'+walletBalance()+'
'+go('提现','withdraw','red')+go('充值','deposit','primary')+'
'+menu([['添加银行卡','account','▣']])+'

提现凭证

'+records('withdraw')+'
', project:()=>title('项目详情')+'
金币堆叠

黄金矿场

5 天 · 1,500 演示单位

以上为界面演示数据。

', deposit:()=>transfer('deposit'),withdraw:()=>transfer('withdraw'), depositRecords:()=>title('充值记录')+'
'+records('deposit')+'
', withdrawRecords:()=>title('提现记录')+'
'+records('withdraw')+'
', bill:()=>title('余额账单')+'
'+records('bill')+'
', login:()=>'
演示模式简体中文

登录

还没有账号？ '+go('立即注册','register','link')+'

可直接点击提交进入演示。
'+go('下载应用','download','link')+'
', register:()=>title('注册')+'
'+field('演示手机号','示例手机号','tel')+field('演示密码','示例密码','password')+field('邀请码','6265844')+'
', draw:()=>title('幸运抽奖')+'
邀请好友注册，体验幸运抽奖

幸运抽奖

剩余抽奖次数： '+(reward?0:1)+'

'+[2,5,10,50,100,200,300,500].map((value,i)=>''+value+'').join('')+'
'+go('邀请好友','team','primary')+'
如何邀请好友

打开「团队」即可复制演示邀请码。

', proof:()=>title('提现凭证')+'
'+demoForm(field('订单号','请输入订单号')+field('金额','请输入金额','number')+field('备注','请输入备注')+'')+records('withdraw')+'
', account:()=>title('提现账户')+'
'+demoForm(field('姓名','请输入演示姓名')+''+field('账号','请输入演示银行账号'))+'
', customer:()=>title('客服')+'
快速响应及时响应客服需求
'+menu([['WhatsApp 客服','messages','●'],['Telegram 群组','messages','➤']])+'
', faq:()=>title('常见问题')+'
'+['如何充值？','如何提现？','在哪里查看余额？','如何使用邀请码？','在哪里查看演示记录？'].map((q,i)=>'
'+q+'

'+['打开「充值」并选择模拟金额。','打开「提现」并输入至少 200 演示单位。','在「我的」中打开「我的钱包」。','在「团队」中复制演示邀请码。','在「我的」中打开「我的钱包」或「余额账单」。'][i]+'

').join('')+'
', feedback:()=>title('意见反馈')+'
'+demoForm(field('WhatsApp','请输入演示 WhatsApp 号码')+field('邮箱','请输入演示邮箱','email')+'')+'
', password:()=>title('修改密码')+'
'+demoForm(field('新演示密码','请输入示例值','password'))+'
', cash:()=>title('红包')+'

演示奖励

查看奖励界面。/p>'+go('幸运抽奖','draw','primary')+'

', messages:()=>title('消息')+'

暂无演示消息。

', about:()=>title('关于我们')+'

根据参考截图制作的本地演示。

', terms:()=>title('使用条款')+'

本原型中的金额和账户详情均为示例数据。

', download:()=>title('下载应用')+'

当前为浏览器预览版。

' }; function render(resetScroll = true) { screen.innerHTML = views[page](); document.querySelector('.status').className = 'status '+page; tabs.hidden = !tabNames[page]; tabs.innerHTML = Object.entries(tabNames).map(([target,label])=>'').join(''); if (resetScroll) document.querySelector('#app').scrollTop = 0; } document.addEventListener('click',async event=>{ const button = event.target.closest('button'); if (!button) return; const {go:target, action, copy, amount} = button.dataset; if (target) return navigate(target); if (copy) { try {await navigator.clipboard.writeText(copy);notify('已复制');} catch {showDialog('

复制演示内容

');} } if (amount) { button.form.elements.amount.value = amount; button.form.querySelector('.active')?.classList.remove('active'); button.classList.add('active'); } switch(action) { case 'back': page=historyStack.pop()||'home';render();break; case 'normal': case 'expired': expired=action==='expired';render(false);break; case 'toggle': hidden=!hidden;render(false);break; case 'receive': if (claimed||expired) break; claimed=true;balance+=10285; entries.unshift({kind:'income',label:'已领取演示收益',amount:10285}); render(false);notify('已领取演示收益');break; case 'rules': showDialog('

提现规则

请输入至少 200 演示单位。

');break; case 'invest': notify('已选择演示项目');break; case 'rank': showDialog('

排行

暂无演示排行榜。

');break; case 'drawRecord': showDialog('

抽奖记录

'+(reward?'演示抽奖奖励：2':'暂无演示抽奖记录。')+'

');break; case 'spin': if(reward) return notify('演示抽奖次数已用完'); reward=true; screen.querySelector('.wheel').style.transform='rotate(1080deg)'; screen.querySelector('.count').textContent='剩余抽奖次数： 0'; setTimeout(()=>{if(page==='draw') notify('演示抽奖结果：2');}, matchMedia('(prefers-reduced-motion: reduce)').matches?0:1000); break; } }); document.addEventListener('input',event=>{ if(event.target.name!=='amount') return; for (const preset of event.target.form.querySelectorAll('[data-amount]')) { preset.classList.toggle('active',preset.dataset.amount===event.target.value); } }); document.addEventListener('submit',event=>{ const form = event.target; const type = form.dataset.form; if(!type) return; event.preventDefault(); if(type==='login') return navigate('home'); if(type==='demo') {form.reset();return notify('已在本地演示中提交');} const amount = form.elements.amount.valueAsNumber; if(type==='withdraw' && amount>balance) return notify('演示余额不足'); balance+=type==='deposit'?amount:-amount; entries.unshift({kind:type,label:type==='deposit'?'模拟充值':'模拟提现',amount}); navigate(type==='deposit'?'depositRecords':'withdrawRecords'); notify('已添加演示记录'); }); render();