eric/citywalk-stamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端奖品卡片恢复库存显示与奖品名称

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
杨建宽
2026-04-22 20:18:04 +08:00
parent 3b3878ea5c
commit f87d16021e
2 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/web/src/components/RedeemModal.tsx
View File

@@ -151,11 +151,20 @@ export default function RedeemModal({ stamp, onRedeem, onClose }: RedeemModalPro
{prize ? (
<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-2">Reward</p>
{prize.description ? (
<p className="text-sm text-[var(--text-primary)] leading-relaxed">{prize.description}</p>
) : (
<p className="text-sm text-[var(--text-muted)]">暂未填写权益说明</p>
<p className="text-sm font-medium text-[var(--text-primary)] mb-1">{prize.name}</p>
{prize.description && (
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">{prize.description}</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-sm 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 className="rounded-xl border border-[var(--border-muted)] bg-white p-4 mb-4 text-center">
@@ -171,6 +180,9 @@ export default function RedeemModal({ stamp, onRedeem, onClose }: RedeemModalPro
{mode === "redeemed" && (
<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>}
@@ -227,6 +239,7 @@ export default function RedeemModal({ stamp, onRedeem, onClose }: RedeemModalPro
<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-2">Reward</p>
<p className="text-sm font-medium text-[var(--text-primary)] mb-1">{prize.name}</p>
{prize.description && (
<p className="text-sm text-[var(--text-primary)] leading-relaxed">{prize.description}</p>
)}

17
packages/web/src/components/StampPopup.tsx
View File

@@ -49,10 +49,23 @@ 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>}
{/* Prize rule (preview only) */}
{status === "preview" && prize?.description && (
{status === "preview" && prize && (
<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-2">Reward</p>
<p className="text-sm text-[var(--text-primary)] leading-relaxed">{prize.description}</p>
<p className="text-sm font-medium text-[var(--text-primary)] mb-1">{prize.name}</p>
{prize.description && (
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">{prize.description}</p>
)}
<div className="mt-2.5 pt-2.5 border-t border-[var(--jade)]/15 flex items-baseline justify-between">
<span className="text-xs text-[var(--text-muted)]">剩余库存</span>
<span
className="text-sm 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>
)}