feat:静态页添加

src/App.tsx

@@ -6,7 +6,7 @@ import RouterConfig from "./components/RouterConfig";
 const App: FC = () => {
   return (
     <HashRouter>
-      <Nav/>
+      {/* <Nav/> */}
       <RouterConfig />
     </HashRouter>
   );

src/components/Nav.tsx

@@ -10,7 +10,7 @@ const Nav: FC = () => {
         <Link to="/">首页</Link>
       </Menu.Item>
       <Menu.Item key="actions" icon={<SettingOutlined/>}>
-        <Link to="/actions">操作</Link>
+        <Link to="/findCustom">操作</Link>
       </Menu.Item>
       <Menu.Item key="externalUser" icon={<UserOutlined />}>
         <Link to="/external-user">人</Link>

src/components/RouterConfig.tsx

@@ -4,6 +4,7 @@ import Home from "../pages/Home";
 import Actions from "../pages/Actions";
 import ExternalUser from "../pages/ExternalUser";
 import ExternalChat from "../pages/ExternalChat";
+import FindCustom from "../pages/findCustom";
 
 const RouterConfig: FC = () => {
   return (
@@ -11,8 +12,8 @@ const RouterConfig: FC = () => {
       <Route exact path="/">
         <Home/>
       </Route>
-      <Route path="/actions">
-        <Actions/>
+      <Route path="/findCustom">
+        <FindCustom/>
       </Route>
       <Route path="/external-user">
         <ExternalUser/>

src/css/home.css

@@ -9,6 +9,9 @@ p{
 .spaceBetween{
     justify-content: space-between;
 }
+.flex-wrap{
+    flex-wrap: wrap;
+}
 .more{
     width:30px;
     height:30px;
@@ -68,12 +71,110 @@ p{
 .inner{
     padding:21px;
 }
-.mgl20{
-    margin-left:30px;
+.mgr20{
+    margin-right:30px;
 }
 .greyWord{
-    color:#A5ADB3
+    color:#A5ADB3;
+    line-height: 40px;
 }
 .showt{
     margin-bottom: 24px;
+}
+.labelStyle{
+    height: 24px;
+    background: #E6F1FC;
+    border-radius: 4px;
+    border: 1px solid #A3D0FD;
+    font-size: 10px;
+    font-weight: 400;
+    color: #1B9AEE;
+    line-height: 14px;
+    padding:0 10px;
+    line-height: 24px;
+    margin-right:10px;
+}
+.grey{
+    width:100%;
+    border-top: 1px solid #F3F3F3;
+}
+.greyb{
+    padding-bottom:20px;
+    border-bottom: 1px solid #F3F3F3;
+}
+.blue{
+    background-color: rgba(1,113,194,.05)!important;
+    color: #0171c2!important;
+    border: 1px solid rgba(1,113,194,.4)!important;
+}
+.green{
+    background: #ECFFEC !important;
+    border: 1px solid #038924 !important;
+    color: #038924 !important;
+}
+.orange{
+    background: #FFF7E6 !important;
+    border: 1px solid #F7B500 !important;
+    color: #F7B500 !important;
+}
+.red{
+    background: #FFEDED !important;
+    border: 1px solid #C21C07 !important;
+    color: #C21C07 !important;
+}
+.greyl{
+    background: #F7F7F7 !important;
+    border: 1px solid #8C8C8C !important;
+    color: #8C8C8C !important;
+}
+.tags{
+    border-radius: 4px !important;
+    height: 25px !important;
+    line-height: 24px !important;
+}
+.labelAdd{
+    border-bottom: 1px solid #F3F3F3;
+    padding: 28px 20px;
+}
+.line{
+    width: 31px;
+    height: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right:10px;
+    border-radius: 4px;
+}
+.innerline{
+    width: 16px;
+    height: 5px;
+    background: #0171C2;
+    border-radius: 14px;
+}
+.mgt20{
+    margin-top:20px;
+}
+.innerGreen{
+    background: #038924;
+}
+.innerOrgane{
+    background: #F7B500;
+}
+.innerRed{
+    background: #C21C07;
+}
+.innerGrey{
+    background: #8C8C8C;
+}
+.greyInt{
+    width:70%;
+    height: 36px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    border: 1px solid #D9D9D9;
+}
+.avatar{
+    width:60px;
+    height:60px;
 }
\ No newline at end of file

src/pages/Home.tsx

 import React, {FC, useEffect, useState} from "react";
 import Cookies from "js-cookie";
 import {fetchUser} from "../api";
-import {Spin,Form, Input, Button, Select,Radio,} from "antd";
+import {Spin,Form, Input, Button, Select,Radio,Tag} from "antd";
 import { SearchOutlined } from '@ant-design/icons';
 import './../css/home.css'
 import jt from './../assets/images/jt.png'
-
+import {jsSdk} from "../index"
+import {Link} from "react-router-dom";
+const {TextArea} = Input
 
 const Home: FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [user, setUser] = useState<UserResponse>();
   const [customInfoEdit,setCustomInfoEdit] = useState<boolean>(false);
+  const [labelValue,setlabelValue]= useState<string>('');
   const [customInfo,setCustomInfo] = useState<any>({
     realName:'whh',
     account_level :'一级',
@@ -30,6 +33,7 @@ const Home: FC = () => {
     keywords: '2',
 
   });
+  const [labels,setLabels] = useState<any>([{id:2,labelName:'跑步',color:'blue'},{id:2,labelName:'教育',color:'green'}]);
   const [idTypeOpt] = useState<any>([
     {
       value: '0',
@@ -91,30 +95,45 @@ const tailLayout = {
     console.log('aaaa')
     setCustomInfoEdit(!customInfoEdit)
   }
+  const labelAdd=(e:any)=>{
+    // console.log(e.target.value)
+    setlabelValue(e.target.value)
+    console.log(labelValue)
+    
+  }
   // 获取当前外部联系人信息
   const getUserInfo = async () => {
     // setLoading(true);
     // const userId = Cookies.get('userId')
     const userInfo:any = Cookies.get('userInfo')
     // const userInfo = await fetchUser(userId || '')
-
-    setUser(JSON.parse(userInfo))
+    console.log(userInfo)
+    // setUser(JSON.parse(userInfo))
     // setLoading(false)
   }
+  const getExternalUserInfo = async () => {
+    const res = await jsSdk.invoke<{ userId?: string }>('getCurExternalContact', {})
+    // alert(JSON.stringify(res))
+    if (!res || !res.userId) return
+
+    console.log('外部联系人 ID', res.userId);
+    debugger
+
+
+  }
 
   useEffect(() => {
-    getUserInfo().then()
+    getUserInfo();
+    getExternalUserInfo()
   }, [])
   // const { getFieldsValue,getFieldDecorator } = this.props.form;
 
   return (
     <Spin spinning={loading}>
-      <div>
-        <h1>欢迎回来，{user ? user.name: ''}</h1>
-      </div>
       <div className="flex spaceBetween mg20">
         <span className='wordKb'>用户看板</span>
-        <Button type="primary" icon={<SearchOutlined />}>查找客户</Button>
+        <Link to="/findCustom"><Button type="primary" icon={<SearchOutlined />}>查找客户</Button></Link>
+        
       </div>
       <div className="custom mg20">
         <div className="flex spaceBetween customitem">
@@ -125,30 +144,55 @@ const tailLayout = {
           <span>{customInfo.realName || '-' }</span>
           <div>{ customInfo.account_level }</div>
         </div> */}
-        <div className="flex spaceBetween">
-          <div className="inner">
+        <div className="">
+        {customInfoEdit?(
+              <div  className="labelAdd">
+                <div className='greyb'>
+                    {labels.map((item:any)=> <Tag closable className={"tags" +" "+item.color}>{item.labelName}</Tag>)}
+                </div>
+                <div className="flex mgt20">
+                  <span>添加标签：</span>
+                  {/* <TextArea style={{width: '100%', marginBottom: 8}} value={labelValue} onChange={e => labelAdd(e.target.value)}/> */}
+                  <input type="text" className="greyInt" defaultValue={labelValue} onChange={labelAdd}/>
+                </div>
+                <div className="flex flex-warp mgt20">
+                  <span>添加颜色：</span>
+                  <div className="line blue">
+                    <div className="innerline"></div>
+                  </div>
+                  <div className="line green"><div className="innerline innerGreen"></div></div>
+                  <div className="line orange"><div className="innerline innerOrgane"></div></div>
+                  <div className="line red"><div className="innerline innerRed"></div></div>
+                  <div className="line greyl"><div className="innerline innerGrey"></div></div>
+                </div>
+              </div>
+
+            ): ('')}
+          <div className="inner flex spaceBetween">
             <Form {...layout} name="control-hooks" onFinish={onFinish} initialValues={customInfo}>
-            <div className="flex spaceBetween showt">
+            {!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>): ('')}
+            </div>): ('')}
+            {customInfoEdit?(
+              <Form.Item name="realName" label="客户名称" >
+                  <Input  placeholder="请输入客户名称" value={customInfo.realName}/>
+                </Form.Item>
+            ): ('')}
               
-              {!customInfoEdit?(<div className="flex showt">
-                  <div className="flex">
+              {!customInfoEdit?(<div className="flex flex-wrap">
+                  <div className="flex mgr20">
                       <span className='greyWord'>性别：</span>
                       {customInfo.sexy===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 mgl20">
+                  <div className="flex mgr20">
                       <span className='greyWord'>手机号：</span>
                       <span>{customInfo.mobileNumber}</span>
                   </div>
-                  <div className="flex mgl20">
+                  <div className="flex">
                       <span className='greyWord'>积分：</span>
                       <span>{customInfo.point}</span>
                   </div>
@@ -179,34 +223,56 @@ const tailLayout = {
               {customInfoEdit?(<Form.Item name="point" label="积分" >
                 {customInfo.point}
               </Form.Item>):('')}
-              <Form.Item name="corp" label="公司" >
-                {customInfo.corp}
-              </Form.Item>
-              <Form.Item name="position" label="职务" >
-                {customInfo.position}
-              </Form.Item>
-              <Form.Item name="realName" label="最后跟进" >
-                {customInfo.position}
-              </Form.Item>
-              <Form.Item name="keywords" label="备注" >
-                {customInfo.keywords}
-              </Form.Item>
-              <Form.Item name="area" label="地区" >
-                {customInfo.area}
-              </Form.Item>
-              <Form.Item name="addr" label="收货地址" >
-                {customInfo.addr}
-              </Form.Item>
-              <Form.Item name="email" label="Email" >
-                {customInfo.email}
-              </Form.Item>
-              <Form.Item name="gyId" label="戈友ID" >
-                {customInfo.gyId}
-              </Form.Item>
-              {!customInfoEdit?(<Form.Item name="idType" label="证件类型" >{customInfo.idType}</Form.Item>):('')}
-              {!customInfoEdit?(<Form.Item name="idNumber" label="证件号">{customInfo.idNumber}</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>{customInfo.idType}</span>
+              </div>):('')}
+              {!customInfoEdit?(<div className="flex">
+                  <span className='greyWord'>证件号：</span>
+                  <span>{customInfo.idNumber}</span>
+              </div>):('')}
+              {!customInfoEdit?(<div className="labels grey">
+                <div className="greyWord">客户标签</div>
+                <div className="flex flex-warp ">
+                  {labels.map((item:any,idx:number)=><div className={"labelStyle" + " " +"color"+idx }>{item.labelName}</div>)}
+                </div>
+                
+              </div>):('')}
               
-              <Form.Item {...tailLayout}>
+              {/* <Form.Item {...tailLayout}>
                 <Button type="primary" htmlType="submit">
                   Submit
                 </Button>
@@ -216,7 +282,7 @@ const tailLayout = {
                 <Button type="link" htmlType="button" onClick={onFill}>
                   Fill form
                 </Button>
-              </Form.Item>
+              </Form.Item> */}
             </Form>
           </div>
         </div>

src/pages/findCustom.tsx

+import * as React from 'react'
+import {useCallback, useState} from 'react'
+import {jsSdk} from "../index";
+import {Button, Input,Table,Tabs,Space} from "antd";
+
+const {TextArea} = Input
+const { TabPane } = Tabs;
+
+const Actions: React.FC = () => {
+  const [msg, setMsg] = useState<string>('')
+  const [columns]=useState<any>([
+    {
+      title: '头像',
+      dataIndex: 'avatar',
+      render: (text:string, record:any) => (
+        <Space size="middle">
+          <img className='avatar' src={record.avatar} alt="" />
+        </Space>
+      ),
+    },
+    {
+      title: '昵称',
+      className: 'name',
+      dataIndex:'name',
+      align:'center'
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      align:'center'
+    },
+    {
+      title: '组织',
+      dataIndex: 'org',
+      align:'center'
+    },
+    {
+      title: '操作',
+      align:'center',
+      dataIndex: 'action',
+      render: (text:string, record:any) => (
+        <Space size="middle">
+          {record.link?
+          <Button type="primary" danger onClick={unlink.bind(this,record)}>取消关联</Button>:
+          <Button type="primary" onClick={link.bind(this,record)}>关联</Button>}
+        </Space>
+      ),
+    }
+  ])
+  const [listData, setListData] = useState<any>([
+    {
+      key: '1',
+      name: 'John Brown',
+      avatar: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
+      phone: '13323232323',
+      org:'行知',
+      link:true
+    },
+    {
+      key: '2',
+      name: 'John Brown2',
+      avatar: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
+      phone: '13323232323',
+      org:'行知',
+      link:false
+    }
+  ])
+  const [tabs]=useState<any>(['客户档案','纷享销客','戈友好物','戈友圈'])
+  // const tabIndex ='0'
+  const [tabIndex,setTabindex] = useState('0')
+  //事件
+  //tab更改事件
+  const callback = (e:any)=>{
+    console.log(e,tabIndex)
+    let newvalue = e
+    setTabindex((tabIndex:any)=>{
+      return newvalue
+    })
+    console.log(tabIndex)
+    // this.setSate({
+
+    // })
+  }
+  //关联
+  const link = (value:any,e:any)=>{
+    console.log(e)
+  }
+  //取消关联
+  const unlink = (value:any,e:any)=>{
+    console.log(e,value)
+  }
+  const sendMsg = useCallback(async () => {
+    if (!msg) alert('消息不能为空')
+
+    await jsSdk.invoke('sendChatMessage', {
+      msgtype: 'text',
+      text: {
+        content: msg
+      }
+    });
+  }, [msg])
+
+  return (
+    <div>
+      <Tabs defaultActiveKey={tabIndex} onChange={callback.bind(this)} >
+        {
+          tabs.map((item:any,idx:number)=> <TabPane tab={item} key={idx}>
+            <Table
+              columns={columns}
+              dataSource={listData}
+              scroll={{ x: 300 }}
+              bordered
+            />
+        </TabPane>)
+        }
+      </Tabs>
+    </div>
+  )
+}
+
+export default Actions