huodong

src/pages/activity/editActivity.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker,message } from 'antd';
+import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import moment from 'moment';
@@ -8,37 +8,42 @@ import BuildSelect from '../../components/SelectButton/BuildSelect'
 import XForm, { FieldTypes } from '../../components/XForm';
 import Wangedit from '../../components/Wangedit/Wangedit'
 import request from '../../utils/request'
+import PosterBottom from '../../assets/bottom.png'
+import yinhao from '../../assets/yinhao.png'
+import ImageUploader from '../../components/XForm/ImageUpload';
+import logo from '../../assets/logo.png';
 
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
 /**
  *
  *
  * @param {*} props
  * @returns
  */
- const Edit = (props) => {
-  const [ tab, changeTab ] = useState('basic')
+const Edit = (props) => {
+  const [tab, changeTab] = useState('basic')
   const dynamicId = props.location.query.dynamicId
-  const [ dynamicData, setDynamicData ] = useState({})
-  if(dynamicId){
+  const [dynamicData, setDynamicData] = useState({})
+  if (dynamicId) {
     useEffect(() => {
       getDynamicData(dynamicId);
-    },[])
+    }, [])
 
-  // 查询列表
-  const getDynamicData = (dynamicId) => {
-    request({
+    // 查询列表
+    const getDynamicData = (dynamicId) => {
+      request({
         url: '/api/admin/buildingDynamic/Details',
         method: 'GET',
         params: { dynamicId },
-    }).then((data) => {
+      }).then((data) => {
         console.log(data)
         setDynamicData(data)
-    })
-  }
+      })
+    }
   }
 
-  const cancelPage = () =>{
+  const cancelPage = () => {
     router.push({
       pathname: '/activity/ActivityList',
     });
@@ -52,7 +57,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         render: <BuildSelect />,
         value: dynamicData.buildingId,
         rules: [
-          {required: true, message: '请选择所属项目'},
+          { required: true, message: '请选择所属项目' },
         ]
       },
       {
@@ -67,16 +72,16 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         type: FieldTypes.Text,
         value: dynamicData.title,
         rules: [
-          {required: true, message: '请输入活动标题'},
+          { required: true, message: '请输入活动标题' },
         ]
       },
       {
         label: '活动时间',
         name: 'activityTime',
         type: FieldTypes.RangePicker,
-        value: dynamicData.startDate != null ?  [moment(dynamicData.startDate,'YYYY-MM-DD'),moment(dynamicData.endDate,'YYYY-MM-DD')] : null,
+        value: dynamicData.startDate != null ? [moment(dynamicData.startDate, 'YYYY-MM-DD'), moment(dynamicData.endDate, 'YYYY-MM-DD')] : null,
         rules: [
-          {required: true, message: '请选择活动时间'},
+          { required: true, message: '请选择活动时间' },
         ]
       },
       {
@@ -85,7 +90,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         type: FieldTypes.Text,
         value: dynamicData.address,
         rules: [
-          {required: true, message: '请输入活动地点'},
+          { required: true, message: '请输入活动地点' },
         ]
       },
       {
@@ -94,7 +99,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         type: FieldTypes.Text,
         value: dynamicData.enlistNum,
         rules: [
-          {required: true, message: '请输入活动人数'},
+          { required: true, message: '请输入活动人数' },
         ]
       },
       {
@@ -107,24 +112,24 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         label: '是否需要报名',
         name: 'isEnlist',
         render: <Radio.Group name="radiogroup">
-                  <Radio value={1}>是</Radio>
-                  <Radio value={0}>否</Radio>
-                </Radio.Group>,
-        value: dynamicData.isEnlist != null ? dynamicData.isEnlist-0 : 1,
+          <Radio value={1}>是</Radio>
+          <Radio value={0}>否</Radio>
+        </Radio.Group>,
+        value: dynamicData.isEnlist != null ? dynamicData.isEnlist - 0 : 1,
       },
       {
         label: '报名时间',
         name: 'signupTime',
         type: FieldTypes.RangePicker,
-        value: dynamicData.enlistStart != null ?  [moment(dynamicData.enlistStart,'YYYY-MM-DD'),moment(dynamicData.enlistEnd,'YYYY-MM-DD')] : null,
+        value: dynamicData.enlistStart != null ? [moment(dynamicData.enlistStart, 'YYYY-MM-DD'), moment(dynamicData.enlistEnd, 'YYYY-MM-DD')] : null,
         rules: [
-          {required: true, message: '请选择报名时间'},
+          { required: true, message: '请选择报名时间' },
         ]
       },
     ]
-  
-    const handleSubmit = val => { 
-      let {activityTime,signupTime, ...submitValue} = val
+
+    const handleSubmit = val => {
+      let { activityTime, signupTime, ...submitValue } = val
       const [startDate, endDate] = activityTime
       submitValue.startDate = moment(startDate).format('YYYY-MM-DD');
       submitValue.endDate = moment(endDate).format('YYYY-MM-DD');
@@ -132,7 +137,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
       submitValue.enlistStart = moment(enlistStart).format('YYYY-MM-DD');
       submitValue.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD');
       console.log('submit data --->', submitValue)
-      if(dynamicId){
+      if (dynamicId) {
         submitValue.dynamicId = dynamicId
         request({
           url: '/api/admin/buildingDynamic/update',
@@ -143,7 +148,7 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         }).catch((err) => {
           message.info(err.msg || err.message)
         })
-      }else{
+      } else {
         request({
           url: '/api/admin/buildingDynamic/add',
           method: 'POST',
@@ -155,16 +160,83 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         })
       }
     }
-    
+
     return <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
   }
-  
+
   const Poster = (props) => {
-   return <div>Poster</div>
+
+    return <div style={{ display: 'flex' }}>
+      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
+        <div style={{ width: '375px', height: '785px', 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="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" alt="" />
+
+          <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
+            <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src="http://img0.imgtn.bdimg.com/it/u=3463541938,2540701974&fm=26&gp=0.jpg" 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'
+          }}>破晓·内容生态下半场的版权到企业高峰论坛会议破晓·内容生态下半场的版权到企业高峰论坛活动</p>
+
+          <img src={yinhao} style={{ width: '30px', marginLeft: '10px' }} alt="" />
+          <p style={{
+            margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
+            display: '-webkit-box', lineClamp: '3', height: '76px',
+            WebkitLineClamp: '3',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}>活动描述:破晓·内容生态下半场的版权到企业高峰论坛活动破晓·内容生态下半场的版权到企业高峰论坛活动破晓·内容生态下半场的版权到企业高峰论坛活动</p>
+          <img src={PosterBottom} style={{ width: '100%' }} alt="" />
+        </div>
+        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
+      </div>
+      <div></div>
+    </div>
   }
- 
+
   const Share = (props) => {
-    return <div>Share</div>
+    const fields = [
+      {
+        label: '分享模板',
+        name: 'buildingId',
+        render: () => <div style={{ margin: ' 10px 20px' }}>
+          <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' }}>置业V客厅 精准获客平台</p>
+          <img style={{ width: '200px', height: '140px' }} src="http://house.china.com.cn/nanjing/UserFiles/20171124/11070256.jpg" alt="" />
+        </div>,
+      },
+      {
+        label: '海报标题',
+        name: 'newsTypeName',
+        type: FieldTypes.Text,
+        value: '',
+        rules: [
+          { required: true, message: '请输入咨询名称' },
+        ]
+      },
+      {
+        label: '类型图',
+        name: 'newsTypeImg',
+        type: FieldTypes.ImageUploader,
+        value: 'newsTypeImg',
+      },
+    ]
+    const handleSubmit = (values) => {
+
+    }
+    return <div>
+      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
+    </div>
   }
 
   return (
@@ -177,13 +249,13 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
         </Radio.Group>
       </div>
       <div>
-        { tab === 'basic' && <Basic /> }
-        { tab === 'poster' && <Poster /> }
-        { tab === 'share' && <Share /> }
+        {tab === 'basic' && <Basic />}
+        {tab === 'poster' && <Poster />}
+        {tab === 'share' && <Share />}
       </div>
     </div>
   );
- }
+}