feat: 周返现

src/dialog/auto.ts

@@ -100,7 +100,9 @@ const AutoShowDialog = () => {
                 continue;
             }
 
-            // await dialogManage.showDialog("ReceiveGift", curData);
+            // await dialogManage.showDialog("ReceiveGift", curData); //周返现
+            // await dialogManage.showDialog('WheelSection', curData);  //轮盘
+            // await dialogManage.showDialog('SignInSection', curData);  //签到
 
             try {
                 switch (curData.content_type) {

src/dialog/receive/index.module.scss

@@ -0,0 +1,117 @@
+.container {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 50%;
+    height: 4rem;
+    z-index: 2;
+    .top {
+        height: 0.28rem;
+        position: relative;
+    }
+    .title {
+        position: absolute;
+        left: 50%;
+        bottom: -0.3rem;
+        transform: translateX(-50%);
+    }
+    .close {
+        position: absolute;
+        right: 0.2rem;
+        bottom: 0.4rem;
+        z-index: 2;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        width: 0.24rem;
+        height: 0.24rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i {
+            font-size: 0.12rem;
+        }
+    }
+    .topImg {
+        width: 100%;
+    }
+    .bottomImg {
+        width: 98%;
+        margin: 0 auto;
+    }
+    .content {
+        height: 0;
+        overflow: hidden;
+        transition:
+            height 0.5s ease-in-out,
+            padding 0.5s ease-in-out;
+        background-color: #f4e3ea;
+        border-left: 10px solid #e49ece;
+        border-right: 10px solid #e49ece;
+        position: relative;
+        margin: 0 0.3rem;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 0.12rem;
+        &::before {
+            content: "";
+            position: absolute;
+            left: 5px;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background-color: #e7acd3;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            right: 5px;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background-color: #e7acd3;
+        }
+        &.active {
+            height: 2.5rem;
+            padding: 0.2rem 0.12rem;
+        }
+    }
+    .text {
+        color: #9f56cb;
+        font-size: 0.15rem;
+    }
+    .textTitle {
+        margin-bottom: 0.06rem;
+    }
+    .btn {
+        width: 1.8rem;
+        height: 0.5rem;
+        background-image: url("/windialog/btn.png");
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #da0a01;
+        font-size: 0.18rem;
+        font-weight: 700;
+    }
+    .bottom {
+        position: relative;
+    }
+    .coin1 {
+        position: absolute;
+        right: 0.06rem;
+        bottom: 0.1rem;
+        width: 0.4rem;
+    }
+    .coin2 {
+        position: absolute;
+        left: 0.1rem;
+        bottom: 0.4rem;
+        width: 0.15rem;
+    }
+}

src/dialog/receive/index.tsx

@@ -1,24 +1,71 @@
 "use client";
+import { useRouter } from "@/i18n/routing";
 import { Mask } from "antd-mobile";
+import clsx from "clsx";
 import React from "react";
 import dialogManage from "../manager";
+import styles from "./index.module.scss";
 
 const ReceiveGift = () => {
     const KeyName = "ReceiveGift";
+    const router = useRouter();
     const [visible, setVisible] = React.useState(false);
+    const [isActive, setIsActive] = React.useState(false);
+    const [data, setData] = React.useState<any>({});
 
     React.useEffect(() => {
         dialogManage.registerDialog({
             key: KeyName,
-            show() {
+            show(data) {
+                setData(data);
                 setVisible(true);
+                setTimeout(() => {
+                    setIsActive(true);
+                }, 100);
             },
         });
     }, []);
+    const closeClick = () => {
+        setIsActive(false);
+        //关闭等待动画播放完毕
+        setTimeout(() => {
+            dialogManage.hideDialog(KeyName);
+            setVisible(false);
+        }, 600);
+    };
+    const goCashback = () => {
+        router.push("/cashback");
+    };
 
     return (
-        <Mask visible={visible}>
-            <div>2323</div>
+        <Mask visible={visible} onMaskClick={closeClick}>
+            <div className={styles.container}>
+                <div className={styles.top}>
+                    <img src="/windialog/top.png" alt="" className={styles.topImg} />
+                    <img src="/windialog/title.png" alt="" className={styles.title} />
+                    <div className={styles.close} onClick={closeClick}>
+                        <i className={clsx("iconfont icon-guanbi")}></i>
+                    </div>
+                </div>
+                <div className={clsx(styles.content, { [styles.active]: isActive })}>
+                    <div className={styles.text}>
+                        <div className={styles.textTitle}>Caros jogadores,</div>
+                        <div>
+                            no momento vocês têm recompensas de cashback semanais (
+                            {data?.content?.value || 0}) que não foram reivindicadas. Por favor,
+                            verifiquem-nas com antecedência.
+                        </div>
+                    </div>
+                    <div className={styles.btn} onClick={goCashback}>
+                        VÁ AGORA
+                    </div>
+                </div>
+                <div className={styles.bottom}>
+                    <img src="/windialog/bottom.png" alt="" className={styles.bottomImg} />
+                    <img src="/windialog/br.png" alt="" className={styles.coin1} />
+                    <img src="/windialog/br.png" alt="" className={styles.coin2} />
+                </div>
+            </div>
         </Mask>
     );
 };