274 lines
12 KiB
PHP
274 lines
12 KiB
PHP
|
{{--
|
||
|
|
文件功能：商店面板视图（嵌入聊天室右侧）
|
||
|
|
展示单次卡、周卡、改名卡，支持购买和改名操作
|
||
|
|
--}}
|
||
|
|
|
||
|
|
<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>
|