|
@@ -3,15 +3,17 @@ import { ServiceTypes } from "@/api/customservice";
|
|
|
import { getPaysApi, lredPacketApi, PayDataType, redPacketApi } from "@/api/promo";
|
|
|
import RedPacketModal, { RedPacketModalProps } from "@/components/Box/RedPacketModal";
|
|
|
import UserRecharge, { ModalRefProps, Timeout } from "@/components/Box/UserRecharge";
|
|
|
+import WheelModal, { WheelModalProps } from "@/components/Box/WheelModal";
|
|
|
+
|
|
|
+import { getWheelApi } from "@/api/cashWheel";
|
|
|
import { Link } from "@/i18n/routing";
|
|
|
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
|
|
|
import { useSocialStore } from "@/stores/useSocials";
|
|
|
import { getToken } from "@/utils/Cookies";
|
|
|
import { useRequest } from "ahooks";
|
|
|
import { Badge } from "antd-mobile";
|
|
|
-import clsx from "clsx";
|
|
|
import { useTranslations } from "next-intl";
|
|
|
-import { FC, useEffect, useRef } from "react";
|
|
|
+import { FC, useEffect, useRef, useState } from "react";
|
|
|
|
|
|
interface Props {
|
|
|
services: ServiceTypes[];
|
|
@@ -30,9 +32,37 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
/// 首充活动ref
|
|
|
const userRechargeRef = useRef<ModalRefProps | null>(null);
|
|
|
|
|
|
+ // 轮盘
|
|
|
+ const wheelModalRef = useRef<WheelModalProps | null>(null);
|
|
|
+
|
|
|
+ const getWheel = () => {
|
|
|
+ if (!getToken()) return Promise.resolve(undefined);
|
|
|
+ return getWheelApi().then((res) => {
|
|
|
+ return res.data;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 1: 转 2: 待领取 3: nothing
|
|
|
+ const [visibleWheel, setVisibleWheel] = useState<1 | 2 | 3 | undefined>(undefined);
|
|
|
useEffect(() => {
|
|
|
// 数据存储,侧边栏使用
|
|
|
setSocials(socials);
|
|
|
+ getWheel().then((res) => {
|
|
|
+ console.log(`🚀🚀🚀🚀🚀-> in Service.tsx on 49`, res);
|
|
|
+ if (res === undefined) {
|
|
|
+ setVisibleWheel(3);
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res && res.activate.can === 1) {
|
|
|
+ setVisibleWheel(1);
|
|
|
+ wheelModalRef.current?.onOpen(res);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res && res.not_receive.length > 0) {
|
|
|
+ setVisibleWheel(2);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
}, []);
|
|
|
|
|
|
const t = useTranslations("HomePage");
|
|
@@ -84,25 +114,50 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
pollingWhenHidden: false,
|
|
|
});
|
|
|
|
|
|
- const grids = {
|
|
|
- "0": "grid-color-0",
|
|
|
- "1": "grid-color-1",
|
|
|
- "2": "grid-color-2",
|
|
|
- "3": "grid-color-3",
|
|
|
- "4": "grid-color-4",
|
|
|
- "5": "grid-color-5",
|
|
|
- "6": "grid-color-6",
|
|
|
- "7": "grid-color-7",
|
|
|
- "8": "grid-color-8",
|
|
|
- "9": "grid-color-9",
|
|
|
- };
|
|
|
- const gridClass = clsx();
|
|
|
return (
|
|
|
<>
|
|
|
<div
|
|
|
className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[100px] flex-col items-center justify-center`}
|
|
|
>
|
|
|
+ {/*轮盘*/}
|
|
|
+ <Link
|
|
|
+ href={"/cashWheel"}
|
|
|
+ className={
|
|
|
+ "mb-[0.0694rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
+ " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
|
|
|
+ </Link>
|
|
|
+ {visibleWheel === 2 ? (
|
|
|
+ <Link
|
|
|
+ href={"/cashWheel"}
|
|
|
+ className={
|
|
|
+ "mb-[0.0694rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
+ " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
|
|
|
+ </Link>
|
|
|
+ ) : null}
|
|
|
{/*首充*/}
|
|
|
+ <div className={`mb-[0.0694rem] flex cursor-pointer flex-col items-center`}>
|
|
|
+ <img
|
|
|
+ className={"w-[0.54rem]"}
|
|
|
+ src="/hby/recharge.png"
|
|
|
+ onClick={() => {
|
|
|
+ // @ts-ignore
|
|
|
+ userRechargeRef.current?.onOpen(paysInfo.first_pay, index);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Timeout
|
|
|
+ className={
|
|
|
+ "backdrop-filter-[blur(10px)] bg-[rgba(239,157,0,0.6)] text-[0.08rem]" +
|
|
|
+ " text-[#fff]"
|
|
|
+ }
|
|
|
+ endTime={26000000}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
{paysInfo?.first_pay?.map((item, index) => {
|
|
|
return (
|
|
|
<div
|
|
@@ -110,6 +165,7 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
className={`mb-[0.0694rem] flex cursor-pointer flex-col items-center`}
|
|
|
>
|
|
|
<img
|
|
|
+ style={{ color: "#ef9d00" }}
|
|
|
className={"w-[0.4889rem]"}
|
|
|
src="/hby/recharge.png"
|
|
|
onClick={() => {
|
|
@@ -133,7 +189,7 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
return (
|
|
|
<div key={index} className={`mb-[0.0694rem] cursor-pointer`}>
|
|
|
<img
|
|
|
- className={"h-[0.3889rem] w-[0.3889rem]"}
|
|
|
+ className={"w-[0.54rem] object-fill"}
|
|
|
src="/hby/red-icon.gif"
|
|
|
onClick={() => {
|
|
|
redPacketModalRef.current?.onOpen(packets, index);
|
|
@@ -148,7 +204,8 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
href={"/notification"}
|
|
|
className={
|
|
|
"mb-[0.0694rem] flex h-[0.54rem] w-[0.54rem] items-center" +
|
|
|
- " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
|
|
|
+ " justify-center rounded-[50%] bg-gradient-to-t from-[#ffa111]" +
|
|
|
+ " to-[#ffcf35]"
|
|
|
}
|
|
|
>
|
|
|
<Badge content={!!unread ? unread : null} style={{ "--top": "12px" }}>
|
|
@@ -164,7 +221,7 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
href={defaultService.url}
|
|
|
className={
|
|
|
"flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
|
|
|
- " bg-gradient-to-b from-[#ff6a01] to-primary-color"
|
|
|
+ " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
|
|
|
}
|
|
|
target={"_blank"}
|
|
|
>
|
|
@@ -176,10 +233,15 @@ const ServiceWidget: FC<Props> = (props) => {
|
|
|
)}
|
|
|
</div>
|
|
|
|
|
|
+ {/*红包雨弹窗*/}
|
|
|
<RedPacketModal ref={redPacketModalRef} onAfterHandler={run} />
|
|
|
|
|
|
+ {/*首充弹窗*/}
|
|
|
<UserRecharge ref={userRechargeRef} />
|
|
|
|
|
|
+ {/* 轮盘弹窗 */}
|
|
|
+ <WheelModal ref={wheelModalRef} />
|
|
|
+
|
|
|
<div
|
|
|
className={`grid`}
|
|
|
style={{
|