完善页面

src/components/card/CardAgent.tsx

@@ -0,0 +1,36 @@
+import './card-agent.css';
+import {Image} from "antd";
+import {errorImage} from "../../util/CommonUtil.ts";
+import {AgentMedalEnum, IAgent} from "../../interfaces/card/ICardProj.ts";
+
+export default function CardAgent(props: IAgent) {
+
+    const renderMedal = () => {
+        if(props.medal == AgentMedalEnum.GOLD) {
+            return <span className="card-agent-medal gold">金牌</span>;
+        }
+        if(props.medal == AgentMedalEnum.SILVER) {
+            return <span className="card-agent-medal silver">银牌</span>;
+        }
+        if(props.medal == AgentMedalEnum.BRONZE) {
+            return <span className="card-agent-medal bronze">铜牌</span>;
+        }
+        return <span className="card-agent-medal">普通</span>;
+    }
+
+    return (
+        <div className="card-agent" onClick={() => {
+            props.handleSelect();
+        }}>
+            <div className="card-agent-head">
+                {props.logo ? <Image width={30} src={props.logo} fallback={errorImage} /> : <></>}
+                <span className="card-agent-title">{props.name}</span>
+                {renderMedal()}
+            </div>
+            <div className="card-agent-body">
+                <div className="card-agent-body-content">{props.desc}</div>
+                <Image width={140} height={100} src={props.certificateImg} fallback={errorImage}/>
+            </div>
+        </div>
+    )
+}

src/components/card/card-agent.css

@@ -0,0 +1,55 @@
+.card-agent {
+}
+
+.card-agent .card-agent-head {
+    padding: 10px 10px 5px 10px;
+    display: flex;
+    align-items: center;
+}
+
+.card-agent .card-agent-head .ant-image {
+    margin-right: 5px;
+}
+
+.card-agent .card-agent-head .card-agent-title {
+    margin-right: 5px;
+    max-width: 260px;
+}
+
+.card-agent .card-agent-head .card-agent-medal {
+    padding: 2px 5px;
+    border-radius: 4px;
+    font-size: 12px;
+    background-color: #EEEEEE;
+}
+
+.card-agent .card-agent-head .gold {
+    color: rgba(161,98,34,1);
+    background-color: #ffd700;
+}
+
+.card-agent .card-agent-head .silver {
+    color: rgba(161,98,34,1);
+    background-color: #e5e5e5;
+}
+
+.card-agent .card-agent-head .bronze {
+    color: var(--color-light);
+    background-color: #b87333;
+}
+
+.card-agent .card-agent-body {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 10px 10px 10px;
+}
+
+.card-agent .card-agent-body .card-agent-body-content {
+    width: 200px;
+    height: 100px;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+}

src/interfaces/card/ICardProj.ts

@@ -29,4 +29,22 @@ export interface IProjJump {
     desc: string;
 
     handleJump(): void;
+}
+
+export enum AgentMedalEnum {
+    GOLD,
+    SILVER,
+    BRONZE,
+    NORMAL
+}
+
+export interface IAgent {
+    logo?: string;
+    name: string;
+    medal?: AgentMedalEnum;
+    desc: string;
+    certificateImg: string;
+    selected?: boolean;
+
+    handleSelect(): void;
 }

src/layout/body/Body.tsx

@@ -4,6 +4,7 @@ import Index from '../../route/index';
 import ProjCreate from "../../route/proj/ProjCreate.tsx";
 import ProjNew from "../../route/proj/ProjNew.tsx";
 import ProjEdit from "../../route/proj/ProjEdit.tsx";
+import AgentSelect from "../../route/agent/AgentSelect.tsx";
 
 const router = createBrowserRouter([
     {
@@ -21,6 +22,10 @@ const router = createBrowserRouter([
     {
         path: '/proj-edit',
         element: <ProjEdit />
+    },
+    {
+        path: '/agent-select/:projId',
+        element: <AgentSelect />
     }
 ])
 

src/layout/head/head.css

@@ -6,7 +6,7 @@
     left: 0;
     background-color: var(--color-light);
     box-shadow: 0 2px 6px 0 var(--color-box-shadow);
-    z-index: 0;
+    z-index: 99;
     color: var(--color-dark);
 }
 

src/route/agent/AgentSelect.tsx

@@ -0,0 +1,110 @@
+import './agent-select.css';
+import {Link, useNavigate} from "react-router-dom";
+import {Breadcrumb, Button, Divider, Image, Radio, RadioChangeEvent} from "antd";
+import CardAgent from "../../components/card/CardAgent.tsx";
+import {errorImage} from "../../util/CommonUtil.ts";
+import {useState} from "react";
+import {AgentMedalEnum} from "../../interfaces/card/ICardProj.ts";
+
+export default function AgentSelect() {
+    const [value, setValue] = useState(1);
+    const nav = useNavigate();
+    // const params = useParams();
+    const height = window.innerHeight - 150;
+
+    return (
+        <>
+            <Breadcrumb
+                items={[
+                    {title: <Link to="/">首页</Link>},
+                    {title: <Link to="/proj-create">创建项目</Link>},
+                    {
+                        title: <a href="/#" onClick={(e) => {
+                            e.preventDefault();
+                            nav(-1)
+                        }}>编辑项目</a>
+                    },
+                    {title: '找代理'},
+                ]}
+            />
+            <div className="agent-select" style={{height: `${height}px`}}>
+                <div className="agent-select-left">
+                    <div className="list">
+                        <div className="list-item">
+                            <CardAgent logo="1"
+                                       name="标题标题"
+                                       desc="描述描述试试少时诵诗书"
+                                       medal={AgentMedalEnum.NORMAL}
+                                       certificateImg="1"
+                                       handleSelect={() => {
+                                           console.log('1')
+                                       }}
+                            />
+                        </div>
+                        <div className="load">
+                            <Button type="text">加载更多...</Button>
+                        </div>
+                    </div>
+                </div>
+                <div className="agent-select-right">
+                    <div className="agent-info">
+                        <div className="agent-title">机构信息</div>
+                        <div className="agent-body">
+                            <div className="agent-name">北京九思恒源科技有限公司</div>
+                            <div className="agent-desc">
+                                雄厚的技术与人才实力，赢得了客户的深厚信赖，获得了政府部门的高度认可，公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时，公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程，缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。
+                            </div>
+                            <Divider dashed style={{
+                                marginTop: '10px',
+                                marginBottom: '10px'
+                            }}/>
+                            <div className="agent-img-title">机构证书</div>
+                            <div className="agent-img-list">
+                                <Image width={270}
+                                       height={170}
+                                       fallback={errorImage}
+                                />
+                                <Image width={270}
+                                       height={170}
+                                       fallback={errorImage}
+                                />
+                                <Image width={270}
+                                       height={170}
+                                       fallback={errorImage}
+                                />
+                                <Image width={270}
+                                       height={170}
+                                       fallback={errorImage}
+                                />
+                            </div>
+                            <Divider dashed style={{
+                                marginTop: '10px',
+                                marginBottom: '10px'
+                            }}/>
+                            <div className="agent-contact">
+                                <div className="line">
+                                    <span>联系人：XXXXXX</span>
+                                    <span>联系电话：13888888888</span>
+                                </div>
+                                <div className="line">
+                                    <span>联系地址：内蒙古呼和浩特新城区XXXXXX</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="agent-price">
+                        <span className="label">价格种类：</span>
+                        <Radio.Group onChange={(e: RadioChangeEvent) => {
+                            console.log('radio checked', e.target.value);
+                            setValue(e.target.value);
+                        }} value={value}>
+                            <Radio value={1}>普通件：200</Radio>
+                            <Radio value={2}>加急件：400</Radio>
+                        </Radio.Group>
+                    </div>
+                </div>
+            </div>
+        </>
+
+    )
+}

src/route/agent/agent-select.css

@@ -0,0 +1,108 @@
+.agent-select {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.agent-select .agent-select-left {
+    width: 370px;
+    height: calc(100% - 30px);
+    padding: 15px;
+    background-color: var(--color-light);
+}
+
+.agent-select .agent-select-left .list {
+    height: 100%;
+    overflow: auto;
+}
+
+.agent-select .agent-select-left .list .list-item .card-agent {
+    border-style: solid;
+    border-color: var(--color-border);
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 0;
+    border-left-width: 1px;
+    cursor: pointer;
+}
+
+.agent-select .agent-select-left .list .list-item .card-agent:last-child {
+    border-bottom-width: 1px;
+}
+
+.agent-select .agent-select-left .load {
+    text-align: center;
+    margin-top: 15px;
+}
+
+.agent-select .agent-select-left .load .ant-btn {
+    background-color: rgba(245,246,249,1);
+    color: rgba(68,72,88,1);
+    padding: 4px 40px;
+    font-size: 12px;
+}
+
+.agent-select .agent-select-right {
+    background-color: var(--color-light);
+    margin-left: 15px;
+    padding: 15px;
+    height: calc(100% - 30px);
+    overflow: auto;
+}
+
+.agent-select .agent-select-right .agent-info .agent-title {
+    border: 1px solid var(--color-border);
+    background-color: rgba(228,229,238,0.5);
+    padding: 5px 15px;
+    font-weight: 600;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body {
+    padding: 5px 15px;
+    border: 1px solid var(--color-border);
+    margin-top: -1px;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-name {
+    padding: 5px 0;
+    font-weight: 500;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-desc {
+    line-height: 24px;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-img-title {
+    margin-bottom: 10px;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-img-list {
+    white-space: nowrap;
+    overflow-x: auto;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-img-list .ant-image {
+    margin-right: 10px;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-img-list .ant-image:last-child {
+    margin-right: 0;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-contact .line {
+    margin-bottom: 5px;
+}
+
+.agent-select .agent-select-right .agent-info .agent-body .agent-contact .line span {
+    margin-right: 15px;
+}
+
+.agent-select .agent-select-right .agent-price {
+    border: 1px solid var(--color-border);
+    margin-top: 15px;
+    padding: 15px;
+}
+
+.agent-select .agent-select-right .agent-price .label {
+    font-weight: bold;
+}

src/route/proj/ProjEdit.tsx

@@ -68,7 +68,7 @@ export default function ProjEdit() {
                     <CardProjJump title="跳转"
                                   desc="请完善软件的介绍，详细介绍等基本信息"
                                   handleJump={() => {
-                                      console.log('跳转');
+                                      nav('/agent-select/2');
                                   }}
                     />
                 </StepProjEdit>

src/util/CommonUtil.ts

@@ -0,0 +1 @@
+export const errorImage = 'data:image/png;base64,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';