许静 5 lat temu
rodzic
commit
cb681ab969
1 zmienionych plików z 142 dodań i 60 usunięć
  1. 142
    60
      src/pages/activity/editActivity.jsx

+ 142
- 60
src/pages/activity/editActivity.jsx Wyświetl plik

@@ -1,5 +1,5 @@
1 1
 import React, { useState, useEffect } from 'react';
2
-import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message } from 'antd';
2
+import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload } from 'antd';
3 3
 import { FormattedMessage } from 'umi-plugin-react/locale';
4 4
 import styles from '../style/GoodsList.less';
5 5
 import moment from 'moment';
@@ -14,6 +14,7 @@ import ImageUploader from '../../components/XForm/ImageUpload';
14 14
 import logo from '../../assets/logo.png';
15 15
 
16 16
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
17
+const { TextArea } = Input;
17 18
 
18 19
 /**
19 20
  *
@@ -22,7 +23,8 @@ const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
22 23
  * @returns
23 24
  */
24 25
 const Edit = (props) => {
25
-  const [tab, changeTab] = useState('basic')
26
+  const [tab, changeTab] = useState('poster')
27
+  // const [tab, changeTab] = useState('basic')
26 28
   const dynamicId = props.location.query.dynamicId
27 29
   const [dynamicData, setDynamicData] = useState({})
28 30
   if (dynamicId) {
@@ -165,77 +167,157 @@ const Edit = (props) => {
165 167
   }
166 168
 
167 169
   const Poster = (props) => {
170
+    const [inputValue, changeInput] = useState('')
171
+    const [textAreaValue, changeTextArea] = useState('')
172
+    return <div>
173
+      <div style={{ display: 'flex' }}>
174
+        <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
175
+          <div style={{ width: '375px', height: '785px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
176
+
177
+            <img style={{ width: '100%', height: '300px' }} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" alt="" />
168 178
 
169
-    return <div style={{ display: 'flex' }}>
170
-      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
171
-        <div style={{ width: '375px', height: '785px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
179
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
180
+              <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="" />
181
+              <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
182
+              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您阅读</span>
183
+              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
184
+            </div>
185
+            <p style={{
186
+              margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
187
+              display: '-webkit-box', lineClamp: '3', height: '60px',
188
+              WebkitLineClamp: '2',
189
+              WebkitBoxOrient: 'vertical',
190
+              overflow: 'hidden',
191
+              textOverflow: 'ellipsis'
192
+            }}>{inputValue ? inputValue : '海报标题'}</p>
172 193
 
173
-          <img style={{ width: '100%', height: '300px' }} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" alt="" />
194
+            <img src={yinhao} style={{ width: '30px', marginLeft: '10px' }} alt="" />
195
+            <p style={{
196
+              margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
197
+              display: '-webkit-box', lineClamp: '3', height: '76px',
198
+              WebkitLineClamp: '3',
199
+              WebkitBoxOrient: 'vertical',
200
+              overflow: 'hidden',
201
+              textOverflow: 'ellipsis'
202
+            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
203
+            <img src={PosterBottom} style={{ width: '100%' }} alt="" />
204
+          </div>
205
+          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
206
+        </div>
174 207
 
175
-          <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
176
-            <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="" />
177
-            <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
178
-            <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您阅读</span>
179
-            <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
208
+        <div >
209
+          <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
210
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
211
+            <Avatar />
212
+          </div>
213
+          <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
214
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
215
+            <Input style={{ width: '20vw' }} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
216
+          </div>
217
+          <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
218
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
219
+            <TextArea rows={5} onChange={e => changeTextArea(e.target.value)} />
180 220
           </div>
181
-          <p style={{
182
-            margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
183
-            display: '-webkit-box', lineClamp: '3', height: '60px',
184
-            WebkitLineClamp: '2',
185
-            WebkitBoxOrient: 'vertical',
186
-            overflow: 'hidden',
187
-            textOverflow: 'ellipsis'
188
-          }}>破晓·内容生态下半场的版权到企业高峰论坛会议破晓·内容生态下半场的版权到企业高峰论坛活动</p>
189 221
 
190
-          <img src={yinhao} style={{ width: '30px', marginLeft: '10px' }} alt="" />
191
-          <p style={{
192
-            margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
193
-            display: '-webkit-box', lineClamp: '3', height: '76px',
194
-            WebkitLineClamp: '3',
195
-            WebkitBoxOrient: 'vertical',
196
-            overflow: 'hidden',
197
-            textOverflow: 'ellipsis'
198
-          }}>活动描述:破晓·内容生态下半场的版权到企业高峰论坛活动破晓·内容生态下半场的版权到企业高峰论坛活动破晓·内容生态下半场的版权到企业高峰论坛活动</p>
199
-          <img src={PosterBottom} style={{ width: '100%' }} alt="" />
200 222
         </div>
201
-        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
202 223
       </div>
203
-      <div></div>
224
+      <Button type="primary" onClick={() => router.go(-1)} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
225
+      <Button onClick={() => router.go(-1)}>取消</Button>
204 226
     </div>
227
+
228
+  }
229
+  // 图片上传
230
+  function getBase64(img, callback) {
231
+    const reader = new FileReader();
232
+    reader.addEventListener('load', () => callback(reader.result));
233
+    reader.readAsDataURL(img);
234
+  }
235
+
236
+  function beforeUpload(file) {
237
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
238
+    if (!isJpgOrPng) {
239
+      message.error('You can only upload JPG/PNG file!');
240
+    }
241
+    const isLt2M = file.size / 1024 / 1024 < 2;
242
+    if (!isLt2M) {
243
+      message.error('Image must smaller than 2MB!');
244
+    }
245
+    return isJpgOrPng && isLt2M;
205 246
   }
206 247
 
248
+  class Avatar extends React.Component {
249
+    state = {
250
+      loading: false,
251
+    };
252
+
253
+    handleChange = info => {
254
+      if (info.file.status === 'uploading') {
255
+        this.setState({ loading: true });
256
+        return;
257
+      }
258
+      if (info.file.status === 'done') {
259
+        getBase64(info.file.originFileObj, imageUrl =>
260
+          this.setState({
261
+            imageUrl,
262
+            loading: false,
263
+          }),
264
+        );
265
+      }
266
+    }
267
+    render() {
268
+      const uploadButton = (
269
+        <div>
270
+          <Icon type={this.state.loading ? 'loading' : 'plus'} style={{ fontSize: '50px' }} />
271
+        </div>
272
+      );
273
+      const { imageUrl } = this.state;
274
+      return (
275
+        <Upload
276
+          name="avatar"
277
+          listType="picture-card"
278
+          className="avatar-uploader"
279
+          showUploadList={false}
280
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
281
+          beforeUpload={beforeUpload}
282
+          onChange={this.handleChange}
283
+        >
284
+          {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
285
+        </Upload>
286
+      );
287
+    }
288
+  }
289
+  // 图片上传 end
290
+
291
+
207 292
   const Share = (props) => {
208
-    const fields = [
209
-      {
210
-        label: '分享模板',
211
-        name: 'buildingId',
212
-        render: () => <div style={{ margin: ' 10px 20px' }}>
293
+    const [inputValue, changeInput] = useState('')
294
+    // const changeInputValue = e => {
295
+    //   changeInput(e.target.value)
296
+    // }
297
+
298
+    // const handleSubmit = (values) => {
299
+
300
+    // }
301
+
302
+    return <div style={{ padding: '20px' }}>
303
+      <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
304
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
305
+        <div>
213 306
           <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />知与行互动</p>
214
-          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>置业V客厅 精准获客平台</p>
307
+          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
215 308
           <img style={{ width: '200px', height: '140px' }} src="http://house.china.com.cn/nanjing/UserFiles/20171124/11070256.jpg" alt="" />
216
-        </div>,
217
-      },
218
-      {
219
-        label: '海报标题',
220
-        name: 'newsTypeName',
221
-        type: FieldTypes.Text,
222
-        value: '',
223
-        rules: [
224
-          { required: true, message: '请输入咨询名称' },
225
-        ]
226
-      },
227
-      {
228
-        label: '类型图',
229
-        name: 'newsTypeImg',
230
-        type: FieldTypes.ImageUploader,
231
-        value: 'newsTypeImg',
232
-      },
233
-    ]
234
-    const handleSubmit = (values) => {
235
-
236
-    }
237
-    return <div>
238
-      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
309
+        </div>
310
+      </div>
311
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
312
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
313
+        <Input placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
314
+      </div>
315
+      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
316
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
317
+        <Avatar />
318
+      </div>
319
+      <Button type="primary" htmlType="submit" style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
320
+      <Button onClick={() => router.go(-1)}>取消</Button>
239 321
     </div>
240 322
   }
241 323