Skip to content

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

feat：接口对接，打包

parent 7f0d87d4
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 104 deletions
package.json
View file @ e4bdbaf3
......@@ -2,6 +2,7 @@
"name": "wecom-sidebar",
"version": "0.1.0",
"private": true,
"homepage":".",
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@babel/core": "7.12.3",
......
src/api/index.ts
View file @ e4bdbaf3
import axios from 'axios'
import qs from 'qs'
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// import qs from 'qs'
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
// 后端地址
// const baseURL = 'http://192.168.30.239:5000'
......@@ -114,8 +114,7 @@ export const addWxLabel = async (params:any) => {
}
// 删除
export const deleteWxLabel = async (data:any) => {
const response = await api.post('/user_center/deleteWxLabel',
[...data]
const response = await api.post('/user_center/deleteWxLabel', data
)
return response.data;
}
......
src/css/home.css
View file @ e4bdbaf3
......@@ -256,4 +256,16 @@
}
.none{
display: none;
}
.ssbox{
/* height:170px;
overflow: hidden; */
}
.dicon{
text-align: center;
color:#C7C7CC;
}
.back{
width:100%;
border-radius:0 !important;
}
\ No newline at end of file
src/pages/Home.tsx
View file @ e4bdbaf3
......@@ -2,7 +2,7 @@ import React, {FC, useEffect, useState} from "react";
import Cookies from "js-cookie";
import {fetchUser,getBaseInfoByWxId,addWxLabel,getWxLabel,deleteWxLabel,updateBaseInfoFromCompanyWx} from "../api";
import {Spin,Form, Input, Button, Select,Radio,Tag} from "antd";
import { SearchOutlined } from '@ant-design/icons';
import { SearchOutlined,DownOutlined,UpOutlined } from '@ant-design/icons';
import './../css/home.css'
import jt from './../assets/images/jt.png'
import {jsSdk} from "../index"
......@@ -17,26 +17,27 @@ const Home: FC = () => {
const [labelColor,setlabelColor]= useState<string>('blue');
const [cindex,setIndex] = useState<any>(0)
const [customInfo,setCustomInfo] = useState<any>({});
const [open,setOpen]= useState<boolean>(false);
const [labels,setLabels] = useState<any>([{id:2,labelName:'跑步',color:'blue'},{id:2,labelName:'教育',color:'green'}]);
const [idTypeOpt] = useState<any>([
{
value: '0',
value: 0,
label: '身份证',
},
{
value: '1',
value: 1,
label: '护照',
},
{
value: '2',
value: 2,
label: '港澳回乡证',
},
{
value: '3',
value: 3,
label: '台胞证',
},
{
value: '4',
value: 4,
label: '其它',
},
])
......@@ -84,6 +85,11 @@ const tailLayout = {
console.log(customInfo)
debugger
};
const updown=()=>(e:any)=>{
console.log(e)
debugger
setOpen(e)
}
const testClick=(): void=>{
console.log('aaaa')
setCustomInfoEdit(!customInfoEdit)
......@@ -120,6 +126,7 @@ const tailLayout = {
let data:any = {wxId:res.userId}
const userInfo = await getBaseInfoByWxId(data)
if(userInfo.data && userInfo.data.userInfo){
form.setFieldsValue({...userInfo.data.userInfo});
setCustomInfo({...userInfo.data.userInfo})
}
console.log(userInfo)
......@@ -159,6 +166,12 @@ const tailLayout = {
}
}
}
const onChange=()=>{
}
const onSearch=()=>{
}
useEffect(() => {
getUserInfo();
......@@ -194,8 +207,23 @@ const tailLayout = {
</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" onChange={labelAdd} onKeyDown={getInput}/>
<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>
......@@ -211,103 +239,104 @@ const tailLayout = {
): ('')}
<div className="inner flex spaceBetween">
<Form {...layout} name="control-hooks" onFinish={onFinish} initialValues={customInfo}>
{!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} defaultValue={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>
)}
<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 mgr20">
<span className='greyWord'>手机号：</span>
<span>{customInfo.mobileNumber || '-'}</span>
<div className="flex">
<span className='greyWord'>职务：</span>
<span>{customInfo.position || '-'}</span>
</div>
<div className="flex">
<span className='greyWord'>积分：</span>
<span>{customInfo.point || '-'}</span>
<span className='greyWord'>最后跟进：</span>
<span>{customInfo.corp || '-'}</span>
</div>
</div>):('')}
{customInfoEdit?( <Form.Item name="sex" label="性别" >
<Radio.Group value={customInfo.sex}>
<Radio value={1} checked={customInfo.sex===1}><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></Radio>
<Radio value={2} checked={customInfo.sex===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}
defaultValue={idTypeOptObj[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} defaultValue={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 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="flex">
<span className='greyWord'>证件类型：</span>
<span>{idTypeOptObj[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-wrap w100">
......@@ -315,7 +344,8 @@ const tailLayout = {
</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
......@@ -327,6 +357,7 @@ const tailLayout = {
Fill form
</Button>
</Form.Item> */}
</Form>
</div>
</div>
......
src/pages/findCustom.tsx
View file @ e4bdbaf3
......@@ -4,6 +4,8 @@ import {jsSdk} from "../index";
import {Button, Input,Table,Tabs,Space} from "antd";
import {SearchOutlined } from '@ant-design/icons';
import {selectUserBase,linkData,unlinkData} from "../api";
import creatHistory from 'history/createHashHistory' //返回上一页这段代码
const history = creatHistory();
const {TextArea} = Input
const { TabPane } = Tabs;
......@@ -130,6 +132,9 @@ const Actions: React.FC = () => {
getUserBase()
}
}
const back = ()=>{
history.goBack()
}
useEffect(() => {
getUserBase()
......@@ -137,6 +142,7 @@ const Actions: React.FC = () => {
return (
<div>
<Button type='primary' className='back' onClick={back.bind(this)}>返回</Button>
<div className="flex search">
<Input className='searchInt' allowClear placeholder="请输入客户信息" prefix={<SearchOutlined />} onChange={inputChange} onKeyDown={getInput}/>
{/* <Button size='small'>取消</Button> */}
......
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