创建页面bug处理
This commit is contained in:
xixi
parent
d13279ffe5
commit
9d608724d2
1
public/fonts/font-awesome/css/mixins.css
vendored
Normal file
1
public/fonts/font-awesome/css/mixins.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
/*# sourceMappingURL=./mixins.css.map */
|
||||
@ -3,8 +3,10 @@ import { ICardProj, ICardProjChargeLine } from "../../interfaces/proj/ICardProj.
|
||||
import { Checkbox } from 'antd';
|
||||
import { useState } from "react";
|
||||
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) {
|
||||
|
||||
const [chargeAmount, setChargeAmount] = useState(0);
|
||||
@ -17,12 +19,34 @@ export default function CardProjType(props: ICardProj) {
|
||||
<span className="title">{item}</span>
|
||||
</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 = () => {
|
||||
return props.bodyLineArray.map((line, index) => {
|
||||
return (
|
||||
<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">
|
||||
<ul>{renderContents(index, line.contents)}</ul>
|
||||
</div>
|
||||
@ -58,10 +82,12 @@ export default function CardProjType(props: ICardProj) {
|
||||
<div className="proj-charge">
|
||||
{
|
||||
props.chargeLineArray.map((line, index) => (
|
||||
<div className="line" key={`charge_${index}`}>
|
||||
<div className="chargeline" key={`charge_${index}`}>
|
||||
<Checkbox onChange={(e) => {
|
||||
onChargeChange(e.target.checked, line);
|
||||
}}>{line.title}</Checkbox>
|
||||
}}>
|
||||
<span className='chargeCon'>{line.title}</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
@ -71,11 +97,12 @@ export default function CardProjType(props: ICardProj) {
|
||||
}
|
||||
|
||||
const renderBuyBtn = () => {
|
||||
|
||||
return props.buyArray.map((buy, index) => {
|
||||
return (
|
||||
<div className="buy-btn" key={`buy_${index}`}>
|
||||
<div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
|
||||
<hr />
|
||||
{/* <hr /> */}
|
||||
<div className="buy">
|
||||
<button onClick={() => {
|
||||
buy.handleClick(props.head, {
|
||||
@ -87,16 +114,73 @@ export default function CardProjType(props: ICardProj) {
|
||||
</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 (
|
||||
<div className="proj">
|
||||
<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>
|
||||
<div className="proj-body">
|
||||
<div>{renderLines()}</div>
|
||||
<div>{renderNew()}</div>
|
||||
{renderCharge()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,39 +1,52 @@
|
||||
.proj {
|
||||
width: 375px;
|
||||
height: 842px;
|
||||
position: relative;
|
||||
background-color: pink;
|
||||
/* height: 842px; */
|
||||
/* position: relative; */
|
||||
/* background-color: rgb(255, 255, 255); */
|
||||
}
|
||||
|
||||
.seruseImg {
|
||||
width: 336px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.projTop {
|
||||
height: 725px;
|
||||
height: 745px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.proj .proj-head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 33px;
|
||||
color: #492800;
|
||||
text-align: center;
|
||||
background-image: url('./proj-card-head-bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
width: 175px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: var(--color-light);
|
||||
left: 38px;
|
||||
top: -4px;
|
||||
/* background-image: url('./proj-card-head-bg.png'); */
|
||||
/* background-size: 100% 100%; */
|
||||
/* background-repeat: no-repeat; */
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
height: 132px;
|
||||
line-height: 132px;
|
||||
/* left: 38px; */
|
||||
/* top: -4px; */
|
||||
/* background-color: aqua; */
|
||||
}
|
||||
|
||||
.proj .proj-body {
|
||||
min-height: 385px;
|
||||
/* min-height: 385px; */
|
||||
margin-bottom: 15px;
|
||||
padding: 60px 15px 15px 15px;
|
||||
/* padding: 60px 15px 15px 15px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(244,206,152,0.28);
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
/* background-color: rgba(244, 206, 152, 0.28); */
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
height: 613px;
|
||||
}
|
||||
|
||||
.proj .proj-body .line .line-title {
|
||||
/* .proj .proj-body .line .line-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
@ -43,15 +56,22 @@
|
||||
|
||||
.proj .proj-body .line:first-child .line-title {
|
||||
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 {
|
||||
display: flex;
|
||||
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 {
|
||||
@ -64,12 +84,18 @@
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background-color: rgba(251,176,59,1);
|
||||
/* background-color: rgba(251, 176, 59, 1); */
|
||||
background: #F38F1E;
|
||||
text-align: center;
|
||||
color: var(--color-light);
|
||||
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 {
|
||||
margin-left: 10px;
|
||||
height: 20px;
|
||||
@ -77,19 +103,35 @@
|
||||
}
|
||||
|
||||
.proj .proj-body .proj-charge {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dotted var(--color-light);
|
||||
/* margin-top: 10px;
|
||||
padding-top: 10px; */
|
||||
/* 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 {
|
||||
background-color: transparent;
|
||||
/* background-color: transparent; */
|
||||
}
|
||||
|
||||
.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner {
|
||||
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:hover .ant-checkbox-checked .ant-checkbox-inner {
|
||||
border-color: var(--color-primary);
|
||||
@ -98,40 +140,68 @@
|
||||
|
||||
.proj .proj-foot {
|
||||
/* margin-top: 749px; */
|
||||
padding: 0 10px;
|
||||
/* padding: 0 10px; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
/* align-items: center; */
|
||||
margin-top: 23px;
|
||||
width: 375px;
|
||||
height: 94px;
|
||||
background-color: aqua;
|
||||
/* background-color: pink; */
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 10px 0;
|
||||
background-color: var(--color-primary);
|
||||
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;
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
border: none;
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
background-color: red;
|
||||
} */
|
||||
|
||||
.proj .proj-foot .buy-btn .price {
|
||||
}
|
||||
.proj .proj-foot .buy-btn .buy {
|
||||
font-family: FZSuHeiS;
|
||||
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 {
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--color-light);
|
||||
background-color: rgb(255, 255, 255);
|
||||
/* 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;
|
||||
}
|
||||
@ -7,20 +7,43 @@ export default function StepProjEdit(props: IStepProj) {
|
||||
const height = window.innerHeight - 390;
|
||||
|
||||
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) {
|
||||
return (
|
||||
<div className="no complete">
|
||||
<CheckOutlined/>
|
||||
<div className="no complete"
|
||||
// style={{color:
|
||||
// props.step === 1 ? '#57a2fd' :
|
||||
// props.step === 2 ? '#1BC8B5' :
|
||||
// props.step === 3 ? '#60a4f8' :
|
||||
// props.step === 4 ? '#FF6609' : ''
|
||||
|
||||
// }}
|
||||
>
|
||||
{props.step}
|
||||
</div>
|
||||
)
|
||||
} else if (props.process == Process.PROCESSING) {
|
||||
return <div className="no processing">{props.step}</div>
|
||||
}
|
||||
return (
|
||||
<div className="no pending">
|
||||
<div className="no notop">
|
||||
{props.step}
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
const renderStepDesc = () => {
|
||||
@ -28,14 +51,14 @@ export default function StepProjEdit(props: IStepProj) {
|
||||
return (
|
||||
<div className="desc">
|
||||
<div className="title">{props.descTitle}</div>
|
||||
<div className="detail">{props.descDetail}</div>
|
||||
{/* <div className="detail">{props.descDetail}</div> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="desc pending">
|
||||
<div className="title">{props.descTitle}</div>
|
||||
<div className="detail">{props.descDetail}</div>
|
||||
{/* <div className="detail">{props.descDetail}</div> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -52,10 +75,10 @@ export default function StepProjEdit(props: IStepProj) {
|
||||
|
||||
return (
|
||||
<div className="step-proj">
|
||||
<div className="step">
|
||||
<div className={props.step == 1?'fiestStep':"step" } >
|
||||
{renderStepNo()}
|
||||
{renderStepDesc()}
|
||||
{renderStepLine()}
|
||||
{/* {renderStepLine()} */}
|
||||
</div>
|
||||
<div className="step-card" style={{maxHeight: `${height - 20}px`}}>
|
||||
<div className="step-card-list">{props.children}</div>
|
||||
|
||||
@ -3,57 +3,153 @@
|
||||
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 {
|
||||
margin-top: 30px;
|
||||
/* margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
position: relative; */
|
||||
width: 282px;
|
||||
height: 56px;
|
||||
background-color: pink;
|
||||
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 {
|
||||
width: 38px;
|
||||
/* width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
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);
|
||||
color: var(--color-primary);
|
||||
color: #3790FF;
|
||||
}
|
||||
|
||||
.step-proj .step .processing {
|
||||
border: 1px solid var(--color-primary);
|
||||
.step-proj .processing {
|
||||
/* border: 1px solid 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);
|
||||
color: var(--color-disabled);
|
||||
}
|
||||
|
||||
.step-proj .step .desc {
|
||||
.step-proj .desc {
|
||||
margin-left: 15px;
|
||||
width: 150px;
|
||||
border: none;
|
||||
/* background-color: #3790FF; */
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.step-proj .step .desc .title {
|
||||
margin-top: 8px;
|
||||
.step-proj .desc .title {
|
||||
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);
|
||||
}
|
||||
|
||||
.step-proj .step .desc .detail {
|
||||
.step-proj .desc .detail {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
|
||||
@ -26,4 +26,5 @@ export interface ICardProj {
|
||||
bodyLineArray: ICardProjBodyLine[];
|
||||
chargeLineArray?: ICardProjChargeLine[];
|
||||
buyArray: ICardProjBuy[];
|
||||
newArray:ICardProjBodyLine[];
|
||||
}
|
||||
@ -141,12 +141,16 @@ export default function Index() {
|
||||
useEffect(()=>{
|
||||
// const nowname = sessionStorage.getItem('now')
|
||||
console.log( '路由名字', location.pathname);
|
||||
if(location.pathname == '/home'){
|
||||
if(location.pathname.includes('/home') ){
|
||||
setNow('首页')
|
||||
setPathArray([ { title: <Link to={'/home'}>首页</Link> }])
|
||||
}else if(location.pathname == '/proj-create'){
|
||||
}else if(location.pathname.includes('/proj-create') ){
|
||||
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])
|
||||
|
||||
@ -5,7 +5,7 @@ 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 { Link } from "react-router-dom";
|
||||
// import { Link } from "react-router-dom";
|
||||
|
||||
export default function ProjCreate() {
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
@ -31,6 +31,8 @@ export default function ProjCreate() {
|
||||
url: '/api/proj/charge/get',
|
||||
onSuccess({ data }) {
|
||||
setCharge(data);
|
||||
// console.log('后面的price',data.proj.materialAgent);
|
||||
|
||||
}
|
||||
})
|
||||
// sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }]));
|
||||
@ -115,26 +117,27 @@ export default function ProjCreate() {
|
||||
{/* title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`*/}
|
||||
{/* }*/}
|
||||
{/* ]}*/}
|
||||
{/* 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}`)*/}
|
||||
{/* }*/}
|
||||
{/* }*/}
|
||||
{/* ]}*/}
|
||||
{/* 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}`)
|
||||
}
|
||||
}
|
||||
]} */}
|
||||
{/*/>*/}
|
||||
<CardProjType
|
||||
|
||||
{/* <CardProjType
|
||||
head={'写材料'}
|
||||
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={[
|
||||
{
|
||||
id: ProjAdditionalType.PKG,
|
||||
@ -190,13 +343,22 @@ export default function ProjCreate() {
|
||||
'系统可在线存储三天',
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: '使用流程：',
|
||||
// contents: [
|
||||
// '按系统操作手册执行',
|
||||
// ]
|
||||
// }
|
||||
]}
|
||||
newArray={[
|
||||
{
|
||||
title: '使用流程：',
|
||||
contents: [
|
||||
'按系统操作手册执行',
|
||||
'系统操作手册执行',
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
buyArray={[
|
||||
{
|
||||
id: ProjChargeType.FREE,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import './proj-edit.css';
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {Breadcrumb, Button, FloatButton, message, Modal} from "antd";
|
||||
// import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import { useNavigate, useParams} from "react-router-dom";
|
||||
import { Button, FloatButton, message, Modal} from "antd";
|
||||
import StepProjEdit from "../../components/step/StepProjEdit.tsx";
|
||||
import CardProjEdit from "../../components/card/CardProjEdit.tsx";
|
||||
import {Process} from "../../interfaces/step/IStepProj.ts";
|
||||
@ -234,15 +235,15 @@ export default function ProjEdit() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='proj-edit-box'>
|
||||
{contextHolder}
|
||||
<Breadcrumb
|
||||
{/* <Breadcrumb
|
||||
items={[
|
||||
{title: <Link to={'/'}>首页</Link>},
|
||||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||||
{title: '编辑项目'},
|
||||
]}
|
||||
/>
|
||||
/> */}
|
||||
<div className="proj-edit" style={{height: `${height}px`}}>
|
||||
<StepProjEdit step={1} process={isEditStepEdited ? Process.COMPLETE : Process.PROCESSING}
|
||||
descTitle="完善信息"
|
||||
@ -468,6 +469,6 @@ export default function ProjEdit() {
|
||||
isFree={false}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -35,7 +35,10 @@ export default function ProjNew() {
|
||||
messageApi: messageApi,
|
||||
url: '/api/proj/charge/get',
|
||||
onSuccess({data}) {
|
||||
|
||||
const charge = data as IProjCharge;
|
||||
// console.log('创建页price',charge.proj.materialAgent);
|
||||
|
||||
let price = 0;
|
||||
switch (pathParams.projChargeType) {
|
||||
case ProjChargeType.ALL:
|
||||
@ -59,15 +62,21 @@ export default function ProjNew() {
|
||||
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;
|
||||
listProjChargeAdditional.push(ProjAdditionalType.PKG);
|
||||
}
|
||||
if (queryParams.get('videoDemo')) {
|
||||
if (videoDemo) {
|
||||
price += charge.additional.videoDemo;
|
||||
listProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
|
||||
}
|
||||
setChargePrice(price);
|
||||
console.log('传递信息pkg:',pkg,'videoDemo:',videoDemo);
|
||||
|
||||
console.log('显示价格',price);
|
||||
|
||||
}
|
||||
})
|
||||
}, []);
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
/* background-color: var(--color-light); */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-bottom: 50px;
|
||||
|
||||
@ -12,7 +13,6 @@
|
||||
}
|
||||
.proj-create .proj {
|
||||
margin-top: 23px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.proj-create .test{
|
||||
/* height: 30p; */
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
.proj-edit-box{
|
||||
margin-top: 21px;
|
||||
/* background-color: red; */
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
.proj-edit {
|
||||
background-color: var(--color-light);
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
@ -10,4 +17,5 @@
|
||||
padding: 5px 0 15px 0;
|
||||
text-align: center;
|
||||
background-color: var(--color-light);
|
||||
|
||||
}
|
||||
BIN
src/static/createPro/back.png
Normal file
BIN
src/static/createPro/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/static/createPro/buyBack.png
Normal file
BIN
src/static/createPro/buyBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/static/createPro/buysmall.png
Normal file
BIN
src/static/createPro/buysmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/static/createPro/left.png
Normal file
BIN
src/static/createPro/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/static/createPro/serve.png
Normal file
BIN
src/static/createPro/serve.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/static/createPro/use.png
Normal file
BIN
src/static/createPro/use.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/static/serve.png
Normal file
BIN
src/static/serve.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/static/use.png
Normal file
BIN
src/static/use.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Loading…
Reference in New Issue
Block a user