Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

创建页面bug处理

Browse Source
This commit is contained in:
xixi 2024-05-08 17:54:01 +08:00
parent d13279ffe5
commit 9d608724d2
22 changed files with 609 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/fonts/font-awesome/css/mixins.css vendored Normal file
View File

@ -0,0 +1 @@
/*# sourceMappingURL=./mixins.css.map */

126
src/components/card/CardProjType.tsx
View File

@ -3,8 +3,10 @@ import { ICardProj, ICardProjChargeLine } from "../../interfaces/proj/ICardProj.
import { Checkbox } from 'antd'; import { Checkbox } from 'antd';
import { useState } from "react"; import { useState } from "react";
import { ProjAdditionalType } from "../../interfaces/proj/IProj.ts"; import { ProjAdditionalType } from "../../interfaces/proj/IProj.ts";
import ProjCardHeadBg from '../../assets/proj-card-head-bg.png'; // import ProjCardHeadBg from '../../assets/proj-card-head-bg.png';
import serveImg from '../../static/serve.png'
import useImg from '../../static/use.png'
import leftImg from '../../static/createPro/left.png'
export default function CardProjType(props: ICardProj) { export default function CardProjType(props: ICardProj) {
const [chargeAmount, setChargeAmount] = useState(0); const [chargeAmount, setChargeAmount] = useState(0);
@ -17,12 +19,34 @@ export default function CardProjType(props: ICardProj) {
<span className="title">{item}</span> <span className="title">{item}</span>
</li>); </li>);
} }
const renderNewContents = (lineIndex: number, contents: string[]) => {
return contents.map((item, index) => <li key={`content_${lineIndex}_${index}`}>
<span className="newIndex">
<img src={leftImg} alt="" />
</span>
<span className="title">{item}</span>
</li>);
}
const renderLines = () => { const renderLines = () => {
return props.bodyLineArray.map((line, index) => { return props.bodyLineArray.map((line, index) => {
return ( return (
<div className="line" key={`line_${index}`}> <div className="line" key={`line_${index}`}>
<div className="line-title">{line.title}</div> {/* <div className="line-title">{line.title}</div> */}
<img src={serveImg} className='seruseImg' alt="" />
<div className="line-content">
<ul>{renderNewContents(index, line.contents)}</ul>
</div>
</div>
)
})
}
const renderNew = () => {
return props.newArray.map((line, index) => {
return (
<div className="line useline" key={`line_${index}`}>
{/* <div className="line-title">{line.title}</div> */}
<img src={useImg} className='seruseImg' alt="" />
<div className="line-content"> <div className="line-content">
<ul>{renderContents(index, line.contents)}</ul> <ul>{renderContents(index, line.contents)}</ul>
</div> </div>
@ -58,10 +82,12 @@ export default function CardProjType(props: ICardProj) {
<div className="proj-charge"> <div className="proj-charge">
{ {
props.chargeLineArray.map((line, index) => ( props.chargeLineArray.map((line, index) => (
<div className="line" key={`charge_${index}`}> <div className="chargeline" key={`charge_${index}`}>
<Checkbox onChange={(e) => { <Checkbox onChange={(e) => {
onChargeChange(e.target.checked, line); onChargeChange(e.target.checked, line);
}}>{line.title}</Checkbox> }}>
<span className='chargeCon'>{line.title}</span>
</Checkbox>
</div> </div>
)) ))
} }
@ -71,32 +97,90 @@ export default function CardProjType(props: ICardProj) {
} }
const renderBuyBtn = () => { const renderBuyBtn = () => {
return props.buyArray.map((buy, index) => {
return ( return props.buyArray.map((buy, index) => {
<div className="buy-btn" key={`buy_${index}`}> return (
<div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div> <div className="buy-btn" key={`buy_${index}`}>
<hr /> <div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
<div className="buy"> {/* <hr /> */}
<button onClick={() => { <div className="buy">
buy.handleClick(props.head, { <button onClick={() => {
pkg: pkg, buy.handleClick(props.head, {
videoDemo: videoDemo pkg: pkg,
}); videoDemo: videoDemo
}}>购买</button> });
}}>购买</button>
</div>
</div> </div>
</div> )
) })
})
} }
// const lprice = props.buyArray[0].price
// const llabel = props.buyArray[0].label
// return (
// <div className='two-buy-btn' >
// <div className='one-buy-btn'>
// <div className="twoprice">
// {llabel}{(lprice) / 100} 元
// </div>
// <div className="twobuy">
// <button onClick={() => {
// props.buyArray[0].handleClick(props.head, {
// pkg: pkg,
// videoDemo: videoDemo
// });
// }}>购买</button>
// </div>
// </div>
// <div className='one-buy-btn'>
// <div className="twoprice">
// {llabel}{(lprice) / 100} 元
// </div>
// <div className="twobuy">
// <button onClick={() => {
// props.buyArray[0].handleClick(props.head, {
// pkg: pkg,
// videoDemo: videoDemo
// });
// }}>购买</button>
// </div>
// </div>
// </div>
// )
// return (
// <div className="buy-btn" key={`buy_${index}`}>
// <div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
// {/* <hr /> */}
// <div className="buy">
// <button onClick={() => {
// buy.handleClick(props.head, {
// pkg: pkg,
// videoDemo: videoDemo
// });
// }}>购买</button>
// </div>
// </div>
// )
return ( return (
<div className="proj"> <div className="proj">
<div className='projTop'> <div className='projTop'>
<div className="proj-head" style={{ backgroundImage: `url(${ProjCardHeadBg})` }}> {/* <div className="proj-head" style={{ backgroundImage: `url(${ProjCardHeadBg})` }}> */}
<div className="proj-head">
<div>{props.head}</div> <div>{props.head}</div>
</div> </div>
<div className="proj-body"> <div className="proj-body">
<div>{renderLines()}</div> <div>{renderLines()}</div>
<div>{renderNew()}</div>
{renderCharge()} {renderCharge()}
</div> </div>
</div> </div>

154
src/components/card/card-proj-type.css
View File

@ -1,39 +1,52 @@
.proj { .proj {
width: 375px; width: 375px;
height: 842px; /* height: 842px; */
position: relative; /* position: relative; */
background-color: pink; /* background-color: rgb(255, 255, 255); */
} }
.projTop{
height: 725px; .seruseImg {
width: 336px;
height: 38px;
} }
.projTop {
height: 745px;
background-color: rgb(255, 255, 255);
}
.proj .proj-head { .proj .proj-head {
font-size: 20px; font-weight: bold;
font-size: 33px;
color: #492800;
text-align: center; text-align: center;
background-image: url('./proj-card-head-bg.png'); /* background-image: url('./proj-card-head-bg.png'); */
background-size: 100% 100%; /* background-size: 100% 100%; */
background-repeat: no-repeat; /* background-repeat: no-repeat; */
position: absolute; /* position: absolute; */
width: 175px; width: 100%;
height: 40px; height: 132px;
line-height: 40px; line-height: 132px;
color: var(--color-light); /* left: 38px; */
left: 38px; /* top: -4px; */
top: -4px; /* background-color: aqua; */
} }
.proj .proj-body { .proj .proj-body {
min-height: 385px; /* min-height: 385px; */
margin-bottom: 15px; margin-bottom: 15px;
padding: 60px 15px 15px 15px; /* padding: 60px 15px 15px 15px; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; /* justify-content: space-between; */
background-color: rgba(244,206,152,0.28); align-items: center;
/* background-color: rgba(244, 206, 152, 0.28); */
border-radius: 10px; border-radius: 10px;
position: relative;
height: 613px;
} }
.proj .proj-body .line .line-title { /* .proj .proj-body .line .line-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -43,15 +56,22 @@
.proj .proj-body .line:first-child .line-title { .proj .proj-body .line:first-child .line-title {
margin-top: 0; margin-top: 0;
} */
.useline {
margin-top: 33px;
} }
.proj .proj-body .line .line-content ul { .proj .proj-body .line .line-content ul {}
}
.proj .proj-body .line .line-content ul li { .proj .proj-body .line .line-content ul li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px; margin-top: 27px;
font-family: PingFang SC;
font-weight: 500;
font-size: 18px;
color: #6F6F6F;
margin-left: 48px;
} }
.proj .proj-body .line .line-content ul li:last-child { .proj .proj-body .line .line-content ul li:last-child {
@ -64,12 +84,18 @@
line-height: 20px; line-height: 20px;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
background-color: rgba(251,176,59,1); /* background-color: rgba(251, 176, 59, 1); */
background: #F38F1E;
text-align: center; text-align: center;
color: var(--color-light); color: var(--color-light);
font-size: 12px; font-size: 12px;
} }
.proj .proj-body .line .line-content ul li .newIndex img {
width: 26px;
height: 20px;
}
.proj .proj-body .line .line-content ul li .title { .proj .proj-body .line .line-content ul li .title {
margin-left: 10px; margin-left: 10px;
height: 20px; height: 20px;
@ -77,19 +103,35 @@
} }
.proj .proj-body .proj-charge { .proj .proj-body .proj-charge {
margin-top: 10px; /* margin-top: 10px;
padding-top: 10px; padding-top: 10px; */
border-top: 1px dotted var(--color-light); /* border-top: 1px dotted var(--color-light); */
/* margin-bottom: 48px; */
position: absolute;
bottom: 45px;
left: 70px;
/* background-color: #F38F1E; */
} }
.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-inner { .proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-inner {
background-color: transparent; /* background-color: transparent; */
} }
.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner { .proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.chargeline {
margin-top: 20px;
}
.chargeCon {
font-weight: 500;
font-size: 18px;
color: #989898;
}
.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner, .proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner,
.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner { .proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
border-color: var(--color-primary); border-color: var(--color-primary);
@ -98,40 +140,68 @@
.proj .proj-foot { .proj .proj-foot {
/* margin-top: 749px; */ /* margin-top: 749px; */
padding: 0 10px; /* padding: 0 10px; */
display: flex; display: flex;
justify-content: center; /* justify-content: center; */
align-items: center; /* align-items: center; */
margin-top: 23px; margin-top: 23px;
width: 375px;
height: 94px; height: 94px;
background-color: aqua; /* background-color: pink; */
} }
.proj .proj-foot .buy-btn { .proj .proj-foot .buy-btn {
text-align: center; width: 100%;
height: 94px;
padding: 0 10px;
background: url(../../static/createPro/buyBack.png);
background-size: 100% 100%;
/* text-align: center;
margin: 0 5px; margin: 0 5px;
padding: 10px 0; padding: 10px 0;
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-light); color: var(--color-light);
flex-basis: 100%; flex-basis: 100%; */
} }
.proj .proj-foot .buy-btn hr { /* .proj .proj-foot .buy-btn hr {
margin: 5px auto; margin: 5px auto;
width: 80%; width: 80%;
height: 1px; height: 1px;
border: none; border: none;
background-color: var(--color-light); background-color: red;
} } */
.proj .proj-foot .buy-btn .price { .proj .proj-foot .buy-btn .price {
} font-family: FZSuHeiS;
.proj .proj-foot .buy-btn .buy { font-weight: 600;
font-size: 18px;
color: #FB6C15;
height: 46px;
text-align: center;
line-height: 46px;
/* background-color: antiquewhite; */
border-bottom: 1px dashed #E3E3E3;
} }
.proj .proj-foot .buy-btn .buy {}
.proj .proj-foot .buy-btn .buy button { .proj .proj-foot .buy-btn .buy button {
height: 46px;
width: 100%;
border: none; border: none;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: rgb(255, 255, 255);
color: var(--color-light); /* color: var(--color-light); */
font-family: PingFang SC;
font-weight: 800;
font-size: 18px;
color: #696969;
}
.proj-foot .buy-btn:nth-child(2){
/* background-color: red; */
margin-left: 9px;
} }

37
src/components/step/StepProjEdit.tsx
View File

@ -7,20 +7,43 @@ export default function StepProjEdit(props: IStepProj) {
const height = window.innerHeight - 390; const height = window.innerHeight - 390;
const renderStepNo = () => { const renderStepNo = () => {
// if (props.process == Process.COMPLETE) {
// return (
// <div className="no complete">
// <CheckOutlined/>
// </div>
// )
// } else if (props.process == Process.PROCESSING) {
// return <div className="no processing">{props.step}</div>
// }
// return (
// <div className="no pending">
// {props.step}
// </div>
// )
if (props.process == Process.COMPLETE) { if (props.process == Process.COMPLETE) {
return ( return (
<div className="no complete"> <div className="no complete"
<CheckOutlined/> // style={{color:
// props.step === 1 ? '#57a2fd' :
// props.step === 2 ? '#1BC8B5' :
// props.step === 3 ? '#60a4f8' :
// props.step === 4 ? '#FF6609' : ''
// }}
>
{props.step}
</div> </div>
) )
} else if (props.process == Process.PROCESSING) { } else if (props.process == Process.PROCESSING) {
return <div className="no processing">{props.step}</div> return <div className="no processing">{props.step}</div>
} }
return ( return (
<div className="no pending"> <div className="no notop">
{props.step} {props.step}
</div> </div>
) )
} }
const renderStepDesc = () => { const renderStepDesc = () => {
@ -28,14 +51,14 @@ export default function StepProjEdit(props: IStepProj) {
return ( return (
<div className="desc"> <div className="desc">
<div className="title">{props.descTitle}</div> <div className="title">{props.descTitle}</div>
<div className="detail">{props.descDetail}</div> {/* <div className="detail">{props.descDetail}</div> */}
</div> </div>
) )
} }
return ( return (
<div className="desc pending"> <div className="desc pending">
<div className="title">{props.descTitle}</div> <div className="title">{props.descTitle}</div>
<div className="detail">{props.descDetail}</div> {/* <div className="detail">{props.descDetail}</div> */}
</div> </div>
) )
} }
@ -52,10 +75,10 @@ export default function StepProjEdit(props: IStepProj) {
return ( return (
<div className="step-proj"> <div className="step-proj">
<div className="step"> <div className={props.step == 1?'fiestStep':"step" } >
{renderStepNo()} {renderStepNo()}
{renderStepDesc()} {renderStepDesc()}
{renderStepLine()} {/* {renderStepLine()} */}
</div> </div>
<div className="step-card" style={{maxHeight: `${height - 20}px`}}> <div className="step-card" style={{maxHeight: `${height - 20}px`}}>
<div className="step-card-list">{props.children}</div> <div className="step-card-list">{props.children}</div>

122
src/components/step/step-proj-edit.css
View File

@ -3,57 +3,153 @@
position: relative; position: relative;
} }
.step-proj .fiestStep {
width: 282px;
height: 56px;
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
/* style={{
background:props.process != Process.PENDING?'#3790FF':'#8B919D',
}} */
.step-proj .fiestStep:before {
content: "";
position: absolute;
right: -28px;
top: 0;
width: 0;
height: 0;
border-left: 28px solid ;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
.step-proj .fiestStep .complete {
margin-left: 10px;
}
.step-proj .step { .step-proj .step {
margin-top: 30px; /* margin-top: 30px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: start; align-items: start;
position: relative; */
width: 282px;
height: 56px;
background-color: pink;
position: relative; position: relative;
display: flex;
align-items: center;
}
.step-proj .step:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 28px solid var(--color-light);
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
.step-proj .step:before {
content: "";
position: absolute;
right: -28px;
top: 0;
width: 0;
height: 0;
border-left: 28px solid red;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
} }
.step-proj .step .no { .step-proj .step .no {
width: 38px; /* width: 38px;
height: 38px; height: 38px;
border-radius: 50%; border-radius: 50%;
font-size: 16px; font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center; */
} }
.step-proj .step .complete { .step-proj .complete {
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
color: #3790FF;
} }
.step-proj .step .processing { .step-proj .processing {
border: 1px solid var(--color-primary); /* border: 1px solid var(--color-primary);
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-light); color: var(--color-light); */
width: 21px;
height: 21px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #B5B5B5;
} }
.step-proj .step .pending { .step-proj .notop {
width: 21px;
height: 21px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #B5B5B5;
}
.step-proj .pending {
border: 1px solid var(--color-disabled); border: 1px solid var(--color-disabled);
color: var(--color-disabled); color: var(--color-disabled);
} }
.step-proj .step .desc { .step-proj .desc {
margin-left: 15px; margin-left: 15px;
width: 150px; width: 150px;
border: none; border: none;
/* background-color: #3790FF; */
display: flex;
} }
.step-proj .step .desc .title { .step-proj .desc .title {
margin-top: 8px;
font-weight: bold; font-weight: bold;
/* background-color: #3790FF; */
} }
.step-proj .step .pending .title { .step-proj .fiestStep .desc .title {
margin-left: 60px;
font-weight: 300;
font-size: 16px;
color: #FFFFFF;
}
.step-proj .pending .title {
color: var(--color-text-disabled); color: var(--color-text-disabled);
} }
.step-proj .step .desc .detail { .step-proj .desc .detail {
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;

1
src/interfaces/proj/ICardProj.ts
View File

@ -26,4 +26,5 @@ export interface ICardProj {
bodyLineArray: ICardProjBodyLine[]; bodyLineArray: ICardProjBodyLine[];
chargeLineArray?: ICardProjChargeLine[]; chargeLineArray?: ICardProjChargeLine[];
buyArray: ICardProjBuy[]; buyArray: ICardProjBuy[];
newArray:ICardProjBodyLine[];
} }

10
src/route/index/Index.tsx
View File

@ -141,12 +141,16 @@ export default function Index() {
useEffect(()=>{ useEffect(()=>{
// const nowname = sessionStorage.getItem('now') // const nowname = sessionStorage.getItem('now')
console.log( '路由名字', location.pathname); console.log( '路由名字', location.pathname);
if(location.pathname == '/home'){ if(location.pathname.includes('/home') ){
setNow('首页') setNow('首页')
setPathArray([ { title: <Link to={'/home'}>首页</Link> }]) setPathArray([ { title: <Link to={'/home'}>首页</Link> }])
}else if(location.pathname == '/proj-create'){ }else if(location.pathname.includes('/proj-create') ){
setNow('创建项目') setNow('创建项目')
setPathArray([ { title: <Link to={'/home'}>首页</Link> },{title: <Link to={'/proj-create'}>创建</Link>}]) setPathArray([ { title: <Link to={'/home'}>首页</Link> },{title: <Link to={'/proj-create'}>创建项目</Link>}])
//
}else if(location.pathname.includes('/proj-edit')){
setNow('编辑项目')
setPathArray([ { title: <Link to={'/home'}>首页</Link> },{title: <Link to={'/proj-create'}>创建项目</Link>},{title: <Link to={location.pathname}>编辑项目</Link>}])
} }
},[location.pathname]) },[location.pathname])

260
src/route/proj/ProjCreate.tsx
View File

@ -1,11 +1,11 @@
import './proj-create.css' import './proj-create.css'
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { message } from "antd"; import { message } from "antd";
import CardProjType from "../../components/card/CardProjType.tsx"; import CardProjType from "../../components/card/CardProjType.tsx";
import { IProjCharge, ProjAdditionalType, ProjChargeType } from "../../interfaces/proj/IProj.ts"; import { IProjCharge, ProjAdditionalType, ProjChargeType } from "../../interfaces/proj/IProj.ts";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { get } from "../../util/AjaxUtils.ts"; import { get } from "../../util/AjaxUtils.ts";
import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
export default function ProjCreate() { export default function ProjCreate() {
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
@ -18,7 +18,7 @@ export default function ProjCreate() {
free: 0, free: 0,
}, },
additional: { additional: {
pkg: 0, pkg: 0,
videoDemo: 0 videoDemo: 0
} }
}); });
@ -31,6 +31,8 @@ export default function ProjCreate() {
url: '/api/proj/charge/get', url: '/api/proj/charge/get',
onSuccess({ data }) { onSuccess({ data }) {
setCharge(data); setCharge(data);
// console.log('后面的price',data.proj.materialAgent);
} }
}) })
// sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }])); // sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }]));
@ -115,26 +117,27 @@ export default function ProjCreate() {
{/* title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`*/} {/* title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`*/}
{/* }*/} {/* }*/}
{/* ]}*/} {/* ]}*/}
{/* buyArray={[*/} {/* buyArray={[
{/* {*/} {
{/* id: ProjChargeType.MATERIAL_AGENT,*/} id: ProjChargeType.MATERIAL_AGENT,
{/* label: '普件：',*/} label: '普件：',
{/* price: charge.proj.materialAgent,*/} price: charge.proj.materialAgent,
{/* handleClick: (_title, additional) => {*/} handleClick: (_title, additional) => {
{/* nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)*/} nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)
{/* }*/} }
{/* },*/} },
{/* {*/} {
{/* id: ProjChargeType.MATERIAL_AGENT_URGENT,*/} id: ProjChargeType.MATERIAL_AGENT_URGENT,
{/* label: '加急：',*/} label: '加急：',
{/* price: charge.proj.materialAgentUrgent,*/} price: charge.proj.materialAgentUrgent,
{/* handleClick: (_title, additional) => {*/} handleClick: (_title, additional) => {
{/* nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)*/} nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)
{/* }*/} }
{/* }*/} }
{/* ]}*/} ]} */}
{/*/>*/} {/*/>*/}
<CardProjType
{/* <CardProjType
head={'写材料'} head={'写材料'}
bodyLineArray={[ bodyLineArray={[
{ {
@ -158,6 +161,156 @@ export default function ProjCreate() {
] ]
} }
]} ]}
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} 元`
}
]}
buyArray={[
{
id: ProjChargeType.MATERIAL,
price: charge.proj.material,
handleClick: (_title, additional) => {
nav(`/proj-new/${ProjChargeType.MATERIAL}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`);
}
}
]}
/> */}
<CardProjType
head={'全托'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建',
'系统可在线运行三年',
'软著材料编写',
'软著申报',
'包下证',
'提供系统演示视频文件',
'提供系统安装包'
]
},
// {
// title: '使用流程：',
// contents: [
// '按系统操作手册执行',
// ]
// }
]}
newArray={[
{
title: '使用流程：',
contents: [
'系统操作手册执行',
]
}
]
}
buyArray={[
{
id: ProjChargeType.ALL,
price: charge.proj.all,
handleClick: () => {
nav(`/proj-new/${ProjChargeType.ALL}`)
}
}
]}
/>
<CardProjType
head={'写材料+代理'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建平台与客服指导',
'系统可在线运行一年',
'软著材料编写',
'资料补正不限',
'软著申报',
'包下证'
]
},
// {
// 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={'写材料'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建平台与客服指导',
'系统可在线运行一年',
'软著材料编写',
'资料补正三次',
]
},
]}
newArray={[
{
title: '使用流程：',
contents: [
'系统操作手册执行',
]
}
]
}
chargeLineArray={[ chargeLineArray={[
{ {
id: ProjAdditionalType.PKG, id: ProjAdditionalType.PKG,
@ -180,32 +333,41 @@ export default function ProjCreate() {
} }
]} ]}
/> />
<CardProjType <CardProjType
head={'免费试用'} head={'免费试用'}
bodyLineArray={[ bodyLineArray={[
{ {
title: '提供的服务：', title: '提供的服务：',
contents: [ contents: [
'提供系统搭建平台与客服指导', '提供系统搭建平台与客服指导',
'系统可在线存储三天', '系统可在线存储三天',
] ]
}, },
{ // {
title: '使用流程：', // title: '使用流程：',
contents: [ // contents: [
'按系统操作手册执行', // '按系统操作手册执行',
] // ]
} // }
]} ]}
buyArray={[ newArray={[
{ {
id: ProjChargeType.FREE, title: '使用流程：',
price: charge.proj.free, contents: [
handleClick: (_title, additional) => { '系统操作手册执行',
nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`) ]
} }
} ]
]} }
buyArray={[
{
id: ProjChargeType.FREE,
price: charge.proj.free,
handleClick: (_title, additional) => {
nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`)
}
}
]}
/> />
</div> </div>
</div> </div>

15
src/route/proj/ProjEdit.tsx
View File

@ -1,6 +1,7 @@
import './proj-edit.css'; import './proj-edit.css';
import {Link, useNavigate, useParams} from "react-router-dom"; // import {Link, useNavigate, useParams} from "react-router-dom";
import {Breadcrumb, Button, FloatButton, message, Modal} from "antd"; import { useNavigate, useParams} from "react-router-dom";
import { Button, FloatButton, message, Modal} from "antd";
import StepProjEdit from "../../components/step/StepProjEdit.tsx"; import StepProjEdit from "../../components/step/StepProjEdit.tsx";
import CardProjEdit from "../../components/card/CardProjEdit.tsx"; import CardProjEdit from "../../components/card/CardProjEdit.tsx";
import {Process} from "../../interfaces/step/IStepProj.ts"; import {Process} from "../../interfaces/step/IStepProj.ts";
@ -232,17 +233,17 @@ export default function ProjEdit() {
useEffect(() => { useEffect(() => {
renderData(); renderData();
}, []) }, [])
return ( return (
<> <div className='proj-edit-box'>
{contextHolder} {contextHolder}
<Breadcrumb {/* <Breadcrumb
items={[ items={[
{title: <Link to={'/'}>首页</Link>}, {title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>}, {title: <Link to={'/proj-create'}>创建项目</Link>},
{title: '编辑项目'}, {title: '编辑项目'},
]} ]}
/> /> */}
<div className="proj-edit" style={{height: `${height}px`}}> <div className="proj-edit" style={{height: `${height}px`}}>
<StepProjEdit step={1} process={isEditStepEdited ? Process.COMPLETE : Process.PROCESSING} <StepProjEdit step={1} process={isEditStepEdited ? Process.COMPLETE : Process.PROCESSING}
descTitle="完善信息" descTitle="完善信息"
@ -468,6 +469,6 @@ export default function ProjEdit() {
isFree={false} isFree={false}
/> />
</Modal> </Modal>
</> </div>
) )
} }

2
src/route/proj/ProjEditAll.tsx
View File

@ -100,7 +100,7 @@ export default function ProjEditAll() {
renderData(); renderData();
}, []) }, [])
return ( return (
<> <>
{contextHolder} {contextHolder}
<Breadcrumb <Breadcrumb

2
src/route/proj/ProjEditFree.tsx
View File

@ -197,7 +197,7 @@ export default function ProjEdit() {
}, []) }, [])
return ( return (
<> <>
{contextHolder} {contextHolder}
<Breadcrumb <Breadcrumb
items={[ items={[

15
src/route/proj/ProjNew.tsx
View File

@ -35,14 +35,17 @@ export default function ProjNew() {
messageApi: messageApi, messageApi: messageApi,
url: '/api/proj/charge/get', url: '/api/proj/charge/get',
onSuccess({data}) { onSuccess({data}) {
const charge = data as IProjCharge; const charge = data as IProjCharge;
// console.log('创建页price',charge.proj.materialAgent);
let price = 0; let price = 0;
switch (pathParams.projChargeType) { switch (pathParams.projChargeType) {
case ProjChargeType.ALL: case ProjChargeType.ALL:
price = charge.proj.all; price = charge.proj.all;
break; break;
case ProjChargeType.MATERIAL_AGENT: case ProjChargeType.MATERIAL_AGENT:
price = charge.proj.materialAgent; price = charge.proj.materialAgent;
break; break;
case ProjChargeType.MATERIAL_AGENT_URGENT: case ProjChargeType.MATERIAL_AGENT_URGENT:
price = charge.proj.materialAgentUrgent; price = charge.proj.materialAgentUrgent;
@ -59,15 +62,21 @@ export default function ProjNew() {
content: '价格类型错误', content: '价格类型错误',
}) })
} }
if (queryParams.get('pkg')) { const pkg = queryParams.get('pkg') == 'true'?true:false
const videoDemo = queryParams.get('videoDemo') == 'true'?true:false
if (pkg) {
price += charge.additional.pkg; price += charge.additional.pkg;
listProjChargeAdditional.push(ProjAdditionalType.PKG); listProjChargeAdditional.push(ProjAdditionalType.PKG);
} }
if (queryParams.get('videoDemo')) { if (videoDemo) {
price += charge.additional.videoDemo; price += charge.additional.videoDemo;
listProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO); listProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
} }
setChargePrice(price); setChargePrice(price);
console.log('传递信息pkg:',pkg,'videoDemo:',videoDemo);
console.log('显示价格',price);
} }
}) })
}, []); }, []);

2
src/route/proj/proj-create.css
View File

@ -3,6 +3,7 @@
/* background-color: var(--color-light); */ /* background-color: var(--color-light); */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
align-items: center; align-items: center;
padding-bottom: 50px; padding-bottom: 50px;
@ -12,7 +13,6 @@
} }
.proj-create .proj { .proj-create .proj {
margin-top: 23px; margin-top: 23px;
padding-bottom: 15px;
} }
.proj-create .test{ .proj-create .test{
/* height: 30p; */ /* height: 30p; */

12
src/route/proj/proj-edit.css
View File

@ -1,8 +1,15 @@
.proj-edit-box{
margin-top: 21px;
/* background-color: red; */
overflow: scroll;
}
.proj-edit { .proj-edit {
background-color: var(--color-light); background-color: var(--color-light);
padding: 15px; padding: 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
} }
.btn-container { .btn-container {
@ -10,4 +17,5 @@
padding: 5px 0 15px 0; padding: 5px 0 15px 0;
text-align: center; text-align: center;
background-color: var(--color-light); background-color: var(--color-light);
}
}

BIN
src/static/createPro/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/static/createPro/buyBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/static/createPro/buysmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/static/createPro/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/static/createPro/serve.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/static/createPro/use.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/static/serve.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
src/static/use.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB