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

迁移婚礼弹窗组件脚本

Browse Source
This commit is contained in:
流星
2026-04-25 19:22:13 +08:00
parent 2e8bfb61c2
commit 891e18e83f
3 changed files with 184 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/chat-room.js
+8
View File
@@ -105,6 +105,8 @@ export {
marriageProposeModal,
openProposeModal,
openWeddingSetupModal,
weddingEnvelopeModal,
weddingSetupModal,
} from "./chat-room/marriage-modals.js";
export { bindToolbarControls, runFeatureShortcut, runToolbarAction } from "./chat-room/toolbar.js";
export { bindUserCardControls, userCardComponent } from "./chat-room/user-card.js";
@@ -288,6 +290,8 @@ import {
marriageProposeModal,
openProposeModal,
openWeddingSetupModal,
weddingEnvelopeModal,
weddingSetupModal,
} from "./chat-room/marriage-modals.js";
import { bindToolbarControls, runFeatureShortcut, runToolbarAction } from "./chat-room/toolbar.js";
import { bindUserCardControls, userCardComponent } from "./chat-room/user-card.js";
@@ -566,6 +570,8 @@ if (typeof window !== "undefined") {
openMarriageStatusModal,
openProposeModal,
openWeddingSetupModal,
weddingEnvelopeModal,
weddingSetupModal,
renderMarriedList,
renderMarriageStatus,
switchMarriageTab,
@@ -750,6 +756,8 @@ if (typeof window !== "undefined") {
window.marriageProposeModal = marriageProposeModal;
window.openProposeModal = openProposeModal;
window.openWeddingSetupModal = openWeddingSetupModal;
window.weddingEnvelopeModal = weddingEnvelopeModal;
window.weddingSetupModal = weddingSetupModal;
window.renderMarriedList = renderMarriedList;
window.renderMarriageStatus = renderMarriageStatus;
window.switchMarriageTab = switchMarriageTab;
resources/js/chat-room/marriage-modals.js
+176
View File
@@ -530,6 +530,180 @@ export function divorceRequestModal() {
};
}
/**
* 创建婚礼设置弹窗 Alpine 数据，负责选择婚礼档位并提交举办请求。
*
* @returns {Record<string, any>}
*/
export function weddingSetupModal() {
return {
show: false,
marriageId: null,
tiers: [],
selectedTier: null,
payBy: "groom",
loading: false,
sending: false,
error: "",
get myCost() {
if (!this.selectedTier) {
return 0;
}
return this.payBy === "split" ? Math.ceil(this.selectedTier.amount / 2) : this.selectedTier.amount;
},
async open(marriageId) {
this.marriageId = marriageId;
this.selectedTier = null;
this.payBy = "groom";
this.error = "";
this.loading = true;
this.show = true;
try {
const response = await fetch(window.chatContext.marriage.weddingTiersUrl, {
headers: {
Accept: "application/json",
},
});
const data = await response.json();
if (data.status === "success") {
this.tiers = data.tiers;
if (this.tiers.length > 0) {
this.selectedTier = this.tiers[0];
}
}
} catch {
this.tiers = [];
}
this.loading = false;
},
close() {
this.show = false;
},
async doSetup() {
if (this.sending || !this.selectedTier) {
return;
}
this.error = "";
this.sending = true;
try {
// 当前产品只支持立即举办，前端固定 ceremony_type，避免保留无效时间选择状态。
const body = {
tier_id: this.selectedTier.id,
payer_type: this.payBy,
ceremony_type: "immediate",
room_id: window.chatContext.roomId,
};
const response = await fetch(window.chatContext.marriage.weddingSetupUrl(this.marriageId), {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"X-CSRF-TOKEN": document.querySelector("meta[name=csrf-token]").content,
},
body: JSON.stringify(body),
});
const data = await response.json();
if (data.status === "success") {
this.close();
window.chatDialog?.alert("🎊 婚礼已开始！红包正在分发给在线用户…", "设置成功", "#f59e0b");
} else {
this.error = data.message || "设置失败";
}
} catch {
this.error = "网络异常，请稍后重试";
}
this.sending = false;
},
};
}
/**
* 创建婚礼红包弹窗 Alpine 数据，负责展示和领取婚礼红包。
*
* @returns {Record<string, any>}
*/
export function weddingEnvelopeModal() {
return {
show: false,
marriageId: null,
ceremonyId: null,
title: "",
subTitle: "",
claimed: false,
claiming: false,
claimedAmount: 0,
open(detail) {
this.marriageId = detail.marriage_id;
this.ceremonyId = detail.ceremony_id;
const groomName = detail.groom_name ?? detail.user?.username ?? "??";
const brideName = detail.bride_name ?? detail.partner?.username ?? "??";
this.title = `${groomName} × ${brideName} 婚礼红包`;
this.subTitle = detail.tier_name ? `【${detail.tier_name}】普天同庆` : "婚礼庆典红包";
this.claimed = false;
this.claimedAmount = 0;
this.show = true;
},
close() {
this.show = false;
},
async doClaim() {
if (this.claiming || this.claimed) {
return;
}
this.claiming = true;
try {
const response = await fetch(`/wedding/ceremony/${this.ceremonyId}/claim`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"X-CSRF-TOKEN": document.querySelector("meta[name=csrf-token]").content,
},
body: JSON.stringify({
ceremony_id: this.ceremonyId,
}),
});
const data = await response.json();
if (data.ok) {
this.claimed = true;
this.claimedAmount = data.amount || 0;
} else {
window.chatDialog?.alert(data.message || "领取失败", "提示", "#f59e0b");
// 已领取或已过期时同步锁定按钮，避免用户重复提交同一个红包。
if (data.message?.includes("已领取") || data.message?.includes("已过期")) {
this.claimed = true;
}
}
} catch {
window.chatDialog?.alert("网络异常", "错误", "#cc4444");
}
this.claiming = false;
},
};
}
/**
* 读取 Alpine 组件数据，避免直接访问 Alpine 私有字段。
*
@@ -738,6 +912,8 @@ export function bindMarriageModalControls() {
window.marriageProposeModal = marriageProposeModal;
window.openProposeModal = openProposeModal;
window.openWeddingSetupModal = openWeddingSetupModal;
window.weddingEnvelopeModal = weddingEnvelopeModal;
window.weddingSetupModal = weddingSetupModal;
bindMarriageModalEvents();
bindMarriageModalBootstrap();
resources/views/chat/partials/marriage-modals.blade.php
-151
View File
@@ -680,154 +680,3 @@
}
}
</style>
{{-- ═══════════ Alpine.js 组件脚本 ═══════════ --}}
<script>
function weddingSetupModal() {
return {
show: false,
marriageId: null,
tiers: [],
selectedTier: null,
payBy: 'groom',
loading: false,
sending: false,
error: '',
get myCost() {
if (!this.selectedTier) return 0;
return this.payBy === 'split' ?
Math.ceil(this.selectedTier.amount / 2) :
this.selectedTier.amount;
},
async open(marriageId) {
this.marriageId = marriageId;
this.selectedTier = null;
this.payBy = 'groom';
this.error = '';
this.loading = true;
this.show = true;
try {
const res = await fetch(window.chatContext.marriage.weddingTiersUrl, {
headers: {
'Accept': 'application/json'
}
});
const data = await res.json();
if (data.status === 'success') {
this.tiers = data.tiers;
if (this.tiers.length > 0) this.selectedTier = this.tiers[0];
}
} catch {
this.tiers = [];
}
this.loading = false;
},
close() {
this.show = false;
},
async doSetup() {
if (this.sending || !this.selectedTier) return;
this.error = '';
this.sending = true;
try {
// 固定使用立即举办，不再需要用户选择时间
const body = {
tier_id: this.selectedTier.id,
payer_type: this.payBy,
ceremony_type: 'immediate',
room_id: window.chatContext.roomId,
};
const res = await fetch(window.chatContext.marriage.weddingSetupUrl(this.marriageId), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
},
body: JSON.stringify(body)
});
const data = await res.json();
if (data.status === 'success') {
this.close();
window.chatDialog?.alert('🎊 婚礼已开始！红包正在分发给在线用户…', '设置成功', '#f59e0b');
} else {
this.error = data.message || '设置失败';
}
} catch {
this.error = '网络异常，请稍后重试';
}
this.sending = false;
}
};
}
/**
* 婚礼红包弹窗组件
*/
function weddingEnvelopeModal() {
return {
show: false,
marriageId: null,
ceremonyId: null,
title: '',
subTitle: '',
claimed: false,
claiming: false,
claimedAmount: 0,
open(detail) {
this.marriageId = detail.marriage_id;
this.ceremonyId = detail.ceremony_id;
// 兼容两种字段命名：groom_name/bride_name 或 user.username/partner.username
const groomName = detail.groom_name ?? detail.user?.username ?? '??';
const brideName = detail.bride_name ?? detail.partner?.username ?? '??';
this.title = `${groomName} × ${brideName} 婚礼红包`;
this.subTitle = detail.tier_name ? `【${detail.tier_name}】普天同庆` : '婚礼庆典红包';
this.claimed = false;
this.claimedAmount = 0;
this.show = true;
},
close() {
this.show = false;
},
async doClaim() {
if (this.claiming || this.claimed) return;
this.claiming = true;
try {
// 正确路由：/wedding/ceremony/{ceremonyId}/claim
const res = await fetch(`/wedding/ceremony/${this.ceremonyId}/claim`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
},
body: JSON.stringify({
ceremony_id: this.ceremonyId
})
});
const data = await res.json();
if (data.ok) {
this.claimed = true;
this.claimedAmount = data.amount || 0;
} else {
window.chatDialog?.alert(data.message || '领取失败', '提示', '#f59e0b');
if (data.message?.includes('已领取') || data.message?.includes('已过期')) {
this.claimed = true;
}
}
} catch {
window.chatDialog?.alert('网络异常', '错误', '#cc4444');
}
this.claiming = false;
}
};
}
</script>