feat: 帮助图片点击放大(lightbox)
点击支付页右侧帮助区域的联系二维码图片,在屏幕正中以全屏遮罩放大展示; 点击背景或再次点击可关闭。
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user