306 lines
14 KiB
TypeScript
306 lines
14 KiB
TypeScript
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>
|
||
</>
|
||
)
|
||
} |