lottery

config/routes.js

                 component: './activity/ActivityList',
               },
               {
-                path: '/activity/editActivity', 
+                path: '/activity/editActivity',
                 name: '编辑活动',
                 hideInMenu: true,
                 component: './activity/editActivity',
                 hideInMenu: true,
                 component: './activity/SignList',
               },
-              {     
+              {
                 path: '/activity/activityRecord',
                 name: '数据记录',
                 hideInMenu: true,
                 component: './activity/activityRecord',
-            },
+              },
               {
                 path: '/activity/helpActivity/list',
                 name: '助力活动',
                 hideInMenu: true,
                 component: './activity/helpActivity/signList',
               },
-              {     
+              {
                 path: '/activity/helpActivity/helpActivityRecord',
                 name: '数据记录',
                 hideInMenu: true,
                 component: './activity/helpActivity/helpActivityRecord',
-            },
+              },
               {
                 path: '/activity/groupActivity/list',
                 name: '拼团活动',
                 hideInMenu: true,
                 component: './activity/groupActivity/detailActivity',
               },
-              {     
+              {
                 path: '/activity/groupActivity/groupActivityRecord',
                 name: '数据记录',
                 hideInMenu: true,
                 component: './activity/groupActivity/groupActivityRecord',
-            },
+              },
               {
                 path: '/activity/drainage/DrainageList',
                 name: 'H5活动',
                 hideInMenu: true,
                 component: './activity/helpActivity/detailActivity',
               },
-              {     
+              {
                 path: '/activity/drainage/drainageRecord',
                 name: '数据记录',
                 hideInMenu: true,
                 component: './activity/drainage/drainageRecord',
-            },
+              },
               {
                 path: '/activity/liveActivity/list/index',
                 name: '直播活动',
                 hideInMenu: true,
                 component: './activity/liveActivity/edit',
               },
-              {     
+              {
                 path: '/activity/liveActivity/liveActivityRecord',
                 name: '数据记录',
                 hideInMenu: true,
                 component: './activity/liveActivity/list/liveActivityRecord',
-            },
+              },
             ],
           },
           {
                 name: '二维码列表',
                 component: './qrcode/qrcodelist/index',
               },
-           
+
               {
                 path: '/qrcode/qrcodelist/add',
                 name: '新增',
                 hideInMenu: true,
                 component: './qrcode/qrcodelist/add',
-              },   
+              },
               {
                 path: '/qrcode/qrcodelist/dataRecord',
                 name: '数据记录',
                 hideInMenu: true,
                 component: './qrcode/qrcodelist/dataRecord',
-              },   
+              },
             ],
           },
           {
                 name: '账户资金',
                 component: './funds/accountfunds/index',
               },
-           
+
               // {
               //   path: '/fund/qrcodelist/add',
               //   name: '新增',
                 path: '/funds/financialContact',
                 name: '财务联系人',
                 component: './funds/financialContact/index',
-              },   
+              },
+            ],
+          },
+          {
+            path: '/marketingTools',
+            name: '营销工具',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/marketingTools/index',
+                name: '营销列表',
+                component: './marketingTools/index',
+              },
+              {
+                path: '/marketingTools/lottery/index',
+                name: '幸运大抽奖',
+                hideInMenu: true,
+                component: './marketingTools/lottery/index',
+              },
+              {
+                path: '/marketingTools/lottery/data',
+                name: '数据',
+                hideInMenu: true,
+                component: './marketingTools/lottery/data',
+              },
             ],
           },
           // {

src/pages/marketingTools/index.jsx

+import React, { useState, useEffect } from 'react';
+import { Row, Col } from 'antd';
+import router from 'umi/router';
+import Styles from './style.less';
+
+
+const market = props => {
+
+    const list = [
+        {
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591876471373&di=ceb7710067a87ee0fb182c4e7e753c04&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
+            title: '幸运大抽奖',
+            desc: '常见的转盘式抽奖方法',
+            url: '/marketingTools/lottery/index'
+        },
+        {
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591876471373&di=ceb7710067a87ee0fb182c4e7e753c04&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
+            title: '秒杀',
+            desc: '快速抢购引导顾客更多消费'
+        },
+        {
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591876471373&di=ceb7710067a87ee0fb182c4e7e753c04&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
+            title: '刮刮卡',
+            desc: '通过刮开卡片的方式进行抽奖的玩法'
+        },
+        {
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591876471373&di=ceb7710067a87ee0fb182c4e7e753c04&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
+            title: '趣味测试',
+            desc: '趣味小测试，互动吸粉'
+        },
+    ]
+
+    const handleItem = (url) => {
+
+        router.push({
+            pathname: url,
+        });
+    }
+
+    return <>
+        <p>营销工具：抓取客户，社交裂变</p>
+
+        <div className={Styles.flex}>
+            {
+                list.map((item, _) => (
+                    <div className={Styles.itemBox} onClick={() => handleItem(item.url)}>
+                        <img className={Styles.img} src={item.img} ></img>
+                        <div>
+                            <p style={{ fontSize: '18px' }}>{item.title}</p>
+                            <p style={{ fontSize: '15px', color: '#999', marginBottom: '0px' }}>{item.desc}</p>
+                        </div>
+                    </div>
+                ))
+            }
+
+        </div>
+    </>
+}
+
+export default market

src/pages/marketingTools/lottery/data.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, Pagination, Tabs, Radio, Table } from 'antd';
+
+function Data(props) {
+
+    const [tab, setTab] = useState('base')
+
+    const list = [
+        {
+            name: '曹建芳',
+            phone: '1751260225',
+            award: '华为P30pro',
+            date: '2020-06-05 17:31:00',
+            times: '2',
+            shareName: '',
+            sharePhone: '',
+            shareDate: '',
+            index: '1',
+        },
+        {
+            name: '小太阳',
+            phone: '15150594584',
+            award: '500元苏果卡',
+            date: '2020-06-04 09:27:42',
+            times: '3',
+            shareName: '小铲子',
+            sharePhone: '18752471793',
+            shareDate: '2020-06-04 09:26:58',
+            index: '2',
+        },
+        {
+            name: '小五子',
+            phone: '17625959403',
+            award: '500元苏果卡',
+            date: '2020-06-03 18:21:56',
+            times: '5',
+            shareName: '',
+            sharePhone: '',
+            shareDate: '',
+            index: '3',
+        },
+    ]
+
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+        },
+        {
+            title: '电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '抽中奖品',
+            dataIndex: 'award',
+            key: 'award',
+            align: 'center',
+        },
+        {
+            title: '中奖时间',
+            dataIndex: 'date',
+            key: 'date',
+            align: 'center',
+        },
+    ];
+
+    const columns2 = [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+        },
+        {
+            title: '电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '最后抽奖时间',
+            dataIndex: 'date',
+            key: 'date',
+            align: 'center',
+        },
+        {
+            title: '抽奖次数',
+            dataIndex: 'times',
+            key: 'times',
+            align: 'center',
+        },
+    ];
+
+    const columns3 = [
+        {
+            title: '分享人',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+        },
+        {
+            title: '分享人电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '分享时间',
+            dataIndex: 'date',
+            key: 'date',
+            align: 'center',
+        },
+    ];
+    const columns4 = [
+        {
+            title: '访问者',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+        },
+        {
+            title: '访问者电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '访问时间',
+            dataIndex: 'date',
+            key: 'date',
+            align: 'center',
+        },
+        {
+            title: '分享者',
+            dataIndex: 'shareName',
+            key: 'shareName',
+            align: 'center',
+        },
+        {
+            title: '分享者电话',
+            dataIndex: 'sharePhone',
+            key: 'sharePhone',
+            align: 'center',
+        },
+        {
+            title: '分享时间',
+            dataIndex: 'shareDate',
+            key: 'shareDate',
+            align: 'center',
+        },
+
+    ];
+    return (
+        <>
+            <Radio.Group value={tab} buttonStyle="solid" onChange={e => setTab(e.target.value)}>
+                <Radio.Button value="base">中奖人数</Radio.Button>
+                <Radio.Button value="apartment">抽奖人数</Radio.Button>
+                <Radio.Button value="image">分享记录</Radio.Button>
+                <Radio.Button value="panorama">访问记录</Radio.Button>
+
+            </Radio.Group>
+            <div style={{ marginTop: '20px' }}>
+                {tab === 'base' && <>
+                    <Table dataSource={list} columns={columns} pagination={false} rowKey={(x => x.index)} />
+                </>}
+                {tab === 'apartment' && <>
+                    <Table dataSource={list} columns={columns2} pagination={false} rowKey={(x => x.index)} />
+                </>}
+                {tab === 'image' && <>
+                    <Table dataSource={list} columns={columns3} pagination={false} rowKey={(x => x.index)} />
+                </>}
+                {tab === 'panorama' && <>
+                    <Table dataSource={list} columns={columns4} pagination={false} rowKey={(x => x.index)} />
+                </>}
+                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+                    <Pagination showQuickJumper defaultCurrent={1} total={10} onChange={e => changePageNum(e, props)} current={1} />
+                </div>
+            </div>
+        </>
+    )
+}
+
+const WrappedDataForm = Form.create({ name: 'Data' })(Data);
+
+export default WrappedDataForm

src/pages/marketingTools/lottery/index.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Button, Select, Icon, message, Table, Pagination, Input, Modal } from 'antd';
+import router from 'umi/router';
+
+const { Option } = Select;
+
+const lottery = (props) => {
+
+    const [visible, setVisible] = useState(false)
+
+    const list = [
+        {
+            title: '618幸运大抽奖',
+            date: '2020-06-18 00:00:00~2020-06-20 00:00:00',
+            status: '未开始',
+            times: '1300',
+            personNum: '687',
+            personNum2: '350',
+            index: '1',
+        },
+        {
+            title: '儿童节感恩回馈抽奖活动',
+            date: '2020-06-1 00:00:00~2020-06-5 00:00:00',
+            status: '已结束',
+            times: '800',
+            personNum: '2487',
+            personNum2: '500',
+            index: '2',
+        },
+        {
+            title: '情人节抽奖活动',
+            date: '2020-02-14 00:00:00~2020-02-14 00:01:00',
+            status: '已结束',
+            times: '1500',
+            personNum: '1242',
+            personNum2: '288',
+            index: '3',
+        },
+
+    ]
+    const toData = ()=>{
+          router.push({
+            pathname: '/marketingTools/lottery/data',
+        });
+    }
+
+    const columns = [
+
+
+        {
+            title: '活动名称',
+            dataIndex: 'title',
+            key: 'title',
+            align: 'center',
+            render: (title) => <span style={{ color: '#1D74D9' }}>{title}</span>
+        },
+        {
+            title: '活动时间',
+            dataIndex: 'date',
+            key: 'date',
+            align: 'center',
+        },
+        {
+            title: '活动状态',
+            dataIndex: 'status',
+            key: 'status',
+            align: 'center',
+        },
+        {
+            title: '抽奖次数',
+            dataIndex: 'times',
+            key: 'times',
+            align: 'center',
+        },
+        {
+            title: '抽奖人数',
+            dataIndex: 'personNum',
+            key: 'personNum',
+            align: 'center',
+        },
+        {
+            title: '中奖人数',
+            dataIndex: 'personNum2',
+            key: 'personNum2',
+            align: 'center',
+        },
+        {
+            title: '操作',
+            dataIndex: 'handle',
+            key: 'handle',
+            align: 'center',
+            render: () => <>
+                <span style={{ color: '#FF4A4A', marginRight: '6px', cursor: 'pointer' }} onClick={() => toData()}>数据</span>
+                <span style={{ color: '#FF4A4A', marginRight: '6px', cursor: 'pointer' }} onClick={() => setVisible(true)}>推广</span>
+                <span style={{ color: '#FF4A4A', marginRight: '6px' }}>编辑</span>
+                <span style={{ color: '#FF4A4A' }}>删除</span>
+            </>
+        },
+    ];
+
+
+    const changePageNum = (pageNumber, props) => {
+
+    }
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+
+    }
+
+    const toEdit = () => {
+
+    }
+
+    //重置搜索
+    function handleReset() {
+
+    }
+
+
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Modal
+                visible={visible}
+                title="推广二维码与推广链接"
+                // onOk={this.handleOk}
+                onCancel={() => setVisible(false)}
+                footer={null}
+            >
+                <div style={{ textAlign: 'center' }}>
+                    <img style={{ width: '200px', height: '200px' }} src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3602624501,870193918&fm=26&gp=0.jpg' ></img>
+                    <p>https://dev.fangdeal.cn/admin/#/activity/drainage/DrainageList <span style={{ color: '#1D74D9' }}>复制链接</span></p>
+                </div>
+            </Modal>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+                <Form.Item>
+                    {getFieldDecorator('targetName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="活动名称"
+                        />,
+                    )}
+                </Form.Item>
+
+                <Form.Item>
+                    {getFieldDecorator('status')(
+                        <Select style={{ width: '180px' }} placeholder="状态">
+                            <Option value="0">全部</Option>
+                            <Option value="1">未开始</Option>
+                            <Option value="2">进行中</Option>
+                            <Option value="3">已结束</Option>
+                        </Select>,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit">
+                        搜索
+                     </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+            </Button>
+                </Form.Item>
+            </Form>
+
+            <Button type="danger" style={{ margin: '10px 0 12px 0' }} onClick={() => toEdit()}>新增</Button>
+
+            <Table dataSource={list} columns={columns} pagination={false} rowKey={(x => x.index)} />
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+                <Pagination showQuickJumper defaultCurrent={1} total={1} onChange={e => changePageNum(e, props)} current={1} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'lottery' })(lottery);
+
+export default WrappedHeader

src/pages/marketingTools/style.less

+.flex{
+ 
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: space-between;
+       
+}
+.itemBox{
+    flex: 0 0 30%;
+    height: 120px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border:1px solid #eee;
+    padding: 10px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    min-width: 300px;
+
+    .img{
+        height: 100px;
+        width: 100px;
+        margin-right: 16px;
+    }
+}