lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: 商店功能完整实现（单次特效卡888/周卡8888/改名卡5000，含购买、周卡覆盖、改名黑名单）

Browse Source
This commit is contained in:
流星
2026-02-27 15:57:12 +08:00
parent c52998671b
commit 7fb86bfe21
15 changed files with 999 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/frame.blade.php
+11
View File
@@ -103,6 +103,17 @@
@include('chat.partials.scripts')
{{-- 周卡特效：登录时自动播放（仅持卡用户可见） --}}
@if (!empty($weekEffect))
<script>
/** 周卡特效：延迟1秒待页面完成加载后自动播放 */
setTimeout(() => {
if (window.EffectManager) {
window.EffectManager.play('{{ $weekEffect }}');
}
}, 1000);
</script>
@endif
</body>
resources/views/chat/partials/right-panel.blade.php
+7 -2
View File
@@ -5,13 +5,15 @@
依赖变量：$room（当前房间模型）
--}}
<div class="chat-right">
{{-- Tab 标题栏（原版：名单/房间/贴图/酷库） --}}
<div class="chat-right" style="position:relative;">
{{-- Tab 标题栏 --}}
<div class="right-tabs">
<button class="tab-btn active" id="tab-users" onclick="switchTab('users')">名单</button>
<button class="tab-btn" id="tab-rooms" onclick="switchTab('rooms')">房间</button>
<button class="tab-btn" id="tab-emoji" onclick="switchTab('emoji')">贴图</button>
<button class="tab-btn" id="tab-action" onclick="switchTab('action')">酷库</button>
<button class="tab-btn" id="tab-shop" onclick="switchTab('shop'); loadShop();"
style="color:#fbbf24;">🛍商店</button>
</div>
{{-- 用户列表面板 --}}
@@ -88,4 +90,7 @@
<div class="online-stats">
在线: <strong id="online-count-footer">0</strong> 人
</div>
{{-- 商店面板（位于最后，默认隐藏） --}}
@include('chat.partials.shop-panel')
</div>
resources/views/chat/partials/scripts.blade.php
+10
View File
@@ -27,10 +27,20 @@
// ── Tab 切换 ──────────────────────────────────────
function switchTab(tab) {
// 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex）
['users', 'rooms', 'emoji', 'action'].forEach(t => {
document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
document.getElementById('tab-' + t).classList.toggle('active', t === tab);
});
// 商店面板单独处理（flex 布局以支持内部滚动）
const shopPanel = document.getElementById('shop-panel');
const shopTab = document.getElementById('tab-shop');
if (shopPanel && shopTab) {
shopPanel.style.display = tab === 'shop' ? 'flex' : 'none';
shopPanel.style.flexDirection = 'column';
shopPanel.style.height = '100%';
shopTab.classList.toggle('active', tab === 'shop');
}
// 贴图 Tab 懒加载：首次切换时将 data-src 赋值到 src
if (tab === 'emoji') {
document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
resources/views/chat/partials/shop-panel.blade.php
+273
View File
@@ -0,0 +1,273 @@
{{--
文件功能：商店面板视图（嵌入聊天室右侧）
展示单次卡、周卡、改名卡，支持购买和改名操作
--}}
<div id="shop-panel" style="display:none;" class="flex flex-col h-full">
{{-- 顶部余额显示 --}}
<div id="shop-balance-bar"
style="padding:8px 10px; background:#1e1b4b; border-bottom:1px solid #3730a3; font-size:12px; color:#a5b4fc; display:flex; align-items:center; gap:6px;">
🪙 我的金币：<span id="shop-jjb" style="color:#fbbf24; font-weight:bold;">--</span>
<span id="shop-week-badge"
style="margin-left:auto; display:none; font-size:11px; background:#312e81; padding:2px 6px; border-radius:4px; color:#c7d2fe;"></span>
</div>
{{-- Toast 提示 --}}
<div id="shop-toast"
style="display:none; margin:6px 8px; padding:6px 10px; border-radius:4px; font-size:12px; font-weight:bold;">
</div>
{{-- 商品列表（滚动区） --}}
<div id="shop-items-list" style="flex:1; overflow-y:auto; padding:8px;">
<div style="text-align:center; color:#6366f1; padding:20px; font-size:13px;">加载中...</div>
</div>
{{-- 改名弹框 --}}
<div id="rename-modal"
style="display:none; position:absolute; inset:0; background:rgba(0,0,0,.7); z-index:200; display:none; align-items:center; justify-content:center;">
<div style="background:#1e1b4b; border:1px solid #4f46e5; border-radius:8px; padding:16px; width:220px;">
<div style="font-weight:bold; color:#c7d2fe; margin-bottom:10px;">🎭 使用改名卡</div>
<input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）"
style="width:100%; background:#312e81; border:1px solid #4f46e5; border-radius:4px; padding:6px 8px; color:#e0e7ff; font-size:13px; box-sizing:border-box; margin-bottom:8px;">
<div style="display:flex; gap:6px;">
<button onclick="submitRename()"
style="flex:1; background:#4f46e5; color:#fff; border:none; border-radius:4px; padding:6px; cursor:pointer; font-size:12px; font-weight:bold;">确认改名</button>
<button onclick="closeRenameModal()"
style="flex:1; background:#374151; color:#d1d5db; border:none; border-radius:4px; padding:6px; cursor:pointer; font-size:12px;">取消</button>
</div>
<div id="rename-err" style="color:#f87171; font-size:11px; margin-top:6px;"></div>
</div>
</div>
</div>
<script>
/**
* 商店面板前端逻辑
* 负责拉取商品、购买确认、改名卡交互
*/
(function() {
let shopLoaded = false;
/**
* 打开商店面板时加载数据
*/
window.loadShop = function() {
if (shopLoaded) return;
shopLoaded = true;
fetchShopData();
};
/**
* 拉取商品列表与当前用户状态
*/
function fetchShopData() {
fetch('{{ route('shop.items') }}', {
headers: {
'Accept': 'application/json',
'X-CSRF-TOKEN': _csrf()
}
})
.then(r => r.json())
.then(data => renderShop(data))
.catch(() => showShopToast('加载失败，请刷新重试', false));
}
/**
* 渲染商品列表
*/
function renderShop(data) {
// 更新金币余额
document.getElementById('shop-jjb').textContent = Number(data.user_jjb).toLocaleString();
// 显示当前周卡
const badge = document.getElementById('shop-week-badge');
if (data.active_week_effect) {
const icons = {
fireworks: '🎆',
rain: '🌧',
lightning: '⚡',
snow: '❄️'
};
badge.textContent = '周卡生效中：' + (icons[data.active_week_effect] ?? '') + data.active_week_effect;
badge.style.display = 'block';
}
// 分组
const groups = [{
label: '⚡ 单次特效卡',
desc: '立即播放一次，仅自己可见',
type: 'instant'
},
{
label: '📅 周卡（7天登录自动播放）',
desc: '同时只能激活一种，购买新的旧的作废不退款',
type: 'duration'
},
{
label: '🎭 道具卡',
desc: '',
type: 'one_time'
},
];
const itemsEl = document.getElementById('shop-items-list');
itemsEl.innerHTML = '';
const hasCard = data.has_rename_card;
groups.forEach(g => {
const items = data.items.filter(i => i.type === g.type);
if (!items.length) return;
const section = document.createElement('div');
section.style.cssText = 'margin-bottom:10px;';
section.innerHTML = `
<div style="font-size:11px; font-weight:bold; color:#818cf8; padding:4px 0 4px; border-bottom:1px solid #312e81; margin-bottom:6px;">${g.label}</div>
${g.desc ? `<div style="font-size:10px;color:#6b7280;margin-bottom:6px;">${g.desc}</div>` : ''}
`;
items.forEach(item => {
const isRename = item.slug === 'rename_card';
const card = document.createElement('div');
card.style.cssText =
'background:#1e1b4b;border:1px solid #3730a3;border-radius:6px;padding:8px 10px;margin-bottom:6px;';
card.innerHTML = `
<div style="display:flex;justify-content:space-between;align-items:center;gap:6px;">
<div>
<span style="font-size:16px;">${item.icon}</span>
<span style="font-size:13px;font-weight:bold;color:#e0e7ff;margin-left:4px;">${item.name}</span>
</div>
<div style="white-space:nowrap;">
${isRename && hasCard
? `<button onclick="openRenameModal()" style="background:#7c3aed;color:#fff;border:none;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11px;font-weight:bold;">使用改名卡</button>`
: `<button onclick="buyItem(${item.id}, '${item.name}', ${item.price})"
style="background:#4f46e5;color:#fff;border:none;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11px;font-weight:bold;">
🪙 ${Number(item.price).toLocaleString()}
</button>`
}
</div>
</div>
<div style="font-size:10px;color:#6b7280;margin-top:3px;">${item.description ?? ''}</div>
`;
section.appendChild(card);
});
itemsEl.appendChild(section);
});
}
/**
* 购买商品
*/
window.buyItem = function(itemId, name, price) {
if (!confirm(`确定花费 ${Number(price).toLocaleString()} 金币购买【${name}】吗？`)) return;
fetch('{{ route('shop.buy') }}', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-TOKEN': _csrf()
},
body: JSON.stringify({
item_id: itemId
}),
})
.then(r => r.json())
.then(data => {
showShopToast(data.message, data.status === 'success');
if (data.status === 'success') {
// 更新金币显示
if (data.jjb !== undefined) document.getElementById('shop-jjb').textContent =
Number(data.jjb).toLocaleString();
// 单次卡立即触发特效
if (data.play_effect && window.EffectManager) {
window.EffectManager.play(data.play_effect);
}
// 延迟重新加载商店数据（刷新周卡状态等）
shopLoaded = false;
setTimeout(() => {
fetchShopData();
shopLoaded = true;
}, 800);
}
})
.catch(() => showShopToast('网络异常，请重试', false));
};
/**
* 显示/隐藏 商店 Toast 通知
*/
window.showShopToast = function(msg, ok) {
const el = document.getElementById('shop-toast');
el.textContent = msg;
el.style.display = 'block';
el.style.background = ok ? '#064e3b' : '#7f1d1d';
el.style.color = ok ? '#6ee7b7' : '#fca5a5';
clearTimeout(el._t);
el._t = setTimeout(() => {
el.style.display = 'none';
}, 4000);
};
/**
* 打开改名弹框
*/
window.openRenameModal = function() {
const m = document.getElementById('rename-modal');
m.style.display = 'flex';
document.getElementById('rename-input').focus();
document.getElementById('rename-err').textContent = '';
};
/**
* 关闭改名弹框
*/
window.closeRenameModal = function() {
document.getElementById('rename-modal').style.display = 'none';
};
/**
* 提交改名请求
*/
window.submitRename = function() {
const newName = document.getElementById('rename-input').value.trim();
if (!newName) {
document.getElementById('rename-err').textContent = '请输入新昵称';
return;
}
fetch('{{ route('shop.rename') }}', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-TOKEN': _csrf()
},
body: JSON.stringify({
new_name: newName
}),
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
closeRenameModal();
showShopToast(data.message, true);
shopLoaded = false;
setTimeout(() => window.location.reload(), 2000); // 改名后刷新页面
} else {
document.getElementById('rename-err').textContent = data.message;
}
})
.catch(() => {
document.getElementById('rename-err').textContent = '网络异常，请重试';
});
};
/**
* 获取 CSRF Token
*/
function _csrf() {
return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
}
})();
</script>