commit

config/routes.js

@@ -994,6 +994,12 @@ export default [
                 hideInMenu: true,
                 component: './marketingTools/lottery/data',
               },
+              {
+                path: '/marketingTools/lottery/add',
+                name: '编辑',
+                hideInMenu: true,
+                component: './marketingTools/lottery/add',
+              },
             ],
           },
           // {

src/pages/marketingTools/components/step1.jsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, InputNumber, Radio } from 'antd';
+import Styles from './style.less';
+
+function CreatActivity(props) {
+    const { getFieldDecorator } = props.form;
+    const { RangePicker } = DatePicker;
+
+    const [tab, setTab] = useState('0')
+    const formItemLayout = {
+        labelCol: {
+            xs: { span: 24 },
+            sm: { span: 5 },
+        },
+        wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 16 },
+        },
+    };
+
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        props.form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+                props.onNext()
+            }
+        });
+    }
+
+    return (
+        <>
+            <Form {...formItemLayout} onSubmit={handleSubmit}>
+                <p className={Styles.title}>基本信息</p>
+                <Form.Item label="活动名称" >
+                    {getFieldDecorator('activityName', {
+                        rules: [{ required: true, message: '请输入活动名称' }],
+                    })(<Input />)}
+                </Form.Item>
+                <Form.Item label="活动时间">
+                    {getFieldDecorator('activityTime', {
+                        rules: [
+                            {
+                                required: true,
+                                message: '请选择活动时间',
+                            },
+                        ],
+                    })(<RangePicker format="YYYY-MM-DD HH:mm" />)}
+                </Form.Item>
+
+                <Form.Item label="参与身份" >
+                    {getFieldDecorator('role', {
+                        initialValue: 1,
+                    })(
+                        <Radio.Group>
+                            <Radio value={1}>所有用户</Radio>
+                            <Radio value={2}>新用户（未注册过手机号）</Radio>
+                        </Radio.Group>,
+                    )}
+                </Form.Item>
+
+                <Form.Item label="活动类型" >
+                    {getFieldDecorator('activityType', {
+                        initialValue: 1,
+                    })(
+                        <Radio.Group>
+                            <Radio value={1}>无线抽奖</Radio>
+                            <Radio value={2}>积分抽奖，消耗 {getFieldDecorator('integral')(<InputNumber min={1} />)} 积分</Radio>
+                        </Radio.Group>,
+                    )}
+                </Form.Item>
+
+                <Form.Item label="参与次数" >
+                    {getFieldDecorator('times', {
+                        initialValue: 1,
+                    })(
+                        <Radio.Group>
+                            <Radio value={1}>
+                                一天N次
+                                <div style={{ marginTop: '8px' }}>每人每天抽 {getFieldDecorator('times1')(<InputNumber min={1} />)} 次</div>
+                                <div>每天分享额外抽 {getFieldDecorator('times2')(<InputNumber min={1} />)} 次</div>
+                            </Radio>
+                            <Radio value={2}>
+                                一人N次
+                                        <div style={{ marginTop: '8px' }}>每人一共可抽 {getFieldDecorator('times3')(<InputNumber min={1} />)} 次</div>
+                                <div>每人分享额外抽 {getFieldDecorator('times4')(<InputNumber min={1} />)} 次</div>
+                            </Radio>
+                        </Radio.Group>,
+                    )}
+                </Form.Item>
+
+
+
+                <Form.Item style={{ width: '500px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+                    <Button onClick={() => router.go(-1)} style={{ margin: '0 20px' }}>
+                        取消
+                    </Button>
+
+                    <Button type="primary" htmlType="submit">
+                        下一步
+                    </Button>
+                </Form.Item>
+            </Form>
+        </>
+    )
+}
+
+const WrappedCreatActivityForm = Form.create({ name: 'CreatActivity' })(CreatActivity);
+
+export default WrappedCreatActivityForm

src/pages/marketingTools/components/step2.jsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, Table, InputNumber, Radio } from 'antd';
+import Styles from './style.less';
+
+function Award(props) {
+    const { getFieldDecorator } = props.form;
+
+    const formItemLayout = {
+        labelCol: {
+            xs: { span: 24 },
+            sm: { span: 5 },
+        },
+        wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 16 },
+        },
+    };
+    const list = [
+        {
+            name: '特等奖',
+            award: '华为P30pro',
+            img: 'http://img1.imgtn.bdimg.com/it/u=3784469630,654971&fm=26&gp=0.jpg',
+            num: '2',
+            percent: '5%',
+            provide: '',
+            index: '1'
+        },
+        {
+            name: '一等奖',
+            award: '500元苏果卡',
+            img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=637033601,3111670601&fm=26&gp=0.jpg',
+            num: '50',
+            percent: '20%',
+            provide: '',
+            index: '2'
+        },
+        {
+            name: '二等奖',
+            award: '300元苏果卡',
+            img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1997215264,2437398566&fm=26&gp=0.jpg',
+            num: '20',
+            percent: '30%',
+            provide: '',
+            index: '3'
+        },
+        {
+            name: '三等奖',
+            award: '100积分',
+            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591957675722&di=ff6e441952a79e88e7a78123bf185bc6&imgtype=0&src=http%3A%2F%2F588ku.izihun.com%2Felement_origin_min_pic%2F18%2F08%2F22%2F59423ed3bcf4af7517454958f989b912.jpg%2521%2Ffw%2F820%2Fquality%2F100%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fjpeg',
+            num: '50',
+            percent: '50%',
+            provide: '',
+            index: '4'
+        },
+
+    ]
+
+
+    const columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+        },
+        {
+            title: '奖品',
+            dataIndex: 'award',
+            key: 'award',
+            align: 'center',
+        },
+        {
+            title: '图片',
+            dataIndex: 'img',
+            key: 'img',
+            align: 'center',
+            render: (img) => <img style={{ width: '40px', height: '40px' }} src={img}></img>
+        },
+        {
+            title: '数量',
+            dataIndex: 'num',
+            key: 'num',
+            align: 'center',
+        },
+        {
+            title: '中奖概率',
+            dataIndex: 'percent',
+            key: 'percent',
+            align: 'center',
+        },
+        {
+            title: '已发放',
+            dataIndex: 'provide',
+            key: 'provide',
+            align: 'center',
+        },
+        {
+            title: '操作',
+            dataIndex: 'handle',
+            key: 'handle',
+            align: 'center',
+            render: () => <>
+                <span style={{ color: '#FF4A4A', marginRight: '6px' }}>编辑</span>
+                <span style={{ color: '#FF4A4A' }}>删除</span>
+            </>
+        },
+    ];
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        props.form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+                props.onNext()
+            }
+        });
+    }
+
+
+    return (
+        <>
+            <Form {...formItemLayout} onSubmit={handleSubmit}>
+                <p className={Styles.title}>奖品设置</p>
+                <p className={Styles.blue}>添加奖品</p>
+                <Table className={Styles.table} bordered dataSource={list} columns={columns} pagination={false} rowKey={(x => x.index)} />
+                <p className={Styles.title} style={{ marginTop: '20px' }}>未中奖设置</p>
+                <Form.Item label="名称" >
+                    {getFieldDecorator('name', {
+                        rules: [{ required: true, message: '请输入名称' }],
+                    })(<Input placeholder='请输入名称' />)}
+                </Form.Item>
+                <Form.Item label="图片" >
+                    <img style={{ width: '120px', height: '120px', marginRight: '10px' }} src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2907552255,1679967258&fm=26&gp=0.jpg" alt="" />
+                    <span className={Styles.blue}>修改</span>
+                </Form.Item>
+                <Form.Item label="提示语" >
+                    {getFieldDecorator('tip')(<Input placeholder='请输入提示语' />)}
+                </Form.Item>
+                <Form.Item label="提示跳转" >
+                    {getFieldDecorator('role', {
+                        initialValue: 1,
+                    })(
+                        <Radio.Group>
+                            <Radio value={1}>无跳转</Radio>
+                            <Radio value={2}>有跳转 <span className={Styles.blue}>选择跳转界面</span> </Radio>
+                        </Radio.Group>,
+                    )}
+                </Form.Item>
+                <p className={Styles.title} style={{ marginTop: '20px' }}>参与送积分</p>
+
+                <Form.Item >
+                    参与送 {getFieldDecorator('jifen')(<InputNumber min={1} />)} 积分
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('noaward')(
+                        <Radio.Group>
+                            <Radio value={1}>仅送给未中奖用户</Radio>
+                        </Radio.Group>,
+
+                    )}
+                </Form.Item>
+
+                <Form.Item style={{ width: '500px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+                    <Button onClick={() => props.onPre()} style={{ margin: '0 20px' }}>
+                        上一步
+                    </Button>
+                    <Button type="primary" htmlType="submit">
+                        下一步
+                    </Button>
+                </Form.Item>
+            </Form>
+        </>
+    )
+}
+
+const WrappedAwardForm = Form.create({ name: 'Award' })(Award);
+
+export default WrappedAwardForm

src/pages/marketingTools/components/step3.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, Table, Radio } from 'antd';
+import Styles from './style.less';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+
+function Award(props) {
+    const { getFieldDecorator } = props.form;
+
+
+    const formItemLayout = {
+        labelCol: {
+            xs: { span: 24 },
+            sm: { span: 4 },
+        },
+        wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 20 },
+        },
+    };
+
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        props.form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+                props.onNext()
+            }
+        });
+    }
+
+
+    return (
+        <>
+            <Form style={{minWidth:'700px'}} {...formItemLayout} onSubmit={handleSubmit}>
+
+                <p className={Styles.title} style={{ marginTop: '20px' }}>页面装修</p>
+
+                <Form.Item label="图片" help='建议尺寸1125*1809像素，支持JPG、PNG、JPEG格式'>
+                    <img style={{ width: '120px', height: '120px', marginRight: '10px' }} src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2907552255,1679967258&fm=26&gp=0.jpg" alt="" />
+                    <span className={Styles.blue}>修改</span>
+                </Form.Item>
+
+                <Form.Item label="中奖名单" >
+                    {getFieldDecorator('show', {
+                        initialValue: 1,
+                    })(
+                        <Radio.Group>
+                            <Radio value={1}>展示</Radio>
+                            <Radio value={2}>不展示</Radio>
+                        </Radio.Group>,
+                    )}
+                </Form.Item>
+                <Form.Item label="活动说明">
+                    {getFieldDecorator('desc')(<Wangedit />)}
+                </Form.Item>
+
+                <Form.Item style={{ width: '500px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+                    <Button onClick={() => props.onPre()} style={{ margin: '0 20px' }}>
+                        上一步
+                    </Button>
+                    <Button type="primary" htmlType="submit">
+                        下一步
+                    </Button>
+                </Form.Item>
+            </Form>
+        </>
+    )
+}
+
+const WrappedAwardForm = Form.create({ name: 'Award' })(Award);
+
+export default WrappedAwardForm

src/pages/marketingTools/components/step4.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Row, Col, Button, Modal } from 'antd';
+import router from 'umi/router';
+import Styles from './style.less';
+
+
+const Success = props => {
+
+    const [visible, setVisible] = useState(false)
+
+    const toLottery = () => {
+        router.push({
+            pathname: '/marketingTools/lottery/index',
+        });
+    }
+
+    return <>
+        <Modal
+            visible={visible}
+            title="推广二维码与推广链接"
+            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>
+        <div style={{ textAlign: 'center', width: '100%', marginTop: '30px' }}>
+            <img src='http://123.57.65.31:8081/axure/%E8%90%A5%E9%94%80%E4%BA%91/%e8%90%a5%e9%94%80%e4%ba%91V3.5.30%e6%a9%99%e8%95%89%e6%8e%a8%e5%b9%bf/images/%E5%AE%8C%E6%88%90_v3_5_30_/u5014.png'></img>
+            <p style={{ fontSize: '0.12rem', fontWeight: '800', marginTop: '30px' }}>创建成功</p>
+            <p>立即推广活动，获取更多客户</p>
+            <Button type="primary" onClick={() => setVisible(true)}>立即推广</Button>
+            <div style={{ marginTop: '16px', fontSize: '0.09rem' }}>
+                <span className={Styles.blue} style={{ marginRight: '16px', cursor: 'pointer' }} onClick={() => props.onRefresh()}>继续新建活动</span>
+                <span className={Styles.blue} style={{ cursor: 'pointer' }} onClick={() => toLottery()}>返回活动列表</span>
+            </div>
+        </div>
+
+    </>
+}
+
+export default Success

src/pages/marketingTools/components/style.less

@@ -0,0 +1,20 @@
+.title{
+    font-weight: 600;
+    border-bottom: 1px solid #eee;
+    font-size: 15px;
+    padding-bottom: 6px;
+    margin-bottom: 20px;
+}
+.blue{
+    color: #1D74D9;
+}
+
+.table  {
+    tr{
+        td{
+            padding: 6px 8px;
+            overflow-wrap: break-word;
+        }
+    }
+  
+}

src/pages/marketingTools/index.jsx

@@ -4,7 +4,7 @@ import router from 'umi/router';
 import Styles from './style.less';
 
 
-const market = props => {
+const Market = props => {
 
     const list = [
         {
@@ -42,8 +42,8 @@ const market = props => {
 
         <div className={Styles.flex}>
             {
-                list.map((item, _) => (
-                    <div className={Styles.itemBox} onClick={() => handleItem(item.url)}>
+                list.map((item, index) => (
+                    <div key={index} className={Styles.itemBox} onClick={() => handleItem(item.url)}>
                         <img className={Styles.img} src={item.img} ></img>
                         <div>
                             <p style={{ fontSize: '18px' }}>{item.title}</p>
@@ -57,4 +57,4 @@ const market = props => {
     </>
 }
 
-export default market
+export default Market

src/pages/marketingTools/lottery/add.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, Table, DatePicker, InputNumber, Radio } from 'antd';
+import Styles from './style.less';
+import Step1 from '../components/step1'
+import Step2 from '../components/step2'
+import Step3 from '../components/step3'
+import Step4 from '../components/step4'
+
+function AddActivity(props) {
+    const { getFieldDecorator } = props.form;
+    const { RangePicker } = DatePicker;
+
+    const [tab, setTab] = useState('0')
+
+
+    const tabTitle = [
+        { title: '1.创建活动', value: '0' },
+        { title: '2.奖项设置', value: '1' },
+        { title: '3.页面装修', value: '2' },
+        { title: '4.完成', value: '3' },
+    ]
+
+
+    const img = 'http://123.57.65.31:8081/axure/%E8%90%A5%E9%94%80%E4%BA%91/%e8%90%a5%e9%94%80%e4%ba%91V3.5.30%e6%a9%99%e8%95%89%e6%8e%a8%e5%b9%bf/images/%E6%96%B0%E5%A2%9E%E5%B9%B8%E8%BF%90%E5%A4%A7%E6%8A%BD%E5%A5%96_v3_5_30_/u4584.png'
+    return (
+        <>
+            <div className={Styles.tabBox}>
+                {
+                    tabTitle.map((item, index) => (
+                        <span key={index} className={tab == index ? Styles.active : Styles.tabItem}>{item.title}</span>
+                    ))
+                }
+            </div>
+            <div className={Styles.content}>
+                {tab != '3' && <>
+                    <div className={Styles.img}>
+                        <img src={img}></img>
+                    </div>
+                </>}
+
+                {tab == '0' && <><Step1 onNext={() => setTab('1')} /></>}
+                {tab == '1' && <>
+                    <Step2 onPre={() => setTab('0')} onNext={() => setTab('2')} />
+                </>}
+                {tab == '2' && <>
+                    <Step3 onPre={() => setTab('1')} onNext={() => setTab('3')} />
+                </>}
+                {tab == '3' && <>
+                    <Step4 onRefresh={() => setTab('0')} />
+                </>}
+
+            </div>
+        </>
+    )
+}
+
+const WrappedAddActivityForm = Form.create({ name: 'AddActivity' })(AddActivity);
+
+export default WrappedAddActivityForm

src/pages/marketingTools/lottery/data.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Form, Icon, Input, Button, Pagination, Tabs, Radio, Table } from 'antd';
 
-function Data(props) {
+function Datalist(props) {
 
     const [tab, setTab] = useState('base')
 
@@ -185,6 +185,6 @@ function Data(props) {
     )
 }
 
-const WrappedDataForm = Form.create({ name: 'Data' })(Data);
+const WrappedDatalistForm = Form.create({ name: 'Datalist' })(Datalist);
 
-export default WrappedDataForm
+export default WrappedDatalistForm

src/pages/marketingTools/lottery/index.jsx

@@ -4,7 +4,7 @@ import router from 'umi/router';
 
 const { Option } = Select;
 
-const lottery = (props) => {
+const Lottery = (props) => {
 
     const [visible, setVisible] = useState(false)
 
@@ -38,9 +38,14 @@ const lottery = (props) => {
         },
 
     ]
-    const toData = ()=>{
-          router.push({
-            pathname: '/marketingTools/lottery/data',
+    const toData = () => {
+        router.push({
+            pathname: '/marketingTools/Lottery/data',
+        });
+    }
+    const toEdit = () => {
+        router.push({
+            pathname: '/marketingTools/Lottery/add',
         });
     }
 
@@ -92,7 +97,7 @@ const lottery = (props) => {
             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', marginRight: '6px' }} onClick={() => toEdit()}>编辑</span>
                 <span style={{ color: '#FF4A4A' }}>删除</span>
             </>
         },
@@ -108,10 +113,6 @@ const lottery = (props) => {
 
     }
 
-    const toEdit = () => {
-
-    }
-
     //重置搜索
     function handleReset() {
 
@@ -174,6 +175,6 @@ const lottery = (props) => {
         </>
     )
 }
-const WrappedHeader = Form.create({ name: 'lottery' })(lottery);
+const WrappedHeader = Form.create({ name: 'Lottery' })(Lottery);
 
 export default WrappedHeader

src/pages/marketingTools/lottery/style.less

@@ -0,0 +1,39 @@
+.tabBox{
+    width: 800px;
+    border-top: 1px solid  #FF7E48;
+    border-bottom: 1px solid  #FF7E48;
+    border-left: 1px solid  #FF7E48;
+    border-radius: 6px;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+    .tabItem{
+        width: 200px;
+        border-right: 1px solid #FF7E48;
+        color: #FF7E48;
+        text-align: center;
+    }
+    .active{
+        width: 200px;
+        border-right: 1px solid #FF7E48;
+        color: #fff;
+        background-color: #FF7E48;
+        text-align: center;
+    }
+}
+.content{
+    display: flex;
+    // align-items: center;
+    margin-top: 30px;
+  
+}
+.title{
+    font-weight: 600;
+    border-bottom: 1px solid #eee;
+    font-size: 15px;
+    padding-bottom: 6px;
+    margin-bottom: 20px;
+}
+.img{
+    margin-right: 50px;
+}