Skip to content

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

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

parent 947c578c
Expand all 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
This diff is collapsed.
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