feat: 帮助图片点击放大(lightbox)

点击支付页右侧帮助区域的联系二维码图片,在屏幕正中以全屏遮罩放大展示;
点击背景或再次点击可关闭。
This commit is contained in:
erio
2026-03-02 03:39:49 +08:00
parent e170d5451e
commit a9ea9d4862
2 changed files with 20 additions and 1 deletions

View File

@@ -12,4 +12,7 @@ services:
ports: ports:
- '${APP_PORT:-3001}:3000' - '${APP_PORT:-3001}:3000'
env_file: .env env_file: .env
volumes:
# 宿主机 uploads 目录挂载到 Next.js public/uploads可通过 /uploads/* 访问
- ./uploads:/app/public/uploads:ro
restart: unless-stopped restart: unless-stopped

View File

@@ -62,6 +62,7 @@ function PayContent() {
maxDailyAmount: 0, maxDailyAmount: 0,
}); });
const [userNotFound, setUserNotFound] = useState(false); const [userNotFound, setUserNotFound] = useState(false);
const [helpImageOpen, setHelpImageOpen] = useState(false);
const effectiveUserId = resolvedUserId || userId; const effectiveUserId = resolvedUserId || userId;
const isEmbedded = uiMode === 'embedded' && isIframeContext; const isEmbedded = uiMode === 'embedded' && isIframeContext;
@@ -432,7 +433,8 @@ function PayContent() {
<img <img
src={helpImageUrl} src={helpImageUrl}
alt='help' alt='help'
className='mt-3 max-h-40 w-full rounded-lg object-contain bg-white/70 p-2' onClick={() => setHelpImageOpen(true)}
className='mt-3 max-h-40 w-full cursor-zoom-in rounded-lg object-contain bg-white/70 p-2'
/> />
)} )}
{helpText && ( {helpText && (
@@ -467,6 +469,20 @@ function PayContent() {
{step === 'result' && ( {step === 'result' && (
<OrderStatus status={finalStatus} onBack={handleBack} dark={isDark} /> <OrderStatus status={finalStatus} onBack={handleBack} dark={isDark} />
)} )}
{helpImageOpen && helpImageUrl && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
onClick={() => setHelpImageOpen(false)}
>
<img
src={helpImageUrl}
alt='help'
className='max-h-[90vh] max-w-full rounded-xl object-contain shadow-2xl'
onClick={(e) => e.stopPropagation()}
/>
</div>
)}
</PayPageLayout> </PayPageLayout>
); );
} }