Skip to content

W
wecom-sidebar
Commit dc3b17d7 authored by Aivs's avatar Aivs
Browse files
Options

feat:订单信息，客户信息构建

parent 947c578c
Hide whitespace changes
Inline Side-by-side
Showing with 718 additions and 184 deletions
src/components/RouterConfig.tsx
View file @ dc3b17d7
......@@ -5,6 +5,9 @@ import Actions from "../pages/Actions";
import ExternalUser from "../pages/ExternalUser";
import ExternalChat from "../pages/ExternalChat";
import FindCustom from "../pages/findCustom";
import Order from "../pages/Order";
import Person from "../pages/person";
const RouterConfig: FC = () => {
return (
......@@ -21,6 +24,12 @@ const RouterConfig: FC = () => {
<Route path="/external-chat">
<ExternalChat/>
</Route>
<Route path="/Order">
<Order/>
</Route>
<Route path="/Person">
<Person/>
</Route>
</Switch>
)
}
......
src/components/Top.tsx 0 → 100644
View file @ dc3b17d7
import React, {FC} from "react";
import {Menu} from "antd";
import {HomeOutlined, SettingOutlined, UsergroupAddOutlined, UserOutlined} from "@ant-design/icons";
import {Link} from "react-router-dom";
import {LeftOutlined,DownOutlined,RightOutlined } from '@ant-design/icons';
import { useHistory} from 'react-router-dom'
// type selfProps = {
// text: string;
// };
const Top: FC = () => {
const location = useHistory()
const back=async ()=>{
location.goBack()
}
return (
<div className="orderItem" ><LeftOutlined onClick={back}/></div>
// <Menu mode="horizontal">
// <Menu.Item key="home" icon={<HomeOutlined/>}>
// <Link to="/">首页</Link>
// </Menu.Item>
// <Menu.Item key="actions" icon={<SettingOutlined/>}>
// <Link to="/findCustom">操作</Link>
// </Menu.Item>
// <Menu.Item key="externalUser" icon={<UserOutlined />}>
// <Link to="/external-user">人</Link>
// </Menu.Item>
// <Menu.Item key="externalChat" icon={<UsergroupAddOutlined />}>
// <Link to="/external-chat">群</Link>
// </Menu.Item>
// </Menu>
)
}
export default Top;
src/css/home.css
View file @ dc3b17d7
......@@ -12,30 +12,38 @@
.flex-wrap{
flex-wrap: wrap;
}
.content{
padding-bottom:114px;
}
.more{
width:30px;
height:30px;
/* width:30px;
height:30px; */
color:#C7C7CC;
font-size: 14px;
font-weight: 600;
}
.custom{
background: #FFFFFF;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 14px 0px rgba(168, 168, 168, 0.3);
border-radius: 4px;
border: 1px solid #E1E1E2;
border: 1px solid #d9d9d9;
padding:0 20px;
}
.mg20{
margin: 20px;
}
.customitem{
height: 44px;
background: #F9F9F9;
/* background: #F9F9F9; */
border-radius: 4px 4px 0px 0px;
border: 1px solid #E1E1E2;
padding:0 20px;
border-bottom: 1px solid #d9d9d9;
}
.word{
font-size: 14px;
margin:0;
color:#3B3B50;
font-weight: 400;
color: #9B9B9B;
line-height: 41px;
}
.wordKb{
font-size: 18px;
......@@ -78,6 +86,30 @@
color:#A5ADB3;
line-height: 40px;
}
.blackWord{
font-size: 14px;
font-weight: 400;
color: #000000;
line-height: 54px;
}
.blackWord3B{
font-size: 14px;
font-weight: 600;
color: #3B3B50;
line-height: 54px;
}
.redword{
font-size: 14px;
font-weight: 600;
color: #E55151;
line-height: 54px;
}
.greenWord{
font-size: 14px;
font-weight: 600;
color: #44D7B6;
line-height: 54px;
}
.showt{
margin-bottom: 24px;
}
......@@ -268,4 +300,14 @@
.back{
width:100%;
border-radius:0 !important;
}
.ssbox{
height: 140px;
overflow: hidden;
}
.order .lineD9{
border-bottom: 1px solid #d9d9d9;
}
.mgr50{
margin-right: 30px;
}
\ No newline at end of file
src/css/order.css 0 → 100644
View file @ dc3b17d7
.flex p{
margin:0;
padding:0;
}
.flex{
display: flex;
align-items: center;
}
.spaceBetween{
justify-content: space-between;
}
.flex-wrap{
flex-wrap: wrap;
}
.orderItem{
padding:10px 15px;
font-size: 17px;
font-weight: 400;
color: #000000;
line-height: 24px;
background: #F5F5F5;
box-shadow: inset 0px 0px 0px 0px #D9D9D9;
}
.orders{
border-bottom: 1px solid #E1E1E2;
}
.head{
height: 44px;
background: linear-gradient(180deg, #FFFFFF 0%, #F1F2F8 100%);
padding:0 20px;
}
.game p{
font-size: 14px;
font-weight: 400;
color: #3B3B50;
line-height: 28px;
}
.game .greyWord{
font-size: 12px;
font-weight: 400;
color: #A5ADB3;
line-height: 24px;
}
.jt{
color:#A6A6A6;
font-size: 14px;
}
.pad20{
padding:20px 0px;
border-bottom: 1px solid #F3F3F3;
width:98%;
margin:auto;
}
\ No newline at end of file
src/css/person.css 0 → 100644
View file @ dc3b17d7
.flex p{
margin:0;
padding:0;
}
.flex{
display: flex;
align-items: center;
}
.spaceBetween{
justify-content: space-between;
}
.flex-wrap{
flex-wrap: wrap;
}
.orderItem{
padding:10px 15px;
font-size: 17px;
font-weight: 400;
color: #000000;
line-height: 24px;
background: #F5F5F5;
box-shadow: inset 0px 0px 0px 0px #D9D9D9;
}
.orders{
border-bottom: 1px solid #E1E1E2;
}
.head{
height: 44px;
background: linear-gradient(180deg, #FFFFFF 0%, #F1F2F8 100%);
padding:0 20px;
}
.detail{
height: 48px;
background: #FAFAFA;
box-shadow: 0px 1px 0px 0px #D4D4D4;
font-size: 14px;
font-weight: 400;
color: #3B3B50;
line-height: 48px;
padding-left:22px;
}
.customDetail{
padding:15px 20px;
}
.leftword{
font-size: 14px;
font-weight: 400;
color: #9B9B9B;
line-height: 34px;
}
.rightword{
font-size: 14px;
font-weight: 400;
color: #000000;
line-height: 34px;
}
.avatar{
width: 45px;
height: 45px;
border-radius: 50%;
}
src/pages/Home.tsx
View file @ dc3b17d7
......@@ -2,11 +2,12 @@ import React, {FC, useEffect, useState} from "react";
import Cookies from "js-cookie";
import {getBaseInfoByWxId,addWxLabel,getWxLabel,deleteWxLabel,updateBaseInfoFromCompanyWx} from "../api";
import {Spin,Form, Input, Button, Select,Radio,Tag} from "antd";
import { SearchOutlined,DownOutlined,UpOutlined } from '@ant-design/icons';
import { SearchOutlined,DownOutlined,UpOutlined,RightOutlined,LeftOutlined } from '@ant-design/icons';
import './../css/home.css'
import jt from './../assets/images/jt.png'
// import jt from './../assets/images/jt.png'
import {jsSdk} from "../index"
import {Link} from "react-router-dom";
// import { spawn } from "child_process";
const Home: FC = () => {
const [loading] = useState<boolean>(false);
......@@ -48,6 +49,34 @@ const Home: FC = () => {
'3':'台胞证',
"4":'其它'
}
)
const [orderList] = useState<any>(
[
{
name:'戈有好物',
price:"2345.23"
},
{
name:'缤纷逍客',
price:"12.09万"
},
{
name:'客户中心',
price:"12.09万"
}
]
)
const [gyqList] = useState<any>(
[
{
name:'本月打卡里程',
value:"335"
},
{
name:'最后打卡时间',
value:"2020-03-01 / 15:32"
}
]
)
const { Option } = Select;
......@@ -84,14 +113,12 @@ const layout = {
// console.log(customInfo)
// debugger
// };
const updown=()=>(e:any)=>{
console.log(e)
debugger
const updown=(e:boolean)=>{
setOpen(e)
}
const testClick=(): void=>{
console.log('aaaa')
setCustomInfoEdit(!customInfoEdit)
setOpen(true)
}
const labelAdd=(e:any)=>{
// console.log(e.target.value)
......@@ -118,6 +145,10 @@ const layout = {
const res = await updateBaseInfoFromCompanyWx(data)
console.log(res)
}
const back = async ()=>{
debugger
console.log('dddd')
}
const getExternalUserInfo = async () => {
const res = await jsSdk.invoke<{ userId?: string }>('getCurExternalContact', {})
if (!res || !res.userId) return
......@@ -176,188 +207,238 @@ const layout = {
getUserInfo();
getExternalUserInfo()
getWxLabels()
}, [])
}, )
// const { getFieldsValue,getFieldDecorator } = this.props.form;
return (
<Spin spinning={loading}>
<div className="flex spaceBetween mg20">
<span className='wordKb'>用户看板</span>
{
!customInfoEdit? <Link to="/findCustom"><Button type="primary" icon={<SearchOutlined />}>查找客户</Button></Link>:
<Button className="save" type="primary" onClick={save}>保存</Button>
}
<div className="content">
<div className="flex spaceBetween mg20">
</div>
<div className="custom mg20">
<div className="flex spaceBetween customitem">
<p className='word'>客户信息</p>
<img src={jt} alt="" className="more" onClick={testClick}/>
{
!customInfoEdit? <span className='wordKb'>用户看板中心</span>: <span className='wordKb'><LeftOutlined onClick={back}/>客户信息</span>
}
{
!customInfoEdit? <Link to="/findCustom"><Button type="primary" icon={<SearchOutlined />}>查找客户</Button></Link>:
<Button className="save" type="primary" onClick={save}>保存</Button>
}
</div>
{/* <div className="flex">
<span>{customInfo.realName || '-' }</span>
<div>{ customInfo.account_level }</div>
</div> */}
<div className="">
{customInfoEdit?(
<div className="labelAdd">
<div className='greyb'>
{labels.map((item:any)=> <Tag closable onClose={deleteLabel.bind(this,item)} className={"tags" +" "+item.companyWxLabelColor}>{item.companyWxLabel}</Tag>)}
</div>
<div className="flex mgt20">
<span>添加标签：</span>
{/* {labelValue} */}
{/* <TextArea style={{width: '100%', marginBottom: 8}} value={labelValue} onChange={e => labelAdd(e.target.value)}/> */}
<input type="text" className="greyInt" value={labelValue} onChange={labelAdd} onKeyDown={getInput}/>
{/* <Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input:any, option:any) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select> */}
</div>
<div className="flex flex-warp mgt20">
<span>添加颜色：</span>
<div className={cindex===0?"border0 line blue":"line blue"} onClick={addColor.bind(this,'blue',0)}>
<div className="innerline"></div>
<div className="custom mg20">
<div className="flex spaceBetween customitem">
<p className='word'>客户信息</p>
{/* <img src={jt} alt="" className="more" onClick={testClick}/> */}
<div className="more" onClick={testClick}><RightOutlined /></div>
</div>
{/* <div className="flex">
<span>{customInfo.realName || '-' }</span>
<div>{ customInfo.account_level }</div>
</div> */}
<div className="">
{customInfoEdit?(
<div className="labelAdd">
<div className='greyb'>
{labels.map((item:any)=> <Tag closable onClose={deleteLabel.bind(this,item)} className={"tags" +" "+item.companyWxLabelColor}>{item.companyWxLabel}</Tag>)}
</div>
<div className={cindex===1?"border1 line green":"line green"} onClick={addColor.bind(this,'green',1)}><div className="innerline innerGreen"></div></div>
<div className={cindex===2?"border2 line orange":"line orange"} onClick={addColor.bind(this,'orange',2)}><div className="innerline innerOrgane"></div></div>
<div className={cindex===3?"border3 line red":"line red"} onClick={addColor.bind(this,'red',3)}><div className="innerline innerRed"></div></div>
<div className={cindex===4?"border4 line greyl":"line greyl"} onClick={addColor.bind(this,'greyl',4)}><div className="innerline innerGrey"></div></div>
</div>
</div>
): ('')}
<div className="inner flex spaceBetween">
<Form {...layout} name="control-hooks" onFinish={onFinish} initialValues={customInfo} form={form}>
<div className={!open?"ssbox":""}>
{!customInfoEdit?(<div className="flex spaceBetween showt">
<span>{customInfo.realName || '-' }</span>
<div className='grad'>{ customInfo.account_level || '重要客户' }</div>
</div>): ('')}
{customInfoEdit?(
<Form.Item name="realName" label="客户名称" >
<Input placeholder="请输入客户名称" value={customInfo.realName}/>
</Form.Item>
): ('')}
{!customInfoEdit?(<div className="flex flex-wrap">
<div className="flex mgr20">
<span className='greyWord'>性别：</span>
{customInfo.sex===1?(
<div><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></div>)
:(
<div><span className="radio-wight radio-text radio-text-w"> ♂</span> <span className="radio-text radio-text-w"> 女</span></div>
)}
</div>
<div className="flex mgr20">
<span className='greyWord'>手机号：</span>
<span>{customInfo.mobileNumber || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>积分：</span>
<span>{customInfo.point || '-'}</span>
</div>
</div>):('')}
{customInfoEdit?( <Form.Item name="sex" label="性别" >
<Radio.Group value={customInfo.sex}>
<Radio value={1} ><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></Radio>
<Radio value={2}><span className="radio-wight radio-text radio-text-w"> ♀</span> <span className="radio-text radio-text-w"> 女</span></Radio>
</Radio.Group>
</Form.Item>)
:('')}
{customInfoEdit?(<Form.Item name="idType" label="证件类型" >
<Select
placeholder="请选择证件类型"
value={customInfo.idType}
allowClear
<div className="flex mgt20">
<span>添加标签：</span>
{/* {labelValue} */}
{/* <TextArea style={{width: '100%', marginBottom: 8}} value={labelValue} onChange={e => labelAdd(e.target.value)}/> */}
<input type="text" className="greyInt" value={labelValue} onChange={labelAdd} onKeyDown={getInput}/>
{/* <Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={(input:any, option:any) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{idTypeOpt.map((item:any) => <Option value={item.value}>{item.label}</Option>)}
</Select>
</Form.Item>):('')}
{customInfoEdit?(<Form.Item name="idNumber" label="证件号" >
<Input placeholder="请输入证件号" value={customInfo.idNumber}/>
</Form.Item>):('')}
{/* {customInfoEdit?(<Form.Item name="mobileNumber" label="手机号" >
{customInfo.mobileNumber}
</Form.Item>):('')}
{customInfoEdit?(<Form.Item name="point" label="积分" >
{customInfo.point}
</Form.Item>):('')} */}
<div className="flex">
<span className='greyWord'>公司：</span>
<span>{customInfo.corp || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>职务：</span>
<span>{customInfo.position || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>最后跟进：</span>
<span>{customInfo.corp || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>备注：</span>
<span>{customInfo.keywords}</span>
</div>
<div className="flex">
<span className='greyWord'>地区：</span>
<span>{customInfo.area || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>收货地址：</span>
<span>{customInfo.addr || '-'}</span>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select> */}
</div>
<div className="flex">
<span className='greyWord'>Email：</span>
<span>{customInfo.email || '-'}</span>
<div className="flex flex-warp mgt20">
<span>添加颜色：</span>
<div className={cindex===0?"border0 line blue":"line blue"} onClick={addColor.bind(this,'blue',0)}>
<div className="innerline"></div>
</div>
<div className={cindex===1?"border1 line green":"line green"} onClick={addColor.bind(this,'green',1)}><div className="innerline innerGreen"></div></div>
<div className={cindex===2?"border2 line orange":"line orange"} onClick={addColor.bind(this,'orange',2)}><div className="innerline innerOrgane"></div></div>
<div className={cindex===3?"border3 line red":"line red"} onClick={addColor.bind(this,'red',3)}><div className="innerline innerRed"></div></div>
<div className={cindex===4?"border4 line greyl":"line greyl"} onClick={addColor.bind(this,'greyl',4)}><div className="innerline innerGrey"></div></div>
</div>
<div className="flex">
<span className='greyWord'>戈友ID：</span>
<span>{customInfo.gyId || '-'}</span>
</div>
{!customInfoEdit?(
<div className="flex">
<span className='greyWord'>证件类型：</span>
<span>{idTypeOptObj[customInfo.idType] || '-'}</span>
</div>):('')}
{!customInfoEdit?(<div className="flex">
<span className='greyWord'>证件号：</span>
<span>{customInfo.idNumber || '-'}</span>
</div>):('')}
</div>
{!customInfoEdit?(<div className="labels grey">
<div className="greyWord">客户标签</div>
<div className="flex flex-wrap w100">
{labels.map((item:any,idx:number)=><div className={"labelStyle" + " " +item.companyWxLabelColor }>{item.companyWxLabel}</div>)}
</div>
): ('')}
<div className="inner flex spaceBetween">
<Form {...layout} name="control-hooks" onFinish={onFinish} initialValues={customInfo} form={form}>
<div className={!open?"ssbox":""}>
{!customInfoEdit?(<div className="flex spaceBetween showt">
<span>{customInfo.realName || '-' }</span>
<div className='grad'>{ customInfo.account_level || '重要客户' }</div>
</div>): ('')}
{customInfoEdit?(
<Form.Item name="realName" label="客户名称" >
<Input placeholder="请输入客户名称" value={customInfo.realName}/>
</Form.Item>
): ('')}
{!customInfoEdit?(<div className="flex flex-wrap">
<div className="flex mgr20">
<span className='greyWord'>性别：</span>
{customInfo.sex===1?(
<div><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></div>)
:(
<div><span className="radio-wight radio-text radio-text-w"> ♂</span> <span className="radio-text radio-text-w"> 女</span></div>
)}
</div>
<div className="flex mgr20">
<span className='greyWord'>手机号：</span>
<span>{customInfo.mobileNumber || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>积分：</span>
<span>{customInfo.point || '-'}</span>
</div>
</div>):('')}
{customInfoEdit?( <Form.Item name="sex" label="性别" >
<Radio.Group value={customInfo.sex}>
<Radio value={1} ><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></Radio>
<Radio value={2}><span className="radio-wight radio-text radio-text-w"> ♀</span> <span className="radio-text radio-text-w"> 女</span></Radio>
</Radio.Group>
</Form.Item>)
:('')}
{customInfoEdit?(<Form.Item name="idType" label="证件类型" >
<Select
placeholder="请选择证件类型"
value={customInfo.idType}
allowClear
>
{idTypeOpt.map((item:any) => <Option value={item.value}>{item.label}</Option>)}
</Select>
</Form.Item>):('')}
{customInfoEdit?(<Form.Item name="idNumber" label="证件号" >
<Input placeholder="请输入证件号" value={customInfo.idNumber}/>
</Form.Item>):('')}
{/* {customInfoEdit?(<Form.Item name="mobileNumber" label="手机号" >
{customInfo.mobileNumber}
</Form.Item>):('')}
{customInfoEdit?(<Form.Item name="point" label="积分" >
{customInfo.point}
</Form.Item>):('')} */}
<div className="flex">
<span className='greyWord'>公司：</span>
<span>{customInfo.corp || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>职务：</span>
<span>{customInfo.position || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>最后跟进：</span>
<span>{customInfo.corp || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>备注：</span>
<span>{customInfo.keywords}</span>
</div>
<div className="flex">
<span className='greyWord'>地区：</span>
<span>{customInfo.area || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>收货地址：</span>
<span>{customInfo.addr || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>Email：</span>
<span>{customInfo.email || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>戈友ID：</span>
<span>{customInfo.gyId || '-'}</span>
</div>
{!customInfoEdit?(
<div className="flex">
<span className='greyWord'>证件类型：</span>
<span>{idTypeOptObj[customInfo.idType] || '-'}</span>
</div>):('')}
{!customInfoEdit?(<div className="flex">
<span className='greyWord'>证件号：</span>
<span>{customInfo.idNumber || '-'}</span>
</div>):('')}
</div>
{!customInfoEdit?(<div className="labels grey">
<div className="greyWord">客户标签</div>
<div className="flex flex-wrap w100">
{labels.map((item:any,idx:number)=><div className={"labelStyle" + " " +item.companyWxLabelColor }>{item.companyWxLabel}</div>)}
</div>
</div>):('')}
{!open?<div className="dicon" onClick={updown.bind(this,true) }><DownOutlined /></div>
:<div className="dicon" onClick={updown.bind(this,false) }><UpOutlined /></div>}
{/* <Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Form.Item> */}
</div>):('')}
{!open?<div className="dicon" onClick={updown.bind(this,'true') }><DownOutlined /></div>
:<div className="dicon" onClick={updown.bind(this,'false') }><UpOutlined /></div>}
{/* <Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Form.Item> */}
</Form>
</Form>
</div>
</div>
</div>
<div className="custom mg20">
<div className="flex spaceBetween customitem">
<p className='word'>订单信息</p>
{/* <img src={jt} alt="" className="more" onClick={testClick}/> */}
<Link to="/order"><div className="more"><RightOutlined /></div></Link>
</div>
<div className="order">
{
orderList.map((item:any,idx:number)=>
<div className={(idx<orderList.length-1)?'lineD9 flex spaceBetween':'flex spaceBetween'}>
<span className="blackWord">{item.name}</span>
<p>
<span className='greyWord'>订单总额：</span>
<span className='greenWord mgr50'>{item.price}元</span>
</p>
</div>
)
}
</div>
</div>
<div className="custom mg20">
<div className="flex spaceBetween customitem">
<p className='word'>戈友圈</p>
{/* <img src={jt} alt="" className="more" onClick={testClick}/> */}
<div className="more" onClick={testClick}><RightOutlined /></div>
</div>
<div className="order">
{
gyqList.map((item:any,idx:number)=>
<div className={(idx<gyqList.length-1)?'lineD9 flex spaceBetween':'flex spaceBetween'}>
<span className="blackWord">{item.name}</span>
<p>
<span className={idx!==0?'blackWord3B':'redword'}>{item.value}</span>
{idx===0? <span className="redword"> km</span>:''}
</p>
</div>
)
}
</div>
</div>
</div>
......
src/pages/Order.tsx 0 → 100644
View file @ dc3b17d7
import * as React from 'react'
import {useState} from 'react'
import {LeftOutlined,DownOutlined,RightOutlined } from '@ant-design/icons';
import './../css/order.css'
import { useHistory,Link ,withRouter} from 'react-router-dom'
const Order: React.FC = () => {
const history = useHistory()
const [openFlag, setOpenFlag] = useState<any>([true,false,false,false])
const [customData, setCustomData] = useState<any>([
{
id:1,
name:'第十六届商学院戈壁挑战赛',
team:'AB队'
},
{
name:'第十六届商学院戈壁挑战赛',
team:'AB队'
},
{
name:'第十六届商学院戈壁挑战赛',
team:'AB队'
}
])
const open = async (index:any)=>{
let arr = [...openFlag]
arr[index] = !arr[index]
setOpenFlag(arr)
}
const Goto = async (props:any,id:any)=>{
// // 页面跳转方法
history.push({pathname: '/Person', state: { id }})
}
return (
<div>
<div className="orderItem"><LeftOutlined/>订单信息</div>
<div className="orders">
<div className="flex spaceBetween head">
<p>客户中心{openFlag}</p>
<p onClick={open.bind(this,0)}>
{
openFlag[0]?<DownOutlined/>:<RightOutlined/>
}
</p>
</div>
{
openFlag[0]?customData.map((e:any) =>
<div className="flex spaceBetween pad20">
<div className="game">
<p className='greyWord'>赛事名称</p>
<p>{e.name}</p>
</div>
<div className="game">
<p className='greyWord'>分组</p>
<p>{e.team}</p>
</div>
<div className="jt" onClick={Goto.bind(this,e.id)}><RightOutlined/></div>
</div>
):null
}
</div>
<div className="orders">
<div className="flex spaceBetween head">
<p>戈有好物</p>
<p onClick={open.bind(this,1)}>
{
openFlag[1]?<DownOutlined/>:<RightOutlined/>
}
</p>
</div>
</div>
<div className="orders">
<div className="flex spaceBetween head">
<p>纷享销客-商机2.0</p>
<p onClick={open.bind(this,2)}>
{
openFlag[2]?<DownOutlined/>:<RightOutlined/>
}
</p>
</div>
</div>
<div className="orders">
<div className="flex spaceBetween head">
<p>纷享销客-订单</p>
<p onClick={open.bind(this,3)}>
{
openFlag[3]?<DownOutlined/>:<RightOutlined/>
}
</p>
</div>
</div>
</div>
)
}
export default Order
src/pages/person.tsx 0 → 100644
View file @ dc3b17d7
import * as React from 'react'
import {useState,useEffect} from 'react'
import {LeftOutlined,DownOutlined,RightOutlined } from '@ant-design/icons';
import './../css/person.css'
import { } from 'react-router-dom'
import { useHistory} from 'react-router-dom'
// import Top from './../components/Top'
const Person: React.FC = () => {
const location = useHistory()
const [customData, setCustomData] = useState<any>({
id:33599
})
const back=async ()=>{
location.goBack()
}
//路由跳转过来携带的数据
const GetRouterData = async ()=>{
console.log(location, 'props')
}
useEffect(() => {
GetRouterData()
}, )
return (
<div>
{/* <Top text={'dddd'}/> */}
<div className="orderItem" ><LeftOutlined onClick={back}/>客户中心</div>
<div className="detail">详细信息</div>
<div className="customDetail">
<div className="flex spaceBetween">
<p className='leftword'>ID:</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>证件姓名：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>出生日期：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>微信号：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>赛事名称：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>分组：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>证件类型：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>电话：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>性别：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>邮箱：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>证件号：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>操作者电话：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>昵称：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>性别：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>头像：</p>
<img className='avatar' alt="" src=""></img>
</div>
<div className="flex spaceBetween">
<p className='leftword'>组织ID：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>是否在线支持：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>价格：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>国籍：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>省：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>市：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>区：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>详细地址：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>行业：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>公司：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>职务：</p>
<p className='rightword'>{customData.id}</p>
</div>
<div className="flex spaceBetween">
<p className='leftword'>职务：</p>
<p className='rightword'>{customData.id}</p>
</div>
</div>
</div>
)
}
export default Person
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment