|
@@ -25,86 +25,90 @@ interface Props {
|
|
|
services: ServiceTypes[];
|
|
|
socials: ServiceTypes[];
|
|
|
}
|
|
|
+/**
|
|
|
+ * 免费送活动
|
|
|
+ */
|
|
|
+const SlotSection = () => {
|
|
|
+ const slotsRef = useRef<SlotModalRefProps | null>(null);
|
|
|
+ const getSlots = async () => {
|
|
|
+ const token = getToken();
|
|
|
+ if (token) {
|
|
|
+ const result = await getGiveInfoApi();
|
|
|
+ return result.data;
|
|
|
+ } else {
|
|
|
+ return Promise.resolve({});
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
-const ServiceWidget: FC<Props> = (props) => {
|
|
|
- const token = getToken();
|
|
|
- const { services, socials = [] } = props;
|
|
|
+ const { data: slots, run: slotRun } = useRequest<any, any>(getSlots, {
|
|
|
+ pollingInterval: 2000,
|
|
|
+ pollingErrorRetryCount: 1,
|
|
|
+ pollingWhenHidden: false,
|
|
|
+ });
|
|
|
+ const slotHandler = () => {
|
|
|
+ slotsRef.current?.onOpen(slots);
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {slots?.id ? (
|
|
|
+ <img
|
|
|
+ src={"/slots/slots-icon.gif"}
|
|
|
+ className={"mb-[0.2778rem] w-[100%]"}
|
|
|
+ onClick={slotHandler}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
|
|
|
+ {/*随机送*/}
|
|
|
+ <SlotsModal ref={slotsRef} onAfterHandler={slotRun} />
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 轮盘
|
|
|
+ */
|
|
|
+const WheelSection = () => {
|
|
|
+ const wheelModalRef = useRef<WheelModalProps | null>(null);
|
|
|
const { wheelStatus, wheelCurrent, setWheel } = useWheelStore((state) => ({
|
|
|
wheelStatus: state.status,
|
|
|
wheelCurrent: state.currentWheel,
|
|
|
setWheel: state.setWheel,
|
|
|
}));
|
|
|
- const defaultService = services?.find((item) => item.is_suspend === 1);
|
|
|
-
|
|
|
- const newServices = services?.filter((item) => item.status === 1) || [];
|
|
|
- const setSocials = useSocialStore((state) => state.setSocials);
|
|
|
- const redPacketModalRef = useRef<RedPacketModalProps>(null);
|
|
|
-
|
|
|
- /// 首充活动ref
|
|
|
- const userRechargeRef = useRef<ModalRefProps | null>(null);
|
|
|
-
|
|
|
- // 轮盘
|
|
|
- const wheelModalRef = useRef<WheelModalProps | null>(null);
|
|
|
-
|
|
|
- const slotsRef = useRef<SlotModalRefProps | null>(null);
|
|
|
-
|
|
|
- const getWheel = () => {
|
|
|
- if (!getToken()) return Promise.resolve(undefined);
|
|
|
- return getWheelApi().then((res) => {
|
|
|
- return res.data;
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- const serach = useSearchParams();
|
|
|
|
|
|
useEffect(() => {
|
|
|
- // 数据存储,侧边栏使用
|
|
|
- setSocials(socials);
|
|
|
setWheel().then((data) => {
|
|
|
if (data && useWheelStore.getState().status === 1) {
|
|
|
wheelModalRef.current?.onOpen(data);
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
- // 分享地址
|
|
|
- if (serach.size > 1 && localStorage.getItem("share_url") !== window.location.href) {
|
|
|
- getShareApi({ channel_url: window.location.href });
|
|
|
- localStorage.setItem("share_url", window.location.href);
|
|
|
- }
|
|
|
}, []);
|
|
|
|
|
|
- const t = useTranslations("HomePage");
|
|
|
- const { unread, userUnred } = useGlobalNoticeStore((state) => ({
|
|
|
- unread: state.unread,
|
|
|
- userUnred: state.userUnred,
|
|
|
- }));
|
|
|
-
|
|
|
- const getRedPacketInfo = async () => {
|
|
|
- try {
|
|
|
- let redPacketInfo: any;
|
|
|
- let actList: any = [];
|
|
|
- if (token) {
|
|
|
- redPacketInfo = await lredPacketApi();
|
|
|
- actList = redPacketInfo.data?.red_packets || [];
|
|
|
- } else {
|
|
|
- redPacketInfo = await redPacketApi();
|
|
|
- actList = redPacketInfo.data || [];
|
|
|
- }
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {wheelStatus === 2 ? (
|
|
|
+ <Link
|
|
|
+ href={"/cashWheel"}
|
|
|
+ className={
|
|
|
+ "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
+ " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Image src={"/wheels/wheel-icon.gif"} alt={"wheel"} width={100} height={100} />
|
|
|
+ </Link>
|
|
|
+ ) : null}
|
|
|
|
|
|
- // 已经开始
|
|
|
- return actList.filter((aItem: any) => {
|
|
|
- return aItem.is_start;
|
|
|
- });
|
|
|
- } catch (error) {}
|
|
|
- };
|
|
|
- // 红包雨轮询
|
|
|
- const { data: packets, run } = useRequest<any[], any>(getRedPacketInfo, {
|
|
|
- pollingInterval: 5000,
|
|
|
- pollingErrorRetryCount: 1,
|
|
|
- pollingWhenHidden: false,
|
|
|
- });
|
|
|
+ {/* 轮盘弹窗 */}
|
|
|
+ <WheelModal ref={wheelModalRef} />
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 首充
|
|
|
+ */
|
|
|
+const PaySection = () => {
|
|
|
+ const token = getToken();
|
|
|
|
|
|
+ const userRechargeRef = useRef<ModalRefProps>(null);
|
|
|
// 首充活动
|
|
|
const getPayInfo = async (): Promise<PayDataType> => {
|
|
|
if (token) {
|
|
@@ -117,64 +121,16 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
- const { data: paysInfo, run: payRun } = useRequest<PayDataType, any>(getPayInfo, {
|
|
|
- pollingErrorRetryCount: 1,
|
|
|
- pollingWhenHidden: false,
|
|
|
- });
|
|
|
-
|
|
|
- /**
|
|
|
- * 免费送活动
|
|
|
- */
|
|
|
-
|
|
|
- const getSlots = async () => {
|
|
|
- if (token) {
|
|
|
- const result = await getGiveInfoApi();
|
|
|
- return result.data;
|
|
|
- } else {
|
|
|
- return Promise.resolve({});
|
|
|
- }
|
|
|
- };
|
|
|
|
|
|
- const { data: slots, run: slotRun } = useRequest<any, any>(getSlots, {
|
|
|
- pollingInterval: 2000,
|
|
|
+ const { data: paysInfo, run: payRun } = useRequest<PayDataType, any>(getPayInfo, {
|
|
|
pollingErrorRetryCount: 1,
|
|
|
pollingWhenHidden: false,
|
|
|
});
|
|
|
- const slotHandler = () => {
|
|
|
- slotsRef.current?.onOpen(slots);
|
|
|
- };
|
|
|
return (
|
|
|
<>
|
|
|
- <div
|
|
|
- className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
|
|
|
- >
|
|
|
- {slots?.id ? (
|
|
|
- <img
|
|
|
- src={"/slots/slots-icon.gif"}
|
|
|
- className={"mb-[0.2778rem] w-[100%]"}
|
|
|
- onClick={slotHandler}
|
|
|
- />
|
|
|
- ) : null}
|
|
|
-
|
|
|
- {/*轮盘 */}
|
|
|
- {wheelStatus === 2 ? (
|
|
|
- <Link
|
|
|
- href={"/cashWheel"}
|
|
|
- className={
|
|
|
- "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
- " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
|
|
|
- }
|
|
|
- >
|
|
|
- <Image
|
|
|
- src={"/wheels/wheel-icon.gif"}
|
|
|
- alt={"wheel"}
|
|
|
- width={100}
|
|
|
- height={100}
|
|
|
- />
|
|
|
- </Link>
|
|
|
- ) : null}
|
|
|
- {/*首充*/}
|
|
|
- {paysInfo?.first_pay?.map((item, index) => {
|
|
|
+ {paysInfo &&
|
|
|
+ paysInfo.first_pay &&
|
|
|
+ paysInfo.first_pay.map((item, index) => {
|
|
|
return (
|
|
|
<div
|
|
|
key={index}
|
|
@@ -184,8 +140,8 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
className={"w-[0.54rem]"}
|
|
|
src="/hby/recharge.png"
|
|
|
onClick={() => {
|
|
|
- // @ts-ignore
|
|
|
- userRechargeRef.current?.onOpen(paysInfo.first_pay, index);
|
|
|
+ userRechargeRef.current?.onOpen &&
|
|
|
+ userRechargeRef.current?.onOpen(paysInfo?.first_pay, index);
|
|
|
}}
|
|
|
/>
|
|
|
{item.end_time > 0 ? (
|
|
@@ -204,68 +160,164 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
</div>
|
|
|
);
|
|
|
})}
|
|
|
- {/* 红包雨icon */}
|
|
|
- {packets?.map((item, index) => {
|
|
|
- return (
|
|
|
- <div key={index} className={`mb-[0.2778rem] cursor-pointer`}>
|
|
|
- <img
|
|
|
- className={"w-[0.54rem] object-fill"}
|
|
|
- src="/hby/red-icon.gif"
|
|
|
- onClick={() => {
|
|
|
- redPacketModalRef.current?.onOpen(packets, index);
|
|
|
- }}
|
|
|
- />
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
|
|
|
- {/*未读消息*/}
|
|
|
- {unread || userUnred ? (
|
|
|
- <Link
|
|
|
- href={"/notification"}
|
|
|
- className={
|
|
|
- "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
- " justify-center rounded-[50%] bg-gradient-to-t from-[#ffa111]" +
|
|
|
- " to-[#ffcf35]"
|
|
|
- }
|
|
|
- >
|
|
|
- <Badge content={userUnred + unread} style={{ "--top": "12px" }}>
|
|
|
- <i
|
|
|
- className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}
|
|
|
- ></i>
|
|
|
- </Badge>
|
|
|
- </Link>
|
|
|
- ) : null}
|
|
|
+ {/*首充弹窗*/}
|
|
|
+ <UserRecharge ref={userRechargeRef} />
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 红包雨
|
|
|
+ */
|
|
|
+const RedPacketSection = () => {
|
|
|
+ const token = getToken();
|
|
|
+ const redPacketModalRef = useRef<RedPacketModalProps>(null);
|
|
|
+ const getRedPacketInfo = async () => {
|
|
|
+ try {
|
|
|
+ let redPacketInfo: any;
|
|
|
+ let actList: any = [];
|
|
|
+ if (token) {
|
|
|
+ redPacketInfo = await lredPacketApi();
|
|
|
+ actList = redPacketInfo.data?.red_packets || [];
|
|
|
+ } else {
|
|
|
+ redPacketInfo = await redPacketApi();
|
|
|
+ actList = redPacketInfo.data || [];
|
|
|
+ }
|
|
|
|
|
|
- {defaultService && (
|
|
|
- <Link
|
|
|
- href={defaultService.url}
|
|
|
- className={
|
|
|
- "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
|
|
|
- " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
|
|
|
- }
|
|
|
- target={"_blank"}
|
|
|
- >
|
|
|
+ // 已经开始
|
|
|
+ return actList.filter((aItem: any) => {
|
|
|
+ return aItem.is_start;
|
|
|
+ });
|
|
|
+ } catch (error) {}
|
|
|
+ };
|
|
|
+ // 红包雨轮询
|
|
|
+ const { data: packets, run } = useRequest<any[], any>(getRedPacketInfo, {
|
|
|
+ pollingInterval: 5000,
|
|
|
+ pollingErrorRetryCount: 1,
|
|
|
+ pollingWhenHidden: false,
|
|
|
+ });
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {packets?.map((item, index) => {
|
|
|
+ const icons = JSON.parse(item.icon);
|
|
|
+ const icon = icons[icons.length - 1];
|
|
|
+ return (
|
|
|
+ <div key={index} className={`mb-[0.2778rem] cursor-pointer`}>
|
|
|
<img
|
|
|
- className={"h-[0.3889rem] w-[0.3889rem] object-contain"}
|
|
|
- src={defaultService.icon_url}
|
|
|
- alt={""}
|
|
|
- ></img>
|
|
|
- </Link>
|
|
|
- )}
|
|
|
- </div>
|
|
|
+ className={"w-[0.54rem] object-fill"}
|
|
|
+ src={icon}
|
|
|
+ onClick={() => {
|
|
|
+ redPacketModalRef.current?.onOpen(packets, index);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
|
|
|
{/*红包雨弹窗*/}
|
|
|
<RedPacketModal ref={redPacketModalRef} onAfterHandler={run} />
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
- {/*首充弹窗*/}
|
|
|
- <UserRecharge ref={userRechargeRef} />
|
|
|
+const MessageSection = () => {
|
|
|
+ const { unread, userUnred } = useGlobalNoticeStore((state) => ({
|
|
|
+ unread: state.unread,
|
|
|
+ userUnred: state.userUnred,
|
|
|
+ }));
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {unread || userUnred ? (
|
|
|
+ <Link
|
|
|
+ href={"/notification"}
|
|
|
+ className={
|
|
|
+ "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
+ " justify-center rounded-[50%] bg-gradient-to-t from-[#ffa111]" +
|
|
|
+ " to-[#ffcf35]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Badge content={userUnred + unread} style={{ "--top": "12px" }}>
|
|
|
+ <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
|
|
|
+ </Badge>
|
|
|
+ </Link>
|
|
|
+ ) : null}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 客服
|
|
|
+ */
|
|
|
+const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
|
|
|
+ const { services } = props;
|
|
|
+ const defaultService = services?.filter((item) => item.is_suspend === 1);
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {defaultService?.map((item, index) => (
|
|
|
+ <Link
|
|
|
+ key={index}
|
|
|
+ href={item.url}
|
|
|
+ className={
|
|
|
+ "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
|
|
|
+ " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
|
|
|
+ }
|
|
|
+ target={"_blank"}
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ className={"h-[0.3889rem] w-[0.3889rem] object-contain"}
|
|
|
+ src={item.icon_url}
|
|
|
+ alt={""}
|
|
|
+ ></img>
|
|
|
+ </Link>
|
|
|
+ ))}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+const ServiceWidget: FC<Props> = (props) => {
|
|
|
+ const { services, socials = [] } = props;
|
|
|
|
|
|
- {/* 轮盘弹窗 */}
|
|
|
- <WheelModal ref={wheelModalRef} />
|
|
|
+ const newServices = services?.filter((item) => item.status === 1) || [];
|
|
|
+ const setSocials = useSocialStore((state) => state.setSocials);
|
|
|
|
|
|
- {/*随机送*/}
|
|
|
- <SlotsModal ref={slotsRef} onAfterHandler={slotRun} />
|
|
|
+ const getWheel = () => {
|
|
|
+ if (!getToken()) return Promise.resolve(undefined);
|
|
|
+ return getWheelApi().then((res) => {
|
|
|
+ return res.data;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const serach = useSearchParams();
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ // 数据存储,侧边栏使用
|
|
|
+ setSocials(socials);
|
|
|
+
|
|
|
+ // 分享地址
|
|
|
+ if (serach.size > 1 && localStorage.getItem("share_url") !== window.location.href) {
|
|
|
+ getShareApi({ channel_url: window.location.href });
|
|
|
+ localStorage.setItem("share_url", window.location.href);
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const t = useTranslations("HomePage");
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
|
|
|
+ >
|
|
|
+ <SlotSection />
|
|
|
+ {/*轮盘 */}
|
|
|
+ <WheelSection />
|
|
|
+ {/*首充*/}
|
|
|
+ <PaySection />
|
|
|
+ {/* 红包雨icon */}
|
|
|
+ <RedPacketSection />
|
|
|
+ {/*未读消息*/}
|
|
|
+ <MessageSection />
|
|
|
+ {/*客服*/}
|
|
|
+ <CustomerSection services={services} />
|
|
|
+ </div>
|
|
|
|
|
|
<div
|
|
|
className={`grid`}
|