|
|
@@ -6,6 +6,7 @@ import { useRouter } from "@/i18n/routing";
|
|
|
import { getToken } from "@/utils/Cookies";
|
|
|
import { percentage, timeFormat } from "@/utils/methods";
|
|
|
import { LuckyWheel } from "@lucky-canvas/react";
|
|
|
+import NumberFlow from "@number-flow/react";
|
|
|
import { Mask } from "antd-mobile";
|
|
|
import Image from "next/image";
|
|
|
import { FC, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
|
@@ -151,6 +152,9 @@ export interface WheelProps {
|
|
|
}
|
|
|
export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
const { isRotate, wheel, onRotateEnd } = props;
|
|
|
+
|
|
|
+ // 选中 dom
|
|
|
+ const activeRef = useRef<HTMLImageElement | null>(null);
|
|
|
const wheelRef = useRef<any>();
|
|
|
/*是否旋转*/
|
|
|
const rotating = useRef<boolean>(false);
|
|
|
@@ -194,6 +198,7 @@ export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
};
|
|
|
const endRotate = (prize: any) => {
|
|
|
rotating.current = false;
|
|
|
+ activeRef.current!.style.display = "block";
|
|
|
|
|
|
if (currentWin.current.amount > 0) {
|
|
|
setButtonText(`+${currentWin.current.amount}`);
|
|
|
@@ -203,6 +208,7 @@ export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
onRotateEnd && onRotateEnd();
|
|
|
+ activeRef.current!.style.display = "none";
|
|
|
}, 2000);
|
|
|
};
|
|
|
|
|
|
@@ -211,22 +217,40 @@ export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
}, [wheel]);
|
|
|
|
|
|
return (
|
|
|
- <div className={"relative w-[100%]"}>
|
|
|
- <img
|
|
|
+ <div className={"relative w-[100%] transform"}>
|
|
|
+ <Image
|
|
|
src="/wheels/aura.png"
|
|
|
alt=""
|
|
|
+ width={750}
|
|
|
+ height={300}
|
|
|
className={`absolute h-[100%] ${styles.floatAnimation}`}
|
|
|
/>
|
|
|
- <img
|
|
|
+ <div className={"absolute h-[3.0833rem] w-[100%] overflow-hidden"}>
|
|
|
+ <Image
|
|
|
+ width={750}
|
|
|
+ height={300}
|
|
|
+ src="/wheels/bg-light.png"
|
|
|
+ className={`absolute -top-[0.2778rem] left-0 -z-[1] ${styles.rotateAnimation}`}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Image
|
|
|
+ width={750}
|
|
|
+ height={300}
|
|
|
+ alt=""
|
|
|
src={"/wheels/wheel-bg.png"}
|
|
|
className={"mx-auto h-[5.6rem] w-[100%] object-cover"}
|
|
|
/>
|
|
|
- <img
|
|
|
+ <Image
|
|
|
+ width={750}
|
|
|
+ height={300}
|
|
|
+ alt=""
|
|
|
src={"/wheels/title.png"}
|
|
|
className={"absolute left-[11.5%] top-[41%] z-10 w-[76%]"}
|
|
|
/>
|
|
|
{/*定位到中心圆*/}
|
|
|
- <div className={"absolute bottom-[0px] h-[3.15rem] w-[100%] p-[0.1389rem]"}>
|
|
|
+ <div className={"absolute bottom-[0px] z-10 h-[3.15rem] w-[100%] p-[0.1389rem]"}>
|
|
|
<div className={"relative flex h-[100%] w-[100%] justify-center"}>
|
|
|
<img src="/wheels/light-1.png" alt="" className={`absolute h-[100%]`} />
|
|
|
<img
|
|
|
@@ -239,14 +263,33 @@ export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
alt=""
|
|
|
className={`absolute h-[100%] ${styles.closeFlashing}`}
|
|
|
/>
|
|
|
+ <img
|
|
|
+ ref={activeRef}
|
|
|
+ src="/wheels/active-bg.png"
|
|
|
+ className={`absolute z-10 ml-[0.0694rem] mt-[0.1389rem] hidden h-[1.3889rem] ${styles.activeAnimation}`}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
|
|
|
<div
|
|
|
className={
|
|
|
"relative h-[100%] w-[2.62rem] rounded-[50%] px-[0.0486rem] py-[0.1736rem]"
|
|
|
}
|
|
|
>
|
|
|
+ <LuckyWheel
|
|
|
+ ref={wheelRef}
|
|
|
+ width="2.52rem"
|
|
|
+ height="2.52rem"
|
|
|
+ blocks={blocks}
|
|
|
+ defaultConfig={defaultConfig}
|
|
|
+ prizes={prizes}
|
|
|
+ onEnd={(prize: any) => endRotate(prize)}
|
|
|
+ />
|
|
|
+
|
|
|
<div
|
|
|
- className={"absolute bottom-[50%] left-0 z-50 w-[100%] translate-y-1/2"}
|
|
|
+ className={
|
|
|
+ "absolute bottom-[50%] left-0 z-[888] w-[100%] " +
|
|
|
+ " translate-y-1/2"
|
|
|
+ }
|
|
|
>
|
|
|
<div
|
|
|
className={"flex justify-center"}
|
|
|
@@ -268,15 +311,6 @@ export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <LuckyWheel
|
|
|
- ref={wheelRef}
|
|
|
- width="2.52rem"
|
|
|
- height="2.52rem"
|
|
|
- blocks={blocks}
|
|
|
- defaultConfig={defaultConfig}
|
|
|
- prizes={prizes}
|
|
|
- onEnd={(prize: any) => endRotate(prize)}
|
|
|
- />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -327,9 +361,8 @@ const DetailClient = (props: { wheel: Partial<WheelsType>; onUnload: () => void
|
|
|
<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}>{wheel.activate?.amount}</span>
|
|
|
+ <div className={styles.cash}>
|
|
|
+ <NumberFlow value={wheel.activate?.amount || 0} prefix={"R$ "} trend={+1} />
|
|
|
</div>
|
|
|
<span className={styles.withdraw}>
|
|
|
<img src="/wheel/pix.png" alt="" /> SACAR{" "}
|
|
|
@@ -345,7 +378,7 @@ const DetailClient = (props: { wheel: Partial<WheelsType>; onUnload: () => void
|
|
|
<div className={styles.needCash}>
|
|
|
Ainda e necessário{" "}
|
|
|
<span className={styles.needCashNum}>
|
|
|
- {(100 - (wheel.activate?.amount || 0)).toFixed(2)}
|
|
|
+ <NumberFlow value={100 - (wheel.activate?.amount || 0)} trend={-1} />
|
|
|
</span>{" "}
|
|
|
para realizar do saque{" "}
|
|
|
</div>
|
|
|
@@ -366,7 +399,7 @@ const DetailClient = (props: { wheel: Partial<WheelsType>; onUnload: () => void
|
|
|
};
|
|
|
|
|
|
const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(props, ref) {
|
|
|
- const [visible, setVisible] = useState(true);
|
|
|
+ const [visible, setVisible] = useState(false);
|
|
|
|
|
|
const [detailsVisible, setDetailsVisible] = useState(false);
|
|
|
const [wheel, setWheel] = useState<Partial<WheelsType>>({});
|
|
|
@@ -417,7 +450,7 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
|
|
|
};
|
|
|
return (
|
|
|
<>
|
|
|
- <Mask visible={detailsVisible} getContainer={null}>
|
|
|
+ <Mask visible={detailsVisible} getContainer={null} destroyOnClose={true}>
|
|
|
<div className={"absolute top-[10%] z-50 w-[100%] p-[0.1389rem]"}>
|
|
|
<div className={"rounded-[0.0694rem] bg-[#232327FF] p-[0.0694rem]"}>
|
|
|
<div className={"flex items-center"}>
|
Before
