Skip to content

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

feat:构建

parent 50ec0d7e
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 10 deletions
src/css/home.css
View file @ fdb0f80c
p{
margin:0;
padding:0;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.spaceBetween{
justify-content: space-between;
}
.more{
width:30px;
height:30px;
}
.custom{
background: #FFFFFF;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
border-radius: 4px;
border: 1px solid #E1E1E2;
}
.mg20{
margin: 20px;
}
.customitem{
height: 44px;
background: #F9F9F9;
border-radius: 4px 4px 0px 0px;
border: 1px solid #E1E1E2;
padding:0 20px;
}
.word{
font-size: 14px;
margin:0;
color:#3B3B50;
}
.wordKb{
font-size: 18px;
font-weight: 500;
color: #3B3B50;
line-height: 25px;
margin-left:10px;
}
.radio-text-w{
color:#EB3B7E
}
.radio-text-m{
color:#0171c2
}
.grad{
width: 88px;
height: 25px;
background: #FFF7E6;
border-radius: 4px;
border: 1px solid rgba(247, 181, 0, 0.4);
font-size: 12px;
font-weight: 500;
color: #F7B500;
line-height: 25px;
text-align: center;
}
.ant-form-item-label > label{
color:#A5ADB3 !important;
}
.ant-form-item-label{
text-align: left !important;
}
.inner{
padding:21px;
}
.mgl20{
margin-left:30px;
}
.greyWord{
color:#A5ADB3
}
.showt{
margin-bottom: 24px;
}
\ No newline at end of file
src/pages/Home.tsx
View file @ fdb0f80c
import React, {FC, useEffect, useState} from "react";
import Cookies from "js-cookie";
import {fetchUser} from "../api";
import {Spin,Button} from "antd";
import {Spin,Form, Input, Button, Select,Radio,} from "antd";
import { SearchOutlined } from '@ant-design/icons';
import './../css/home.css'
import jt from '../assets/images/jt.png'
import jt from './../assets/images/jt.png'
const Home: FC = () => {
const [loading, setLoading] = useState<boolean>(false);
const [user, setUser] = useState<UserResponse>();
const [customInfoEdit,setCustomInfoEdit] = useState<boolean>(false);
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 [idTypeOpt] = useState<any>([
{
value: '0',
label: '身份证',
},
{
value: '1',
label: '护照',
},
{
value: '2',
label: '港澳回乡证',
},
{
value: '3',
label: '台胞证',
},
{
value: '4',
label: '其它',
},
])
const { Option } = Select;
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
const [form] = Form.useForm();
const onGenderChange = (value: string) => {
switch (value) {
case 'male':
form.setFieldsValue({ note: 'Hi, man!' });
return;
case 'female':
form.setFieldsValue({ note: 'Hi, lady!' });
return;
case 'other':
form.setFieldsValue({ note: 'Hi there!' });
}
};
const onFinish = (values: any) => {
console.log(values);
};
const onReset = () => {
form.resetFields();
};
const onFill = () => {
console.log(customInfo)
debugger
};
const testClick=(): void=>{
console.log('aaaa')
setCustomInfoEdit(!customInfoEdit)
}
// 获取当前外部联系人信息
const getUserInfo = async () => {
// setLoading(true);
......@@ -23,21 +105,120 @@ const Home: FC = () => {
useEffect(() => {
getUserInfo().then()
}, [])
// const { getFieldsValue,getFieldDecorator } = this.props.form;
return (
<Spin spinning={loading}>
<div>
<h1>欢迎回来，{user ? user.name: ''}</h1>
</div>
<div className="flex">
<span>用户看板</span>
<div className="flex spaceBetween mg20">
<span className='wordKb'>用户看板</span>
<Button type="primary" icon={<SearchOutlined />}>查找客户</Button>
</div>
<div className="custom">
<div className="flex">
<p>客户信息</p>
{/* <img src="./jt.png" className="more" alt="" /> */}
<img src={require('../assets/images/jt.png')} alt="" />
<div className="custom mg20">
<div className="flex spaceBetween customitem">
<p className='word'>客户信息</p>
<img src={jt} alt="" className="more" onClick={testClick}/>
</div>
{/* <div className="flex">
<span>{customInfo.realName || '-' }</span>
<div>{ customInfo.account_level }</div>
</div> */}
<div className="flex spaceBetween">
<div className="inner">
<Form {...layout} name="control-hooks" onFinish={onFinish} initialValues={customInfo}>
<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 showt">
<div className="flex">
<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">
<span className='greyWord'>手机号：</span>
<span>{customInfo.mobileNumber}</span>
</div>
<div className="flex mgl20">
<span className='greyWord'>积分：</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>
</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>):('')}
<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>):('')}
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Form.Item>
</Form>
</div>
</div>
</div>
</Spin>
......
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