feat:接口对接，切换到行知探索的企业微信配置

src/api/index.ts

 import axios from 'axios'
+import qs from 'qs'
+axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 
 
 // 后端地址
 // const baseURL = 'http://192.168.30.239:5000'
@@ -96,5 +98,30 @@ export const unlinkData = async (params:any) => {
   })
   return response.data;
 }
-
+//获取标签
+export const getWxLabel = async (params:any) => {
+  const response = await api.get('/user_center/getWxLabel', {
+    params
+  })
+  return response.data;
+}
+// 创建标签
+export const addWxLabel = async (params:any) => {
+  const response = await api.get('/user_center/addWxLabel', {
+    params
+  })
+  return response.data;
+}
+// 删除
+export const deleteWxLabel = async (data:any) => {
+  const response = await api.post('/user_center/deleteWxLabel', 
+    [...data]
+  )
+  return response.data;
+}
+// 更新用户信息
+export const updateBaseInfoFromCompanyWx = async (data:any) => {
+  const response = await api.post('/user_center/updateBaseInfoFromCompanyWx', data)
+  return response.data;
+}
 export default api

src/css/home.css

@@ -93,6 +93,7 @@
     padding:0 10px;
     line-height: 24px;
     margin-right:10px;
+    margin-bottom:10px;
 }
 .grey{
     width:100%;
@@ -131,6 +132,7 @@
     border-radius: 4px !important;
     height: 25px !important;
     line-height: 24px !important;
+    margin-bottom:10px !important
 }
 .labelAdd{
     border-bottom: 1px solid #F3F3F3;
@@ -144,6 +146,7 @@
     align-items: center;
     margin-right:10px;
     border-radius: 4px;
+    border:0 !important;
 }
 .innerline{
     width: 16px;
@@ -232,3 +235,25 @@
     font-size: 17px;
     margin-bottom:18px;
 }
+.save{
+    background-color: #e55151!important;
+    border-color:#e55151 !important;
+}
+.border0{
+    border: 1px solid rgba(1,113,194,.4)!important;
+}
+.border1{
+    border: 1px solid #038924 !important;
+}
+.border2{
+    border: 1px solid #F7B500 !important;
+}
+.border3{
+    border: 1px solid #C21C07 !important;
+}
+.border4{
+    border: 1px solid #8C8C8C !important;
+}
+.none{
+    display: none;
+}
\ No newline at end of file

src/lib/utils/initSdk.ts

@@ -23,7 +23,7 @@ const initSdk = async (config: Config, getSignatures: GetSignatures) => {
   const configRes = await jsSdk.config({
     beta: true,
     debug: false, 
-    appId: 'ww25792c97eaa37ba7',
+    appId: corpId,
     timestamp: signaturesRes.meta.timestamp,
     nonceStr: signaturesRes.meta.noncestr,
     signature: signaturesRes.corp.signature,

src/pages/Home.tsx

 import React, {FC, useEffect, useState} from "react";
 import Cookies from "js-cookie";
-import {fetchUser,getBaseInfoByWxId} from "../api";
+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 './../css/home.css'
@@ -11,28 +11,12 @@ const {TextArea} = Input
 
 const Home: FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
-  const [user, setUser] = useState<UserResponse>();
+  const [userId, setUserId] = useState<any>('');
   const [customInfoEdit,setCustomInfoEdit] = useState<boolean>(false);
   const [labelValue,setlabelValue]= useState<string>('');
-  const [customInfo,setCustomInfo] = useState<any>({
-    realName:'whh',
-    account_level :'一级',
-    sexy:1,
-    idType:'1',
-    idNumber:'1233',
-    mobileNumber: '333',
-    point: '112',
-    corp: '1',
-    position: '2',
-    lastTime: '333',
-    note: '33',
-    area: '3',
-    addr: '3',
-    email: '3',
-    gyId: '2',
-    keywords: '2',
-
-  });
+  const [labelColor,setlabelColor]= useState<string>('blue');
+  const [cindex,setIndex] = useState<any>(0)
+  const [customInfo,setCustomInfo] = useState<any>({});
   const [labels,setLabels] = useState<any>([{id:2,labelName:'跑步',color:'blue'},{id:2,labelName:'教育',color:'green'}]);
   const [idTypeOpt] = useState<any>([
     {
@@ -56,6 +40,15 @@ const Home: FC = () => {
       label: '其它',
     },
   ])
+  const [idTypeOptObj] = useState<any>(
+    {
+      '0':'身份证',
+      '1':'护照',
+      '2':'港澳回乡证',
+      '3':'台胞证',
+      "4":'其它'
+    }
+)
   const { Option } = Select;
 
 const layout = {
@@ -111,27 +104,66 @@ const tailLayout = {
     // setUser(JSON.parse(userInfo))
     // setLoading(false)
   }
+  //保存
+  const save = async ()=>{
+    let data:any = {...customInfo}
+    delete data.addTime
+    delete data.updateTime
+    console.log(data)
+    const res = await updateBaseInfoFromCompanyWx(data)
+    console.log(res)
+  }
   const getExternalUserInfo = async () => {
     const res = await jsSdk.invoke<{ userId?: string }>('getCurExternalContact', {})
-    // alert(JSON.stringify(res))
-    debugger
     if (!res || !res.userId) return
+    setUserId(res.userId)
     let data:any = {wxId:res.userId}
     const userInfo = await getBaseInfoByWxId(data)
-    console.log(userInfo.data.userInfo)
-    debugger
-    if(userInfo.data.userInfo){
+    if(userInfo.data && userInfo.data.userInfo){
       setCustomInfo({...userInfo.data.userInfo})
     }
-    console.log('外部联系人 ID', res.userId);
-    debugger
-
-
+    console.log(userInfo)
+    if(userInfo.data && userInfo.data.labelList){
+      setLabels([...userInfo.data.labelList])
+    }
+  }
+  const getWxLabels = async ()=>{
+    let data:any={
+      labelName:'',
+      page:1,
+      limit:10000
+    }
+    const labels = await getWxLabel(data)
+    console.log(labels)
+  }
+  const deleteLabel = async(e:any)=>{
+    console.log(e)
+    const res = await deleteWxLabel([e.id])
+    console.log(res)
+  }
+  const addColor=(color:string,index:number)=>{
+    setlabelColor(color)
+    setIndex(index)
+  }
+  const getInput = async (e:any) => {
+    if (e.key === 'Enter') {
+      let data:any ={
+        labelName:labelValue,
+        labelColor:labelColor,
+        wxId:userId
+      }
+      const res = await addWxLabel(data)
+      if(res.data.indexOf('OK')>-1){
+        setlabelValue('')
+        getExternalUserInfo()
+      }
+    }
   }
 
   useEffect(() => {
     getUserInfo();
     getExternalUserInfo()
+    getWxLabels()
   }, [])
   // const { getFieldsValue,getFieldDecorator } = this.props.form;
 
@@ -139,7 +171,10 @@ const tailLayout = {
     <Spin spinning={loading}>
       <div className="flex spaceBetween mg20">
         <span className='wordKb'>用户看板</span>
-        <Link to="/findCustom"><Button type="primary" icon={<SearchOutlined />}>查找客户</Button></Link>
+        {
+          !customInfoEdit? <Link to="/findCustom"><Button type="primary" icon={<SearchOutlined />}>查找客户</Button></Link>:
+          <Button className="save" type="primary" onClick={save}>保存</Button>
+        }
         
       </div>
       <div className="custom mg20">
@@ -155,22 +190,22 @@ const tailLayout = {
         {customInfoEdit?(
               <div  className="labelAdd">
                 <div className='greyb'>
-                    {labels.map((item:any)=> <Tag closable className={"tags" +" "+item.color}>{item.labelName}</Tag>)}
+                    {labels.map((item:any)=> <Tag closable onClose={deleteLabel.bind(this,item)} className={"tags" +" "+item.companyWxLabelColor}>{item.companyWxLabel}</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}/>
+                  <input type="text" className="greyInt" onChange={labelAdd} onKeyDown={getInput}/>
                 </div>
                 <div className="flex flex-warp mgt20">
                   <span>添加颜色：</span>
-                  <div className="line blue">
+                  <div className={cindex===0?"border0 line blue":"line blue"} onClick={addColor.bind(this,'blue',0)}>
                     <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 className={cindex===1?"border1 line green":"line green"} onClick={addColor.bind(this,'green',1)}><div className="innerline innerGreen"></div></div>
+                  <div className={cindex===2?"border2 line orange":"line orange"} onClick={addColor.bind(this,'orange',2)}><div className="innerline innerOrgane"></div></div>
+                  <div className={cindex===3?"border3 line red":"line red"}  onClick={addColor.bind(this,'red',3)}><div className="innerline innerRed"></div></div>
+                  <div className={cindex===4?"border4 line greyl":"line greyl"} onClick={addColor.bind(this,'greyl',4)}><div className="innerline innerGrey"></div></div>
                 </div>
               </div>
 
@@ -183,32 +218,33 @@ const tailLayout = {
             </div>): ('')}
             {customInfoEdit?(
               <Form.Item name="realName" label="客户名称" >
-                  <Input  placeholder="请输入客户名称" value={customInfo.realName}/>
+                  <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.sexy===1?(<div><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></div>)
+                      {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>
+                      <span>{customInfo.mobileNumber || '-'}</span>
                   </div>
                   <div className="flex">
                       <span className='greyWord'>积分：</span>
-                      <span>{customInfo.point}</span>
+                      <span>{customInfo.point || '-'}</span>
                   </div>
                 </div>):('')}
                 
-                {customInfoEdit?( <Form.Item name="sexy" label="性别" >
-              <Radio.Group value={customInfo.sexy}>
-                  <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>
+                {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>)
               :('')}
@@ -216,31 +252,32 @@ const tailLayout = {
                 <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}/>
+              <Input  placeholder="请输入证件号" value={customInfo.idNumber} defaultValue={customInfo.idNumber}/>
               </Form.Item>):('')}
-              {customInfoEdit?(<Form.Item name="mobileNumber" label="手机号" >
+              {/* {customInfoEdit?(<Form.Item name="mobileNumber" label="手机号" >
                 {customInfo.mobileNumber}
               </Form.Item>):('')}
               {customInfoEdit?(<Form.Item name="point" label="积分" >
                 {customInfo.point}
-              </Form.Item>):('')}
+              </Form.Item>):('')} */}
               <div className="flex">
                   <span className='greyWord'>公司：</span>
-                  <span>{customInfo.corp}</span>
+                  <span>{customInfo.corp || '-'}</span>
               </div>
               <div className="flex">
                   <span className='greyWord'>职务：</span>
-                  <span>{customInfo.position}</span>
+                  <span>{customInfo.position || '-'}</span>
               </div>
               <div className="flex">
                   <span className='greyWord'>最后跟进：</span>
-                  <span>{customInfo.corp}</span>
+                  <span>{customInfo.corp || '-'}</span>
               </div>
               <div className="flex">
                   <span className='greyWord'>备注：</span>
@@ -248,33 +285,33 @@ const tailLayout = {
               </div>
               <div className="flex">
                   <span className='greyWord'>地区：</span>
-                  <span>{customInfo.area}</span>
+                  <span>{customInfo.area || '-'}</span>
               </div>
               <div className="flex">
                   <span className='greyWord'>收货地址：</span>
-                  <span>{customInfo.addr}</span>
+                  <span>{customInfo.addr || '-'}</span>
               </div>
               <div className="flex">
                   <span className='greyWord'>Email：</span>
-                  <span>{customInfo.email}</span>
+                  <span>{customInfo.email || '-'}</span>
               </div>
               <div className="flex">
                   <span className='greyWord'>戈友ID：</span>
-                  <span>{customInfo.gyId}</span>
+                  <span>{customInfo.gyId || '-'}</span>
               </div>
               {!customInfoEdit?(
               <div className="flex">
                   <span className='greyWord'>证件类型：</span>
-                  <span>{customInfo.idType}</span>
+                  <span>{idTypeOptObj[customInfo.idType] || '-'}</span>
               </div>):('')}
               {!customInfoEdit?(<div className="flex">
                   <span className='greyWord'>证件号：</span>
-                  <span>{customInfo.idNumber}</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 className="flex flex-wrap w100">
+                  {labels.map((item:any,idx:number)=><div className={"labelStyle" + " " +item.companyWxLabelColor }>{item.companyWxLabel}</div>)}
                 </div>
                 
               </div>):('')}

src/pages/findCustom.tsx

@@ -112,6 +112,7 @@ const Actions: React.FC = () => {
   }, [msg])
   const getUserBase = async () => {
     const res = await jsSdk.invoke<{ userId?: string }>('getCurExternalContact', {})
+    console.log(res)
     if (!res || !res.userId) return
     let data:any = {...listQuery}
     data.wxId=res.userId