system-copyright-react/src/route/proj/ProjCreate.tsx

import './proj-create.css'
import { useNavigate } from "react-router-dom";
import { message } from "antd";
import {
    CloseOutlined
} from '@ant-design/icons';
import CardProjType from "../../components/card/CardProjType.tsx";
import {
    // IProjCharge,
    ProjAdditionalType, ProjChargeType
} from "../../interfaces/proj/IProj.ts";
import { useEffect, useState } from "react";
import { get } from "../../util/AjaxUtils.ts";
import ScrollAd from '../../components/scrollAD/ScrollAd.tsx'
// import { Link } from "react-router-dom";
import adimg from '../../static/ad.png'
export default function ProjCreate() {
    const [messageApi, contextHolder] = message.useMessage();
    // const [charge, setCharge] = useState<IProjCharge>({
    //     proj: {
    //         all: 0,
    //         materialAgent: 0,
    //         materialAgentUrgent: 0,
    //         material: 0,
    //         free: 0,
    //     },
    //     additional: {
    //         pkg: 0, 
    //         videoDemo: 0
    //     },
    //     projTypes:[
    //         {}
    //     ]
    // });
    const [charge, setCharge] = useState<any>({}) //安装包信息
    const [allInfo, setAllInfo] = useState<any>({}) //全部托管信息
    const [materialInfo, setMaterialInfo] = useState<any>({}) //写材料信息
    const [freeInfo, setFreeInfo] = useState<any>({}) //免费托管信息
    const [freeCount, setFreeCount] = useState(0) //免费次数
    const nav = useNavigate();
    const height = window.innerHeight - 170;
    const [show, setShow] = useState(true) //是否显示广告
    const [ad, setAd] = useState('')
    const getAd = () => {
        get<any>({
            messageApi: messageApi,
            url: '/api/env/custom/get-proj-create-notice',
            onSuccess({ data }) {
                console.log('广告', data);
                setAd(data.data)
                setShow(data.data == '' ? false : true)
            }
        })
        // sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }]));
        // sessionStorage.setItem('now', '创建');
        console.log(allInfo);
    }
    useEffect(() => {
        get<any>({
            messageApi: messageApi,
            url: '/api/proj/charge/get',
            onSuccess({ data }) {
                setCharge(data.additional);
                console.log("创建数据", data);
                // console.log(charge.projTypes[0].price);
                setAllInfo(data.projTypes[0])
                setMaterialInfo(data.projTypes[1])
                setFreeInfo(data.projTypes[2])
                // console.log('后面的price',data.proj.materialAgent);
                setFreeCount(data.freeCount)
            }
        })
        // sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }]));
        // sessionStorage.setItem('now', '创建');
        console.log(allInfo);
        getAd()
    }, [])

    return (
        < >
            {contextHolder}
            <div style={{}}>
                <div className="proj-create" style={{ height: `${height}px`, overflow: 'auto', position: 'relative' }}>
                    <div style={{
                        position: 'absolute', top: 0, left: 0, width: '100%', background: 'rgba(255,159,8,0.08)',
                        border: '1px solid #F5E5B4',
                        borderRadius: ' 10px',
                        display: show ? 'block' : 'none'
                    }}>

                        <div style={{ position: 'relative' }}>
                            <div className='adContent' style={{ display: 'flex', alignItems: 'center' }}>
                                <div style={{ marginLeft: 10, marginRight: 10 }}>
                                    <img src={adimg} alt="" width={27} height={32} />

                                </div>
                                <ScrollAd ad={ad}></ScrollAd>
                            </div>
                            <div style={{ width: 30, fontWeight: 700, cursor: 'pointer', position: 'absolute', top: 15, right: 5, fontSize: 18, color: '#FFAB31' }} onClick={() => {
                                setShow(false)
                            }}>
                                <CloseOutlined />
                            </div>

                        </div>
                    </div>
                    <CardProjType
                        head={'全托管'}
                        details={'从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。'}
                        bodyLineArray={[
                            {
                                title: '提供的服务：',
                                contents: [
                                    '包可运行软件开发与搭建',
                                    '包鉴别材料撰写',
                                    '包代办,包下证,包开发票',
                                    '提供可运行软件安装包',
                                    '提供可运行软件云服务900天',
                                    '提供可运行软件演示视频',
                                    '客服一对一服务'
                                ]
                            },

                        ]}
                        newArray={[
                            {
                                title: '使用流程：',
                                contents: [
                                    '填写系统名称',
                                    '填写基本信息',
                                    '接收证书'
                                ]
                            }
                        ]
                        }
                        chargeLineArray={[
                            {
                                id: ProjAdditionalType.URGENT,
                                price: charge.urgent,
                                title: `加急办理 ${charge.urgent / 100}  元`

                            },
                        ]}
                        buyArray={[
                            {
                                id: ProjChargeType.ALL,
                                price: allInfo.price,
                                handleClick: (_title, additional) => {
                                    nav(`/proj-new/${ProjChargeType.ALL}?${additional.urgent ? 'urgent=true' : 'pkg='}`)
                                }
                            }
                        ]}
                        isShow={allInfo.isShow}
                        isClickable={allInfo.isClickable}
                    />
                    {/* <CardProjType
                        head={'写材料+代理'}
                        bodyLineArray={[
                            {
                                title: '提供的服务：',
                                contents: [
                                    '提供系统搭建平台与客服指导',
                                    '系统可在线运行一年',
                                    '软著材料编写',
                                    '资料补正不限',
                                    '软著申报',
                                    '包下证'
                                ]
                            },
                            
                        ]}
                        newArray={[
                            {
                                title: '使用流程：',
                                contents: [
                                    '系统操作手册执行',
                                ]
                            }
                        ]
                        }
                        buyArray={[
                            {
                                id: ProjChargeType.MATERIAL_AGENT,
                                label: '普件：',
                                price: charge.proj.materialAgent,
                                handleClick: (_title, additional) => {
                                    nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)
                                }
                            },
                            {
                                id: ProjChargeType.MATERIAL_AGENT_URGENT,
                                label: '加急：',
                                price: charge.proj.materialAgentUrgent,
                                handleClick: (_title, additional) => {
                                    nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)
                                }
                            }
                        ]}
                        chargeLineArray={[
                            {
                                id: ProjAdditionalType.PKG,
                                price: charge.additional.pkg,
                                title: `安装包 ${charge.additional.pkg / 100} 元`
                            },
                            {
                                id: ProjAdditionalType.VIDEO_DEMO,
                                price: charge.additional.videoDemo,
                                title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`
                            }
                        ]}
                    /> */}
                    <CardProjType
                        head={'写材料'}
                        details={'通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。'}
                        bodyLineArray={[
                            {
                                title: '提供的服务：',
                                contents: [
                                    '通过平台自己搭建可运行软件',
                                    '平台自动撰写鉴别材料',
                                    '包补正材料撰写一直到下证',
                                    '两次补正不通过平台退款',
                                    '包开发票',
                                    '提供可运行软件云服务300天',
                                    '客服一对一服务'

                                ]
                            },
                        ]}
                        newArray={[
                            {
                                title: '使用流程：',
                                contents: [
                                    '按系统操作流程执行',

                                ]
                            }
                        ]
                        }
                        chargeLineArray={[
                            {
                                id: ProjAdditionalType.PKG,
                                price: charge.pkg,
                                title: `安装包 ${charge.pkg / 100} 元`

                            },
                            {
                                id: ProjAdditionalType.VIDEO_DEMO,
                                price: charge.videoDemo,
                                title: `系统演示视频文件 ${charge.videoDemo / 100} 元`

                            }
                        ]}
                        buyArray={[
                            {
                                id: ProjChargeType.MATERIAL,
                                price: materialInfo.price,
                                handleClick: (_title, additional) => {
                                    nav(`/proj-new/${ProjChargeType.MATERIAL}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`);
                                }
                            }
                        ]}
                        isShow={materialInfo.isShow}
                        isClickable={materialInfo.isClickable}
                    />
                    <CardProjType
                        head={`免费试用${freeCount}次`}
                        details={'每个账户的免费试用次数为3次。免费试用主要目的是让您了解如何使用平台，可全过程体验。'}
                        bodyLineArray={[
                            {
                                title: '提供的服务：',
                                contents: [
                                    '通过平台自己搭建可运行软件',
                                    '平台自动撰写鉴别材料',
                                    '提供可运行软件云服务10天',
                                    '客服一对一服务'
                                ]
                            },

                        ]}
                        newArray={[
                            {
                                title: '使用流程：',
                                contents: [
                                    '按系统操作流程执行',
                                ]
                            }
                        ]
                        }
                        buyArray={[
                            {
                                id: ProjChargeType.FREE,
                                price: freeInfo.price,
                                handleClick: (_title, additional) => {
                                    nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`)
                                }
                            }
                        ]}
                        isShow={freeInfo.isShow}
                        isClickable={freeInfo.isClickable}
                    />
                </div>
            </div>
        </>
    )
}