fix: 更新轮盘7072 7107

src/app/[locale]/(wheel)/cashWheel/CashWheelClient.tsx

@@ -25,7 +25,6 @@ import {
     useRef,
     useState,
 } from "react";
-import LotteryWheel from "./LotteryWheel";
 import styles from "./style.module.scss";
 interface Props {
     // wheel: WheelsType;
@@ -38,93 +37,27 @@ interface ContextType extends Props {
 }
 const WheelContext = createContext<Partial<ContextType>>({});
 
-const CashMainCom = () => {
-    return (
-        <div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
-            <div className={styles.haveCash}>
-                <img src="/wheel/cash.png" alt="" className={styles.cashImg} />
-                <div>
-                    {" "}
-                    R$ <span className={styles.cash}>94.15</span>
-                </div>
-                <span className={styles.withdraw}>
-                    <img src="/wheel/pix.png" alt="" /> SACAR{" "}
-                </span>
-            </div>
-            <div className={styles.progress}>
-                <div className={styles.num}> 94.15%</div>
-                <div className={styles.bar}>
-                    <span style={{ width: "calc(97.15% - 0.07rem)" }}></span>
-                </div>
-            </div>
-            <div className={styles.needCash}>
-                {" "}
-                Ainda e necessário <span className={styles.needCashNum}>5.85</span> para realizar do
-                saque{" "}
-            </div>
-        </div>
-    );
-};
-const DrawMain1 = () => {
-    return (
-        <div className={styles.drawMain}>
-            <div className={styles.draw}>
-                {/*<img src="/wheel/d.png" className={styles.lamp} />*/}
-                {/*<img src="/wheel/light1.png" className={styles.light1} />*/}
-                {/*<img src="/wheel/light2.png" className={styles.light2} />*/}
-                {/*<div className={styles.pointer}>*/}
-                {/*    <img src="/wheel/pointer.png" />*/}
-                {/*</div>*/}
-                {/*<img src="/wheel/bg_light.png" className={styles.drawBgImg} />*/}
-                {/*<div className={`${styles.drawLen} ${styles.position} `}></div>*/}
-
-                {/* <div className={styles.drawContents}>
-          <canvas id={styles.draw} width={306} height={306} />
-        </div> */}
-                <LotteryWheel />
-            </div>
-        </div>
-    );
-};
-const DrawContent = () => {
-    return (
-        <div className={styles.drawContent}>
-            <div className={styles.text}>
-                <span>
-                    <span style={{ color: "rgb(135, 149, 177)" }}>Expira em</span> 2d 19:18:13
-                </span>
-            </div>
-            <div className={styles.cashButton}>
-                <div> Convide amigos para ajudar com saques</div>
-                <div className={`${styles.iconfont} ${styles.iconShare}`}></div>
-            </div>
-        </div>
-    );
-};
 type Dtltype = "left" | "right";
-const LeftListClient = () => {
-    const wheel = useContext(WheelContext);
+const LeftListClient = ({ list = [] }: { list: any[] }) => {
     return (
         <>
             <div className={`${styles.winList} ${styles.swipernoswiping} ${styles.type2}`}>
-                {wheel.allHistory &&
-                    wheel.allHistory.length > 0 &&
-                    wheel.allHistory?.map((item, index) => {
-                        return (
-                            <div className={styles.item} key={index}>
-                                <span className={`${styles.name} ${styles.omitWrap}`}>
-                                    {item.phone_number}
-                                </span>
-                                <span className={styles.tipText}>
-                                    {timeFormat(item.receive_time, "br", undefined, true)}
-                                </span>
-                                <div className={styles.value}>
-                                    <span className={styles.addCash}>+100</span>
-                                    <span className={styles.unit}> R$</span>
-                                </div>
+                {list.map((item, index) => {
+                    return (
+                        <div className={styles.item} key={index}>
+                            <span className={`${styles.name} ${styles.omitWrap}`}>
+                                {item.phone_number}
+                            </span>
+                            <span className={styles.tipText}>
+                                {timeFormat(item.receive_time, "br", undefined, true)}
+                            </span>
+                            <div className={styles.value}>
+                                <span className={styles.addCash}>+100</span>
+                                <span className={styles.unit}> R$</span>
                             </div>
-                        );
-                    })}
+                        </div>
+                    );
+                })}
             </div>
         </>
     );
@@ -156,7 +89,7 @@ const RightListClient = () => {
                         <Fragment key={index}>
                             <div className={"flex"}>
                                 <span className={"mr-[0.0694rem] text-[0.12rem] text-[#6ddf39]"}>
-                                    +{item.lose_amount}
+                                    + 100
                                 </span>
                                 <div
                                     className={
@@ -179,7 +112,7 @@ const RightListClient = () => {
                                     width={20}
                                     height={8}
                                 />
-                                <span>+{item.count_person}</span>
+                                <span>+{item.download_count}</span>
                             </div>
                         </Fragment>
                     );
@@ -188,7 +121,7 @@ const RightListClient = () => {
         </div>
     );
 };
-const Report = () => {
+const Report = ({ list }: { list: any[] }) => {
     const [activeTab, setActiveTab] = useState<Dtltype>("left");
 
     const handler = (dtl: Dtltype) => {
@@ -225,7 +158,11 @@ const Report = () => {
                 <div className={styles.vanTabsContent}>
                     <div className={styles.vantabpane}>
                         <div className={styles.tabContent}>
-                            {activeTab === "left" ? <LeftListClient /> : <RightListClient />}
+                            {activeTab === "left" ? (
+                                <LeftListClient list={list} />
+                            ) : (
+                                <RightListClient />
+                            )}
                         </div>
                     </div>
                 </div>
@@ -336,82 +273,11 @@ const DrawMain = () => {
     );
 };
 
-const ReceiveClient = () => {
-    const [visible, setVisible] = useState(false);
-    const wheel = useContext(WheelContext);
-    const t = useTranslations();
-    const { receiveTarget, setWheel } = useWheelStore((state) => ({
-        statusWheel: state.status,
-        currentWheel: state.currentWheel,
-        setWheel: state.setWheel,
-        receiveTarget: state.receiveTarget,
-    }));
-
-    const receiveHandler = () => {
-        getWheelReceiveApi({ unique_id: receiveTarget.unique_id! })
-            .then(() => {
-                setVisible(true);
-                // setWheel();
-            })
-            .catch((error) => {
-                Toast.show(t(`code.${error.data.code || 500}`));
-            });
-    };
-    return (
-        <>
-            <div className={"mt-[10px]"}>
-                <Image
-                    src={"/wheels/receive-button.png"}
-                    alt={"receive"}
-                    height={80}
-                    width={160}
-                    onClick={receiveHandler}
-                ></Image>
-            </div>
-            <Mask visible={visible}>
-                <div className={"absolute top-[50%] w-[100%] -translate-y-1/2 p-[0.1389rem]"}>
-                    <div
-                        className={
-                            "h-[2.0833rem] rounded-[0.0694rem] bg-[#232327FF]" +
-                            " flex flex-col justify-between p-[0.1389rem]"
-                        }
-                    >
-                        <div className={"mb-[0.1389rem] text-center"}>
-                            Parabéns por conseguir 100 BRL
-                        </div>
-                        <div className={"flex justify-center"}>
-                            <img
-                                src="/wheel/cash.png"
-                                alt=""
-                                className={"w-[0.6rem] object-contain"}
-                            />
-                            <div
-                                className={
-                                    "ml-[0.1389rem] text-[0.2778rem] font-black" + " text-[#fb8b05]"
-                                }
-                            >
-                                <p>R$ 100</p>
-                            </div>
-                        </div>
-
-                        <Link href={"/"}>
-                            <div
-                                className={
-                                    "h-[0.34rem] w-[100%] rounded-[0.0694rem] bg-[#fb8b05] text-[#fff]" +
-                                    " flex items-center justify-center"
-                                }
-                            >
-                                Voltar à página inicial
-                            </div>
-                        </Link>
-                    </div>
-                </div>
-            </Mask>
-        </>
-    );
-};
 const CountdownClient = () => {
+    // 提现成功弹窗
     const [visible, setVisible] = useState(false);
+    // 活动结束弹窗
+    const [finishes, setFinishes] = useState(false);
     const wheel = useContext(WheelContext);
     const t = useTranslations();
     const { setWheel, currentWheel, receiveTarget } = useWheelStore((state) => ({
@@ -422,6 +288,11 @@ const CountdownClient = () => {
     }));
     const [_, formattedRes] = useCountDown({
         leftTime: currentWheel.end_time ? currentWheel.end_time * 1000 - Date.now() : 0,
+        // leftTime: 500000,
+        onEnd: () => {
+            wheel.cancelHandler && wheel.cancelHandler();
+            setFinishes(true);
+        },
     });
     const { days, hours, minutes, seconds } = formattedRes;
 
@@ -495,6 +366,30 @@ const CountdownClient = () => {
                     </div>
                 </div>
             </Mask>
+
+            <Mask visible={finishes}>
+                <div className={"absolute top-[50%] w-[100%] -translate-y-1/2 p-[0.1389rem]"}>
+                    <div
+                        className={
+                            "rounded-[0.0694rem] bg-[#232327FF]" +
+                            " flex flex-col justify-between p-[0.1389rem]"
+                        }
+                    >
+                        <div className={"mb-[0.1389rem] text-center"}>O evento acabou</div>
+
+                        <Link href={"/"}>
+                            <div
+                                className={
+                                    "h-[0.34rem] w-[100%] rounded-[0.0694rem] bg-[#fb8b05] text-[#fff]" +
+                                    " flex items-center justify-center"
+                                }
+                            >
+                                Voltar à página inicial
+                            </div>
+                        </Link>
+                    </div>
+                </div>
+            </Mask>
         </>
     );
 };
@@ -727,8 +622,8 @@ const ShareClient = forwardRef<{ open: () => void }, {}>(function ShareClient(pr
     );
 });
 
-const CashWheelClient: FC<Props> = (props) => {
-    const { statusWheel, currentWheel, receiveTarget, setWheel } = useWheelStore((state) => ({
+const Wheel: FC<Props> = (props) => {
+    const { setWheel } = useWheelStore((state) => ({
         statusWheel: state.status,
         currentWheel: state.currentWheel,
         setWheel: state.setWheel,
@@ -740,8 +635,6 @@ const CashWheelClient: FC<Props> = (props) => {
         pollingErrorRetryCount: 1,
         pollingWhenHidden: false,
     });
-    useEffect(() => {}, []);
-
     return (
         <>
             <WheelContext.Provider
@@ -753,16 +646,20 @@ const CashWheelClient: FC<Props> = (props) => {
                 }}
             >
                 <DrawMain />
-
-                <div className={styles.cashWheelClient}>
-                    {/*<CashMainCom />*/}
-                    {/*<DrawContent />*/}
-                    <Report />
-                    {/*<LotteryWheel />*/}
-                </div>
             </WheelContext.Provider>
         </>
     );
 };
+const CashWheelClient: FC<Props> = (props) => {
+    return (
+        <>
+            <Wheel phones={props.phones} allHistory={props.allHistory} />
+
+            <div className={styles.cashWheelClient}>
+                <Report list={props.allHistory} />
+            </div>
+        </>
+    );
+};
 
 export default CashWheelClient;