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

src/components/RouterConfig.tsx

@@ -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

+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

@@ -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;
 }
@@ -269,3 +301,13 @@
     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

+.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

+.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

@@ -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,13 +207,17 @@ const layout = {
     getUserInfo();
     getExternalUserInfo()
     getWxLabels()
-  }, [])
+  }, )
   // const { getFieldsValue,getFieldDecorator } = this.props.form;
 
   return (
     <Spin spinning={loading}>
+      <div className="content">
         <div className="flex spaceBetween mg20">
-        <span className='wordKb'>用户看板</span>
+        
+          {
+            !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>
@@ -192,7 +227,8 @@ const layout = {
         <div className="custom mg20">
           <div className="flex spaceBetween customitem">
             <p className='word'>客户信息</p>
-          <img src={jt} alt="" className="more" onClick={testClick}/>
+            {/* <img src={jt} alt="" className="more" onClick={testClick}/> */}
+            <div className="more"  onClick={testClick}><RightOutlined /></div>
           </div>
           {/* <div className="flex">
             <span>{customInfo.realName || '-' }</span>
@@ -343,8 +379,8 @@ const layout = {
                   </div>
                   
                 </div>):('')}
-              {!open?<div className="dicon" onClick={updown.bind(this,'true') }><DownOutlined /></div>
-              :<div className="dicon" onClick={updown.bind(this,'false') }><UpOutlined /></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
@@ -361,6 +397,51 @@ const layout = {
             </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>
     </Spin>
   )
 }

src/pages/Order.tsx

+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

+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