123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- /* eslint-disable @next/next/no-img-element */
- "use client";
- import { useRouter } from "@/i18n/routing";
- import { useSignStore } from "@/stores/useSignStore";
- import { Mask } from "antd-mobile";
- import { FC, forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
- import styles from "./style.module.scss";
- export interface SignInModalProps {
- onClose: () => void;
- onOpen: () => void;
- }
- interface BoxParams {
- startDays?: number;
- type?: "page" | "modal";
- }
- interface BoxList {
- handleOpening: (index: number) => void;
- }
- export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
- { startDays = 1, type = "modal" }: BoxParams,
- ref
- ) {
- const signData = useSignStore((state) => state.signData);
- 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 h-[100%] w-[100%] flex-wrap justify-start">
- {signData?.list?.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{item.id}</p>
- </div>
- <div className={`relative ${styles.box} w-[100%]`}>
- {/*onClick={(e) => handleOpening(startDays + index)}*/}
- <img
- id={"box" + (startDays + index)}
- src={
- item.is_suss
- ? "/sign/box/box-open.png"
- : item.extra_num
- ? "/sign/box_pay/gift.png"
- : "/sign/box/box.png"
- }
- className={"z-50 mx-[auto] h-[100%]"}
- alt=""
- />
- <div className="flex justify-center">
- {item.is_suss ? (
- <img
- id={"opened" + (startDays + index)}
- src={"/sign/opened.png"}
- className={
- "absolute bottom-[0.035rem] z-50 h-[0.34rem]"
- }
- alt=""
- />
- ) : null}
- </div>
- {item.extra_num ? (
- <div className="absolute bottom-0 left-0 right-0 mx-auto h-[30%] w-[90%] rounded border-[0.02rem] border-[green] bg-[black]">
- <p
- className={`${styles.green} text-center font-bold text-[green]`}
- >
- Extra +{item.extra_num}
- </p>
- </div>
- ) : null}
- </div>
- {item.extra_num ? (
- <div
- className={`${styles.lock} relative mt-[0.05rem] flex justify-center text-center font-bold text-[yellow]`}
- >
- <img
- id={"opened" + item.id}
- src="/sign/lock.png"
- className={"block h-[100%]"}
- alt=""
- />
- <span className="block">+{item.num}</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 flex h-[0.89rem] justify-center font-bold">
- <span className="absolute top-[0.005rem] z-50 leading-[] text-[white]">
- 5R
- </span>
- <img
- src="/sign/box_pay/bg.png"
- className={"z-10 h-[100%]"}
- alt=""
- />
- <img
- src="/sign/box_pay/bg2.png"
- className={"absolute bottom-0 z-30 h-[0.355rem]"}
- alt=""
- />
- <img
- src="/sign/box_pay/gift.png"
- className={"absolute top-[0.18rem] z-20 h-[0.505rem]"}
- alt=""
- />
- <img
- id={"lock" + index}
- src="/sign/box_pay/lock.png"
- className={"absolute bottom-[0.17rem] z-40 h-[0.315rem]"}
- alt=""
- />
- <img
- id={"opened" + index}
- src="/sign/opened.png"
- className={"absolute bottom-[0.3rem] z-40 h-[0.34rem]"}
- alt=""
- />
- <span className="absolute bottom-[0.005rem] z-50 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 signData = useSignStore((state) => state.signData);
- const activity_id = useSignStore((state) => state.activity_id);
- const totalData = signData.list;
- const isSignNum = totalData?.reduce((pre, cur) => (cur.is_suss ? pre + 1 : pre), 0);
- 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 h-[6.25rem] w-[100%]"}>
- <div className={"h-[100%]"}>
- <div className="absolute flex h-[100%] w-[100%] justify-center overflow-hidden">
- <img
- src="/sign/light2.png"
- className={"absolute top-[-1.215rem] h-[7.5rem] max-w-[none]"}
- alt=""
- />
- <img
- src="/sign/light.png"
- className={"absolute h-[5.07rem] max-w-[none]"}
- alt=""
- />
- </div>
- {/* 主题背景图 */}
- <div className="relative flex h-[3rem] w-[100%] justify-center">
- <img src="/sign/theme.png" className={"absolute h-[100%]"} alt="" />
- </div>
- <div className="absolute top-[30%] h-[3.95rem] w-[100%]">
- <div className="flex h-[100%] justify-center">
- {/* 宽度自动填充适应活动背景图宽度 */}
- <div className="relative h-[100%]">
- <img
- src={
- signData.background_type === 1
- ? "/sign/bg2.png"
- : signData.Background
- }
- className={"h-[100%]"}
- alt=""
- />
- {/* 右上角倒计时 */}
- <div className="absolute right-[0.15rem] top-0 z-50 flex h-[0.3rem] w-[20%] items-center justify-center space-x-[2px] text-center text-[0.125rem] font-bold text-[white]">
- {/*<p
- className={"h-[0.15rem]"}>{totalData?.length}</p>*/}
- {/*<p className={"h-[0.15rem] text-[yellow]"}>Day 20</p>*/}
- <p className={"text-[yellow]"}>{isSignNum}</p>
- <span>/</span>
- <p>{totalData?.length}</p>
- </div>
- {/* 签到body */}
- <div className="absolute left-0 top-0 w-[100%]">
- <div className="relative mt-[0.51rem] w-[100%]">
- <BoxListCom ref={boxRef} />
- <div
- className="mt-[0.25rem] flex h-[0.62rem] justify-center"
- onClick={() => {
- router.push(
- `/signin?activity_id=${activity_id}`
- );
- }}
- >
- <img
- src={
- signData?.is_op
- ? "/sign/button.png"
- : "/sign/button_signed.png"
- }
- className={"h-[100%]"}
- alt=""
- />
- <span className="absolute text-[0.16rem] font-bold leading-[0.375rem]">
- Sign-in
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </Mask>
- </>
- );
- });
- export default memo(SignInModal);
|