zls

config/routes.js

@@ -232,9 +232,23 @@ export default [
             component: '../layouts/BlankLayout',
             routes: [
               {
-                path: '/activity/ActivityList',
+                path: '/activity/SignupActivity',
                 name: '报名活动',
-                component: './activity/ActivityList',
+                component: './activity/SignupActivity',
+              },
+              {
+                path: '/activity/SignupActivity/detail',
+                name: '活动详情',
+                hideInMenu: true,
+                component: './activity/SignupActivity/detail',
+              },
+             
+
+              // /activity/SignupActivity/detail
+              {
+                path: '/activity/Activity',
+                name: '报名活动（old）',
+                component: './activity/Activity',
               },
               {
                 path: '/activity/editActivity',

src/components/QueryTable/index.jsx

@@ -6,7 +6,7 @@ export default React.forwardRef((props, ref) => {
   const tableRef = useRef()
   const searchRef = useRef()
   const [searchData, setSearchData] = useState({})
-  const {api, searchFields, params, onPageChange, ...leftProps} = props
+  const {api, searchFields, params, onPageChange,searchProps, ...leftProps} = props
   const handleSearch = (data) => setSearchData(data)
 
   useImperativeHandle(ref, () => ({
@@ -21,10 +21,11 @@ export default React.forwardRef((props, ref) => {
   return (
     <>
       <Search
-      ref={searchRef}
+        ref={searchRef}
         fields={searchFields}
         onSearch={handleSearch}
         onReset={handleSearch}
+        searchProps={searchProps}
       />
 
       <TableList

src/components/Search/Field.jsx

@@ -1,39 +1,47 @@
-import React from 'react'
-import { Input, Select, DatePicker } from 'antd'
+import React from 'react';
+import { Input, Select, DatePicker } from 'antd';
 
-const Option = Select.Option
-const { RangePicker } = DatePicker
+const Option = Select.Option;
+const { RangePicker } = DatePicker;
 
-export default (props) => {
-  const { style, type, value, options = [], placeholder, render, onChange } = props
+export default props => {
+  const { style, type, value, options = [], placeholder, render, onChange } = props;
 
   if (typeof render === 'function') {
-    const Element = render()
-    return React.cloneElement(Element, { value, onChange })
+    const Element = render();
+    return React.cloneElement(Element, { value, onChange });
   }
 
-  const handleChange = (e) => {
-    const isInput = !type || type === 'text' || type === 'input'
-    onChange(isInput ? e.target.value : e)
-  }
+  const handleChange = e => {
+    const isInput = !type || type === 'text' || type === 'input';
+    onChange(isInput ? e.target.value : e);
+  };
 
   switch (type) {
     case 'datepicker':
+      return <DatePicker value={value} placeholder={placeholder} onChange={handleChange} />;
     case 'rangepicker':
-      return (
-        <RangePicker value={value} placeholder={placeholder} onChange={handleChange} />
-      )
+      return <RangePicker value={value} placeholder={placeholder} onChange={handleChange} />;
     case 'select':
       return (
-        <Select style={style || {width: 160}} placeholder={placeholder} value={value} onChange={handleChange}>
-          {
-            options.map((item) => <Option key={item.value} value={item.value}>{item.label}</Option>)
-          }
+        <Select
+          style={style || { width: 160 }}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+        >
+          {options.map(item => (
+            <Option key={item.value} value={item.value}>
+              {item.label}
+            </Option>
+          ))}
         </Select>
-      )
+      );
     case 'text':
     case 'input':
     default:
-      return <Input style={style} value={value} placeholder={placeholder} onChange={handleChange} />
+      return (
+        <Input style={style} value={value} placeholder={placeholder} onChange={handleChange} />
+      );
   }
-}
+};

src/components/TableList/index.jsx

@@ -1,94 +1,100 @@
 import React, { useCallback, useRef, useState, useEffect, useImperativeHandle } from 'react';
 // import { stringify } from 'querystring';
 import { notification } from 'antd';
-import request from '@/utils/request'
+import request from '@/utils/request';
 import TableList from './TableList';
 import Pagination from './Pagination';
 
 export default React.forwardRef((props, ref) => {
-  const [loading, setLoading] = useState(false)
-  const mounted = useRef(false)
-  const [list, setList] = useState()
-  const [pageTotal, setPageTotal] = useState(0)
-  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10 })
+  const [loading, setLoading] = useState(false);
+  const mounted = useRef(false);
+  const [list, setList] = useState();
+  const [pageTotal, setPageTotal] = useState(0);
+  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10 });
 
-  const { api,urlData, params, onPageChange, ...tableProps } = props
+  const { api, urlData, params, onPageChange, postData=()=>{}, ...tableProps } = props;
 
   // 更新分页
   const updatePage = useCallback(
     (current, pageSize) => {
-      const config = pageSize ? { current, pageSize } : { current, pageSize:pageConfig.pageSize }
+      const config = pageSize ? { current, pageSize } : { current, pageSize: pageConfig.pageSize };
       const newPage = {
         ...pageConfig,
         ...config,
-      }
-  
-      setPageConfig(newPage)
+      };
+
+      setPageConfig(newPage);
       if (onPageChange) {
-        onPageChange(newPage)
+        onPageChange(newPage);
       }
     },
     [pageConfig],
-  )
+  );
 
   // 获取远程数据
-  const fetchData = useCallback(
-    () => {
-      setLoading(true)
-      const queryParams = {
-        ...params || {},
-        pageNum: pageConfig.current,
-        pageSize: pageConfig.pageSize,
-      }
-      request({...api, urlData:urlData||undefined, params: queryParams }).then((res) => {
-        if(res.records){
-          const {total, records = []} = res
-          setLoading(false)
-          setList(records)
-          setPageTotal(total)
-        }
-        else if(res.result){
-          const {total, records = []} = res.result
-          setLoading(false)
-          setList(records)
-          setPageTotal(total)
+  const fetchData = useCallback(() => {
+    setLoading(true);
+
+
+    const queryParams = {
+      ...(postData(params) || params || {}),
+      pageNum: pageConfig.current,
+      pageSize: pageConfig.pageSize,
+    };
+
+    request({ ...api, urlData: urlData || undefined, params: queryParams })
+      .then(res => {
+        console.log(res, 'fetchData');
+        if (res.records) {
+          const { total, records = [] } = res;
+          setLoading(false);
+          setList(records);
+          setPageTotal(total);
+        } else if (res.list) {
+          const { total, list = [] } = res;
+          setLoading(false);
+          setList(list);
+          setPageTotal(total);
+        } else if (res.result) {
+          const { total, records = [] } = res.result;
+          setLoading(false);
+          setList(records);
+          setPageTotal(total);
         }
-        
-      }).catch((err) => {
-        console.error(err)
-        setLoading(false)
-        notification.warn({ message: err.message })
       })
-    },
-    [params, pageConfig, api],
-  )
+      .catch(err => {
+        console.error(err);
+        setLoading(false);
+        notification.warn({ message: err.message });
+      });
+  }, [params, pageConfig, api]);
 
   // 监控查询参数的修改
   useEffect(() => {
     // 通过更新分页来触发查询
-    updatePage(1)
-  }, [params])
-  
+    updatePage(1);
+  }, [params]);
+
   // 监控分页的修改
   useEffect(() => {
     // 首次加载不查询
     if (!mounted.current) {
-      mounted.current = true
-      return
+      mounted.current = true;
+      return;
     }
 
-    fetchData()
-  }, [pageConfig])
+    fetchData();
+  }, [pageConfig]);
 
   // 透传给父组件部分方法
   useImperativeHandle(ref, () => ({
-    reload: fetchData
-  }))
+    reload: fetchData,
+  }));
 
   return (
     <>
       <TableList loading={loading} dataSource={list} {...tableProps} />
       <Pagination {...pageConfig} total={pageTotal} onChange={updatePage} />
     </>
-  )
+  );
 });

src/pages/activity/Activity/index.jsx

@@ -0,0 +1,404 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Typography, message, Table, Pagination, Modal, DatePicker,Card } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import AuthButton from '@/components/AuthButton';
+import Prompt from 'umi/prompt';
+import withActions from '@/components/ActionList';
+import EditIcon from '@/components/EditIcon';
+import Navigate from '@/components/Navigate';
+import SelectCity from '@/components/SelectButton/CitySelect'
+import BuildSelect from '@/components/SelectButton/BuildSelect'
+import apis from '@/services/apis';
+import request from '@/utils/request';
+
+const header = props => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [data, setData] = useState({ list: [], total: 0 })
+  //   const [page, changePage] = useState({})
+  const [time, setTime] = useState('')
+
+  // 查询列表
+  const getList = params => {
+    request({ ...apis.activity.list, params: { ...params } }).then(data => {
+      console.log(data)
+      setData(data)
+    })
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+
+    if (localStorage.getItem("activePageParams")) {
+
+      const localStorageValue = JSON.parse(localStorage.getItem("activePageParams"))
+      localStorageValue.time = localStorageValue.time ? moment(localStorageValue.time) : ''
+
+      props.form.setFieldsValue(localStorageValue);
+      getList(JSON.parse(localStorage.getItem("activePageParams")))
+    } else {
+      localStorage.setItem("activePageParams", JSON.stringify({ pageNum: 1, pageSize: 10 }));
+      getList({ pageNum: 1, pageSize: 10 });
+    }
+  }, [])
+
+  // 跳转到编辑商品
+  const toEditGoods = dynamicId => () => {
+    router.push({
+      pathname: '/activity/editActivity',
+      query: {
+        dynamicId,
+      },
+    });
+  }
+
+  const newQrcode = row => {
+    const x = new XMLHttpRequest();
+    const resourceUrl = row.qrCode
+    x.open('GET', resourceUrl, true);
+    x.responseType = 'blob';
+    x.onload = function (e) {
+      const url = window.URL.createObjectURL(x.response)
+      const a = document.createElement('a');
+      a.href = url;
+      a.style.display = 'none'
+      a.download = '活动二维码.png';
+      a.click();
+    }
+    x.send();
+  }
+
+  const getActivityDetail = (dynamicId) => () => {
+    router.push({
+      pathname: '/activity/detailActivity',
+      query: {
+        dynamicId,
+      },
+    });
+  }
+
+  const getJoinPeople = (dynamicId) => () => {
+    router.push({
+      pathname: '/activity/SignList',
+      query: {
+        dynamicId,
+      },
+    });
+  }
+
+  const toDataReacord = (id) => () => {
+    router.push({
+      pathname: '/activity/activityRecord',
+      query: {
+
+        id,
+      },
+    });
+  }
+
+  /**
+   *
+   *
+   * @param {*} props
+   * @returns
+   */
+  const columns = [
+    {
+      title: '活动标题',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center',
+      // width: '15%',
+      render: (x, row) => <Navigate onClick={getActivityDetail(row.dynamicId)}><Typography.Text ellipsis>{row.title}</Typography.Text></Navigate>,
+    },
+    {
+      title: '活动时间',
+      dataIndex: 'startDate',
+      key: 'startDate',
+      align: 'center',
+      // width: '15%',
+      // width: '20%',
+      render: (x, row) => <><span>{`${moment(row.startDate).format('YYYY-MM-DD')} —— ${moment(row.endDate).format('YYYY-MM-DD')}`}</span></>,
+    },
+    {
+      title: '已参与人数',
+      dataIndex: 'count',
+      key: 'count',
+      align: 'center',
+      render: (x, row) => <Navigate onClick={getJoinPeople(row.dynamicId)}>{row.count}</Navigate>,
+    },
+    // {
+    //   title: '阅读量',
+    //   dataIndex: 'pvNum',
+    //   key: 'pvNum',
+    //   align: 'center',
+    //   // width: '10%',
+    // },
+    // {
+    //   title: '转发量',
+    //   dataIndex: 'shareNum',
+    //   key: 'shareNum',
+    //   align: 'center',
+    //   // width: '10%',
+    // },
+    // {
+    //   title: '收藏数',
+    //   dataIndex: 'saveNum',
+    //   key: 'saveNum',
+    //   align: 'center',
+    //   // width: '10%',
+    // },
+    {
+      title: '报名状态',
+      dataIndex: 'activityStatus',
+      key: 'activityStatus',
+      align: 'center',
+      render: activityStatus => (activityStatus == 0 ? '进行中' : activityStatus == 1 ? '未开始' : '已结束'),
+    },
+    {
+      title: '权重',
+      dataIndex: 'heavy',
+      key: 'heavy',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: withActions((x, row) => [
+        <AuthButton name="admin.buildingDynamic.send.dynamicId.put" noRight={null}>
+          <EditIcon type={row.status === 1 ? 'cancel' : 'publish'} text={row.status === 1 ? '取消发布' : '发布'} onClick={sendOrPublicDynamic.bind(this, row)} />
+        </AuthButton>,
+
+        <EditIcon type="look" text="查看详情" onClick={getActivityDetail(row.dynamicId)} />,
+
+        row.activityStatus === 0 ?
+          <AuthButton name="admin.buildingDynamic.finish.put" noRight={null}>
+            <EditIcon type="end" text="结束活动" onClick={finishDynamic.bind(this, row)} />
+          </AuthButton> : null,
+
+        <AuthButton name="admin.buildingDynamic.tag" noRight={null}>
+          <EditIcon type={row.weight === 1 ? 'cancel' : 'add'} text={row.weight === 1 ? '取消标签' : '添加标签'} onClick={topDynamic(row)} />
+        </AuthButton>,
+
+        <EditIcon type={row.home === 1 ? 'cancel' : 'top'} text={row.home === 1 ? '取消推首页' : '推荐首页'} onClick={homeDynamic(row)} />,
+
+        <AuthButton name="admin.buildingDynamic.dataRecord" noRight={null}>
+          <EditIcon type="record" text="数据记录" onClick={toDataReacord(row.dynamicId)} />
+        </AuthButton>,
+
+        (row.activityStatus === 0 || row.activityStatus === 1) ?
+          <AuthButton name="admin.buildingDynamic.update.put" noRight={null}>
+            <EditIcon type="edit" text="编辑" onClick={toEditGoods(row.dynamicId, row.count)} />
+          </AuthButton> : null,
+      ]),
+    },
+  ];
+
+  const getSignList = dynamicId => {
+    router.push({
+      pathname: '/activity/SignList',
+      query: {
+        dynamicId,
+      },
+    });
+  }
+
+  const finishDynamic = row => {
+    Modal.confirm({
+      title: '活动会被强制结束，小程序端无法再发起或参与此活动，如果不想让客户看到活动，请再点击取消发布按钮',
+      okText: '确定',
+      cancelText: '取消',
+      onOk() {
+        request({ ...apis.activity.finish, data: { dynamicId: row.dynamicId, top: '' } }).then(data => {
+          console.log(data)
+          message.info('操作成功！')
+          getList(JSON.parse(localStorage.getItem("activePageParams")))
+        }).catch(err => {
+          console.log(err)
+          message.info(err.msg || err.message)
+        })
+      },
+    });
+  }
+
+  //   置顶
+  const topDynamic = row => () => {
+    const weight = Math.abs(row.weight - 1)
+    request({ ...apis.activity.weight, params: { dynamicId: row.dynamicId, weight } }).then(data => {
+      console.log(data)
+      message.info('操作成功！')
+      getList(JSON.parse(localStorage.getItem("activePageParams")))
+    }).catch(err => {
+      console.log(err)
+      message.info(err.msg || err.message)
+    })
+  }
+
+  //   推首页
+  const homeDynamic = row => () => {
+    const home = Math.abs(row.home - 1)
+    request({ ...apis.activity.home, params: { dynamicId: row.dynamicId, home } }).then(data => {
+      console.log(data)
+      message.info('操作成功！')
+      getList(JSON.parse(localStorage.getItem("activePageParams")))
+    }).catch(err => {
+      console.log(err)
+      message.info(err.msg || err.message)
+    })
+  }
+
+  const sendOrPublicDynamic = row => {
+    if (row.status === 1) {
+      cancelDynamic(row)
+    } else {
+      sendDynamic(row)
+    }
+  }
+
+  // 取消活动
+  const cancelDynamic = row => {
+    Modal.confirm({
+      title: '活动会在小程序端隐藏，后台可以继续编辑重新发布',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        request({ ...apis.activity.cancel, urlData: { id: row.dynamicId } }).then(data => {
+          message.info('操作成功！')
+          getList(JSON.parse(localStorage.getItem("activePageParams")))
+
+        }).catch(err => {
+          console.log(err)
+          message.info(err.msg || err.message)
+        })
+      }
+    });
+  }
+
+  // 发布活动
+  const sendDynamic = row => {
+    Modal.confirm({
+      title: '确定发布吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        request({ ...apis.activity.send, urlData: { id: row.dynamicId } }).then(data => {
+          message.info('操作成功！')
+          getList(JSON.parse(localStorage.getItem("activePageParams")))
+        }).catch(err => {
+          console.log(err)
+          message.info(err.msg || err.message)
+        })
+      }
+    });
+  }
+
+  const changePageNum = pageNumber => {
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        localStorage.setItem("activePageParams", JSON.stringify({ pageNum: pageNumber, pageSize: 10, ...values }));
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        getList({ pageNum: pageNumber, pageSize: 10, ...values })
+      }
+    });
+
+  }
+
+  // 提交事件
+  const handleSubmit = e => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('提交数据: ', values)
+        if (time) {
+          values.time = `${moment(time).format('YYYY-MM-DDT00:00:00.000')}Z`
+        } else {
+          values.time = null
+        }
+        localStorage.setItem("activePageParams", (JSON.stringify({ pageNum: 1, pageSize: 10, ...values })));
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
+
+  // 重置搜索
+  function handleReset() {
+    props.form.resetFields();
+    setTime('')
+    props.form.resetFields();
+    localStorage.setItem("activePageParams", JSON.stringify({ pageNum: 1, pageSize: 10 }));
+    getList({ pageNum: 1, pageSize: 10 })
+  }
+
+  // 时间回调
+  function timeOnChange(date, dateString) {
+    console.log(date, dateString)
+    setTime(date)
+  }
+
+
+  const { getFieldDecorator } = props.form
+  return (
+
+    <Card>
+      {/* style={{ display: 'none' }} */}
+      <div id="qrcode"></div>
+      <Form layout="inline" onSubmit={e => handleSubmit(e)}>
+        <Form.Item>
+          {getFieldDecorator('cityId')(
+            <SelectCity />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('buildingId')(
+            <BuildSelect />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('title')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="请输入标题"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('time')(
+            <DatePicker onChange={timeOnChange} />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <AuthButton name="admin.buildingDynamic.search" noRight={null}>
+            <Button type="primary" htmlType="submit">
+              搜索
+            </Button>
+          </AuthButton>
+          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+            重置
+            </Button>
+        </Form.Item>
+      </Form>
+      <AuthButton name="admin.buildingDynamic.add.post" noRight={null}>
+        <Button type='primary' onClick={toEditGoods()}>新增</Button>
+      </AuthButton>
+      <Table
+        // onRow={record => {
+        //   return {
+        //     onClick: getActivityDetail(record.dynamicId),
+        //   };
+        // }}
+        dataSource={data.list} columns={columns} pagination={false} rowKey="dynamicId" />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} current={data.current} />
+      </div>
+      <Prompt message={location =>
+        location.pathname.startsWith("/activity/ActivityList")
+          ? true
+          : location.pathname.startsWith("/activity/detailActivity") ? true : localStorage.removeItem("activePageParams")} />
+    </Card>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+// ||"/activity/detailActivity"
+export default WrappedHeader

src/pages/activity/SignupActivity/detail.jsx

@@ -0,0 +1,426 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, Card, Radio, DatePicker, message, Upload } from 'antd';
+
+import apis from '@/services/apis';
+import moment from 'moment';
+import router from 'umi/router';
+import BuildSelect from '@/components/SelectButton/BuildSelect'
+import request from '@/utils/request'
+import yinhao from '@/assets/yinhao.png'
+import logo from '@/assets/logo.png';
+import touxiang from '@/assets/touxiang.jpg';
+import poster1 from '@/assets/poster1.png';
+import poster2 from '@/assets/poster2.png';
+import xiaochengxu from '@/assets/xiaochengxu.png';
+import AuthButton from '@/components/AuthButton';
+import Prompt from 'umi/prompt';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+const { TextArea } = Input;
+
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
+
+const cancelPage = () => {
+  router.go('-1')
+}
+
+const getSignList = dynamicId => {
+  router.push({
+    pathname: '/activity/SignList',
+    query: {
+      dynamicId,
+    },
+  });
+}
+
+const newQrcode = row => {
+  const x = new XMLHttpRequest();
+  const resourceUrl = row.qrCode
+  x.open('GET', resourceUrl, true);
+  x.responseType = 'blob';
+  x.onload = function (e) {
+    const url = window.URL.createObjectURL(x.response)
+    const a = document.createElement('a');
+    a.href = url;
+    a.style.display = 'none'
+    a.download = '活动二维码.png';
+    a.click();
+  }
+  x.send();
+}
+
+const BasicForm = props => {
+  const detailData = props.detailData || {}
+
+  const radioOnChange = e => {
+    // setIsEnlist(e.target.value)
+  }
+
+  const { dynamicId } = props
+  const handleSubmit = e => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+        const { activityTime, signupTime } = values
+        const [startDate, endDate] = activityTime
+        values.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
+        values.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
+        if (signupTime) {
+          const [enlistStart, enlistEnd] = signupTime
+          values.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
+          values.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
+        }
+        console.log('submit data --->', values)
+        if (dynamicId) {
+          values.dynamicId = dynamicId
+          request({ ...apis.activity.update, data: values }).then(data => {
+            message.info('保存成功')
+            // router.go(-1)
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+        } else {
+          request({ ...apis.activity.add, data: { ...values } }).then((data) => {
+            message.info('保存成功')
+            router.push({
+              pathname: '/activity/editActivity',
+              query: {
+                dynamicId: data.dynamicId,
+              },
+            });
+            // router.go(-1)
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+        }
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
+  return (
+    <>
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
+        <Form.Item label="所属项目">
+          {getFieldDecorator('buildingId', {
+            initialValue: detailData.buildingId,
+            rules: [
+              {
+                required: true,
+                message: '请选择所属项目',
+              },
+            ],
+          })(<BuildSelect disabled />)}
+        </Form.Item>
+        <Form.Item label="活动封面图1">
+          <img src={detailData.listImgUrl} height="210px" width="375px" />
+        </Form.Item>
+        <Form.Item label="活动封面图2">
+          <img src={detailData.bannerListImg} height="125px" width="375px" />
+        </Form.Item>
+        <Form.Item label="活动详情主图">
+          <img src={detailData.imgUrl} height="300px" width="375px" />
+        </Form.Item>
+        <Form.Item label="活动标题">
+          <span>{detailData.title}</span>
+        </Form.Item>
+        <Form.Item label="活动时间">
+          <span>{`${moment(detailData.startDate).format('YYYY-MM-DD HH:mm')} —— ${moment(detailData.endDate).format('YYYY-MM-DD HH:mm')}`}</span>
+        </Form.Item>
+        <Form.Item label="活动地点">
+          <span>{detailData.address}</span>
+        </Form.Item>
+        <Form.Item label="活动人数">
+          <span>{detailData.personNum}</span>
+        </Form.Item>
+        <Form.Item label="阅读量">
+          <span>{detailData.pvNum}</span>
+        </Form.Item>
+        <Form.Item label="转发量">
+          <span>{detailData.shareNum}</span>
+        </Form.Item>
+        <Form.Item label="收藏数">
+          <span>{detailData.saveNum}</span>
+        </Form.Item>
+        <Form.Item label="最大报名人数">
+          <span>{detailData.maxEnlistByPerson}</span>
+        </Form.Item>
+        <Form.Item label="活动详情">
+          <div style={{ maxHeight: '500px', overflowY: 'auto' }} dangerouslySetInnerHTML={{ __html: detailData.desc }}></div>
+        </Form.Item>
+        <Form.Item label="报名时间">
+          <span>{`${moment(detailData.enlistStart).format('YYYY-MM-DD HH:mm')} —— ${moment(detailData.enlistEnd).format('YYYY-MM-DD HH:mm')}`}</span>
+        </Form.Item>
+        <Form.Item label="权重">
+          <span>{detailData.heavy}</span>
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+const Basic = Form.create({ name: 'BasicForm' })(BasicForm);
+
+const Poster = (props) => {
+  const { dynamicId } = props
+  const [inputValue, changeInput] = useState('')
+  const [textAreaValue, changeTextArea] = useState('')
+  const [imgValue, changeImg] = useState('')
+  const [posterId, setPosterId] = useState('')
+
+  if (dynamicId) {
+    console.log(dynamicId, 'dynamicId')
+    useEffect(() => {
+      request({ ...apis.activity.poster, params: { targetId: dynamicId, targetType: 'activity' } }).then((data) => {
+        console.log(data, "2222")
+        if (data.length > 0) {
+          setPosterId(data[0].posterId)
+          changeImg(data[0].posterImg)
+          changeTextArea(data[0].posterDescription)
+          changeInput(data[0].posterTitle)
+        }
+      }).catch((err) => {
+        message.info(err.msg || err.message)
+      })
+      getMiniappName()
+    }, [])
+  } else {
+    getMiniappName()
+  }
+  // 获取小程序名称
+  const [miniappName, setMiniappName] = useState('')
+  function getMiniappName() {
+    request({ ...apis.building.getMiniappName }).then(res => {
+      console.log(res, "0000000000000")
+      setMiniappName(res)
+    })
+  }
+
+  const submitPoster = () => {
+    if (dynamicId) {
+      if (posterId) {
+        request({ ...apis.activity.updatePoster, urlData: { id: posterId }, data: { targetId: dynamicId, targetType: 'activity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
+          message.info("保存成功")
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      } else {
+        request({ ...apis.activity.addPoster, data: { targetId: dynamicId, targetType: 'activity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
+          setPosterId(data.posterId)
+          message.info("保存成功")
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      }
+    } else {
+      message.warn("请先保存基本信息数据")
+    }
+  }
+
+  return <div>
+    <div style={{ display: 'flex' }}>
+      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
+          <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />
+          <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
+            <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
+            <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
+            <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
+            <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
+          </div>
+          <p style={{
+            margin: '10px 20px',
+            fontSize: '20px',
+            color: '#222',
+            fontWeight: '600',
+            display: '-webkit-box',
+            lineClamp: '3',
+            height: '60px',
+            WebkitLineClamp: '2',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}>{inputValue ? inputValue : '海报标题'}</p>
+
+          <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
+          <p style={{
+            margin: '16px 20px 28px 20px',
+            fontSize: '17px',
+            color: '#999',
+            display: '-webkit-box',
+            lineClamp: '3',
+            height: '72px',
+            WebkitLineClamp: '3',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
+          <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
+            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
+            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>{miniappName || '置业V顾问'}</span>报名活动</p>
+            <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} src={xiaochengxu} alt="" />
+          </div>
+        </div>
+        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
+      </div>
+
+      {/* <div >
+        <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动海报图</p>
+          <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
+        </div>
+        <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：640*670px，比例64:67,格式：jpg，用于普通活动海报</p>
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
+          <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
+        </div>
+        <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
+          <TextArea rows={5} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
+        </div>
+
+      </div> */}
+    </div>
+    {/* <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
+    <Button onClick={() => cancelPage()}>
+      取消
+    </Button> */}
+  </div>
+
+}
+
+
+
+const Share = (props) => {
+  const { dynamicId } = props
+
+  const [inputValue, changeInput] = useState('')
+  const [imgValue, changeImg] = useState('')
+  const [shareContentId, setShareContentId] = useState('')
+
+
+  useEffect(() => {
+    if (dynamicId) {
+      request({ ...apis.activity.shareContent, params: { targetId: dynamicId, targetType: 'activity' }, }).then((data) => {
+        if (data.length > 0) {
+          setShareContentId(data[0].shareContentId)
+          changeImg(data[0].shareContentImg)
+          changeInput(data[0].shareContentTitle)
+        }
+      }).catch((err) => {
+        message.info(err.msg || err.message)
+      })
+    }
+  }, [])
+
+
+  const submitShare = () => {
+    if (dynamicId) {
+      if (shareContentId) {
+        request({ ...apis.activity.updateShareContent, urlData: { id: shareContentId }, data: { targetId: dynamicId, shareContentType: 'activity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
+          message.info("保存成功")
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      } else {
+        request({ ...apis.activity.addShareContent, data: { targetId: dynamicId, shareContentType: 'activity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
+          setShareContentId(data.shareContentId)
+          message.info("保存成功")
+        }).catch(err => {
+          message.info(err.msg || err.message)
+        })
+      }
+    } else {
+      message.warn("请先保存基本信息数据")
+    }
+  }
+
+  return <div style={{ padding: '20px' }}>
+    <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
+      <div>
+        <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />橙蕉互动</p>
+        <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
+        <img style={{ width: '200px', height: '160px' }} src={imgValue ? imgValue : poster2} alt="" />
+      </div>
+    </div>
+    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享标题</p>
+      {inputValue === '' ? '无' : <span>{inputValue}</span>}
+    </div>
+    <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动分享图</p>
+      {imgValue === '' ? '无' : <img src={imgValue} height="120px" height="150px" />}
+    </div>
+    {/* <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
+    <Button onClick={() => cancelPage()}>
+      取消
+    </Button> */}
+  </div>
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const Edit = props => {
+  const [tab, changeTab] = useState('basic')
+  const { dynamicId } = props.location.query
+  const [detailData, setDetailData] = useState(false)
+
+  const getDynamicData = dynamicId => {
+    request({ ...apis.activity.details, params: { dynamicId } }).then((data) => {
+      console.log(data)
+      data.activityTime = [moment(data.startDate), moment(data.endDate)]
+      data.signupTime = [moment(data.enlistStart), moment(data.enlistEnd)]
+
+      setDetailData(data)
+    })
+  }
+
+
+  useEffect(() => {
+    if (dynamicId) {
+      getDynamicData(dynamicId);
+    }
+  }, [])
+
+
+  
+
+  return (
+    <Card>
+      <div>
+        <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
+          <Radio.Button value="basic">基本信息</Radio.Button>
+          <Radio.Button value="poster">海报图片</Radio.Button>
+          <Radio.Button value="share">分享设置</Radio.Button>
+        </Radio.Group>
+      </div>
+      <div>
+        {tab === 'basic' && <Basic dynamicId={dynamicId} detailData={detailData} />}
+        {tab === 'poster' && <Poster  dynamicId={dynamicId} />}
+        {tab === 'share' && <Share  dynamicId={dynamicId} />}
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <AuthButton name="admin.SignList.get" noRight={null}>
+          {(detailData.activityStatus === 0 || detailData.activityStatus === 2) && <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={getSignList.bind(this, detailData.dynamicId)}><Button>报名记录</Button></span>}
+        </AuthButton>
+        <AuthButton name="admin.dymic.qrcode" noRight={null}>
+          {(detailData.activityStatus === 0 || detailData.activityStatus === 2) && <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={newQrcode.bind(this, detailData)}>{<Button>下载二维码</Button>}</span>}
+        </AuthButton>
+        <Button onClick={() => cancelPage()}>
+          取消
+          </Button>
+      </div>
+    </Card>
+  );
+}
+
+export default Edit

src/pages/activity/SignupActivity/index.jsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Form,
+  Input,
+  Button,
+  Icon,
+  Typography,
+  message,
+  Table,
+  Pagination,
+  Modal,
+  DatePicker,
+  Card,
+} from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import AuthButton from '@/components/AuthButton';
+import Prompt from 'umi/prompt';
+import withActions from '@/components/ActionList';
+import EditIcon from '@/components/EditIcon';
+import Navigate from '@/components/Navigate';
+import SelectCity from '@/components/SelectButton/CitySelect';
+import BuildSelect from '@/components/SelectButton/BuildSelect';
+import apis from '@/services/apis';
+import request from '@/utils/request';
+import QueryTable from '@/components/QueryTable';
+
+const SignupActivity = props => {
+  const searchFields = [
+    {
+      name: 'cityId',
+      label: '城市',
+      placeholder: '请选择城市',
+      render: () => <SelectCity style={{ width: 160 }} />,
+    },
+    {
+      name: 'buildingId',
+      label: '项目',
+      placeholder: '请选择项目',
+      render: () => <BuildSelect style={{ width: 160 }} />,
+    },
+
+    {
+      name: 'title',
+      label: '标题',
+      placeholder: '请输入标题',
+    },
+    {
+      name: 'time',
+      label: '时间',
+      placeholder: '请选择时间',
+      type: 'datepicker',
+    },
+  ];
+
+  const toSignupActivityDetail = dynamicId => () => {
+    router.push({
+      pathname: '/activity/SignupActivity/detail',
+      query: {
+        dynamicId,
+      },
+    });
+  };
+
+    // 跳转到编辑
+    const toActivityEdit = dynamicId => () => {
+        router.push({
+          pathname: '/activity/editActivity',
+          query: {
+            dynamicId,
+          },
+        });
+      }
+    
+
+  const columns = [
+    {
+      title: '活动标题',
+      dataIndex: 'title',
+      key: 'title',
+      align: 'center',
+      width: '20%',
+      render: (x, row) => (
+        <Navigate onClick={toSignupActivityDetail(row.dynamicId)}>
+          <Typography.Text ellipsis>{row.title}</Typography.Text>
+        </Navigate>
+      ),
+    },
+    {
+      title: '活动时间',
+      dataIndex: 'startDate',
+      key: 'startDate',
+      align: 'center',
+      width: '15%',
+      // width: '20%',
+      render: (x, row) => (
+        <>
+          <span>{`${moment(row.startDate).format('YYYY-MM-DD')} —— ${moment(row.endDate).format(
+            'YYYY-MM-DD',
+          )}`}</span>
+        </>
+      ),
+    },
+    {
+      title: '已参与人数',
+      dataIndex: 'count',
+      key: 'count',
+      align: 'center',
+      //   render: (x, row) => <Navigate onClick={getJoinPeople(row.dynamicId)}>{row.count}</Navigate>,
+    },
+    // {
+    //   title: '阅读量',
+    //   dataIndex: 'pvNum',
+    //   key: 'pvNum',
+    //   align: 'center',
+    //   // width: '10%',
+    // },
+    // {
+    //   title: '转发量',
+    //   dataIndex: 'shareNum',
+    //   key: 'shareNum',
+    //   align: 'center',
+    //   // width: '10%',
+    // },
+    // {
+    //   title: '收藏数',
+    //   dataIndex: 'saveNum',
+    //   key: 'saveNum',
+    //   align: 'center',
+    //   // width: '10%',
+    // },
+    {
+      title: '报名状态',
+      dataIndex: 'activityStatus',
+      key: 'activityStatus',
+      align: 'center',
+      render: activityStatus =>
+        activityStatus == 0 ? '进行中' : activityStatus == 1 ? '未开始' : '已结束',
+    },
+    {
+      title: '权重',
+      dataIndex: 'heavy',
+      key: 'heavy',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+        render: withActions((x, row) => [
+        //   <AuthButton name="admin.buildingDynamic.send.dynamicId.put" noRight={null}>
+        //     <EditIcon type={row.status === 1 ? 'cancel' : 'publish'} text={row.status === 1 ? '取消发布' : '发布'} onClick={sendOrPublicDynamic.bind(this, row)} />
+        //   </AuthButton>,
+
+        // //   <EditIcon type="look" text="查看详情" onClick={toSignupActivityDetail(row.dynamicId)} />,
+
+        //   row.activityStatus === 0 ?
+        //     <AuthButton name="admin.buildingDynamic.finish.put" noRight={null}>
+        //       <EditIcon type="end" text="结束活动" onClick={finishDynamic.bind(this, row)} />
+        //     </AuthButton> : null,
+
+        //   <AuthButton name="admin.buildingDynamic.tag" noRight={null}>
+        //     <EditIcon type={row.weight === 1 ? 'cancel' : 'add'} text={row.weight === 1 ? '取消标签' : '添加标签'} onClick={topDynamic(row)} />
+        //   </AuthButton>,
+
+        //   <EditIcon type={row.home === 1 ? 'cancel' : 'top'} text={row.home === 1 ? '取消推首页' : '推荐首页'} onClick={homeDynamic(row)} />,
+
+        //   <AuthButton name="admin.buildingDynamic.dataRecord" noRight={null}>
+        //     <EditIcon type="record" text="数据记录" onClick={toDataReacord(row.dynamicId)} />
+        //   </AuthButton>,
+
+          (row.activityStatus === 0 || row.activityStatus === 1) ?
+            <AuthButton name="admin.buildingDynamic.update.put" noRight={null}>
+              <EditIcon type="edit" text="编辑" onClick={toActivityEdit(row.dynamicId, row.count)} />
+            </AuthButton> : null,
+        ]),
+    },
+  ];
+  return (
+    <QueryTable
+      // ref={ref}
+      rowKey="dynamicId"
+      api={apis.activity.list}
+      searchFields={searchFields}
+      columns={columns}
+      postData={data => {
+        console.log(data, 'data');
+        data.time && (data.time = `${moment(data.time).format('YYYY-MM-DDT00:00:00.000')}Z`);
+        return data;
+      }}
+      // actionRender={actionRender}
+      // onPageChange={(pg) => setPage(pg)}
+    />
+  );
+};
+
+export default SignupActivity;