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:15:52 +08:00
parent e53f2f5d9d
commit 5b6f687db6
4 changed files with 128 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/chat-room.js
+4 -2
View File
@@ -94,7 +94,7 @@ export {
switchMarriageTab,
tryDivorce,
} from "./chat-room/marriage-status.js";
export { appendSystemMessage, bindMarriageModalControls, openProposeModal, openWeddingSetupModal } from "./chat-room/marriage-modals.js";
export { appendSystemMessage, bindMarriageModalControls, marriageProposeModal, openProposeModal, openWeddingSetupModal } from "./chat-room/marriage-modals.js";
export { bindToolbarControls, runFeatureShortcut, runToolbarAction } from "./chat-room/toolbar.js";
export { bindUserCardControls, userCardComponent } from "./chat-room/user-card.js";
export { bindUserTargetActions, openUserCard, switchTarget } from "./chat-room/user-target-actions.js";
@@ -266,7 +266,7 @@ import {
switchMarriageTab,
tryDivorce,
} from "./chat-room/marriage-status.js";
import { appendSystemMessage, bindMarriageModalControls, openProposeModal, openWeddingSetupModal } from "./chat-room/marriage-modals.js";
import { appendSystemMessage, bindMarriageModalControls, marriageProposeModal, openProposeModal, openWeddingSetupModal } from "./chat-room/marriage-modals.js";
import { bindToolbarControls, runFeatureShortcut, runToolbarAction } from "./chat-room/toolbar.js";
import { bindUserCardControls, userCardComponent } from "./chat-room/user-card.js";
import { bindUserTargetActions, openUserCard, switchTarget } from "./chat-room/user-target-actions.js";
@@ -531,6 +531,7 @@ if (typeof window !== "undefined") {
bindMarriageStatusControls,
appendSystemMessage,
bindMarriageModalControls,
marriageProposeModal,
closeMarriageStatusModal,
fetchMarriedList,
fetchMyMarriageStatus,
@@ -714,6 +715,7 @@ if (typeof window !== "undefined") {
window.marriageAction = marriageAction;
window.openMarriageStatusModal = openMarriageStatusModal;
window.appendSystemMessage = appendSystemMessage;
window.marriageProposeModal = marriageProposeModal;
window.openProposeModal = openProposeModal;
window.openWeddingSetupModal = openWeddingSetupModal;
window.renderMarriedList = renderMarriedList;
resources/js/chat-room/marriage-modals.js
+122
View File
@@ -80,6 +80,127 @@ export function openWeddingSetupModal(marriageId) {
}
}
/**
* 创建求婚弹窗 Alpine 数据，负责戒指选择、婚礼档位和求婚提交。
*
* @returns {Record<string, any>}
*/
export function marriageProposeModal() {
return {
show: false,
targetUsername: "",
marriageId: null,
rings: [],
selectedRing: null,
tiers: window.chatContext?.marriage?.weddingTiers || [],
selectedTierId: window.chatContext?.marriage?.defaultWeddingTierId || "",
loading: false,
sending: false,
error: "",
get selectedTier() {
if (!this.selectedTierId) {
return null;
}
return this.tiers.find((tier) => tier.id == this.selectedTierId);
},
get canAfford() {
const amount = this.selectedTier ? Number(this.selectedTier.amount) : 0;
return window.chatContext.userJjb >= amount;
},
async open(username) {
this.targetUsername = username;
this.selectedRing = null;
this.error = "";
this.loading = true;
this.show = true;
try {
const response = await fetch(window.chatContext.marriage.myRingsUrl, {
headers: {
Accept: "application/json",
},
});
const data = await response.json();
if (data.status === "success") {
this.rings = data.rings;
if (this.rings.length > 0) {
this.selectedRing = this.rings[0].purchase_id;
}
}
} catch {
this.rings = [];
}
this.loading = false;
},
/**
* 使用预加载戒指列表打开弹窗，避免入口检查后重复请求背包。
*
* @param {string} username 求婚对象用户名
* @param {Array<Record<string, any>>} rings 已加载的戒指列表
* @returns {void}
*/
openWithRings(username, rings) {
this.targetUsername = username;
this.error = "";
this.loading = false;
this.rings = rings;
this.selectedRing = rings.length > 0 ? rings[0].purchase_id : null;
this.show = true;
},
close() {
this.show = false;
},
async doPropose() {
if (this.sending || !this.selectedRing) {
return;
}
this.sending = true;
this.error = "";
try {
const response = await fetch(window.chatContext.marriage.proposeUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"X-CSRF-TOKEN": document.querySelector("meta[name=csrf-token]").content,
},
body: JSON.stringify({
target_username: this.targetUsername,
ring_purchase_id: this.selectedRing,
wedding_tier_id: this.selectedTierId || null,
room_id: window.chatContext.roomId,
}),
});
const data = await response.json();
if (data.status === "success") {
this.close();
window.chatDialog?.alert("💍 求婚成功！等待对方回应（有效期 48 小时）", "已发出", "#f43f5e");
} else {
this.error = data.message || "求婚失败";
}
} catch {
this.error = "网络异常，请稍后重试";
}
this.sending = false;
},
};
}
/**
* 读取 Alpine 组件数据，避免直接访问 Alpine 私有字段。
*
@@ -280,6 +401,7 @@ function bindMarriageModalBootstrap() {
*/
export function bindMarriageModalControls() {
window.appendSystemMessage = appendSystemMessage;
window.marriageProposeModal = marriageProposeModal;
window.openProposeModal = openProposeModal;
window.openWeddingSetupModal = openWeddingSetupModal;
resources/views/chat/frame.blade.php
+2
View File
@@ -114,6 +114,8 @@
'statusUrl' => route('marriage.status'),
'targteStatusUrl' => '/marriage/target',
'myRingsUrl' => route('marriage.rings'),
'weddingTiers' => \App\Models\WeddingTier::query()->where('is_active', true)->orderBy('amount')->get(),
'defaultWeddingTierId' => \App\Models\WeddingTier::query()->where('is_active', true)->orderBy('amount')->value('id') ?? '',
'acceptUrlTemplate' => '/marriage/__ID__/accept',
'rejectUrlTemplate' => '/marriage/__ID__/reject',
'divorceUrlTemplate' => '/marriage/__ID__/divorce',
resources/views/chat/partials/marriage-modals.blade.php
-104
View File
@@ -683,110 +683,6 @@
{{-- ═══════════ Alpine.js 组件脚本 ═══════════ --}}
<script>
/**
* 求婚弹窗组件
*/
function marriageProposeModal() {
return {
show: false,
targetUsername: '',
marriageId: null, // 当前对方婚姻/求婚记录 ID（accept/reject 用）
rings: [],
selectedRing: null,
tiers: @json(\App\Models\WeddingTier::where('is_active', true)->orderBy('amount')->get()),
selectedTierId: @json(\App\Models\WeddingTier::where('is_active', true)->orderBy('amount')->value('id') ?? ''), // 默认选最小档位
loading: false,
sending: false,
error: '',
get selectedTier() {
if (!this.selectedTierId) return null;
return this.tiers.find(t => t.id == this.selectedTierId);
},
get canAfford() {
const amount = this.selectedTier ? Number(this.selectedTier.amount) : 0;
return window.chatContext.userJjb >= amount;
},
async open(username) {
this.targetUsername = username;
this.selectedRing = null;
this.error = '';
this.loading = true;
this.show = true;
try {
const res = await fetch(window.chatContext.marriage.myRingsUrl, {
headers: {
'Accept': 'application/json'
}
});
const data = await res.json();
if (data.status === 'success') {
this.rings = data.rings;
if (this.rings.length > 0) this.selectedRing = this.rings[0].purchase_id;
}
} catch {
this.rings = [];
}
this.loading = false;
},
/**
* 由 openProposeModal() 传入已预加载的戒指列表，无需二次请求。
* @param {string} username 求婚对象用户名
* @param {Array} rings 已加载的戒指列表
*/
openWithRings(username, rings) {
this.targetUsername = username;
this.error = '';
this.loading = false;
this.rings = rings;
this.selectedRing = rings.length > 0 ? rings[0].purchase_id : null;
this.show = true;
},
close() {
this.show = false;
},
async doPropose() {
if (this.sending || !this.selectedRing) return;
// 费用信息已在弹窗内展示，此处无需二次确认弹窗
this.sending = true;
this.error = '';
try {
const res = await fetch(window.chatContext.marriage.proposeUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
},
body: JSON.stringify({
target_username: this.targetUsername,
ring_purchase_id: this.selectedRing,
wedding_tier_id: this.selectedTierId || null,
room_id: window.chatContext.roomId
})
});
const data = await res.json();
if (data.status === 'success') {
this.close();
window.chatDialog?.alert('💍 求婚成功！等待对方回应（有效期 48 小时）', '已发出', '#f43f5e');
} else {
this.error = data.message || '求婚失败';
}
} catch {
this.error = '网络异常，请稍后重试';
}
this.sending = false;
}
};
}
/**
* 收到求婚弹窗组件
*/