张延森 5 年前
父节点
当前提交
933d797d25
共有 1 个文件被更改,包括 190 次插入185 次删除
  1. 190
    185
      src/pages/activity/helpActivity/edithelpActivity.jsx

+ 190
- 185
src/pages/activity/helpActivity/edithelpActivity.jsx 查看文件

@@ -304,222 +304,227 @@ const header = props => {
304 304
 
305 305
 const Basic = Form.create({ name: 'header' })(header);
306 306
 
307
-/**
308
- *
309
- *
310
- * @param {*} props
311
- * @returns
312
- */
313
-const Edit = props => {
314
-  const [tab, changeTab] = useState('basic')
315
-  // 判断是否展示助力次数的输入框
316
-  // const [help, helpTab] = useState('1')
317
-  const { helpActivityId } = props.location.query
318
-  const [dynamicData, setDynamicData] = useState({ isEnlist: 1 })
319 307
 
320
-  // eslint-disable-next-line react-hooks/rules-of-hooks
308
+const Poster = props => {
309
+  const { helpActivityId } = props
310
+  const [inputValue, changeInput] = useState('')
311
+  const [textAreaValue, changeTextArea] = useState('')
312
+  const [imgValue, changeImg] = useState('')
313
+  const [posterId, setPosterId] = useState('')
314
+
321 315
   useEffect(() => {
322
-    // eslint-disable-next-line no-use-before-define
323 316
     if (helpActivityId) {
324
-      getDynamicData(helpActivityId);
317
+      request({ ...apis.activity.poster, params: { targetId: helpActivityId, targetType: 'helpActivity' } }).then(data => {
318
+
319
+        if (data.length > 0) {
320
+          setPosterId(data[0].posterId)
321
+          changeImg(data[0].posterImg)
322
+          changeTextArea(data[0].posterDescription)
323
+          changeInput(data[0].posterTitle)
324
+        }
325
+      }).catch(err => {
326
+        message.info(err.msg || err.message)
327
+      })
325 328
     }
329
+    // getMiniappName()
326 330
   }, [])
327 331
 
328
-  // 详情
329
-  const getDynamicData = (helpActivityId) => {
330
-    request({ ...apis.helpActivity.details, params: { helpActivityId } }).then((data) => {
331
-      console.log(data)
332
-      setDynamicData(data)
333
-    })
334
-  }
335
-
336
-  const radioOnChange = e => {
337
-    console.log(e.target.value)
338
-    setDynamicData({ ...dynamicData, isEnlist: e.target.value })
339
-  }
340
-
341
-  const Poster = (props) => {
342
-    const [inputValue, changeInput] = useState('')
343
-    const [textAreaValue, changeTextArea] = useState('')
344
-    const [imgValue, changeImg] = useState('')
345
-    const [posterId, setPosterId] = useState('')
332
+  // // 获取小程序名称
333
+  // const [miniappName, setMiniappName] = useState('')
334
+  // function getMiniappName() {
335
+  //   request({ ...apis.building.getMiniappName }).then(res => {
336
+  //     console.log(res, "0000000000000")
337
+  //     setMiniappName(res)
338
+  //   })
339
+  // }
346 340
 
341
+  const submitPoster = () => {
347 342
     if (helpActivityId) {
348
-      console.log(helpActivityId, 'helpActivityId')
349
-      useEffect(() => {
350
-        request({ ...apis.activity.poster, params: { targetId: helpActivityId, targetType: 'helpActivity' } }).then((data) => {
351
-          console.log(data, "2222")
352
-          if (data.length > 0) {
353
-            setPosterId(data[0].posterId)
354
-            changeImg(data[0].posterImg)
355
-            changeTextArea(data[0].posterDescription)
356
-            changeInput(data[0].posterTitle)
357
-          }
358
-        }).catch((err) => {
343
+      if (posterId) {
344
+        request({ ...apis.activity.updatePoster, urlData: { id: posterId }, data: { targetId: helpActivityId, targetType: 'helpActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then(data => {
345
+          message.info('保存成功')
346
+        }).catch(err => {
359 347
           message.info(err.msg || err.message)
360 348
         })
361
-        getMiniappName()
362
-      }, [])
363
-    } else {
364
-      getMiniappName()
365
-    }
366
-    // 获取小程序名称
367
-    const [miniappName, setMiniappName] = useState('')
368
-    function getMiniappName() {
369
-      request({ ...apis.building.getMiniappName }).then(res => {
370
-        console.log(res, "0000000000000")
371
-        setMiniappName(res)
372
-      })
373
-    }
374
-
375
-    const submitPoster = () => {
376
-      if (helpActivityId) {
377
-        if (posterId) {
378
-          request({ ...apis.activity.updatePoster, urlData: { id: posterId }, data: { targetId: helpActivityId, targetType: 'helpActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
379
-            message.info("保存成功")
380
-          }).catch((err) => {
381
-            message.info(err.msg || err.message)
382
-          })
383
-        } else {
384
-          request({ ...apis.activity.addPoster, data: { targetId: helpActivityId, targetType: 'helpActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
385
-            setPosterId(data.posterId)
386
-            message.info("保存成功")
387
-          }).catch((err) => {
388
-            message.info(err.msg || err.message)
389
-          })
390
-        }
391 349
       } else {
392
-        message.warn("请先保存基本信息数据")
350
+        request({ ...apis.activity.addPoster, data: { targetId: helpActivityId, targetType: 'helpActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then(data => {
351
+          setPosterId(data.posterId)
352
+          message.info("保存成功")
353
+        }).catch(err => {
354
+          message.info(err.msg || err.message)
355
+        })
393 356
       }
357
+    } else {
358
+      message.warn('请先保存基本信息数据')
394 359
     }
360
+  }
395 361
 
396
-    return <div>
397
-      <div style={{ display: 'flex' }}>
398
-        <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
399
-          <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
400
-            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />
401
-            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
402
-              <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
403
-              <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
404
-              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
405
-              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
406
-            </div>
407
-            <p style={{
408
-              margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
409
-              display: '-webkit-box', lineClamp: '3', height: '60px',
410
-              WebkitLineClamp: '2',
411
-              WebkitBoxOrient: 'vertical',
412
-              overflow: 'hidden',
413
-              textOverflow: 'ellipsis'
414
-            }}>{inputValue ? inputValue : '海报标题'}</p>
415
-
416
-            <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
417
-            <p style={{
418
-              margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
419
-              display: '-webkit-box', lineClamp: '3', height: '72px',
420
-              WebkitLineClamp: '3',
421
-              WebkitBoxOrient: 'vertical',
422
-              overflow: 'hidden',
423
-              textOverflow: 'ellipsis'
424
-            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
425
-            <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
426
-              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
427
-              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入活动查看详情</p>
428
-              <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} src={xiaochengxu} alt="" />
429
-            </div>
430
-          </div>
431
-          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
432
-        </div>
433
-
434
-        <div >
435
-          <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
436
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>助力海报图</p>
437
-            <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
362
+  return <div>
363
+    <div style={{ display: 'flex' }}>
364
+      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
365
+        <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
366
+          <img style={{ width: '100%', height: '300px' }} src={imgValue || poster1} alt="" />
367
+          <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
368
+            <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
369
+            <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
370
+            <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
371
+            <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
438 372
           </div>
439
-          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px' }}>建议图片尺寸:750*600px,比例5:4,格式:jpg,用于助力活动海报</p>
440
-          <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
441
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
442
-            <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
443
-          </div>
444
-          <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
445
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
446
-            <TextArea rows={5} maxLength={1024} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
373
+          <p style={{
374
+            margin: '10px 20px',
375
+            fontSize: '20px',
376
+            color: '#222',
377
+            fontWeight: '600',
378
+            display: '-webkit-box',
379
+            lineClamp: '3',
380
+            height: '60px',
381
+            WebkitLineClamp: '2',
382
+            WebkitBoxOrient: 'vertical',
383
+            overflow: 'hidden',
384
+            textOverflow: 'ellipsis'
385
+          }}>{inputValue || '海报标题'}</p>
386
+
387
+          <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
388
+          <p style={{
389
+            margin: '16px 20px 28px 20px',
390
+            fontSize: '17px',
391
+            color: '#999',
392
+            display: '-webkit-box',
393
+            lineClamp: '3',
394
+            height: '72px',
395
+            WebkitLineClamp: '3',
396
+            WebkitBoxOrient: 'vertical',
397
+            overflow: 'hidden',
398
+            textOverflow: 'ellipsis'
399
+          }}>{textAreaValue || '海报描述'}</p>
400
+          <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
401
+            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
402
+            <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入活动查看详情</p>
403
+            <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} src={xiaochengxu} alt="" />
447 404
           </div>
405
+        </div>
406
+        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
407
+      </div>
448 408
 
409
+      <div >
410
+        <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
411
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>助力海报图</p>
412
+          <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
413
+        </div>
414
+        <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px' }}>建议图片尺寸:750*600px,比例5:4,格式:jpg,用于助力活动海报</p>
415
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
416
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
417
+          <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
449 418
         </div>
419
+        <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
420
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
421
+          <TextArea rows={5} maxLength={1024} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
422
+        </div>
423
+
450 424
       </div>
451
-      <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
452
-      <Button onClick={() => cancelPage()}>取消</Button>
453 425
     </div>
454
-
455
-  }
426
+    <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
427
+    <Button onClick={() => cancelPage()}>取消</Button>
428
+  </div>
429
+}
456 430
 
457 431
 
432
+const Share = props => {
433
+  const { helpActivityId } = props
434
+  const [inputValue, changeInput] = useState('')
435
+  const [imgValue, changeImg] = useState('')
436
+  const [shareContentId, setShareContentId] = useState('')
458 437
 
459
-  const Share = (props) => {
460
-    const [inputValue, changeInput] = useState('')
461
-    const [imgValue, changeImg] = useState('')
462
-    const [shareContentId, setShareContentId] = useState('')
438
+  useEffect(() => {
439
+    if (helpActivityId) {
440
+      request({ ...apis.activity.shareContent, params: { targetId: helpActivityId, targetType: 'helpActivity' } }).then(data => {
441
+        if (data.length > 0) {
442
+          setShareContentId(data[0].shareContentId)
443
+          changeImg(data[0].shareContentImg)
444
+          changeInput(data[0].shareContentTitle)
445
+        }
446
+      }).catch(err => {
447
+        message.info(err.msg || err.message)
448
+      })
449
+    }
450
+  }, [])
463 451
 
452
+  const submitShare = () => {
464 453
     if (helpActivityId) {
465
-      useEffect(() => {
466
-        request({ ...apis.activity.shareContent, params: { targetId: helpActivityId, targetType: 'helpActivity' }, }).then((data) => {
467
-          console.log(data, "2222")
468
-          if (data.length > 0) {
469
-            setShareContentId(data[0].shareContentId)
470
-            changeImg(data[0].shareContentImg)
471
-            changeInput(data[0].shareContentTitle)
472
-          }
473
-        }).catch((err) => {
454
+      if (shareContentId) {
455
+        request({ ...apis.activity.updateShareContent, urlData: { id: shareContentId }, data: { targetId: helpActivityId, shareContentType: 'helpActivity', shareContentImg: imgValue, shareContentTitle: inputValue } }).then(data => {
456
+          message.info('保存成功')
457
+        }).catch(err => {
474 458
           message.info(err.msg || err.message)
475 459
         })
476
-      }, [])
477
-    }
478
-
479
-    const submitShare = () => {
480
-      if (helpActivityId) {
481
-        if (shareContentId) {
482
-          request({ ...apis.activity.updateShareContent, urlData: { id: shareContentId }, data: { targetId: helpActivityId, shareContentType: 'helpActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
483
-            message.info("保存成功")
484
-          }).catch((err) => {
485
-            message.info(err.msg || err.message)
486
-          })
487
-        } else {
488
-          request({ ...apis.activity.addShareContent, data: { targetId: helpActivityId, shareContentType: 'helpActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
489
-            setShareContentId(data.shareContentId)
490
-            message.info("保存成功")
491
-          }).catch((err) => {
492
-            message.info(err.msg || err.message)
493
-          })
494
-        }
495 460
       } else {
496
-        message.warn("请先保存基本信息数据")
461
+        request({ ...apis.activity.addShareContent, data: { targetId: helpActivityId, shareContentType: 'helpActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then(data => {
462
+          setShareContentId(data.shareContentId)
463
+          message.info('保存成功')
464
+        }).catch(err => {
465
+          message.info(err.msg || err.message)
466
+        })
497 467
       }
468
+    } else {
469
+      message.warn('请先保存基本信息数据')
498 470
     }
471
+  }
499 472
 
500
-    return <div style={{ padding: '20px' }}>
501
-      <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
502
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
503
-        <div>
504
-          <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />橙蕉互动</p>
505
-          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
506
-          <img style={{ width: '200px', height: '160px' }} src={imgValue ? imgValue : poster2} alt="" />
507
-        </div>
508
-      </div>
509
-      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
510
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享标题</p>
511
-        <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
512
-      </div>
513
-      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
514
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>助力分享图</p>
515
-        <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
473
+  return <div style={{ padding: '20px' }}>
474
+    <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
475
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
476
+      <div>
477
+        <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}>
478
+          <img src={logo} style={{ width: '22px', marginRight: '10px' }} alt="" />橙蕉互动
479
+        </p>
480
+        <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue || '置业V客厅 精准获客平台'}</p>
481
+        <img style={{ width: '200px', height: '160px' }} src={imgValue || poster2} alt="" />
516 482
       </div>
517
-      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px' }}>建议图片尺寸:750*600px,比例5:4,格式:jpg,用于助力活动分享好友</p>
518
-      <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
519
-      <Button onClick={() => cancelPage()}>取消</Button>
520 483
     </div>
484
+    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
485
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享标题</p>
486
+      <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
487
+    </div>
488
+    <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
489
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>助力分享图</p>
490
+      <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
491
+    </div>
492
+    <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px' }}>建议图片尺寸:750*600px,比例5:4,格式:jpg,用于助力活动分享好友</p>
493
+    <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
494
+    <Button onClick={() => cancelPage()}>取消</Button>
495
+  </div>
496
+}
497
+
498
+
499
+/**
500
+ *
501
+ *
502
+ * @param {*} props
503
+ * @returns
504
+ */
505
+const Edit = props => {
506
+  const [tab, changeTab] = useState('basic')
507
+  // 判断是否展示助力次数的输入框
508
+  // const [help, helpTab] = useState('1')
509
+  const { helpActivityId } = props.location.query
510
+  const [dynamicData, setDynamicData] = useState({ isEnlist: 1 })
511
+  
512
+  // 详情
513
+  const getDynamicData = id => {
514
+    request({ ...apis.helpActivity.details, params: { helpActivityId: id } }).then(data => {
515
+      setDynamicData(data)
516
+    })
521 517
   }
522 518
 
519
+  // eslint-disable-next-line react-hooks/rules-of-hooks
520
+  useEffect(() => {
521
+    // eslint-disable-next-line no-use-before-define
522
+    if (helpActivityId) {
523
+      getDynamicData(helpActivityId);
524
+    }
525
+  }, [])
526
+
527
+
523 528
   return (
524 529
     <div>
525 530
       <div>
@@ -531,13 +536,13 @@ const Edit = props => {
531 536
       </div>
532 537
       <div>
533 538
         {tab === 'basic' && <Basic helpActivityId={helpActivityId} />}
534
-        {tab === 'poster' && <Poster />}
535
-        {tab === 'share' && <Share />}
539
+        {tab === 'poster' && <Poster helpActivityId={helpActivityId} />}
540
+        {tab === 'share' && <Share helpActivityId={helpActivityId} />}
536 541
       </div>
537 542
       <Prompt message={location =>
538
-        location.pathname.startsWith("/activity/helpActivity")
543
+        (location.pathname.startsWith('/activity/helpActivity')
539 544
           ? true
540
-          : localStorage.removeItem("activePageParams")} />
545
+          : localStorage.removeItem('activePageParams'))} />
541 546
     </div>
542 547
   );
543 548
 }