feat:签到活动页面UI

.env.local

@@ -1,13 +1,24 @@
+# 环境
 #baseurl
-NEXT_PUBLIC_BASE_URL=https://hk-api.tiktokjakjkl.icu
+# NEXT_PUBLIC_BASE_URL=http://192.168.0.71:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
+# NEXT_PUBLIC_BASE_URL=https://3rd-api.tiktokjakjkl.icu
 #share link
-NEXT_PUBLIC_SHARE_URL=https://hk-site.tiktokjakjkl.icu
+NEXT_PUBLIC_SHARE_URL=http://192.168.0.84:3000
+
 #firebase
-NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyCIE8xtySsYztsSgmQJx_aqPrrpHEuvgvw
-NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin777-1bdda.firebaseapp.com
-NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin777-1bdda
-NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin777-1bdda.firebasestorage.app
-NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=542456379513
-NEXT_PUBLIC_FIREBASE_APPID=1:542456379513:web:851a46fc639085170bfca8
-NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-GV6Y8DXHHD
-NEXT_PUBLIC_FIREBASE_KEYS=BOCfpA08vK6uxhMdRblnx9gPVBLx9WpTn9AutVNhHQQpVtXzDIKW0X6cmsNRaFDhyFDJfMqWjqC7mq6uDFIKU_M
+NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyDAWORGKhdyzb5KeqTi535VmD5gN2Cdle8
+NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin-a99b1.firebaseapp.com
+
+
+
+
+NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin-a99b1
+NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin-a99b1.appspot.com
+NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=1055413612814
+NEXT_PUBLIC_FIREBASE_APPID=1:1055413612814:web:7a563237de8e43849d275f
+
+
+
+NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-467M2BYJMS
+NEXT_PUBLIC_FIREBASE_KEYS=BAOsT7kii-ctLzGrgXe_wYhfuxlme1v4njnD0uPSKp3DpSnrUa2e709b9dRaeYVU7jF_qIx1y9tEv0CvilDCdnM

src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -18,6 +18,7 @@ import { Badge } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { FC, useEffect, useRef } from "react";
+import SignInModal, { SignInModalProps } from "@/components/ModalPopup/SignInModal";
 
 interface Props {
     services: ServiceTypes[];
@@ -186,7 +187,7 @@ const RedPacketSection = () => {
             return actList.filter((aItem: any) => {
                 return aItem.is_start;
             });
-        } catch (error) {}
+        } catch (error) { }
     };
     // 红包雨轮询
     const { data: packets, run } = useRequest<any[], any>(getRedPacketInfo, {
@@ -270,6 +271,23 @@ const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
         </>
     );
 };
+
+/**
+ * 签到活动
+ */
+const SignInSection: FC = () => {
+    const SignInRef = useRef<SignInModalProps>(null)
+
+    const signInHandle = () => {
+        SignInRef.current?.onOpen()
+    }
+    return (
+        <>
+            <div style={{ width: 100, height: 100, backgroundColor: 'red' }} onClick={signInHandle}></div>
+            <SignInModal ref={SignInRef}></SignInModal>
+        </>
+    )
+}
 const ServiceWidget: FC<Props> = (props) => {
     const { services } = props;
 
@@ -308,6 +326,8 @@ const ServiceWidget: FC<Props> = (props) => {
                 <MessageSection />
                 {/*客服*/}
                 <CustomerSection services={services} />
+                {/* 签到 */}
+                <SignInSection />
             </div>
 
             <div

src/app/[locale]/(navbar)/signIn/layout.tsx

@@ -0,0 +1,18 @@
+import HeaderBack from "@/components/HeaderBack";
+
+export default function Layout({
+    children,
+    params: { locale },
+}: {
+    children: React.ReactNode,
+    params: { locale: string },
+}) {
+    return (
+        <>
+            <HeaderBack showBack={true} className={"bg-[#0d1933] text-[white]"} title={"Sign in and get the gift"} />
+            <main className={"main-header bg-[#1f2225] text-[#000]"}>
+                {children}
+            </main>
+        </>
+    )
+}

src/app/[locale]/(navbar)/signIn/page.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @next/next/no-img-element */
+import { BoxListCom, PayBoxList } from "@/components/ModalPopup/SignInModal"
+import { useTranslations } from "next-intl"
+import { FC } from "react"
+
+const SignIn: FC = () => {
+    const t = useTranslations("signInPage")
+    return (
+        <>
+            <div className="relative w-[100%] h-[100%]">
+                {/* 主题图片及背景 */}
+                <div className="relative h-[3.1863rem]">
+                    <img
+                        src="/signDetails/themeBg.png"
+                        alt=""
+                        className="absolute h-[100%] w-[100%]"
+                    />
+                    <div className="relative z-50 top-[-0.3363rem] h-[3.0591rem] flex justify-center">
+                        <img
+                            src="/signDetails/theme.png"
+                            alt=""
+                            className="h-[100%]"
+                        />
+                    </div>
+                    <div className="absolute z-50 h-[.3636rem] w-[100%] bottom-[0.2136rem]">
+                        <img
+                            src="/signDetails/vip_bg.png"
+                            alt=""
+                            className="h-[100%] w-[100%]"
+                        />
+                        <div className="absolute h-[100%] w-[100%] top-0 px-[0.25rem] text-[white]">
+                            <img
+                                src="/signDetails/vip.png"
+                                alt=""
+                                className="absolute h-[80%] top-[10%]"
+                            />
+                            <div className="relative h-[100%] left-[10%]">
+                                <p className="h-[50%] text-[0.12rem] font-bold leading-[0.2rem]">VIP0</p>
+                                <p className="h-[50%] text-[0.1rem] font-bold leading-[0.12rem]">quanto maior o nível VlP, mais abundantes s?o as recompensas</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/* 活动背景 */}
+                <div className="absolute top-[2.9727rem] w-[100%]">
+                    {/* 右上角文本 */}
+                    <div className="absolute w-[20%] h-[0.32rem] right-[0.1rem] top-0 z-50 text-center text-[0.11rem] font-bold text-[white]">
+                        <p className={"h-[0.16rem]"}>CountDown</p>
+                        <p className={"text-[yellow] h-[0.16rem]"}>Day 20</p>
+                    </div>
+                    <img
+                        src="/signDetails/bg3.png"
+                        alt=""
+                        className="absolute h-[100%] w-[100%] z-1"
+                    />
+                    {/* 免费盒子 */}
+                    <div className="mt-[0.4227rem]">
+                        <BoxListCom num={27} type="page" />
+                    </div>
+                    {/* 充值盒子 */}
+                    {/* <div className="h-[1.3273rem]">
+                        <PayBoxList type="page" />
+                    </div> */}
+                    {/* 签到按钮 */}
+                    <div className={"relative h-[.6045rem] flex justify-center mt-[0.25rem]"}>
+                        <img
+                            src="/sign/button.png"
+                            className={"h-[100%]"}
+                            alt=""
+                        />
+                        <span className="absolute leading-[0.375rem] text-[0.16rem] font-bold text-[white]">Sign-in</span>
+                    </div>
+                    {/* 活动描述文本背景 */}
+                    <div className="relative flex justify-center h-[4.4rem]">
+                        <div className="relative h-[100%]">
+                            <img
+                                src="/signDetails/bg2.png"
+                                className={"h-[100%]"}
+                                alt=""
+                            />
+                            <div className="absolute h-[100%] top-0 w-[100%]">
+                                {/* title标题 */}
+                                <div className="h-[0.425rem] text-center text-[white] font-bold leading-[0.425rem] text-[.18rem]">
+                                    <p>Activity dedscription</p>
+                                </div>
+                                {/* 描述内容 */}
+                                <div className="w-[100%] h-[3.3455rem] py-[0.2091rem] px-[0.15rem]">
+                                    <ul className={"list-decimal break-word  pt-0 text-[white] text-[.14rem] pl-[.2455rem] pr-[.1rem] leading-[.23rem]"}>
+                                        <li>{t("desc1")}</li>
+                                        <li>{t("desc2")}</li>
+                                        <li>{t("desc3")}</li>
+                                        <li>{t("desc4")}</li>
+                                        <li>{t("desc5")}</li>
+                                        <li>{t("desc6")}</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+export default SignIn

src/components/ModalPopup/SignInModal/index.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable @next/next/no-img-element */
+'use client'
+import { FC, forwardRef, memo, useImperativeHandle, useRef, useState } from "react"
+import { Mask } from "antd-mobile"
+import { useRouter } from "@/i18n/routing";
+import styles from './style.module.scss'
+
+export interface SignInModalProps {
+    onClose: () => void;
+    onOpen: () => void
+}
+interface BoxParams {
+    startDays?: number;
+    num: number;
+    type?: 'page' | 'modal';
+}
+interface BoxList {
+    handleOpening: (index: number) => void
+}
+export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom({ startDays = 1, num, type = 'modal' }: BoxParams, ref) {
+    const handleOpening = (index: number) => {
+        const box: any = document.getElementById(`box${index}`)
+        box.src = '/sign/box/box-open.png'
+        const img = document.getElementById(`opened${index}`)
+        img ? img.style.visibility = 'visible' : null
+    }
+    useImperativeHandle(ref, (): BoxList => {
+        return {
+            handleOpening
+        }
+    })
+    return (
+        <>
+            <div className={`w-[100%] ${type === 'page' ? styles.page : styles.modal}`}>
+                <div className="flex flex-wrap w-[100%] h-[100%] justify-start">
+                    {Array.from({ length: num }).map((item, index) => {
+                        return (
+                            <div className="h-[100%] w-[20%]" key={index}>
+                                <div className="h-[100%] w-[100%]">
+                                    <div className={`relative text-center ${styles.text} text-[white]`}>
+                                        <p>Day{startDays + index}</p>
+                                    </div>
+                                    <div className={`relative ${styles.box} w-[100%]`} onClick={(e) => handleOpening(startDays + index)}>
+                                        <img
+                                            id={'box' + (startDays + index)}
+                                            src={index >= 5 ? '/sign/box_pay/gift.png' : '/sign/box/box.png'}
+                                            className={"h-[100%] z-50 mx-[auto]"}
+                                            alt=""
+                                        />
+                                        <div className="flex justify-center">
+                                            <img
+                                                id={'opened' + (startDays + index)}
+                                                src="/sign/opened.png"
+                                                className={"absolute h-[0.34rem] z-50 bottom-[0.035rem] invisible"}
+                                                alt=""
+                                            />
+                                        </div>
+                                        {
+                                            index >= 5 ? <div className="h-[30%] absolute w-[90%] bottom-0 bg-[black] rounded mx-auto left-0 right-0 border-[0.02rem] border-[green]">
+                                                <p className={`${styles.green} text-[green] font-bold  text-center`}>Extra +50R</p>
+                                            </div> : null
+                                        }
+                                    </div>
+                                    {
+                                        index >= 5 ? <div className={`${styles.lock} relative text-center text-[yellow] font-bold flex justify-center mt-[0.05rem]`}>
+                                            <img
+                                                id={'opened' + (startDays + index)}
+                                                src="/sign/lock.png"
+                                                className={"h-[100%] block"}
+                                                alt=""
+                                            />
+                                            <span className="block">+5R</span>
+                                        </div> : null
+                                    }
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    )
+})
+
+interface PayProps {
+    type?: 'page' | 'modal'
+}
+export const PayBoxList: FC<PayProps> = ({ type = 'modal' }) => {
+    return (
+        <>
+            <div className="flex justify-center">
+                {Array.from({ length: 4 }).map((item, index) => {
+                    return (
+                        <>
+                            <div className={`relative h-[100%] ${type === 'page' ? styles.payPage : styles.payModal}`}>
+                                <div className="relative h-[0.89rem] flex justify-center font-bold">
+                                    <span className="absolute z-50 top-[0.005rem] text-[white] leading-[]">5R</span>
+                                    <img
+                                        src="/sign/box_pay/bg.png"
+                                        className={"h-[100%]  z-10"}
+                                        alt=""
+                                    />
+                                    <img
+                                        src="/sign/box_pay/bg2.png"
+                                        className={"absolute h-[0.355rem]  z-30 bottom-0"}
+                                        alt=""
+                                    />
+                                    <img
+                                        src="/sign/box_pay/gift.png"
+                                        className={"absolute h-[0.505rem]  z-20 top-[0.18rem]"}
+                                        alt=""
+                                    />
+                                    <img
+                                        id={'lock' + index}
+                                        src="/sign/box_pay/lock.png"
+                                        className={"absolute h-[0.315rem]  z-40 bottom-[0.17rem]"}
+                                        alt=""
+                                    />
+                                    <img
+                                        id={'opened' + index}
+                                        src="/sign/opened.png"
+                                        className={"absolute h-[0.34rem] z-40 bottom-[0.3rem]"}
+                                        alt=""
+                                    />
+                                    <span className="absolute z-50 bottom-[0.005rem] text-[white]">50R</span>
+                                </div>
+                                <div className={`${styles.text} text-center font-bold text-[white]`}>
+                                    <span>Day{index === 3 ? 10 + index * 5 + 5 : 10 + index * 5}</span>
+                                </div>
+                            </div>
+                        </>
+                    )
+                })}
+            </div>
+        </>
+    )
+}
+
+const SignInModal = forwardRef(function SignInModal(props, ref) {
+    const [visible, setVisible] = useState(false)
+
+    const router = useRouter()
+
+    const boxRef = useRef(null)
+
+    useImperativeHandle(ref, () => {
+        return {
+            onClose: () => setVisible(false),
+            onOpen: () => setVisible(true)
+        };
+    })
+    return (
+        <>
+            <Mask visible={visible} destroyOnClose={true} onMaskClick={() => setVisible(false)}>
+                <div
+                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
+                    onClick={() => setVisible(false)}
+                >
+                    <span className={"iconfont icon-guanbi"}></span>
+                </div>
+                <div className="absolute top-[5%] w-[100%]">
+                    <div className={"relative w-[100%] h-[6.25rem]"}>
+                        <div className={'h-[100%]'}>
+                            <div className="absolute h-[100%] w-[100%] overflow-hidden flex justify-center">
+                                <img
+                                    src="/sign/light2.png"
+                                    className={"absolute h-[7.5rem] max-w-[none] top-[-1.215rem]"}
+                                    alt=""
+                                />
+                                <img
+                                    src="/sign/light.png"
+                                    className={"absolute h-[5.07rem] max-w-[none]"}
+                                    alt=""
+                                />
+                            </div>
+                            {/* 主题背景图 */}
+                            <div className="relative flex justify-center h-[3rem] w-[100%]">
+                                <img
+                                    src="/sign/theme.png"
+                                    className={"absolute h-[100%]"}
+                                    alt=""
+                                />
+                            </div>
+                            <div className="absolute h-[3.95rem] top-[30%] w-[100%]">
+                                <div className="flex justify-center h-[100%]">
+                                    {/* 宽度自动填充适应活动背景图宽度 */}
+                                    <div className="relative h-[100%]">
+                                        <img
+                                            src="/sign/bg2.png"
+                                            className={"h-[100%]"}
+                                            alt=""
+                                        />
+                                        {/* 右上角倒计时 */}
+                                        <div className="absolute w-[20%] h-[0.3rem] right-[0.15rem] top-0 z-50 text-center text-[0.1rem] font-bold text-[white]">
+                                            <p className={"h-[0.15rem]"}>CountDown</p>
+                                            <p className={"text-[yellow] h-[0.15rem]"}>Day 20</p>
+                                        </div>
+                                        {/* 签到body */}
+                                        <div className="absolute top-0 left-0 w-[100%]">
+                                            <div className="relative w-[100%] mt-[0.51rem]">
+                                                <BoxListCom num={15} ref={boxRef} />
+                                                <div className="flex justify-center h-[0.62rem] mt-[0.25rem]" onClick={() => { router.push('/signIn') }}>
+                                                    <img
+                                                        src="/sign/button_signed.png"
+                                                        className={"h-[100%]"}
+                                                        alt=""
+                                                    />
+                                                    <span className="absolute leading-[0.375rem] text-[0.16rem] font-bold">Sign-in</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Mask>
+        </>
+    )
+})
+
+export default memo(SignInModal)

src/components/ModalPopup/SignInModal/style.module.scss

@@ -0,0 +1,39 @@
+.modal {
+    // height: 0.79rem;
+    .box {
+        height: 0.485rem;
+    }
+    .text {
+        margin-top: 0.07rem;
+        height: 0.15rem;
+        font-size: 0.1rem;
+    }
+    .lock{
+        height:0.14rem;
+        line-height: 0.14rem;
+        font-size: 0.12rem;
+    }
+    .green{
+        font-size: 0.08rem;
+    }
+}
+
+.page {
+    // height: 0.92rem;
+    .box {
+        height: 0.6rem;
+    }
+    .text {
+        margin-top: 0.13rem;
+        height: 0.19rem;
+        font-size: 0.11rem;
+    }
+    .lock{
+        height:0.18rem;
+        line-height: 0.18rem;
+        font-size: 0.16rem;
+    }
+    .green{
+        font-size: 0.1rem;
+    }
+}