game-web_cs/src/widgets/WInstallBox/WDownloadPrompt/index.jsx

import {useEffect, useState} from "react";
import styles from "./styles.module.scss";
import top_icon from "@assets/downloadPrompt/top_icon.webp"
import icon_1 from "@assets/downloadPrompt/icon_1.webp";
import icon_2 from "@assets/downloadPrompt/icon_2.webp";
import icon_3 from "@assets/downloadPrompt/icon_3.webp";
import Popup from "@components/Popup";
import LazyImage from "@components/LazyImage";
import {useSelector} from "react-redux";
import {getDownloadConf} from "@features/mainSlice";
import {formatCash, stringFormat, isIOS} from "@utils/helpers";
const i18n = global.i18n;

const WDownloadPrompt = ()=>{
    const [isShow, setIsShow] = useState(false);
    const downConf=useSelector(getDownloadConf)
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const onClose=()=>{
        hide();
        global.openNextPopup();
    }
    const getDownBonus=()=>{
        let bonus=Number(downConf?.bonus);
        return global.DOLLAR+formatCash(bonus,0);
    }
    const handleClickDownload=()=>{
        hide();
        global["showShortcutGuide"] && global["showShortcutGuide"]();
    }
    useEffect(()=>{
        global.downloadPrompt={
            show,
            hide
        };
        return ()=>{

        }
    },[]);
    const renderIosContent = () => {
        return (
            <Popup onClose={onClose} open={isShow} btnCloseType={0} popupClass={styles.popup}>
                <div className={styles.container}>
                    <LazyImage src={top_icon} alt={""} className={styles.icon}></LazyImage>
                    <div className={styles.title}>{stringFormat(i18n.t("downloadPrompt.title"),[getDownBonus()])}</div>
                    <div className={styles.sub_title}>{i18n.t("downloadPrompt.subtitle")}</div>
                    <div className={styles.items_con}>
                        <div className={styles.item}>
                            <img src={icon_1} alt={""} className={styles.item_icon}/>
                            <div className={styles.item_text}>
                                {i18n.t("downloadPrompt.tips_1")}
                                <span>{i18n.t("downloadPrompt.tips_2")}</span>
                            </div>
                        </div>
                        <div className={styles.item}>
                            <img src={icon_2} alt={""} className={styles.item_icon}/>
                            <div className={styles.item_text}>
                                {i18n.t("downloadPrompt.tips_3")}
                                <span>{getDownBonus()}</span>
                            </div>
                        </div>
                        <div className={styles.item}>
                            <img src={icon_3} alt={""} className={styles.item_icon}/>
                            <div className={styles.item_text} style={{fontSize:"0.95rem"}}>
                                {i18n.t("downloadPrompt.tips_4")}
                            </div>
                        </div>
                    </div>
                    <button className={styles.btn_down} onClick={handleClickDownload}>
                        {i18n.t("downloadPrompt.btn_down")}
                    </button>
                </div>
            </Popup>
        )
    }
    const renderAndroidContent = () => {
        return (
            <Popup onClose={onClose} open={isShow} btnCloseType={0} popupClass={styles.popup_ad}>
                <div className={styles.container_ad}>
                    {/* 1. 顶部红色/粉色标题区域 */}
                    <div className={styles.header_section}>
                        <div className={styles.title_ad}>
                            {/* 假设 i18n 这里的配置能支持拆分，或者手动拆开 */}
                            <div className={styles.title_top}>{stringFormat(i18n.t("downloadPrompt.title"),[getDownBonus()])}</div>
                            <div className={styles.title_bottom}>{i18n.t("downloadPrompt.subtitle_ad")}</div>
                        </div>
                        
                        {/* 右上角黄色下载盒图标 */}
                        <div className={styles.icon_box}>
                            <div className={styles.arrow_down}></div>
                        </div>
                    </div>

                    {/* 2. 中间黑色内容区域 */}
                    <div className={styles.content_section}>
                        {/* "Tap Download To Get" */}
                        <div className={styles.item_text_main}>
                            {i18n.t("downloadPrompt.tips_1_ad")}
                        </div>

                        {/* 可变金额 "$5" */}
                        <div className={styles.bonus_value}>
                            {getDownBonus()}
                        </div>

                        {/* "Start Games Faster" */}
                        <div className={styles.item_text_sub}>
                            {i18n.t("downloadPrompt.tips_2_ad")}
                        </div>

                        {/* "Save your account..." (橙色提示) */}
                        <div className={styles.hint_text}>
                            {i18n.t("downloadPrompt.tips_3_ad")}
                        </div>

                        {/* 下载按钮 */}
                        <button className={styles.btn_down} onClick={handleClickDownload}>
                            {i18n.t("downloadPrompt.btn_down")}
                        </button>
                    </div>
                </div>
            </Popup>
        )
    }
    return (
        <>
        {
            isIOS() ? renderIosContent() : renderAndroidContent()
        }
        </>
    )
}
export default WDownloadPrompt;