change

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, Upload } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import moment from 'moment';
@@ -14,6 +14,7 @@ import ImageUploader from '../../components/XForm/ImageUpload';
 import logo from '../../assets/logo.png';
 
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+const { TextArea } = Input;
 
 /**
  *
@@ -22,7 +23,8 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
  * @returns
  */
 const Edit = (props) => {
-  const [tab, changeTab] = useState('basic')
+  const [tab, changeTab] = useState('poster')
+  // const [tab, changeTab] = useState('basic')
   const dynamicId = props.location.query.dynamicId
   const [dynamicData, setDynamicData] = useState({})
   if (dynamicId) {
@@ -165,77 +167,157 @@ const Edit = (props) => {
   }
 
   const Poster = (props) => {
+    const [inputValue, changeInput] = useState('')
+    const [textAreaValue, changeTextArea] = useState('')
+    return <div>
+      <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="" />
 
-    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' }}>
+            <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'
+            }}>{inputValue ? inputValue : '海报标题'}</p>
 
-          <img style={{ width: '100%', height: '300px' }} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" alt="" />
+            <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'
+            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
+            <img src={PosterBottom} style={{ width: '100%' }} alt="" />
+          </div>
+          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
+        </div>
 
-          <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 >
+          <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
+            <Avatar />
+          </div>
+          <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' }} 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} onChange={e => changeTextArea(e.target.value)} />
           </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>
+      <Button type="primary" onClick={() => router.go(-1)} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
+      <Button onClick={() => router.go(-1)}>取消</Button>
     </div>
+
+  }
+  // 图片上传
+  function getBase64(img, callback) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+  }
+
+  function beforeUpload(file) {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      message.error('You can only upload JPG/PNG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('Image must smaller than 2MB!');
+    }
+    return isJpgOrPng && isLt2M;
   }
 
+  class Avatar extends React.Component {
+    state = {
+      loading: false,
+    };
+
+    handleChange = info => {
+      if (info.file.status === 'uploading') {
+        this.setState({ loading: true });
+        return;
+      }
+      if (info.file.status === 'done') {
+        getBase64(info.file.originFileObj, imageUrl =>
+          this.setState({
+            imageUrl,
+            loading: false,
+          }),
+        );
+      }
+    }
+    render() {
+      const uploadButton = (
+        <div>
+          <Icon type={this.state.loading ? 'loading' : 'plus'} style={{ fontSize: '50px' }} />
+        </div>
+      );
+      const { imageUrl } = this.state;
+      return (
+        <Upload
+          name="avatar"
+          listType="picture-card"
+          className="avatar-uploader"
+          showUploadList={false}
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          beforeUpload={beforeUpload}
+          onChange={this.handleChange}
+        >
+          {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+        </Upload>
+      );
+    }
+  }
+  // 图片上传 end
+
+
   const Share = (props) => {
-    const fields = [
-      {
-        label: '分享模板',
-        name: 'buildingId',
-        render: () => <div style={{ margin: ' 10px 20px' }}>
+    const [inputValue, changeInput] = useState('')
+    // const changeInputValue = e => {
+    //   changeInput(e.target.value)
+    // }
+
+    // const handleSubmit = (values) => {
+
+    // }
+
+    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' }}>置业V客厅 精准获客平台</p>
+          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业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>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
+        <Input placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
+      </div>
+      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+        <Avatar />
+      </div>
+      <Button type="primary" htmlType="submit" style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
+      <Button onClick={() => router.go(-1)}>取消</Button>
     </div>
   }