浏览代码

feat: 修改

year 4 周之前
父节点
当前提交
7f1e81cdeb
共有 4 个文件被更改,包括 40 次插入12 次删除
  1. 2 0
      src/dialog/auto.ts
  2. 23 8
      src/dialog/img/index.tsx
  3. 3 1
      src/dialog/manager.ts
  4. 12 3
      src/dialog/wheel/index.tsx

+ 2 - 0
src/dialog/auto.ts

@@ -3,6 +3,7 @@ import { PromotionRep } from "@/api/home";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import useWheelStore from "@/stores/useWheelStore";
 import { server } from "@/utils/client";
+import { getToken } from "@/utils/Cookies";
 import { Local } from "@/utils/storage";
 import dayjs from "dayjs";
 import React from "react";
@@ -61,6 +62,7 @@ const AutoShowDialog = () => {
 
     const checkIsShowed = (data: PromotionRep) => {
         if (!data?.id || data.pop_type === 3) return false;
+        if (data.pop_type === 2 && !getToken()) return false;
         let popData = Local.getKey(keyMap[data.pop_type]);
         if (!popData) return false;
         try {

+ 23 - 8
src/dialog/img/index.tsx

@@ -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]")}

+ 3 - 1
src/dialog/manager.ts

@@ -1,6 +1,8 @@
 interface RegisterParams {
     key: string; // 唯一标识
-    show: (...p: any) => "close" | undefined | void; // 显示函数
+    show:
+        | ((...p: any) => Promise<"close" | undefined | void>)
+        | ((...p: any) => "close" | undefined | void); // 显示函数
     hide?: Function; // 隐藏函数
 }
 

+ 12 - 3
src/dialog/wheel/index.tsx

@@ -11,8 +11,9 @@ const WheelSection = () => {
     const keyName = useMemo(() => {
         return "WheelSection";
     }, []);
-    const { setWheel } = useWheelStore((state) => ({
+    const { setWheel, status } = useWheelStore((state) => ({
         setWheel: state.setWheel,
+        status: state.status,
     }));
     useEffect(() => {
         getData();
@@ -21,12 +22,20 @@ const WheelSection = () => {
     useEffect(() => {
         dialogManager.registerDialog({
             key: keyName,
-            show() {
+            async show() {
+                try {
+                    await getData();
+                    if (status === 2) {
+                        return "close";
+                    }
+                } catch {
+                    return "close";
+                }
                 wheelModalRef?.current?.onOpen(data);
             },
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [keyName, data]);
+    }, [keyName, data, status]);
 
     const getData = async () => {
         // await setWheel();