优化:婚礼费用提示内嵌弹窗,移除多余的二次确认弹窗

在求婚弹窗底部(戒指列表与按钮之间)内嵌费用提示面板:
   金币充足:绿色背景,显示最低费用和当前余额
  ⚠️ 金币不足:红色背景提示,说明可先求婚再准备金币

移除 doPropose() 里的 chatDialog.confirm 二次确认,
点击'确认求婚'按钮直接发送,流程更顺畅。
This commit is contained in:
2026-03-01 17:22:57 +08:00
parent c53cd7784a
commit 050aec1db4

View File

@@ -123,6 +123,37 @@
</template>
</div>
{{-- ── 婚礼费用提示面板 ── --}}
@php
$minWedding = (int) \App\Models\WeddingTier::where('is_active', true)
->orderBy('amount')
->value('amount');
@endphp
@if ($minWedding > 0)
<div style="margin-bottom:14px;">
@php $canAfford = ($user->jjb >= $minWedding); @endphp
<div
style="border-radius:12px; padding:12px 14px; font-size:12px; line-height:1.7;
background:{{ $canAfford ? '#f0fdf4' : '#fef2f2' }};
border:1.5px solid {{ $canAfford ? '#bbf7d0' : '#fecaca' }};">
<div
style="font-weight:700; color:{{ $canAfford ? '#15803d' : '#dc2626' }}; margin-bottom:4px;">
{{ $canAfford ? '✅ 您的金币可以举办婚礼' : '⚠️ 金币可能不足以举办婚礼' }}
</div>
<div style="color:#6b7280;">
结婚最低花费:<strong style="color:#f43f5e;">🪙 {{ number_format($minWedding) }}</strong>
金币
</div>
<div style="color:#{{ $canAfford ? '15803d' : 'dc2626' }};">
当前余额:<strong>🪙 {{ number_format($user->jjb) }}</strong> 金币
</div>
@if (!$canAfford)
<div style="color:#9ca3af; font-size:11px; margin-top:4px;">可先求婚,婚礼设置时再准备金币</div>
@endif
</div>
</div>
@endif
{{-- 确认按钮 --}}
<button x-on:click="doPropose()" :disabled="sending || !selectedRing || rings.length === 0"
style="width:100%; padding:14px; border:none; border-radius:14px; font-size:15px;
@@ -474,36 +505,7 @@
async doPropose() {
if (this.sending || !this.selectedRing) return;
// ── 发送前:显示婚礼费用提示 + 金币检查 ──────────────────
const minCost = window.chatContext?.minWeddingCost ?? 0;
const userJjb = window.chatContext?.userJjb ?? 0;
const costStr = Number(minCost).toLocaleString();
const jjbStr = Number(userJjb).toLocaleString();
if (minCost > 0 && userJjb < minCost) {
// 金币不足:直接拦截,引导赚金币
await window.chatDialog?.alert(
`💰 您的金币不足以举办婚礼!\n\n婚礼最低费用🪙 ${costStr} 金币\n您当前余额🪙 ${jjbStr} 金币\n\n请先通过钓鱼、聊天、签到等方式积累金币后再求婚哦`,
'金币不足',
'#dc2626'
);
return;
}
// 金币充足:弹出费用说明 + 确认
const noticeLines = [
`💍 确认向【${this.targetUsername}】发出求婚吗?`,
'',
`📋 婚礼费用说明:`,
` • 婚礼最低费用:🪙 ${costStr} 金币`,
` • 您当前金币:🪙 ${jjbStr} 金币`,
'',
`⚠️ 戒指一旦送出即消耗,对方拒绝则戒指遗失。`,
].join('\n');
const confirmed = await window.chatDialog?.confirm(noticeLines, '确认求婚');
if (!confirmed) return;
// ─────────────────────────────────────────────────────────
// 费用信息已在弹窗内展示,此处无需二次确认弹窗
this.sending = true;
this.error = '';