售前售后联系人

config/routes.js

@@ -257,6 +257,18 @@ export default [
               },
             ],
           },
+          {
+            path: '/sell',
+            name: '销售管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/sell/contact',
+                name: '售前售后联系人',
+                component: './sell/contact',
+              },
+            ],
+          },
 
           {
             component: './404',

src/pages/sell/components/SelectContact.jsx

@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Button, Table, message, Input, Icon, Pagination } from 'antd';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+import router from 'umi/router';
+import styles from './style.less'
+
+const { Column, ColumnGroup } = Table;
+const SelectContact = props => {
+
+    const [data, setData] = useState([]);
+    const [visible, setVisible] = useState(false);
+    const [group, setGroup] = useState({ groupId: undefined, groupName: '新增' })
+
+    useEffect(() => {
+
+    }, [props.value])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.contact.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10, })
+    }, []);
+
+
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                getList({ pageNum: 1, pageSize: 10, ...values })
+            }
+        });
+    }
+
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const changePageNum = (pageNumber) => {
+        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+    }
+
+    const toAdd = () => {
+        router.push({
+            pathname: '/contact/contact/add',
+        });
+    }
+
+    const selectData = (record) => {
+        request({ ...apis.fund.addContact, urlData: { id: record.contactId }, params: {contactType: "sell"} }).then((data) => {
+            message.success('新增成功!');
+            props.onClick()
+            setVisible(false)
+        })
+    }
+
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'contactName',
+            key: 'contactName',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '性别',
+            dataIndex: 'sex',
+            key: 'sex',
+            align: 'center',
+            ellipsis: true,
+            render: text => <span>{text == 1 ? '男' : text == 2 ? '女' : ''}</span>,
+        },
+        {
+            title: '头像',
+            dataIndex: 'avatar',
+            key: 'avatar',
+            align: 'center',
+            ellipsis: true,
+            render: text => <img src={text} width="40px" height="40px" />,
+        },
+        {
+            title: '固话',
+            dataIndex: 'telephone',
+            key: 'telephone',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '手机号',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '对外头衔',
+            dataIndex: 'appellation',
+            key: 'appellation',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '20%',
+            render: (text, record) => (
+                <span>
+                    <a onClick={() => selectData(record)} style={{ color: 'blue' }}>选择</a>
+                </span>
+            ),
+        },
+    ];
+
+    const { getFieldDecorator } = props.form
+
+    return (
+        <div >
+
+            <Button type="danger" onClick={() => setVisible(true)} className={styles.addBtn} >{group.groupName}
+                {/* <SelectContact type="danger" onClick={() => getList({ pageNum: 1, pageSize: 10 })} /> */}
+            </Button>
+            {/* <div style={{ color: '#fff', padding: '0 15px', height: '32px', lineHeight: '32px' }} onClick={() => setVisible(true)}>{group.groupName}</div> */}
+
+            <Modal
+                title="选择联系人"
+                width="1200px"
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                footer={[]}
+            >
+
+                <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{ marginBottom: '16px' }}>
+                    <Form.Item>
+                        {getFieldDecorator('contactName')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="姓名"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('telephone')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="固话"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('phone')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="手机号"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('appellation')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="对外头衔"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" >
+                            搜索
+              </Button>
+                        <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                            重置
+              </Button>
+                    </Form.Item>
+                </Form>
+                <div style={{ marginBottom: '20px', textAlign: 'right' }}>没有想要的联系人? <a onClick={() => toAdd()}>去新增</a> </div>
+                <Table dataSource={data.records || []} columns={columns} pagination={false} />
+                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+                    <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
+                </div>
+            </Modal>
+        </div>
+    )
+}
+
+const WrappedRegistrationForm = Form.create()(SelectContact);
+export default WrappedRegistrationForm;

src/pages/sell/components/style.less

@@ -0,0 +1,109 @@
+  .mask{
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,0.32);
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+}
+
+.content{
+    width: 32vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 504px;
+    position: absolute;
+    left: 50%;
+    top: 110px;
+    transform: translateX(-50%);
+    border-radius: 10px;
+    .close{
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: -22px;
+        right: -22px;
+        z-index: 9;
+    }
+}
+
+.dots{
+    position: absolute;
+    bottom: 11px;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+    li {
+        position: relative;
+        display: inline-block;
+        width: 14px;
+        height: 2px;
+        margin: 0 3px;
+        padding: 0;
+        cursor: pointer;
+        background: #fff;
+        opacity: 0.6;
+        &.active{
+            width: 16px;
+            height: 3px;
+            background: #fff;
+            opacity: 1;
+        }
+    }
+}
+.carousel {
+    width: 32vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 504px;
+    border-radius: 10px;
+    // overflow: hidden;
+    
+    .carouselItem{
+        width: 32vw;
+        min-width: 757px;
+        height: 21.3vw;
+        min-height: 504px;
+        position: relative;
+        display: inline-block;
+        .title{
+            font-size: 0.12rem;
+            color: #fff;
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: 0.16rem;
+            bottom: 30px ;
+            padding: 0 40px;
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+        }
+    }
+}
+
+.swiperImg{
+    max-height: 504px;
+     border-radius: 10px;
+     object-fit: contain;
+}
+
+.ant-carousel .slick-slide {
+    
+    text-align: center;
+    width: 32vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 504px;
+    background: #364d79;
+    overflow: hidden;
+  }
+  
+  .ant-carousel .slick-slide h3 {
+    color: #fff;
+  }

src/pages/sell/contact.jsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Button, Icon, message, Modal, Table, Input,Row,Col,Card,Avatar } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import AuthButton from '@/components/AuthButton';
+import SelectContact from './components/SelectContact';
+
+
+function header(props) {
+    const { Meta } = Card;
+
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [contactList, setContactList] = useState([])
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.fund.contactList, params: { ...params, contentType: 'sell' } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { ...submitValue } = values
+
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { ...submitValue } = props.form.getFieldsValue()
+
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'contactName',
+            key: 'contactName',
+            align: 'center',
+        },
+        {
+            title: '性别',
+            dataIndex: 'sex',
+            key: 'sex',
+            align: 'center',
+            render: (text, record) => <span>{record.sex == '1' ? '男' : record.sex == '2' ? '女' : '未知'}</span>
+
+        },
+        {
+            title: '头像',
+            dataIndex: 'avatar',
+            key: 'avatar',
+            align: 'center',
+            render: (text, record) => <img src={record.avatar} className={styles.touxiang} />,
+        },
+        {
+            title: '固话',
+            dataIndex: 'telephone',
+            key: 'telephone',
+            align: 'center',
+        },
+        {
+            title: '手机号',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '对外头衔',
+            dataIndex: 'appellation',
+            key: 'appellation',
+            align: 'center',
+        },
+        {
+            title: '权重',
+            dataIndex: 'orderNo',
+            key: 'orderNo',
+            align: 'center',
+        },
+
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
+            setContactList(selectedRows)
+        },
+    };
+
+    const toDel = () => {
+        Modal.confirm({
+            title: `确认将所有条数据删除`,
+            okText: '确定',
+            cancelText: '取消',
+            onOk() {
+                request({ ...apis.fund.delContact, data: data.records,params: {contactType: 'sell'} }).then((data) => {
+                    message.info("操作成功")
+                    getList({ pageNum: 1, pageSize: 10 });
+                    setContactList([])
+                }).catch((err) => {
+
+                })
+            },
+            onCancel() { },
+        });
+    }
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} >
+                <Form.Item>
+                    {getFieldDecorator('contactName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="姓名"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('telephone')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="固话"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('phone')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="手机号"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('appellation')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="对外头衔"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+                    </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+                    </Button>
+                </Form.Item>
+            </Form>
+            <div style={{ margin: '10px 0 16px 0', display: 'flex' }}>
+                <SelectContact type="danger" onClick={() => getList({ pageNum: 1, pageSize: 10 })} />
+                <Button type="primary" onClick={() => toDel()} style={{ marginLeft: '30px' }} >删除</Button>
+            </div>
+            
+            <Row>
+                {(data.records || []).map((x, index) => (
+                <Col key={index} span={6}>
+                     <Card
+                        style={{ width: 300, marginTop: 16 }}
+                        actions={[
+                        <span>{"TEL:" + x.phone}</span>,
+                        <span>{x.wxCardImg ? "微信" : "暂未上传微信二维码"}</span>,
+                        ]}
+                    >
+                        <Meta
+                        style={{ height: 100 }}
+                        avatar={<Avatar src={x.avatar ? x.avatar : "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"} />}
+                        title={x.contactName}
+                        description={x.appellation}
+                        />
+                    </Card>
+                </Col>
+                ))}
+            </Row>
+
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+                <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/sell/style.less

@@ -0,0 +1,48 @@
+.addBtn {
+    padding: 0 40px;
+    height: 36px;
+    margin: 30px 0;
+  }
+  
+  .touxiang {
+    width: 93px;
+    height: 93px;
+  }
+  
+  .imgPerfect {
+    width: 120px;
+    height: 40px;
+  }
+  
+  .imgIndex {
+    width: 150px;
+    height: 92.7px;
+  }
+  
+  .imgSmall {
+    width: 128px;
+    height: 192px;
+  }
+  
+  .propaganda {
+    width: 240px;
+    height: 60px;
+  }
+  
+  .ant-table-column-title {
+    font-weight: 600;
+  }
+  
+  .shoppingCart {
+    // color: #dcdcdc;
+    color: #bebebe;
+    margin-left: 6px;
+    font-size: 16px;
+  }
+  
+  .edit {
+    // color: #dcdcdc;
+    color: #bebebe;
+    margin-left: 6px;
+    font-size: 15px;
+  }