|
@@ -1,7 +1,7 @@
|
|
|
"use client";
|
|
|
import { ModalEnum } from "@/components/Box/types";
|
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
-import { Mask } from "antd-mobile";
|
|
|
+import { Loading, Mask } from "antd-mobile";
|
|
|
import clsx from "clsx";
|
|
|
import React from "react";
|
|
|
import dialogManage from "../manager";
|
|
@@ -12,6 +12,7 @@ const ImgDialog = () => {
|
|
|
const [data, setData] = React.useState<any>({});
|
|
|
const [visible, setVisible] = React.useState<boolean>(false); // 初始值为false,不显示对话框
|
|
|
const [innerVisible, setInnerVisible] = React.useState<boolean>(false);
|
|
|
+ const [loading, setLoading] = React.useState<number>(0); // 0 |1|2
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
@@ -20,6 +21,7 @@ const ImgDialog = () => {
|
|
|
show(data: any, idx: number) {
|
|
|
if (!data) return "close";
|
|
|
setData(data);
|
|
|
+ loadImage();
|
|
|
setVisible(true);
|
|
|
setTimeout(() => {
|
|
|
setInnerVisible(true);
|
|
@@ -35,6 +37,18 @@ const ImgDialog = () => {
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
}, []);
|
|
|
|
|
|
+ const loadImage = () => {
|
|
|
+ setLoading(1);
|
|
|
+ const img = new Image();
|
|
|
+ img.src = data?.content?.image;
|
|
|
+ img.onload = () => {
|
|
|
+ setLoading(0);
|
|
|
+ };
|
|
|
+ img.onerror = () => {
|
|
|
+ setLoading(2);
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
const close = () => {
|
|
|
setInnerVisible(false);
|
|
|
setTimeout(() => {
|
|
@@ -79,13 +93,14 @@ const ImgDialog = () => {
|
|
|
[styles.visible]: innerVisible,
|
|
|
})}
|
|
|
>
|
|
|
- <img
|
|
|
- src={data?.content?.image}
|
|
|
- // className={clsx({ [styles.visible]: innerVisible })}
|
|
|
- alt=""
|
|
|
- onClick={doFun}
|
|
|
- />
|
|
|
-
|
|
|
+ <div className="relative h-[100%]">
|
|
|
+ <img src={data?.content?.image} alt="" onClick={doFun} />
|
|
|
+ {loading === 1 && (
|
|
|
+ <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[#000]">
|
|
|
+ <Loading></Loading>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
<div className={clsx(styles.close)} onClick={close}>
|
|
|
<i
|
|
|
className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}
|