feat: 抽奖中奖的弹窗

src/pages/Home/components/HomeContent.tsx

@@ -40,6 +40,7 @@ const HomeContent: React.FC = () => {
 
         const selectedBranch = branchList[activeBranchIdx];
         if (activeProductIdx === 0) {
+            setShowBranchListPopup(false)
             OrderHelper.submitOrder({
                 branchName: selectedBranch.branchName,
                 branchCode: selectedBranch.branchCode,

src/pages/Home/index.tsx

@@ -24,7 +24,7 @@ const Home: React.FC = () => {
         };
 
         authenticateAndFetchOrders();
-    }, [params, navigate]);
+    }, []);
 
     return (
         <div className={styles.wrap}>

src/pages/Lottery/index.module.scss

@@ -198,4 +198,64 @@
       }
     }
   }
+
+  .winningLotteryWrap {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .winningLotteryInner {
+      position: relative;
+      width: 240px;
+      height: 324px;
+      .winningLotteryTitle {
+        width: 100%;
+        text-align: center;
+        font-size: 15px;
+        color: #003932;
+        line-height: 22px;
+        position: absolute;
+        top: 84px;
+        left: 0;
+        z-index: 2;
+        > span {
+          font-weight: bold;
+        }
+      }
+      .winningLotteryTime {
+        width: 100%;
+        text-align: center;
+        font-size: 12px;
+        color: #298281;
+        line-height: 18px;
+        position: absolute;
+        left: 0;
+        bottom: 76px;
+        z-index: 2;
+      }
+      > img {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .winningLotteryClose {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+      .winningLotteryConfirm {
+        width: 160px;
+        height: 50px;
+        position: absolute;
+        left: 40px;
+        bottom: 8px;
+      }
+    }
+  }
 }
\ No newline at end of file

src/pages/Lottery/index.tsx

@@ -6,11 +6,14 @@ import lotteryButtonBgImg from '@/assets/images/lotteryButtonBg.png'
 import lotteryRuleTitleBgImg from '@/assets/images/lotteryRuleTitleBg.png'
 import myPrizeHighLightImg from '@/assets/images/myPrizeHighLight.png'
 import myPrizeUnclaimedImg from '@/assets/images/myPrizeUnclaimed.png'
-import { Popup } from '@nutui/nutui-react';
+import winningLotteryImg from '@/assets/images/winningLottery.png'
+import { Popup, Overlay } from '@nutui/nutui-react';
 
 const Lottery: React.FC = () => {
     const [showMyPrizePopup, setShowMyPrizePopup] = useState(false);
 
+    const [visible, setVisible] = useState(false)
+
     interface LotteryConfig {
         prizeCount: number;
         drawCount: number;
@@ -66,6 +69,7 @@ const Lottery: React.FC = () => {
             // 在动画结束后解锁
             setTimeout(() => {
                 setLotteryConfig(prev => ({ ...prev, running: false }));
+                setVisible(true)
             }, newConfig.duration);
 
             return newConfig;
@@ -86,6 +90,7 @@ const Lottery: React.FC = () => {
                 <div className={styles.lotteryRuleItem}><span></span> 每季度每个客户号仅可参与其中一项。</div>
             </div>
 
+            {/*我的奖品*/}
             <Popup
                 closeable
                 visible={ showMyPrizePopup }
@@ -107,6 +112,22 @@ const Lottery: React.FC = () => {
                     </div>
                 </div>
             </Popup>
+            {/*我的奖品*/}
+
+
+            {/*中奖弹窗*/}
+            <Overlay visible={visible} closeOnOverlayClick={false}>
+                <div className={styles.winningLotteryWrap}>
+                    <div className={styles.winningLotteryInner}>
+                        <div className={styles.winningLotteryTitle}>您获得 <span>5.55元微信立减金</span></div>
+                        <img src={winningLotteryImg} alt=""/>
+                        <div className={styles.winningLotteryTime}>请于2023.11.30 23:59:59前完成领取</div>
+                        <div className={styles.winningLotteryClose} onClick={() => setVisible(false)}></div>
+                        <div className={styles.winningLotteryConfirm} onClick={() => setVisible(false)}></div>
+                    </div>
+                </div>
+            </Overlay>
+            {/*中奖弹窗*/}
         </div>
   )
 }

src/utils/auth.ts

 import apis from '@/apis'
-import SessionStorageUtil from '@/utils/session'
+import LocalStorageUtil from '@/utils/local'
 
 class AuthUtil {
-  static async auth(params: URLSearchParams): Promise<boolean> {
+  static async auth (params: URLSearchParams): Promise<boolean> {
+    return await new Promise((resolve) => {
       if (process.env.REACT_APP_ENV === 'development') {
-      SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80');
-      return true;
+        LocalStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80')
+        resolve(true)
       } else {
-      const token = SessionStorageUtil.getItem('__TOKEN__');
+        const token = LocalStorageUtil.getItem('__TOKEN__')
         if (!token) {
           if (!params.get('code')) {
-          try {
-            const res = await apis.common.getLoginUrl();
+            apis.common.getLoginUrl().then(res => {
               if (res.ok) {
-              window.location.replace(res.data);
-            }
-          } catch (error) {
-            throw error
+                window.location.replace(res.data)
               }
+            })
           } else {
-          try {
-            const res = await apis.common.login({
+            apis.common.login({
               code: params.get('code') || '',
               state: params.get('state') || '',
               amp: params.get('amp') || ''
-            });
+            }).then(res => {
               if (res.ok) {
-              SessionStorageUtil.setItem('__TOKEN__', res.data.token);
-            }
-          } catch (error) {
-            throw error
+                LocalStorageUtil.setItem('__TOKEN__', res.data.token)
               }
+              resolve(true)
+            })
           }
+        } else {
+          resolve(true)
         }
-      return true;
       }
+    })
   }
 }
+
 export default AuthUtil

src/utils/axios.ts

 import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse, type AxiosError } from 'axios'
-import SessionStorageUtil from '@/utils/session'
+import LocalStorageUtil from '@/utils/local'
 import { Toast } from '@nutui/nutui-react'
 import {LOGIN_EXPIRED_CODE} from "@/constants";
 
@@ -9,15 +9,17 @@ const axiosInstance: AxiosInstance = axios.create({
 });
 
 const requestInterceptor = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
-    config.headers.token = SessionStorageUtil.getItem('__TOKEN__');
+    config.headers.token = LocalStorageUtil.getItem('__TOKEN__');
     return config;
 };
 
 const responseInterceptor = (response: AxiosResponse): AxiosResponse => {
     if (response.data.code === LOGIN_EXPIRED_CODE) {
-        Toast.show('登录失效');
+        Toast.show({
+            content: `登录失效: ${response.data.code} ${LocalStorageUtil.getItem('__TOKEN__')}`,
+        });
         setTimeout(() => {
-            SessionStorageUtil.clear();
+            LocalStorageUtil.clear();
             window.location.replace('/');
         }, 2000);
     }

src/utils/local.ts

+class LocalStorageUtil {
+    /**
+     * 存储数据到localStorage
+     * @param key 键名
+     * @param value 值，将被自动转换为字符串
+     */
+    static setItem <T>(key: string, value: T): void {
+        const stringValue = JSON.stringify(value)
+        localStorage.setItem(key, stringValue)
+    }
+
+    /**
+     * 从localStorage获取数据
+     * @param key 键名
+     * @returns 返回解析后的值，如果不存在则返回null
+     */
+    static getItem<T>(key: string): T | null {
+        const item = localStorage.getItem(key)
+        if (item === null) {
+            return null
+        }
+        try {
+            return JSON.parse(item) as T
+        } catch (e) {
+            console.error('Error parsing localStorage item', e)
+            return null
+        }
+    }
+
+    /**
+     * 从localStorage中删除特定数据
+     * @param key 键名
+     */
+    static removeItem (key: string): void {
+        localStorage.removeItem(key)
+    }
+
+    /**
+     * 更新localStorage中的数据
+     * @param key 键名
+     * @param value 新的值，将被自动转换为字符串
+     */
+    static updateItem <T>(key: string, value: T): void {
+        this.setItem(key, value)
+    }
+
+    /**
+     * 清除所有localStorage数据
+     */
+    static clear (): void {
+        localStorage.clear()
+    }
+}
+
+export default LocalStorageUtil