|
@@ -1,9 +1,10 @@
|
|
|
"use client";
|
|
|
import { getGiveReceiveApi, SlotParams, SlotType } from "@/api/slots";
|
|
|
-import { flatPoint } from "@/utils/methods";
|
|
|
+import { debounce, flatPoint } from "@/utils/methods";
|
|
|
import { SlotMachine } from "@lucky-canvas/react";
|
|
|
-import { Mask } from "antd-mobile";
|
|
|
+import { Mask, Toast } from "antd-mobile";
|
|
|
import clsx from "clsx";
|
|
|
+import { useTranslations } from "next-intl";
|
|
|
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
|
import animation from "../animations.module.scss";
|
|
|
|
|
@@ -171,6 +172,7 @@ interface SlotsClientProps {
|
|
|
const SlotsClient: FC<SlotsClientProps> = (props) => {
|
|
|
const { slotSource, onRotateAfter } = props;
|
|
|
const slotsRef = useRef<any>(null);
|
|
|
+ const t = useTranslations();
|
|
|
|
|
|
const rotating = useRef<boolean>(false);
|
|
|
|
|
@@ -193,43 +195,43 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
|
|
|
// getSlots();
|
|
|
}, []);
|
|
|
// 开始旋转
|
|
|
- const handler = () => {
|
|
|
+ const handler = debounce(() => {
|
|
|
// 按下动画
|
|
|
if (params && !params.activity_id && !params.start_time) return;
|
|
|
if (rotating.current) return;
|
|
|
- let height = buttonRef.current!.clientHeight;
|
|
|
- buttonRef.current!.style.transition = "height 0.3s";
|
|
|
- buttonRef.current!.style.height = `${height * 0.8}px`;
|
|
|
|
|
|
- setTimeout(() => {
|
|
|
- buttonRef.current!.style.height = `${height}px`;
|
|
|
- }, 200);
|
|
|
// slotsRef.current?.play();
|
|
|
// setTimeout(() => {
|
|
|
// slotsRef.current?.stop(numberPadding(Math.floor(Math.random() * 9999)));
|
|
|
// }, 2500);
|
|
|
// return;
|
|
|
|
|
|
- slotsRef.current?.play();
|
|
|
+ // 图片按下修改高度
|
|
|
+
|
|
|
+ let height = buttonRef.current!.clientHeight;
|
|
|
+ buttonRef.current!.style.transition = "height 0.3s";
|
|
|
+ buttonRef.current!.style.height = `${height * 0.8}px`;
|
|
|
rotating.current = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ buttonRef.current!.style.height = `${height}px`;
|
|
|
+ }, 200);
|
|
|
+ slotsRef.current?.play();
|
|
|
|
|
|
// 数据获取
|
|
|
getGiveReceiveApi(params as SlotParams)
|
|
|
.then((res) => {
|
|
|
setTimeout(() => {
|
|
|
- if (res.code === 200) {
|
|
|
- const rollover = flatPoint(res.data.rollover / 100);
|
|
|
- slotsRef.current?.stop(numberPadding(res.data.amount));
|
|
|
- setRatio(numberPadding(rollover > 100 ? 99 : rollover, 2));
|
|
|
- } else {
|
|
|
- slotsRef.current.init();
|
|
|
- }
|
|
|
+ const rollover = flatPoint(res.data.rollover / 100);
|
|
|
+ slotsRef.current?.stop(numberPadding(res.data.amount));
|
|
|
+ setRatio(numberPadding(rollover > 100 ? 99 : rollover, 2));
|
|
|
}, 2500);
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
slotsRef.current.init();
|
|
|
+ rotating.current = false;
|
|
|
+ Toast.show(t(`code.${error.data.code}`));
|
|
|
});
|
|
|
- };
|
|
|
+ }, 300);
|
|
|
// 结束旋转
|
|
|
const endHandler = (prize: any) => {
|
|
|
rotating.current = false;
|