迁移紧凑商店面板脚本
This commit is contained in:
@@ -243,7 +243,10 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="shop-panel">
|
||||
<div id="shop-panel"
|
||||
data-shop-items-url="{{ route('shop.items') }}"
|
||||
data-shop-buy-url="{{ route('shop.buy') }}"
|
||||
data-shop-rename-url="{{ route('shop.rename') }}">
|
||||
|
||||
{{-- 余额栏 --}}
|
||||
<div id="shop-balance-bar">
|
||||
@@ -273,320 +276,5 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 商店面板前端逻辑
|
||||
*/
|
||||
(function() {
|
||||
let shopLoaded = false;
|
||||
|
||||
/** 打开商店 Tab 时调用 */
|
||||
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: '❄️',
|
||||
sakura: '🌸',
|
||||
meteors: '🌠',
|
||||
'gold-rain': '🪙',
|
||||
hearts: '💖',
|
||||
confetti: '🎊',
|
||||
fireflies: '✨'
|
||||
};
|
||||
badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
|
||||
badge.style.display = 'inline-block';
|
||||
}
|
||||
|
||||
const ringCounts = data.ring_counts || {};
|
||||
|
||||
const groups = [{
|
||||
label: '⚡ 单次特效卡',
|
||||
desc: '立即播放一次',
|
||||
type: 'instant'
|
||||
},
|
||||
{
|
||||
label: '📅 周卡・7天登录自动播放',
|
||||
desc: '同时只能激活一种，购新旧失效无退款',
|
||||
type: 'duration'
|
||||
},
|
||||
{
|
||||
label: '💍 求婚戒指',
|
||||
desc: '购买后存入背包，求婚时消耗（若被拒绝则遗失）',
|
||||
type: 'ring'
|
||||
},
|
||||
{
|
||||
label: '🎭 道具',
|
||||
desc: '',
|
||||
type: 'tools'
|
||||
},
|
||||
];
|
||||
|
||||
const itemsEl = document.getElementById('shop-items-list');
|
||||
itemsEl.innerHTML = '';
|
||||
|
||||
groups.forEach(g => {
|
||||
const items = data.items.filter(i => g.type === 'tools' ? ['one_time', 'sign_repair'].includes(i.type) : i.type === g.type);
|
||||
if (!items.length) return;
|
||||
|
||||
const section = document.createElement('div');
|
||||
section.style.marginBottom = '10px';
|
||||
|
||||
// 分组标题
|
||||
const label = document.createElement('div');
|
||||
label.className = 'shop-group-label';
|
||||
label.textContent = g.label;
|
||||
section.appendChild(label);
|
||||
|
||||
if (g.desc) {
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'shop-group-desc';
|
||||
desc.textContent = g.desc;
|
||||
section.appendChild(desc);
|
||||
}
|
||||
|
||||
items.forEach(item => {
|
||||
const isRename = item.slug === 'rename_card';
|
||||
const canUseRename = isRename && data.has_rename_card;
|
||||
const isRing = item.type === 'ring';
|
||||
const ownedQty = isRing ? (ringCounts[item.id] || 0) : 0;
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'shop-card';
|
||||
|
||||
// 行：图标 + 名称 + 按钮
|
||||
const row = document.createElement('div');
|
||||
row.className = 'shop-card-row';
|
||||
|
||||
// 图标区（戒指加持有数徽标）
|
||||
const iconWrap = document.createElement('span');
|
||||
iconWrap.style.cssText =
|
||||
'position:relative; flex-shrink:0; width:28px; text-align:center;';
|
||||
const icon = document.createElement('span');
|
||||
icon.className = 'shop-card-icon';
|
||||
icon.textContent = item.icon;
|
||||
iconWrap.appendChild(icon);
|
||||
if (isRing && ownedQty > 0) {
|
||||
const badge = document.createElement('span');
|
||||
badge.style.cssText =
|
||||
'position:absolute; top:-4px; right:-4px; background:#f43f5e; color:#fff; font-size:8px; font-weight:800; min-width:14px; height:14px; border-radius:7px; text-align:center; line-height:14px; padding:0 2px;';
|
||||
badge.textContent = ownedQty;
|
||||
iconWrap.appendChild(badge);
|
||||
}
|
||||
row.appendChild(iconWrap);
|
||||
|
||||
// 名称
|
||||
const name = document.createElement('span');
|
||||
name.className = 'shop-card-name';
|
||||
name.title = item.name;
|
||||
name.textContent = item.name;
|
||||
row.appendChild(name);
|
||||
|
||||
// 按钮
|
||||
const btn = document.createElement('button');
|
||||
if (canUseRename) {
|
||||
btn.className = 'shop-btn shop-btn-use';
|
||||
btn.textContent = '使用';
|
||||
btn.onclick = openRenameModal;
|
||||
} else {
|
||||
btn.className = 'shop-btn';
|
||||
btn.innerHTML = `💰 ${Number(item.price).toLocaleString()}`;
|
||||
btn.onclick = () => buyItem(item.id, item.name, item.price, item.type);
|
||||
}
|
||||
row.appendChild(btn);
|
||||
card.appendChild(row);
|
||||
|
||||
// 简介
|
||||
if (item.description) {
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'shop-card-desc';
|
||||
desc.textContent = item.description;
|
||||
card.appendChild(desc);
|
||||
}
|
||||
|
||||
// 戒指：加成信息行
|
||||
if (isRing && (item.intimacy_bonus > 0 || item.charm_bonus > 0)) {
|
||||
const bonus = document.createElement('div');
|
||||
bonus.style.cssText =
|
||||
'font-size:9px; color:#f43f5e; margin-top:3px; display:flex; gap:8px;';
|
||||
if (item.intimacy_bonus > 0) {
|
||||
const b1 = document.createElement('span');
|
||||
b1.textContent = `💞 亲密 +${item.intimacy_bonus}`;
|
||||
bonus.appendChild(b1);
|
||||
}
|
||||
if (item.charm_bonus > 0) {
|
||||
const b2 = document.createElement('span');
|
||||
b2.style.color = '#a855f7';
|
||||
b2.textContent = `✨ 魅力 +${item.charm_bonus}`;
|
||||
bonus.appendChild(b2);
|
||||
}
|
||||
card.appendChild(bonus);
|
||||
}
|
||||
|
||||
section.appendChild(card);
|
||||
});
|
||||
|
||||
itemsEl.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
/** 购买商品 */
|
||||
window.buyItem = async function(itemId, name, price, typeOrRecipient = '', message = '', presetQuantity = null) {
|
||||
const knownTypes = ['instant', 'duration', 'one_time', 'ring', 'auto_fishing', 'sign_repair'];
|
||||
const type = knownTypes.includes(typeOrRecipient) ? typeOrRecipient : '';
|
||||
const recipient = type === '' ? (typeOrRecipient || 'all') : 'all';
|
||||
let quantity = Number(presetQuantity || 1);
|
||||
|
||||
if (type === 'sign_repair') {
|
||||
quantity = await window.promptSignRepairQuantity?.({
|
||||
name,
|
||||
price,
|
||||
description: '补签卡只能补签本月漏掉的未签到日期，不能补签上月或更早日期。',
|
||||
});
|
||||
if (quantity === null || quantity === undefined) return;
|
||||
}
|
||||
|
||||
const signRepairNotice = type === 'sign_repair' ? '\n说明：补签卡只能补签本月未签到日期。' : '';
|
||||
const submitPurchase = () => {
|
||||
fetch('{{ route('shop.buy') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': _csrf()
|
||||
},
|
||||
body: JSON.stringify({
|
||||
item_id: itemId,
|
||||
room_id: window.chatContext?.roomId ?? 0,
|
||||
recipient,
|
||||
message: message || '',
|
||||
quantity: quantity || 1
|
||||
}),
|
||||
})
|
||||
.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));
|
||||
};
|
||||
|
||||
if (presetQuantity !== null) {
|
||||
submitPurchase();
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用全局弹窗替代原生 confirm()，通过 .then() 注册回调确保事件正确触发
|
||||
window.chatDialog.confirm(
|
||||
`确定花费 ${Number(price * quantity).toLocaleString()} 金币购买【${name}】${quantity > 1 ? ' × ' + quantity : ''} 吗？${signRepairNotice}`,
|
||||
'确认购买',
|
||||
'#336699'
|
||||
).then(ok => {
|
||||
if (!ok) return;
|
||||
submitPurchase();
|
||||
});
|
||||
};
|
||||
|
||||
/** 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';
|
||||
}, 3500);
|
||||
};
|
||||
|
||||
/** 打开改名框 */
|
||||
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 = '网络异常，请重试';
|
||||
});
|
||||
};
|
||||
|
||||
function _csrf() {
|
||||
return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{{-- 紧凑商店面板脚本已迁移到 resources/js/chat-room/compact-shop-panel.js --}}
|
||||
|
||||
Reference in New Issue
Block a user