refactor: 奖品卡片仅展示说明文案,移动端隐藏库存显示
- StampPopup / RedeemModal 的 Reward 卡片去掉 prize.name 行, 将 description 作为主要文案展示 - 移动端 RedeemModal 隐藏「剩余库存 X 枚」与「奖品库存已耗尽」 文案,库存扣减与 sold-out 状态的后端逻辑保持不变 - 确认兑换弹窗内的 Reward 卡片同步调整 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -150,21 +150,12 @@ export default function RedeemModal({ stamp, onRedeem, onClose }: RedeemModalPro
|
|||||||
{/* Prize card */}
|
{/* Prize card */}
|
||||||
{prize ? (
|
{prize ? (
|
||||||
<div className="rounded-xl border border-[var(--jade)] bg-[rgba(45,106,79,0.05)] p-4 mb-4">
|
<div className="rounded-xl border border-[var(--jade)] bg-[rgba(45,106,79,0.05)] p-4 mb-4">
|
||||||
<p className="text-[10px] tracking-[0.2em] text-[var(--jade)] uppercase mb-1.5">Reward</p>
|
<p className="text-[10px] tracking-[0.2em] text-[var(--jade)] uppercase mb-2">Reward</p>
|
||||||
<p className="text-sm font-semibold text-[var(--text-primary)]">{prize.name}</p>
|
{prize.description ? (
|
||||||
{prize.description && (
|
<p className="text-sm text-[var(--text-primary)] leading-relaxed">{prize.description}</p>
|
||||||
<p className="text-xs text-[var(--text-muted)] mt-1 leading-relaxed">{prize.description}</p>
|
) : (
|
||||||
|
<p className="text-sm text-[var(--text-muted)]">暂未填写权益说明</p>
|
||||||
)}
|
)}
|
||||||
<div className="mt-3 pt-3 border-t border-[var(--jade)]/15 flex items-baseline justify-between">
|
|
||||||
<span className="text-xs text-[var(--text-muted)]">剩余库存</span>
|
|
||||||
<span
|
|
||||||
className="text-xl font-semibold"
|
|
||||||
style={{ color: prize.stock > 0 ? "var(--jade)" : "var(--terracotta)" }}
|
|
||||||
>
|
|
||||||
{prize.stock}
|
|
||||||
<span className="text-xs font-normal text-[var(--text-muted)] ml-1">枚</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="rounded-xl border border-[var(--border-muted)] bg-white p-4 mb-4 text-center">
|
<div className="rounded-xl border border-[var(--border-muted)] bg-white p-4 mb-4 text-center">
|
||||||
@@ -180,9 +171,6 @@ export default function RedeemModal({ stamp, onRedeem, onClose }: RedeemModalPro
|
|||||||
{mode === "redeemed" && (
|
{mode === "redeemed" && (
|
||||||
<p className="text-xs text-[var(--text-muted)] text-center mb-4">你已经兑换过这枚图章对应的奖品</p>
|
<p className="text-xs text-[var(--text-muted)] text-center mb-4">你已经兑换过这枚图章对应的奖品</p>
|
||||||
)}
|
)}
|
||||||
{mode === "sold-out" && (
|
|
||||||
<p className="text-xs text-[var(--terracotta)] text-center mb-4">奖品库存已耗尽</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && <p className="text-sm text-[var(--terracotta)] mb-3 text-center">{error}</p>}
|
{error && <p className="text-sm text-[var(--terracotta)] mb-3 text-center">{error}</p>}
|
||||||
|
|
||||||
@@ -238,10 +226,9 @@ export default function RedeemModal({ stamp, onRedeem, onClose }: RedeemModalPro
|
|||||||
<h3 className="text-base font-semibold text-[var(--text-primary)] mb-4">确认兑换</h3>
|
<h3 className="text-base font-semibold text-[var(--text-primary)] mb-4">确认兑换</h3>
|
||||||
|
|
||||||
<div className="rounded-xl border border-[var(--jade)] bg-[rgba(45,106,79,0.05)] p-3.5 mb-3">
|
<div className="rounded-xl border border-[var(--jade)] bg-[rgba(45,106,79,0.05)] p-3.5 mb-3">
|
||||||
<p className="text-[10px] tracking-[0.2em] text-[var(--jade)] uppercase mb-1">Reward</p>
|
<p className="text-[10px] tracking-[0.2em] text-[var(--jade)] uppercase mb-2">Reward</p>
|
||||||
<p className="text-sm font-semibold text-[var(--text-primary)]">{prize.name}</p>
|
|
||||||
{prize.description && (
|
{prize.description && (
|
||||||
<p className="text-xs text-[var(--text-muted)] mt-0.5">{prize.description}</p>
|
<p className="text-sm text-[var(--text-primary)] leading-relaxed">{prize.description}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -49,13 +49,10 @@ export default function StampPopup({ name, imageColor, note, prize, status, onCo
|
|||||||
{note && <p className="text-xs text-[var(--text-muted)] mb-3 leading-relaxed">{note}</p>}
|
{note && <p className="text-xs text-[var(--text-muted)] mb-3 leading-relaxed">{note}</p>}
|
||||||
|
|
||||||
{/* Prize rule (preview only) */}
|
{/* Prize rule (preview only) */}
|
||||||
{status === "preview" && prize && (
|
{status === "preview" && prize?.description && (
|
||||||
<div className="mt-3 mb-1 rounded-xl border border-[var(--jade)] bg-[rgba(45,106,79,0.05)] p-3.5 text-left">
|
<div className="mt-3 mb-1 rounded-xl border border-[var(--jade)] bg-[rgba(45,106,79,0.05)] p-3.5 text-left">
|
||||||
<p className="text-[10px] tracking-[0.2em] text-[var(--jade)] uppercase mb-1">Reward</p>
|
<p className="text-[10px] tracking-[0.2em] text-[var(--jade)] uppercase mb-2">Reward</p>
|
||||||
<p className="text-sm font-semibold text-[var(--text-primary)]">{prize.name}</p>
|
<p className="text-sm text-[var(--text-primary)] leading-relaxed">{prize.description}</p>
|
||||||
{prize.description && (
|
|
||||||
<p className="text-xs text-[var(--text-secondary)] mt-1 leading-relaxed">{prize.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user