app.js · 约 6016 字符
1// 小草娱乐直播 · 交互逻辑
2function $(id){return document.getElementById(id)}
3const liveCard = l => `
4 <a class="live-card" href="live.html?id=${l.id}" style="--c1:${l.c1};--c2:${l.c2}">
5 <div class="lc-cover">${l.emoji}</div>
6 <span class="lc-tag">${l.tag}</span>
7 <span class="lc-online">🟢 ${l.online}</span>
8 <div class="lc-info">
9 <div class="lc-av">${l.host.slice(0,1)}</div>
10 <div style="flex:1;min-width:0">
11 <div class="lc-name">${l.host}</div>
12 <div class="lc-title">${l.title}</div>
13 </div>
14 <span class="lc-views">👁 ${l.views}</span>
15 </div>
16 </a>`;
17
18// 首页
19let liveCat = '推荐';
20function renderIndex(){
21 const cs = $('cat-scroll');
22 cs.innerHTML = CATS.map(c=>`<a class="${c===liveCat?'active':''}" onclick="setLiveCat('${c}')">${c}</a>`).join('');
23 renderLives();
24 $('rank-list').innerHTML = RANK.map((r,i)=>`
25 <div class="rank-item">
26 <span class="rk-num ${r.top?'top':''}">${i+1}</span>
27 <div class="rk-av">${r.av}</div>
28 <div class="rk-info"><b>${r.name}</b><span>${r.top?'今日热门':'本周新锐'}</span></div>
29 <span class="rk-gift">${r.gift}</span>
30 </div>`).join('');
31 $('video-list').innerHTML = VIDEOS.slice(0,2).map(v=>`
32 <a class="video-feed" href="short.html" style="height:220px;margin:0 12px 12px">
33 <span style="font-size:56px">${v.emoji}</span>
34 <div class="vf-title">${v.title}</div>
35 <div class="vf-user">${v.user}</div>
36 <div class="vf-actions">
37 <div class="va"><span class="vi">👍</span>${v.likes}</div>
38 <div class="va"><span class="vi">💬</span>${v.cmts}</div>
39 </div>
40 </a>`).join('');
41}
42function setLiveCat(c){ liveCat=c; renderIndex(); }
43function renderLives(){
44 const list = liveCat==='推荐' ? LIVES : LIVES.filter(l=>l.cat===liveCat);
45 $('live-list').innerHTML = list.length ? list.map(liveCard).join('') :
46 '<div class="empty"><div class="eicon">📺</div><div>该分类暂无直播</div></div>';
47}
48
49// 直播间
50let curGift = 2;
51function renderLive(){
52 $('l-title').textContent = LIVES[0].title;
53 $('danmu').innerHTML = [
54 '<div class="dm-item"><b>甜甜酱</b>：欢迎新来的朋友，点个关注不迷路~</div>',
55 '<div class="dm-item"><b>夜风</b>：唱得太好听了！</div>',
56 '<div class="dm-item"><b>小鹿</b>：<span class="dm-gift">送出 🚗 跑车</span></div>',
57 '<div class="dm-item"><b>阿明</b>：主播唱首周董的歌吧</div>',
58 '<div class="dm-item"><b>甜甜酱</b>：好的，下一首《晴天》送给大家 🎵</div>',
59 ].join('');
60 $('gift-grid').innerHTML = GIFTS.map((g,i)=>`
61 <div class="gift-item ${i===curGift?'active':''}" onclick="pickGift(${i})">
62 <span class="gi">${g.icon}</span><b>${g.name}</b><span>${g.price}钻</span>
63 </div>`).join('');
64}
65function pickGift(i){ curGift=i; renderLive(); }
66function sendDm(){
67 const txt = $('dm-input').value.trim();
68 if(!txt){ return; }
69 $('danmu').insertAdjacentHTML('beforeend', `<div class="dm-item"><b>我</b>：${txt}</div>`);
70 $('dm-input').value='';
71 $('danmu').scrollTop = $('danmu').scrollHeight;
72}
73function followHost(btn){
74 btn.textContent = '✓ 已关注';
75 btn.style.background = 'rgba(255,255,255,.2)';
76}
77
78// 短视频
79let videoIdx = 0;
80function renderShort(){
81 renderVideo();
82 document.addEventListener('keydown', e=>{ if(e.key==='ArrowDown'){ videoIdx=(videoIdx+1)%VIDEOS.length; renderVideo(); } });
83}
84function renderVideo(){
85 const v = VIDEOS[videoIdx];
86 $('video-feed').innerHTML = `
87 <div class="video-feed" onclick="likeVideo(this)">
88 <span style="font-size:72px">${v.emoji}</span>
89 <div class="vf-title">${v.title}</div>
90 <div class="vf-user">${v.user}</div>
91 <div class="vf-actions">
92 <div class="va"><span class="vi">👍</span>${v.likes}</div>
93 <div class="va"><span class="vi">💬</span>${v.cmts}</div>
94 <div class="va"><span class="vi">↗️</span>${v.shares}</div>
95 </div>
96 <div class="vf-swipe">↑ 上滑切换视频 · 双击点赞 ↓</div>
97 </div>`;
98}
99function likeVideo(el){ alert('👍 已点赞！双击屏幕也能点赞哦'); }
100
101// 关注
102function renderFollows(){
103 const on = FOLLOWS.filter(f=>f.online);
104 const off = FOLLOWS.filter(f=>!f.online);
105 const item = f => `
106 <div class="follow-item">
107 <div class="fl-av">${f.av}</div>
108 <div class="fl-info"><b>${f.name}</b><span>${f.desc}</span></div>
109 <span class="fl-status ${f.online?'on':'off'}">${f.online?'直播中':'未开播'}</span>
110 </div>`;
111 $('on-list').innerHTML = on.map(item).join('') || '<div class="empty"><div class="eicon">📺</div><div>暂无直播中的关注</div></div>';
112 $('off-list').innerHTML = off.map(item).join('') || '<div class="empty"><div class="eicon">💤</div><div>暂无未开播关注</div></div>';
113}
114
115// 充值
116let curRC = 1;
117function renderRecharge(){
118 $('c-coins').textContent = MEMBER.coins + ' 钻';
119 $('rc-grid').innerHTML = RECHARGE.map((r,i)=>`
120 <div class="rc-item ${i===curRC?'active':''}" onclick="pickRC(${i})">
121 <b>${r.coins}</b><span>${r.price}</span>
122 ${r.tag?`<div class="rc-tag">${r.tag}</div>`:''}
123 </div>`).join('');
124 $('gift-shop').innerHTML = GIFTS.map(g=>`
125 <div class="gs-item"><span class="gsi">${g.icon}</span><b>${g.name}</b><span>${g.price}钻</span></div>`).join('');
126}
127function pickRC(i){ curRC=i; renderRecharge(); }
128function doRecharge(){
129 const r = RECHARGE[curRC];
130 alert('💎 即将充值 ' + r.coins + '（' + r.price + '）\n演示环境，未发起真实支付');
131}
132
133// 我的
134function renderMine(){
135 $('m-name').textContent = MEMBER.name;
136 $('m-level').textContent = MEMBER.level + ' · 累计获得 ' + MEMBER.points + ' 经验值';
137 $('m-coins').textContent = MEMBER.coins;
138 $('m-follows').textContent = MEMBER.follows;
139 $('m-fans').textContent = MEMBER.fans;
140}
141