|
@@ -1,5 +1,6 @@
|
|
|
"use client";
|
|
|
|
|
|
+import { WheelsType } from "@/api/cashWheel";
|
|
|
import Box from "@/components/Box";
|
|
|
import { Link } from "@/i18n/routing";
|
|
|
import { useUserInfoStore } from "@/stores/useUserInfoStore";
|
|
@@ -10,9 +11,14 @@ import { Popup, Toast } from "antd-mobile";
|
|
|
import clsx from "clsx";
|
|
|
import { useTranslations } from "next-intl";
|
|
|
import Image from "next/image";
|
|
|
-import { useRef, useState } from "react";
|
|
|
+import { createContext, FC, useContext, useRef, useState } from "react";
|
|
|
import LotteryWheel from "./LotteryWheel";
|
|
|
import styles from "./style.module.scss";
|
|
|
+interface Props {
|
|
|
+ wheel: WheelsType;
|
|
|
+}
|
|
|
+const WheelContext = createContext<Partial<WheelsType>>({});
|
|
|
+
|
|
|
const CashMainCom = () => {
|
|
|
return (
|
|
|
<div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
|
|
@@ -170,6 +176,7 @@ const Report = () => {
|
|
|
};
|
|
|
const WheelWallet = () => {
|
|
|
const user = useUserInfoStore((state) => state.userInfo);
|
|
|
+ const wheel = useContext(WheelContext);
|
|
|
return (
|
|
|
<Box className={"absolute top-0 w-[100%]"}>
|
|
|
<div
|
|
@@ -186,42 +193,84 @@ const WheelWallet = () => {
|
|
|
</div>
|
|
|
<div className={"text-[0.3472rem] font-bold text-[#008213]"}>
|
|
|
R$
|
|
|
- <span>111</span>
|
|
|
+ <span>{wheel.activate?.amount || 0}</span>
|
|
|
</div>
|
|
|
<div className={"mt-[0.2083rem] w-[100%] text-center text-[18px]"}>
|
|
|
<span className={"mr-[10px] text-[#008213]"}>Faltam para O saque</span>
|
|
|
- <span className={"text-[yellow]"}>R$9.36</span>
|
|
|
+ <span className={"text-[yellow]"}>
|
|
|
+ R${wheel.num! - wheel.activate?.amount! || 0}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Box>
|
|
|
);
|
|
|
};
|
|
|
+
|
|
|
+// 数据
|
|
|
+const blocks = [
|
|
|
+ {
|
|
|
+ padding: "0",
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/wheel.png",
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ rotate: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+const prizes = [
|
|
|
+ {
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/prizes-money.png",
|
|
|
+ top: "30%",
|
|
|
+ width: "0.3472rem",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/prizes-empty.png",
|
|
|
+ top: "30%",
|
|
|
+ width: "0.2778rem",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ { fonts: [{ text: "5000", top: "30%", fontColor: "#a47716", fontWeight: "bold" }] },
|
|
|
+ { fonts: [{ text: "1000", top: "30%", fontColor: "#a47716", fontWeight: "bold" }] },
|
|
|
+ { fonts: [{ text: "50", top: "30%", fontColor: "#a47716", fontWeight: "bold" }] },
|
|
|
+ { fonts: [{ text: "1", top: "30%", fontColor: "#a47716", fontWeight: "bold" }] },
|
|
|
+ {
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/prizes-empty.png",
|
|
|
+ top: "30%",
|
|
|
+ width: "0.2778rem",
|
|
|
+ height: "0.2778rem",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/prizes-money.png",
|
|
|
+ top: "30%",
|
|
|
+ width: "0.3472rem",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
const DrawMain = () => {
|
|
|
const myLucky = useRef<any>();
|
|
|
const desktopWheelRef = useRef<any>();
|
|
|
- const [blocks] = useState([
|
|
|
- {
|
|
|
- padding: "0",
|
|
|
- imgs: [
|
|
|
- {
|
|
|
- src: "/wheels/wheel.png",
|
|
|
- width: "100%",
|
|
|
- height: "100%",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ]);
|
|
|
- const [prizes] = useState([
|
|
|
- { fonts: [{ text: "0", top: "20%" }] },
|
|
|
- { fonts: [{ text: "1", top: "20%" }] },
|
|
|
- { fonts: [{ text: "2", top: "20%" }] },
|
|
|
- { fonts: [{ text: "3", top: "20%" }] },
|
|
|
- { fonts: [{ text: "4", top: "20%" }] },
|
|
|
- { fonts: [{ text: "5", top: "20%" }] },
|
|
|
- { fonts: [{ text: "6", top: "20%" }] },
|
|
|
- { fonts: [{ text: "7", top: "20%" }] },
|
|
|
- ]);
|
|
|
- const [buttons] = useState([
|
|
|
+ const wheel = useContext(WheelContext);
|
|
|
+ console.log(`🚀🚀🚀🚀🚀-> in CashWheelClient.tsx on 213`, wheel);
|
|
|
+ const [count, setCount] = useState(0);
|
|
|
+
|
|
|
+ const [buttons, setButtons] = useState([
|
|
|
{
|
|
|
radius: "30%",
|
|
|
imgs: [
|
|
@@ -231,12 +280,37 @@ const DrawMain = () => {
|
|
|
top: "-130%",
|
|
|
},
|
|
|
],
|
|
|
+ fonts: [
|
|
|
+ {
|
|
|
+ text: count,
|
|
|
+ top: -5,
|
|
|
+ fontColor: "#ffdb0e",
|
|
|
+ fontSize: "22px",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
]);
|
|
|
-
|
|
|
const [defaultConfig] = useState({
|
|
|
offsetDegree: 20,
|
|
|
});
|
|
|
+
|
|
|
+ const startRotate = () => {
|
|
|
+ // 点击抽奖按钮会触发star回调
|
|
|
+ myLucky.current?.play();
|
|
|
+ setTimeout(() => {
|
|
|
+ const index = (Math.random() * 6) >> 0;
|
|
|
+ myLucky.current?.stop(index);
|
|
|
+ setButtons((value) => {
|
|
|
+ const newValue = [...value];
|
|
|
+ newValue[0].fonts[0].text = index;
|
|
|
+ return newValue;
|
|
|
+ });
|
|
|
+ }, 2500);
|
|
|
+ };
|
|
|
+ const endRotate = (prize: any) => {
|
|
|
+ console.log(`🚀🚀🚀🚀🚀-> in CashWheelClient.tsx on 304`, prize);
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<div className={"relative"}>
|
|
|
<WheelWallet />
|
|
@@ -284,18 +358,8 @@ const DrawMain = () => {
|
|
|
defaultConfig={defaultConfig}
|
|
|
prizes={prizes}
|
|
|
buttons={buttons}
|
|
|
- onStart={() => {
|
|
|
- // 点击抽奖按钮会触发star回调
|
|
|
- myLucky.current?.play();
|
|
|
- setTimeout(() => {
|
|
|
- const index = (Math.random() * 6) >> 0;
|
|
|
- myLucky.current?.stop(index);
|
|
|
- }, 2500);
|
|
|
- }}
|
|
|
- onEnd={(prize: any) => {
|
|
|
- // 抽奖结束会触发end回调
|
|
|
- alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
|
|
|
- }}
|
|
|
+ onStart={startRotate}
|
|
|
+ onEnd={(prize: any) => endRotate(prize)}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -345,18 +409,8 @@ const DrawMain = () => {
|
|
|
defaultConfig={defaultConfig}
|
|
|
prizes={prizes}
|
|
|
buttons={buttons}
|
|
|
- onStart={() => {
|
|
|
- // 点击抽奖按钮会触发star回调
|
|
|
- desktopWheelRef.current?.play();
|
|
|
- setTimeout(() => {
|
|
|
- const index = (Math.random() * 6) >> 0;
|
|
|
- desktopWheelRef.current?.stop(index);
|
|
|
- }, 2500);
|
|
|
- }}
|
|
|
- onEnd={(prize: any) => {
|
|
|
- // 抽奖结束会触发end回调
|
|
|
- alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
|
|
|
- }}
|
|
|
+ onStart={startRotate}
|
|
|
+ onEnd={(prize: any) => endRotate(prize)}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -366,8 +420,10 @@ const DrawMain = () => {
|
|
|
);
|
|
|
};
|
|
|
const CountdownClient = () => {
|
|
|
+ const wheel = useContext(WheelContext);
|
|
|
+
|
|
|
const [_, formattedRes] = useCountDown({
|
|
|
- leftTime: 60 * 100000,
|
|
|
+ leftTime: wheel.activate?.end_time,
|
|
|
});
|
|
|
const { days, hours, minutes, seconds } = formattedRes;
|
|
|
return (
|
|
@@ -554,20 +610,24 @@ const ShareClient = () => {
|
|
|
</>
|
|
|
);
|
|
|
};
|
|
|
-const CashWheelClient = () => {
|
|
|
+
|
|
|
+const CashWheelClient: FC<Props> = (props) => {
|
|
|
+ const values = { ...props.wheel, num: 100 };
|
|
|
return (
|
|
|
<>
|
|
|
- <DrawMain />
|
|
|
- {/*倒计时*/}
|
|
|
- <CountdownClient />
|
|
|
- {/*分享*/}
|
|
|
- <ShareClient />
|
|
|
- <div className={styles.cashWheelClient}>
|
|
|
- {/*<CashMainCom />*/}
|
|
|
- {/*<DrawContent />*/}
|
|
|
- <Report />
|
|
|
- {/*<LotteryWheel />*/}
|
|
|
- </div>
|
|
|
+ <WheelContext.Provider value={values}>
|
|
|
+ <DrawMain />
|
|
|
+ {/*倒计时*/}
|
|
|
+ <CountdownClient />
|
|
|
+ {/*分享*/}
|
|
|
+ <ShareClient />
|
|
|
+ <div className={styles.cashWheelClient}>
|
|
|
+ {/*<CashMainCom />*/}
|
|
|
+ {/*<DrawContent />*/}
|
|
|
+ <Report />
|
|
|
+ {/*<LotteryWheel />*/}
|
|
|
+ </div>
|
|
|
+ </WheelContext.Provider>
|
|
|
</>
|
|
|
);
|
|
|
};
|