Skip to content

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

feat:静态页添加

parent fdb0f80c
Show whitespace changes
Inline Side-by-side
Showing with 344 additions and 55 deletions
src/App.tsx
View file @ 467f6487
......@@ -6,7 +6,7 @@ import RouterConfig from "./components/RouterConfig";
const App: FC = () => {
return (
<HashRouter>
<Nav/>
{/* <Nav/> */}
<RouterConfig />
</HashRouter>
);
......
src/components/Nav.tsx
View file @ 467f6487
......@@ -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
View file @ 467f6487
......@@ -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
View file @ 467f6487
......@@ -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
View file @ 467f6487
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="客户名称" >
</div>): ('')}
{customInfoEdit?(
<Form.Item name="realName" label="客户名称" >
<Input placeholder="请输入客户名称" value={customInfo.realName}/>
</Form.Item>): ('')}
</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>
<Form.Item {...tailLayout}>
</div>):('')}
{/* <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 0 → 100644
View file @ 467f6487
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
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