Browse Source

助力拼团页面优化

魏超 5 years ago
parent
commit
5242cd7457

+ 19
- 2
config/routes.js View File

@@ -291,6 +291,12 @@ export default [
291 291
                 hideInMenu: true,
292 292
                 component: './activity/drainage/Detail',
293 293
               },
294
+              {
295
+                path: '/activity/helpActivity/detailActivity',
296
+                name: '活动详情',
297
+                hideInMenu: true,
298
+                component: './activity/helpActivity/detailActivity',
299
+              },
294 300
               {
295 301
                 path: '/activity/helpActivity/list',
296 302
                 name: '助力活动',
@@ -308,7 +314,12 @@ export default [
308 314
                 hideInMenu: true,
309 315
                 component: './activity/helpActivity/edithelpActivity',
310 316
               },
311
-              
317
+              {
318
+                path: '/activity/helpActivity/signList',
319
+                name: '报名列表',
320
+                hideInMenu: true,
321
+                component: './activity/helpActivity/signList',
322
+              },
312 323
               {
313 324
                 path: '/activity/groupActivity/list',
314 325
                 name: '拼团活动',
@@ -326,7 +337,13 @@ export default [
326 337
                 hideInMenu: true,
327 338
                 component: './activity/groupActivity/editgroupActivity',
328 339
               },
329
-
340
+              {
341
+                path: '/activity/groupActivity/detailActivity',
342
+                name: '活动详情',
343
+                hideInMenu: true,
344
+                component: './activity/groupActivity/detailActivity',
345
+              },
346
+              
330 347
             ],
331 348
           },
332 349
           {

+ 407
- 0
src/pages/activity/groupActivity/detailActivity.jsx View File

@@ -0,0 +1,407 @@
1
+import React, { useState, useEffect } from 'react';
2
+import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload } from 'antd';
3
+import { FormattedMessage } from 'umi-plugin-react/locale';
4
+import styles from '../../style/GoodsList.less';
5
+import apis from '../../../services/apis';
6
+import moment from 'moment';
7
+import router from 'umi/router';
8
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
9
+import XForm, { FieldTypes } from '../../../components/XForm';
10
+import Wangedit from '../../../components/Wangedit/Wangedit'
11
+import request from '../../../utils/request'
12
+import yinhao from '../../../assets/yinhao.png'
13
+import ImageUploader from '../../../components/XForm/ImageUpload';
14
+import logo from '../../../assets/logo.png';
15
+import touxiang from '../../../assets/touxiang.jpg';
16
+import poster1 from '../../../assets/poster1.png';
17
+import poster2 from '../../../assets/poster2.png';
18
+import xiaochengxu from '../../../assets/xiaochengxu.png';
19
+import AuthButton from '@/components/AuthButton';
20
+
21
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
22
+const { TextArea } = Input;
23
+
24
+const formItemLayout = {
25
+  labelCol: { span: 6 },
26
+  wrapperCol: { span: 14 },
27
+};
28
+
29
+const cancelPage = () => {
30
+  router.push({
31
+    pathname: '/activity/groupActivity/list',
32
+  });
33
+}
34
+
35
+const getSignList = groupActivityId => {
36
+    router.push({
37
+        pathname: '/activity/groupActivity/helpRecord',
38
+        query: {
39
+            groupActivityId,
40
+        },
41
+      });
42
+}
43
+
44
+const newQrcode = row => {
45
+  const x = new XMLHttpRequest();
46
+  const resourceUrl = row.qrCode
47
+  x.open('GET', resourceUrl, true);
48
+  x.responseType = 'blob';
49
+  x.onload = function (e) {
50
+    const url = window.URL.createObjectURL(x.response)
51
+    const a = document.createElement('a');
52
+    a.href = url;
53
+    a.style.display = 'none'
54
+    a.download = '活动二维码.png';
55
+    a.click();
56
+  }
57
+  x.send();
58
+}
59
+
60
+const BasicForm = props => {
61
+  const [activityStatus, setActivityStatus] = useState(1)
62
+  const [disable, setDisable] = useState(false)
63
+  const [detailData, setDetailData] = useState(false)
64
+
65
+  const { groupActivityId } = props
66
+
67
+  // 查询详情
68
+  const getDynamicData = (groupActivityId) => {
69
+    request({ ...apis.groupActivity.details, urlData: {id: groupActivityId } }).then((data) => {
70
+      console.log(data)
71
+      data.activityTime = [moment(data.startTime), moment(data.endTime)]
72
+
73
+      setActivityStatus(data.activityStatus)
74
+      setDisable(data.activityStatus === 0 ? true : false)
75
+      props.form.setFieldsValue(data)
76
+      setDetailData(data)
77
+    })
78
+  }
79
+
80
+    // eslint-disable-next-line react-hooks/rules-of-hooks
81
+    useEffect(() => {
82
+      if (groupActivityId) {
83
+        getDynamicData(groupActivityId);
84
+      }
85
+    }, [])
86
+ 
87
+  const handleSubmit = e => {
88
+    e.preventDefault();
89
+    props.form.validateFields((err, values) => {
90
+      if (!err) {
91
+        console.log('Received values of form: ', values);
92
+        const { activityTime, signupTime } = values
93
+        const [startDate, endDate] = activityTime
94
+        values.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
95
+        values.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
96
+        if (signupTime) {
97
+          const [enlistStart, enlistEnd] = signupTime
98
+          values.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
99
+          values.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
100
+        }
101
+        
102
+        console.log('submit data --->', values)
103
+        if (groupActivityId) {
104
+          values.groupActivityId = groupActivityId
105
+          request({ ...apis.groupActivity.update, data: values }).then(data => {
106
+            message.info('保存成功')
107
+            // router.go(-1)
108
+          }).catch((err) => {
109
+            message.info(err.msg || err.message)
110
+          })
111
+        } else {
112
+          request({ ...apis.groupActivity.add, data: { ...values } }).then((data) => {
113
+            message.info('保存成功')
114
+            router.push({
115
+              pathname: '/activity/groupActivity/edithelpActivity',
116
+              query: {
117
+                groupActivityId: data.groupActivityId,
118
+              },
119
+            });
120
+            // router.go(-1)
121
+          }).catch((err) => {
122
+            message.info(err.msg || err.message)
123
+          })
124
+        }
125
+      }
126
+    });
127
+  }
128
+
129
+  const { getFieldDecorator } = props.form;
130
+  return (
131
+    <>
132
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
133
+        <Form.Item label="所属项目">
134
+        {getFieldDecorator('buildingId', {
135
+          rules: [
136
+            {
137
+              required: true,
138
+              message: '请选择所属项目',
139
+            },
140
+          ],
141
+        })(<BuildSelect disabled/>)}
142
+        </Form.Item>
143
+        <Form.Item label="活动标题">
144
+          <span>{detailData.activityName}</span>
145
+        </Form.Item>
146
+        <Form.Item label="拼团详情主图">
147
+          <img src={detailData.mainImg} height="300px" width="375px" />
148
+        </Form.Item>
149
+        <Form.Item label="拼团封面图1">
150
+           <img src={detailData.listImg} height="210px" width="375px" />
151
+        </Form.Item>
152
+        <Form.Item label="拼团封面图2">
153
+          <img src={detailData.bannerListImg} height="125px" width="375px" />
154
+        </Form.Item>
155
+        <Form.Item label="活动时间">
156
+          <span>{`${moment(detailData.startDate).format('YYYY-MM-DD')} —— ${moment(detailData.endDate).format('YYYY-MM-DD')}`}</span>
157
+        </Form.Item>
158
+        <Form.Item label="成团人数">
159
+            <span>{detailData.groupBuyPeople}</span>
160
+        </Form.Item>
161
+        <Form.Item label="所需积分">
162
+            <span>{detailData.integral}</span>
163
+        </Form.Item>
164
+        <Form.Item label="活动说明">
165
+          <img src={detailData.descImg} height="300px" width="375px" />
166
+        </Form.Item>
167
+        <Form.Item label="权重">
168
+          <span>{detailData.heavy}</span>
169
+        </Form.Item>
170
+        <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
171
+          <AuthButton name="admin.SignList.get" noRight={null}>
172
+          {(detailData.activityStatus === 0 || detailData.activityStatus === 2) && <span style={{ color: '#1990FF',marginRight: '20px', cursor: 'pointer' }} onClick={getSignList.bind(this, detailData.groupActivityId)}><Button>拼团记录</Button></span>}
173
+          </AuthButton>
174
+          {(detailData.activityStatus === 0 || detailData.activityStatus === 2) &&<span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={newQrcode.bind(this, detailData)}>{<Button>下载二维码</Button>}</span>}
175
+          <Button onClick={() => cancelPage()}>
176
+            取消
177
+          </Button>
178
+        </Form.Item>
179
+      </Form>
180
+    </>
181
+  )
182
+}
183
+
184
+const Basic = Form.create({ name: 'BasicForm' })(BasicForm);
185
+
186
+/**
187
+ *
188
+ *
189
+ * @param {*} props
190
+ * @returns
191
+ */
192
+const Edit = props => {
193
+  const [tab, changeTab] = useState('basic')
194
+  const { groupActivityId } = props.location.query
195
+
196
+
197
+  const Poster = (props) => {
198
+    const [inputValue, changeInput] = useState('')
199
+    const [textAreaValue, changeTextArea] = useState('')
200
+    const [imgValue, changeImg] = useState('')
201
+    const [posterId, setPosterId] = useState('')
202
+
203
+    if (groupActivityId) {
204
+      console.log(groupActivityId, 'groupActivityId')
205
+      useEffect(() => {
206
+        request({ ...apis.activity.poster, params: { targetId: groupActivityId, targetType: 'groupActivity' } }).then((data) => {
207
+          if (data.length > 0) {
208
+            setPosterId(data[0].posterId)
209
+            changeImg(data[0].posterImg)
210
+            changeTextArea(data[0].posterDescription)
211
+            changeInput(data[0].posterTitle)
212
+          }
213
+        }).catch((err) => {
214
+          message.info(err.msg || err.message)
215
+        })
216
+        getMiniappName()
217
+      }, [])
218
+    }else{
219
+      getMiniappName()
220
+    }
221
+    // 获取小程序名称
222
+    const [miniappName, setMiniappName] = useState('')
223
+    function getMiniappName() {
224
+      request({ ...apis.building.getMiniappName }).then(res => {
225
+        console.log(res, "0000000000000")
226
+        setMiniappName(res)
227
+      })
228
+    }
229
+
230
+    const submitPoster = () => {
231
+      if (helpActivityId) {
232
+        if (posterId) {
233
+          request({ ...apis.activity.updatePoster, urlData: { id: posterId }, data: { targetId: groupActivityId, targetType: 'groupActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
234
+            message.info("保存成功")
235
+          }).catch((err) => {
236
+            message.info(err.msg || err.message)
237
+          })
238
+        } else {
239
+          request({ ...apis.activity.addPoster, data: { targetId: groupActivityId, targetType: 'groupActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
240
+            setPosterId(data.posterId)
241
+            message.info("保存成功")
242
+          }).catch((err) => {
243
+            message.info(err.msg || err.message)
244
+          })
245
+        }
246
+      } else {
247
+        message.warn("请先保存基本信息数据")
248
+      }
249
+    }
250
+
251
+    return <div>
252
+      <div style={{ display: 'flex' }}>
253
+        <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
254
+          <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
255
+            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />
256
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
257
+              <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
258
+              <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
259
+              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
260
+              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
261
+            </div>
262
+            <p style={{
263
+              margin: '10px 20px',
264
+              fontSize: '20px',
265
+              color: '#222',
266
+              fontWeight: '600',
267
+              display: '-webkit-box',
268
+              lineClamp: '3',
269
+              height: '60px',
270
+              WebkitLineClamp: '2',
271
+              WebkitBoxOrient: 'vertical',
272
+              overflow: 'hidden',
273
+              textOverflow: 'ellipsis'
274
+            }}>{inputValue ? inputValue : '海报标题'}</p>
275
+
276
+            <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
277
+            <p style={{
278
+              margin: '16px 20px 28px 20px',
279
+              fontSize: '17px',
280
+              color: '#999',
281
+              display: '-webkit-box',
282
+              lineClamp: '3',
283
+              height: '72px',
284
+              WebkitLineClamp: '3',
285
+              WebkitBoxOrient: 'vertical',
286
+              overflow: 'hidden',
287
+              textOverflow: 'ellipsis'
288
+            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
289
+            <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
290
+              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
291
+              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>{miniappName || '置业V顾问'}</span>报名活动</p>
292
+              <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} src={xiaochengxu} alt="" />
293
+            </div>
294
+          </div>
295
+          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
296
+        </div>
297
+
298
+        {/* <div >
299
+          <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
300
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动海报图</p>
301
+            <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
302
+          </div>
303
+          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸:640*670px,比例64:67,格式:jpg,用于普通活动海报</p>
304
+          <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
305
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
306
+            <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
307
+          </div>
308
+          <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
309
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
310
+            <TextArea rows={5} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
311
+          </div>
312
+
313
+        </div> */}
314
+      </div>
315
+      {/* <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
316
+      <Button onClick={() => cancelPage()}>
317
+        取消
318
+      </Button> */}
319
+    </div>
320
+
321
+  }
322
+
323
+
324
+
325
+  const Share = (props) => {
326
+    const [inputValue, changeInput] = useState('')
327
+    const [imgValue, changeImg] = useState('')
328
+    const [shareContentId, setShareContentId] = useState('')
329
+
330
+    if (groupActivityId) {
331
+      useEffect(() => {
332
+        request({ ...apis.activity.shareContent, params: { targetId: groupActivityId, targetType: 'groupActivity' }, }).then((data) => {
333
+          if (data.length > 0) {
334
+            setShareContentId(data[0].shareContentId)
335
+            changeImg(data[0].shareContentImg)
336
+            changeInput(data[0].shareContentTitle)
337
+          }
338
+        }).catch((err) => {
339
+          message.info(err.msg || err.message)
340
+        })
341
+      }, [])
342
+    }
343
+
344
+    const submitShare = () => {
345
+      if (groupActivityId) {
346
+        if (shareContentId) {
347
+          request({ ...apis.activity.updateShareContent, urlData: { id: shareContentId }, data: { targetId: groupActivityId, shareContentType: 'groupActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
348
+            message.info("保存成功")
349
+          }).catch((err) => {
350
+            message.info(err.msg || err.message)
351
+          })
352
+        } else {
353
+          request({ ...apis.activity.addShareContent, data: { targetId: groupActivityId, shareContentType: 'groupActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
354
+            setShareContentId(data.shareContentId)
355
+            message.info("保存成功")
356
+          }).catch(err => {
357
+            message.info(err.msg || err.message)
358
+          })
359
+        }
360
+      } else {
361
+        message.warn("请先保存基本信息数据")
362
+      }
363
+    }
364
+
365
+    return <div style={{ padding: '20px' }}>
366
+      <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
367
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
368
+        <div>
369
+          <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />知与行互动</p>
370
+          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
371
+          <img style={{ width: '200px', height: '140px' }} src={imgValue ? imgValue : poster2} alt="" />
372
+        </div>
373
+      </div>
374
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
375
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享标题</p>
376
+        <span>{inputValue}</span>
377
+      </div>
378
+      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
379
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动分享图</p>
380
+        <img src={imgValue} height="120px" height="150px" />
381
+      </div>
382
+      {/* <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
383
+      <Button onClick={() => cancelPage()}>
384
+        取消
385
+      </Button> */}
386
+    </div>
387
+  }
388
+
389
+  return (
390
+    <div>
391
+      <div>
392
+        <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
393
+          <Radio.Button value="basic">基本信息</Radio.Button>
394
+          <Radio.Button value="poster">海报图片</Radio.Button>
395
+          <Radio.Button value="share">分享设置</Radio.Button>
396
+        </Radio.Group>
397
+      </div>
398
+      <div>
399
+        {tab === 'basic' && <Basic groupActivityId={groupActivityId} />}
400
+        {tab === 'poster' && <Poster />}
401
+        {tab === 'share' && <Share />}
402
+      </div>
403
+    </div>
404
+  );
405
+}
406
+
407
+export default Edit

+ 12
- 14
src/pages/activity/groupActivity/list.jsx View File

@@ -41,6 +41,15 @@ const header = props => {
41 41
     });
42 42
   }
43 43
 
44
+  const getActivityDetail = (groupActivityId) => () => {
45
+    router.push({
46
+      pathname: '/activity/groupActivity/detailActivity',
47
+      query: {
48
+        groupActivityId,
49
+      },
50
+    });
51
+  }
52
+
44 53
   /**
45 54
    *
46 55
    *
@@ -54,6 +63,8 @@ const header = props => {
54 63
       dataIndex: 'activityName',
55 64
       key: 'activityName',
56 65
       align: 'center',
66
+      render:  (x, row) => <><div style={{overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap', width: '201px',title:'content'}}>
67
+                              <span style={{color: 'blue',cursor: 'pointer'}} onClick={getActivityDetail(row.groupActivityId)}>{row.activityName}</span></div></>,
57 68
     },
58 69
     {
59 70
       title: '活动时间',
@@ -107,11 +118,6 @@ const header = props => {
107 118
           {row.activityStatus === 0 &&
108 119
             <AuthButton name="admin.taShareActivity.finish.put" noRight={null}><span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={endGroupActivity(row)}>结束活动<Icon type="poweroff" className={styles.edit} /></span></AuthButton>
109 120
           }
110
-          {(row.activityStatus === 0 || row.activityStatus === 2)&&
111
-            <AuthButton name="admin.taShareSuccessRecord.get" noRight={null}>
112
-              <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={getSignList.bind(this, row.groupActivityId)}>拼团记录<Icon type="snippets" className={styles.shoppingCart} /></span>
113
-            </AuthButton>
114
-          }
115 121
           {
116 122
             <AuthButton name="admin.buildingDynamic.send.dynamicId.put" noRight={null}>
117 123
               <span style={{ color: '#1990FF',marginRight: '20px', cursor: 'pointer' }} onClick={sendOrPublicDynamic.bind(this, row)}>{row.status === 1 ? '取消发布' : '发布'}<Icon type="close-circle" className={styles.edit} /></span>
@@ -132,15 +138,7 @@ const header = props => {
132 138
       ),
133 139
     },
134 140
   ];
135
-  const getSignList = groupActivityId => {
136
-    router.push({
137
-      pathname: '/activity/groupActivity/helpRecord',
138
-      query: {
139
-        groupActivityId,
140
-      },
141
-    });
142
-  }
143
-
141
+  
144 142
   const finishDynamic = (row) => {
145 143
     Modal.confirm({
146 144
       title: '结束以后将无法编辑, 是否继续?',

+ 417
- 0
src/pages/activity/helpActivity/detailActivity.jsx View File

@@ -0,0 +1,417 @@
1
+import React, { useState, useEffect } from 'react';
2
+import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload } from 'antd';
3
+import { FormattedMessage } from 'umi-plugin-react/locale';
4
+import styles from '../../style/GoodsList.less';
5
+import apis from '../../../services/apis';
6
+import moment from 'moment';
7
+import router from 'umi/router';
8
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
9
+import XForm, { FieldTypes } from '../../../components/XForm';
10
+import Wangedit from '../../../components/Wangedit/Wangedit'
11
+import request from '../../../utils/request'
12
+import yinhao from '../../../assets/yinhao.png'
13
+import ImageUploader from '../../../components/XForm/ImageUpload';
14
+import logo from '../../../assets/logo.png';
15
+import touxiang from '../../../assets/touxiang.jpg';
16
+import poster1 from '../../../assets/poster1.png';
17
+import poster2 from '../../../assets/poster2.png';
18
+import xiaochengxu from '../../../assets/xiaochengxu.png';
19
+import AuthButton from '@/components/AuthButton';
20
+
21
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
22
+const { TextArea } = Input;
23
+
24
+const formItemLayout = {
25
+  labelCol: { span: 6 },
26
+  wrapperCol: { span: 14 },
27
+};
28
+
29
+const cancelPage = () => {
30
+  router.push({
31
+    pathname: '/activity/helpActivity/list',
32
+  });
33
+}
34
+
35
+const getSignList = helpActivityId => {
36
+    router.push({
37
+        pathname: '/activity/helpActivity/signList',
38
+        query: {
39
+          helpActivityId,
40
+        },
41
+      });
42
+}
43
+
44
+const newQrcode = row => {
45
+  const x = new XMLHttpRequest();
46
+  const resourceUrl = row.qrCode
47
+  x.open('GET', resourceUrl, true);
48
+  x.responseType = 'blob';
49
+  x.onload = function (e) {
50
+    const url = window.URL.createObjectURL(x.response)
51
+    const a = document.createElement('a');
52
+    a.href = url;
53
+    a.style.display = 'none'
54
+    a.download = '活动二维码.png';
55
+    a.click();
56
+  }
57
+  x.send();
58
+}
59
+
60
+const BasicForm = props => {
61
+  const [isEnlist, setIsEnlist] = useState(1)
62
+  const [activityStatus, setActivityStatus] = useState(1)
63
+  const [disable, setDisable] = useState(false)
64
+  const [detailData, setDetailData] = useState(false)
65
+
66
+  const radioOnChange = e => {
67
+    setIsEnlist(e.target.value)
68
+  }
69
+
70
+  const { helpActivityId } = props
71
+
72
+  // 查询详情
73
+  const getDynamicData = helpActivityId => {
74
+    request({ ...apis.helpActivity.details, params: { helpActivityId } }).then((data) => {
75
+      console.log(data)
76
+      data.activityTime = [moment(data.startDate), moment(data.endDate)]
77
+      data.signupTime = [moment(data.enlistStart), moment(data.enlistEnd)]
78
+
79
+      setIsEnlist(data.isEnlist)
80
+      setActivityStatus(data.activityStatus)
81
+      setDisable(data.activityStatus === 0 ? true : false)
82
+      props.form.setFieldsValue(data)
83
+      setDetailData(data)
84
+    })
85
+  }
86
+
87
+    // eslint-disable-next-line react-hooks/rules-of-hooks
88
+    useEffect(() => {
89
+      props.form.setFieldsValue({ isEnlist })
90
+      if (helpActivityId) {
91
+        getDynamicData(helpActivityId);
92
+      }
93
+    }, [])
94
+ 
95
+  const handleSubmit = e => {
96
+    e.preventDefault();
97
+    props.form.validateFields((err, values) => {
98
+      if (!err) {
99
+        console.log('Received values of form: ', values);
100
+        const { activityTime, signupTime } = values
101
+        const [startDate, endDate] = activityTime
102
+        values.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
103
+        values.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
104
+        if (signupTime) {
105
+          const [enlistStart, enlistEnd] = signupTime
106
+          values.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
107
+          values.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
108
+        }
109
+        
110
+        console.log('submit data --->', values)
111
+        if (helpActivityId) {
112
+          values.helpActivityId = helpActivityId
113
+          request({ ...apis.helpActivity.update, data: values }).then(data => {
114
+            message.info('保存成功')
115
+            // router.go(-1)
116
+          }).catch((err) => {
117
+            message.info(err.msg || err.message)
118
+          })
119
+        } else {
120
+          request({ ...apis.helpActivity.add, data: { ...values } }).then((data) => {
121
+            message.info('保存成功')
122
+            router.push({
123
+              pathname: '/activity/helpActivity/edithelpActivity',
124
+              query: {
125
+                helpActivityId: data.helpActivityId,
126
+              },
127
+            });
128
+            // router.go(-1)
129
+          }).catch((err) => {
130
+            message.info(err.msg || err.message)
131
+          })
132
+        }
133
+      }
134
+    });
135
+  }
136
+
137
+  const { getFieldDecorator } = props.form;
138
+  return (
139
+    <>
140
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
141
+        <Form.Item label="所属项目">
142
+        {getFieldDecorator('buildingId', {
143
+          rules: [
144
+            {
145
+              required: true,
146
+              message: '请选择所属项目',
147
+            },
148
+          ],
149
+        })(<BuildSelect disabled/>)}
150
+        </Form.Item>
151
+        <Form.Item label="活动标题">
152
+          <span>{detailData.title}</span>
153
+        </Form.Item>
154
+        <Form.Item label="助力详情主图">
155
+          <img src={detailData.img} height="300px" width="375px" />
156
+        </Form.Item>
157
+        <Form.Item label="助力封面图1">
158
+           <img src={detailData.listImg} height="210px" width="375px" />
159
+        </Form.Item>
160
+        <Form.Item label="助力封面图2">
161
+          <img src={detailData.bannerListImg} height="125px" width="375px" />
162
+        </Form.Item>
163
+        <Form.Item label="助力邀请次数">
164
+          <span>{detailData.personNum}</span>
165
+        </Form.Item>
166
+        <Form.Item label="助力发起次数">
167
+          <span>{detailData.helpNum === 0 ? '不限' : detailData.helpNum}</span>
168
+        </Form.Item>
169
+        <Form.Item label="活动时间">
170
+          <span>{`${moment(detailData.startDate).format('YYYY-MM-DD')} —— ${moment(detailData.endDate).format('YYYY-MM-DD')}`}</span>
171
+        </Form.Item>
172
+        <Form.Item label="活动说明">
173
+          <img src={detailData.activityInstructions} height="300px" width="375px" />
174
+        </Form.Item>
175
+        <Form.Item label="权重">
176
+          <span>{detailData.heavy}</span>
177
+        </Form.Item>
178
+        <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
179
+          <AuthButton name="admin.SignList.get" noRight={null}>
180
+          {(detailData.activityStatus === 0 || detailData.activityStatus === 2) && <span style={{ color: '#1990FF',marginRight: '20px', cursor: 'pointer' }} onClick={getSignList.bind(this, detailData.helpActivityId)}><Button>助力记录</Button></span>}
181
+          </AuthButton>
182
+          {(detailData.activityStatus === 0 || detailData.activityStatus === 2) &&<span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={newQrcode.bind(this, detailData)}>{<Button>下载二维码</Button>}</span>}
183
+          <Button onClick={() => cancelPage()}>
184
+            取消
185
+          </Button>
186
+        </Form.Item>
187
+      </Form>
188
+    </>
189
+  )
190
+}
191
+
192
+const Basic = Form.create({ name: 'BasicForm' })(BasicForm);
193
+
194
+/**
195
+ *
196
+ *
197
+ * @param {*} props
198
+ * @returns
199
+ */
200
+const Edit = props => {
201
+  const [tab, changeTab] = useState('basic')
202
+  const { helpActivityId } = props.location.query
203
+
204
+
205
+  const Poster = (props) => {
206
+    const [inputValue, changeInput] = useState('')
207
+    const [textAreaValue, changeTextArea] = useState('')
208
+    const [imgValue, changeImg] = useState('')
209
+    const [posterId, setPosterId] = useState('')
210
+
211
+    if (helpActivityId) {
212
+      console.log(helpActivityId, 'helpActivityId')
213
+      useEffect(() => {
214
+        request({ ...apis.activity.poster, params: { targetId: helpActivityId, targetType: 'helpActivity' } }).then((data) => {
215
+          console.log(data, "2222")
216
+          if (data.length > 0) {
217
+            setPosterId(data[0].posterId)
218
+            changeImg(data[0].posterImg)
219
+            changeTextArea(data[0].posterDescription)
220
+            changeInput(data[0].posterTitle)
221
+          }
222
+        }).catch((err) => {
223
+          message.info(err.msg || err.message)
224
+        })
225
+        getMiniappName()
226
+      }, [])
227
+    }else{
228
+      getMiniappName()
229
+    }
230
+    // 获取小程序名称
231
+    const [miniappName, setMiniappName] = useState('')
232
+    function getMiniappName() {
233
+      request({ ...apis.building.getMiniappName }).then(res => {
234
+        console.log(res, "0000000000000")
235
+        setMiniappName(res)
236
+      })
237
+    }
238
+
239
+    const submitPoster = () => {
240
+      if (helpActivityId) {
241
+        if (posterId) {
242
+          request({ ...apis.activity.updatePoster, urlData: { id: posterId }, data: { targetId: helpActivityId, targetType: 'helpActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
243
+            message.info("保存成功")
244
+          }).catch((err) => {
245
+            message.info(err.msg || err.message)
246
+          })
247
+        } else {
248
+          request({ ...apis.activity.addPoster, data: { targetId: helpActivityId, targetType: 'helpActivity', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue }, }).then((data) => {
249
+            setPosterId(data.posterId)
250
+            message.info("保存成功")
251
+          }).catch((err) => {
252
+            message.info(err.msg || err.message)
253
+          })
254
+        }
255
+      } else {
256
+        message.warn("请先保存基本信息数据")
257
+      }
258
+    }
259
+
260
+    return <div>
261
+      <div style={{ display: 'flex' }}>
262
+        <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
263
+          <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
264
+            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />
265
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
266
+              <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
267
+              <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
268
+              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
269
+              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
270
+            </div>
271
+            <p style={{
272
+              margin: '10px 20px',
273
+              fontSize: '20px',
274
+              color: '#222',
275
+              fontWeight: '600',
276
+              display: '-webkit-box',
277
+              lineClamp: '3',
278
+              height: '60px',
279
+              WebkitLineClamp: '2',
280
+              WebkitBoxOrient: 'vertical',
281
+              overflow: 'hidden',
282
+              textOverflow: 'ellipsis'
283
+            }}>{inputValue ? inputValue : '海报标题'}</p>
284
+
285
+            <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
286
+            <p style={{
287
+              margin: '16px 20px 28px 20px',
288
+              fontSize: '17px',
289
+              color: '#999',
290
+              display: '-webkit-box',
291
+              lineClamp: '3',
292
+              height: '72px',
293
+              WebkitLineClamp: '3',
294
+              WebkitBoxOrient: 'vertical',
295
+              overflow: 'hidden',
296
+              textOverflow: 'ellipsis'
297
+            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
298
+            <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
299
+              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
300
+              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>{miniappName || '置业V顾问'}</span>报名活动</p>
301
+              <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} src={xiaochengxu} alt="" />
302
+            </div>
303
+          </div>
304
+          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
305
+        </div>
306
+
307
+        {/* <div >
308
+          <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
309
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动海报图</p>
310
+            <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
311
+          </div>
312
+          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸:640*670px,比例64:67,格式:jpg,用于普通活动海报</p>
313
+          <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
314
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
315
+            <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
316
+          </div>
317
+          <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
318
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报描述</p>
319
+            <TextArea rows={5} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
320
+          </div>
321
+
322
+        </div> */}
323
+      </div>
324
+      {/* <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
325
+      <Button onClick={() => cancelPage()}>
326
+        取消
327
+      </Button> */}
328
+    </div>
329
+
330
+  }
331
+
332
+
333
+
334
+  const Share = (props) => {
335
+    const [inputValue, changeInput] = useState('')
336
+    const [imgValue, changeImg] = useState('')
337
+    const [shareContentId, setShareContentId] = useState('')
338
+
339
+    if (helpActivityId) {
340
+      useEffect(() => {
341
+        request({ ...apis.activity.shareContent, params: { targetId: helpActivityId, targetType: 'helpActivity' }, }).then((data) => {
342
+          console.log(data, "2222")
343
+          if (data.length > 0) {
344
+            setShareContentId(data[0].shareContentId)
345
+            changeImg(data[0].shareContentImg)
346
+            changeInput(data[0].shareContentTitle)
347
+          }
348
+        }).catch((err) => {
349
+          message.info(err.msg || err.message)
350
+        })
351
+      }, [])
352
+    }
353
+
354
+    const submitShare = () => {
355
+      if (helpActivityId) {
356
+        if (shareContentId) {
357
+          request({ ...apis.activity.updateShareContent, urlData: { id: shareContentId }, data: { targetId: helpActivityId, shareContentType: 'helpActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
358
+            message.info("保存成功")
359
+          }).catch((err) => {
360
+            message.info(err.msg || err.message)
361
+          })
362
+        } else {
363
+          request({ ...apis.activity.addShareContent, data: { targetId: helpActivityId, shareContentType: 'helpActivity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
364
+            setShareContentId(data.shareContentId)
365
+            message.info("保存成功")
366
+          }).catch(err => {
367
+            message.info(err.msg || err.message)
368
+          })
369
+        }
370
+      } else {
371
+        message.warn("请先保存基本信息数据")
372
+      }
373
+    }
374
+
375
+    return <div style={{ padding: '20px' }}>
376
+      <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
377
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
378
+        <div>
379
+          <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />知与行互动</p>
380
+          <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
381
+          <img style={{ width: '200px', height: '140px' }} src={imgValue ? imgValue : poster2} alt="" />
382
+        </div>
383
+      </div>
384
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
385
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享标题</p>
386
+        <span>{inputValue}</span>
387
+      </div>
388
+      <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
389
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动分享图</p>
390
+        <img src={imgValue} height="120px" height="150px" />
391
+      </div>
392
+      {/* <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
393
+      <Button onClick={() => cancelPage()}>
394
+        取消
395
+      </Button> */}
396
+    </div>
397
+  }
398
+
399
+  return (
400
+    <div>
401
+      <div>
402
+        <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
403
+          <Radio.Button value="basic">基本信息</Radio.Button>
404
+          <Radio.Button value="poster">海报图片</Radio.Button>
405
+          <Radio.Button value="share">分享设置</Radio.Button>
406
+        </Radio.Group>
407
+      </div>
408
+      <div>
409
+        {tab === 'basic' && <Basic helpActivityId={helpActivityId} />}
410
+        {tab === 'poster' && <Poster />}
411
+        {tab === 'share' && <Share />}
412
+      </div>
413
+    </div>
414
+  );
415
+}
416
+
417
+export default Edit

+ 12
- 4
src/pages/activity/helpActivity/list.jsx View File

@@ -40,6 +40,16 @@ const toEditGoods = (helpActivityId) => () => {
40 40
     });
41 41
   }
42 42
   
43
+const getActivityDetail = (helpActivityId) => () => {
44
+  router.push({
45
+    pathname: '/activity/helpActivity/detailActivity',
46
+    query: {
47
+      helpActivityId,
48
+    },
49
+  });
50
+}
51
+  
52
+  
43 53
   /**
44 54
    *
45 55
    *
@@ -53,6 +63,8 @@ const toEditGoods = (helpActivityId) => () => {
53 63
       dataIndex: 'title',
54 64
       key: 'title',
55 65
       align: 'center',
66
+      render:  (x, row) => <><div style={{overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap', width: '201px',title:'content'}}>
67
+                              <span style={{color: 'blue',cursor: 'pointer'}} onClick={getActivityDetail(row.helpActivityId)}>{row.title}</span></div></>,
56 68
     },
57 69
     {
58 70
       title: '活动时间',
@@ -97,10 +109,6 @@ const toEditGoods = (helpActivityId) => () => {
97 109
       align: 'center',
98 110
       render: (x, row) => (
99 111
         <>
100
-          {(row.activityStatus === 0 || row.activityStatus === 2) &&
101
-          <AuthButton name="admin.helpRecord.get">
102
-             <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={ getSignList.bind(this, row.helpActivityId)}>助力记录<Icon type="snippets" style={{color:'#bebebe'}}   className={styles.shoppingCart} /></span>
103
-          </AuthButton>}
104 112
           {
105 113
             <AuthButton name="admin.top.update.post" noRight={null}>
106 114
               <span style={{ color: '#1990FF',marginRight: '20px', cursor: 'pointer' }} onClick={sendOrPublicDynamic.bind(this, row)}>{row.status === 1 ? '取消发布' : '发布'}<Icon type="close-circle" className={styles.edit} /></span>

+ 548
- 0
src/pages/activity/helpActivity/signList.jsx View File

@@ -0,0 +1,548 @@
1
+import React, { useState, useEffect } from 'react';
2
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, message } from 'antd';
3
+import moment from 'moment';
4
+import request from '../../../utils/request';
5
+import apis from '../../../services/apis';
6
+import router from 'umi/router';
7
+import BuildSelect from '../../../components/SelectButton/BuildSelect'
8
+import AuthButton from '@/components/AuthButton';
9
+
10
+
11
+const { Option } = Select;
12
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
13
+const { Meta } = Card;
14
+
15
+/**
16
+ * 助力者弹框
17
+ */
18
+class InviteTable extends React.Component {
19
+  constructor(props) {
20
+    super(props);
21
+    this.state = {
22
+      dataSource: { records: [] },
23
+      visibleData: { visible: false, helpId: '', realtyConsultant: '' },
24
+    }
25
+  }
26
+
27
+  // 挂载之后
28
+  componentDidMount () {
29
+    const { helpId } = this.state.visibleData
30
+    this.getList({ helpRecordInitiateId: helpId, pageNumber: 1, pageSize: 5 })
31
+  }
32
+
33
+  componentDidUpdate (preProps, preState) {
34
+    const { helpId } = this.state.visibleData
35
+    if (this.props.visibleData.visible !== preState.visibleData.visible) {
36
+      this.getList({ helpRecordInitiateId: helpId, pageNumber: 1, pageSize: 5 })
37
+      this.setState({ visibleData: this.props.visibleData });
38
+    }
39
+  }
40
+
41
+  // 弹框确定按钮
42
+  // eslint-disable-next-line react/sort-comp
43
+  handleOk () {
44
+    this.setState({ visibleData: { visible: false, helpId: '', realtyConsultant: '' } })
45
+    this.props.onCancel()
46
+  }
47
+
48
+  // 弹框取消按钮
49
+  handleCancel () {
50
+    this.setState({ visibleData: { visible: false, helpId: '', realtyConsultant: '' } })
51
+    this.props.onCancel()
52
+  }
53
+
54
+  getList (params) {
55
+    if (params.helpRecordInitiateId === '') {
56
+      return
57
+    }
58
+    request({ ...apis.helpActivity.helpPeopleDetails, params: { ...params } }).then(res => {
59
+      this.setState({ dataSource: res })
60
+    }).catch(err => {
61
+      // eslint-disable-next-line no-unused-expressions
62
+      <Alert
63
+        style={{
64
+          marginBottom: 24,
65
+        }}
66
+        message={err}
67
+        type="error"
68
+        showIcon
69
+      />
70
+    })
71
+  }
72
+
73
+  // eslint-disable-next-line class-methods-use-this
74
+  exportHelp() {
75
+    request({ ...apis.helpActivity.gethelpRecordExport, responseType: 'blob', params: { helpRecordInitiateId: this.state.visibleData.helpId } })
76
+      .then(data => {
77
+        if (!data) {
78
+          return
79
+        }
80
+        const url = window.URL.createObjectURL(new Blob([data]))
81
+        const link = document.createElement('a')
82
+        link.style.display = 'none'
83
+        link.href = url
84
+        link.setAttribute('download', '助力者记录.xlsx')
85
+        document.body.append(link)
86
+        link.click()
87
+      }).catch(() => {
88
+
89
+      })
90
+  }
91
+
92
+
93
+  // 分页
94
+  // eslint-disable-next-line react/sort-comp
95
+  onChange (pageNum) {
96
+    this.getList({ pageNumber: pageNum, pageSize: 5 })
97
+  }
98
+
99
+  render () {
100
+    const columns = [
101
+      {
102
+        title: '用户姓名',
103
+        dataIndex: 'name',
104
+        key: 'name',
105
+        align: 'center',
106
+      },
107
+      {
108
+        title: '手机号',
109
+        dataIndex: 'phone',
110
+        key: 'phone',
111
+        align: 'center',
112
+        render: text => <a>{text}</a>,
113
+      },
114
+      {
115
+        title: '助力时间',
116
+        dataIndex: 'createDate',
117
+        key: 'createDate',
118
+        align: 'center',
119
+        render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
120
+      },
121
+    ]
122
+    return (
123
+      <>
124
+        <Modal
125
+          title="助力者"
126
+          destroyOnClose="true"
127
+          width={900}
128
+          footer={null}
129
+          visible={this.state.visibleData.visible}
130
+          // onOk={() => this.handleOk()}
131
+          onCancel={e => this.handleCancel(e)}
132
+        >
133
+
134
+      <Button name="admin.HelpInitiateRecordSucceed.export.get" noRight={null} type="primary" onClick={() => this.exportHelp()} style={{ float: 'right', margin: '20px 0', zIndex: 1 }}>
135
+        导出
136
+      </Button>
137
+          <Table rowKey="independent" dataSource={this.state.dataSource.records} columns={columns} pagination={{ total: this.state.dataSource.total, onChange: e => this.onChange(e) }} />
138
+        </Modal>
139
+      </>
140
+    );
141
+  }
142
+}
143
+
144
+
145
+/**
146
+ * 核销弹框
147
+ */
148
+class Verifier extends React.Component {
149
+  constructor(props) {
150
+    super(props);
151
+    this.state = {
152
+      verification: { verificationCode: '' },
153
+      visibleData: { visible: false, helpId: '', helpActivityId: '', helpRecordInitiateId: '', verificationCode: '' },
154
+    }
155
+  }
156
+
157
+  // 挂载之后
158
+  componentDidMount () {
159
+    const { helpId } = this.state.visibleData
160
+  }
161
+
162
+  componentDidUpdate (preProps, preState) {
163
+    const { helpId } = this.state.visibleData
164
+    if (this.props.visibleData.visible !== preState.visibleData.visible) {
165
+      // eslint-disable-next-line react/no-did-update-set-state
166
+      this.setState({ visibleData: { ...this.props.visibleData } })
167
+    }
168
+  }
169
+
170
+  // 弹框确定按钮
171
+  // eslint-disable-next-line react/sort-comp
172
+  handleOk () {
173
+    this.setState({ visibleData: { visible: false, helpId: '', helpRecordInitiateId: '', verificationCode: '' } })
174
+  }
175
+
176
+  // 弹框取消按钮
177
+  handleCancel () {
178
+    console.log('核销关闭');
179
+    // this.setState({ visibleData: { visible: false, helpId: '', helpRecordInitiateId: '', verificationCode: '' } })
180
+    this.props.onCancel()
181
+  }
182
+
183
+  // eslint-disable-next-line class-methods-use-this
184
+  audit (params) {
185
+    request({ ...apis.helpActivity.verification, params: { ...params } }).then(res => {
186
+      // eslint-disable-next-line no-undef
187
+      message.info('核销成功')
188
+      this.props.onSuccess({ pageNumber: 1, pageSize: 10, helpActivityId: this.props.visibleData.helpActivityId, status: 'helpSucceed' })
189
+    }).catch(err => {
190
+      // eslint-disable-next-line no-unused-expressions
191
+      <Alert
192
+        style={{
193
+          marginBottom: 24,
194
+        }}
195
+        message={err}
196
+        type="error"
197
+        showIcon
198
+      />
199
+    })
200
+  }
201
+
202
+  // eslint-disable-next-line class-methods-use-this
203
+  verify(e) {
204
+    this.setState({ visibleData: { visible: true, helpId: this.props.visibleData.helpId, verificationCode: e.target.value } })
205
+  }
206
+
207
+  // eslint-disable-next-line class-methods-use-this
208
+  verification(e) {
209
+    this.audit({ helpRecordInitiateId: this.state.visibleData.helpId, verifyCode: this.state.visibleData.verificationCode })
210
+  }
211
+
212
+  render () {
213
+    return (
214
+      <>
215
+        <Modal
216
+          title="核销"
217
+          destroyOnClose="true"
218
+          width={300}
219
+          footer={null}
220
+          visible={this.state.visibleData.visible}
221
+          // onOk={() => this.handleOk()}
222
+          onCancel={e => this.handleCancel(e)}
223
+        >
224
+          <div><span>核销码:<input style={{marginLeft: '10px'}} onChange={this.verify.bind(this)}/></span>
225
+           <Button name="admin.helpInitiateRecordVerify.post" noRight={null} onClick={e => this.verification(e)} style={{ marginLeft: '80px', marginTop:'10px', backgroundColor:'red' }}><span style={{color:'white'}}>立即核销</span></Button>
226
+          </div>
227
+        </Modal>
228
+      </>
229
+    );
230
+  }
231
+}
232
+
233
+/**
234
+ *主体列表
235
+ *
236
+ * @param {*} props
237
+ * @returns
238
+ */
239
+function body(props) {
240
+  // eslint-disable-next-line react-hooks/rules-of-hooks
241
+  const [gInviteData, setGInviteData] = useState({ visible: false, helpId: '', realtyConsultant: '' })
242
+
243
+  // 核销码弹框
244
+  // eslint-disable-next-line react-hooks/rules-of-hooks
245
+  const [gVerifierData, setVerifierData] = useState({ visible: false, helpId: '', helpActivityId: '', helpRecordInitiateId: '', verificationCode: '' })
246
+
247
+  const { getFieldDecorator, getFieldsValue } = props.form
248
+
249
+  // eslint-disable-next-line react-hooks/rules-of-hooks
250
+  const [dataSource, setDataSource] = useState({ records: [] })
251
+  // eslint-disable-next-line react-hooks/rules-of-hooks
252
+  // const [columns, setColumns] = useState(privateColumns)
253
+
254
+  // 默认成功
255
+  // eslint-disable-next-line react-hooks/rules-of-hooks
256
+  const [customerType, setCustomerType] = useState('helpSucceed')
257
+
258
+  // 调整归属 ============  start
259
+  // eslint-disable-next-line react-hooks/rules-of-hooks
260
+  const [gVisibleData, setGVisibleData] = useState({ visible: false, helpId: '', realtyConsultant: '' })
261
+
262
+
263
+  // 变更状态 ============= end
264
+
265
+  // eslint-disable-next-line react-hooks/rules-of-hooks
266
+  const { helpActivityId } = props.location.query
267
+  useEffect(() => {
268
+    console.log('customerType', customerType)
269
+    getList({ pageNumber: 1, pageSize: 10, status: customerType, helpActivityId })
270
+  }, [])
271
+
272
+  function getList(params) {
273
+    // 网路请求
274
+    request({ ...apis.helpActivity.record, params: { ...params } }).then(res => {
275
+      setDataSource(res)
276
+    }).catch(err => {
277
+      // eslint-disable-next-line no-unused-expressions
278
+      <Alert
279
+        style={{
280
+          marginBottom: 24,
281
+        }}
282
+        message={err}
283
+        type="error"
284
+        showIcon
285
+      />
286
+    })
287
+  }
288
+
289
+  function displayNone() {
290
+    setGVisibleData({ visible: false, helpId: '', realtyConsultant: '' })
291
+  }
292
+
293
+  // 提交事件
294
+  function handleSubmit(e) {
295
+    // displayNone()
296
+
297
+
298
+    e.preventDefault();
299
+    props.form.validateFields((err, values) => {
300
+      if (!err) {
301
+        getList({ pageNum: 1, pageSize: 10, status: customerType, ...values, helpActivityId })
302
+      }
303
+    });
304
+  }
305
+
306
+  // Change 事件
307
+  function handleSelectChange(e) {
308
+    // eslint-disable-next-line no-console
309
+    console.log(e)
310
+  }
311
+
312
+  // 分页
313
+  function onChange(pageNum) {
314
+    // eslint-disable-next-line react-hooks/rules-of-hooks
315
+    getList({ pageNumber: pageNum, pageSize: 10, customerType })
316
+  }
317
+
318
+  // 助力成功/进行中/助力失败
319
+  function radioButtonHandleSizeChange(e) {
320
+    setGInviteData({ visible: false, helpId: '', realtyConsultant: '' })
321
+    setVerifierData({ visible: false, helpId: '', helpRecordInitiateId: '', verificationCode: '' })
322
+    // displayNone()
323
+
324
+    const { value } = e.target
325
+    setCustomerType(value)
326
+    // setColumns(value === 'helpSucceed' ? privateColumns : publicColumns)
327
+    getList({ pageNumber: 1, pageSize: 10, status: value, helpActivityId })
328
+  }
329
+
330
+  function handleReset() {
331
+    props.form.resetFields();
332
+    getList({ pageNum: 1, pageSize: 10, status: customerType, helpActivityId })
333
+  }
334
+
335
+  function toCustomerDateil(record) {
336
+    router.push({
337
+      pathname: '/customer/customerlist/customerDetail',
338
+      query: {
339
+        id: record.customerId,
340
+      },
341
+    });
342
+  }
343
+
344
+  function exportCustomer () {
345
+    const fieldsValue = getFieldsValue()
346
+    request({ ...apis.helpActivity.HelpInitiateRecordSucceed, responseType: 'blob', params: { ...fieldsValue, customerType, helpActivityId, condition: customerType } })
347
+      .then(response => {
348
+        download(response)
349
+      }).catch(error => {
350
+
351
+      })
352
+  }
353
+
354
+  function download (data) {
355
+    if (!data) {
356
+      return
357
+    }
358
+    const url = window.URL.createObjectURL(new Blob([data]))
359
+    const link = document.createElement('a')
360
+    link.style.display = 'none'
361
+    link.href = url
362
+    link.setAttribute('download', '助力记录.xlsx')
363
+    document.body.append(link)
364
+    link.click()
365
+  }
366
+
367
+// 助力记录弹框
368
+function helpRecord(row) {
369
+  setVerifierData({ visible: false, helpId: row.helpRecordInitiateId, elpRecordInitiateId: '', verificationCode: '' })
370
+  setGInviteData({ visible: true, helpId: row.helpRecordInitiateId, realtyConsultant: row.realtyConsultant })
371
+}
372
+ // 核销
373
+ function helpInitiateRecordVerify(row) {
374
+// 关闭助力记录弹框
375
+  setGInviteData({ visible: false, helpId: row.helpRecordInitiateId, realtyConsultant: row.realtyConsultant })
376
+
377
+  // 核销
378
+  setVerifierData({ visible: true, helpId: row.helpRecordInitiateId, helpActivityId: row.helpActivityId, elpRecordInitiateId: '', verificationCode: '' })
379
+ }
380
+ // 核销回调
381
+ function onSuccess(e) {
382
+   console.log('回调:', e)
383
+   getList(e)
384
+    
385
+   // 关闭
386
+   onCancel()
387
+ }
388
+
389
+ function onCancel(e) {
390
+  // 核销
391
+  setVerifierData({ visible: false, helpId: '', helpActivityId: '', elpRecordInitiateId: '', verificationCode: '' })
392
+  // 助力者
393
+  setGInviteData({ visible: false, helpId: '', realtyConsultant: '' })
394
+ }
395
+
396
+ // 返回到首页
397
+ function returList(params) {
398
+  router.push({
399
+      pathname: '/activity/helpActivity/list',
400
+    });
401
+}
402
+
403
+  const publicColumns = [
404
+    {
405
+      title: '发起者',
406
+      dataIndex: 'name',
407
+      key: 'name',
408
+      align: 'center',
409
+      width: '15%',
410
+    },
411
+    {
412
+      title: '发起者手机号',
413
+      dataIndex: 'phone',
414
+      key: 'phone',
415
+      align: 'center',
416
+      width: '10%',
417
+    },
418
+    {
419
+      title: '发起时间',
420
+      dataIndex: 'createDate',
421
+      key: 'createDate',
422
+      align: 'center',
423
+      width: '15%',
424
+      render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
425
+    },
426
+    {
427
+      title: '助力者',
428
+      dataIndex: 'helpCount',
429
+      key: 'helpCount',
430
+      align: 'center',
431
+      width: '15%',
432
+      render: (text, record) => <a style={ { color: '#66B3FF' } } onClick={() => helpRecord(record)}>{record.helpCount}/{record.persionNumCount}</a>,
433
+    },
434
+  ]
435
+
436
+  const privateColumns = [
437
+    {
438
+      title: '发起者',
439
+      dataIndex: 'name',
440
+      key: 'name',
441
+      align: 'center',
442
+      width: '15%',
443
+      // render: (_, record) => <Avatar shape="square" src={customerType === 'helpSucceed' ? record.picture : record.avatarurl} size={64} icon="user" />,
444
+    },
445
+    {
446
+      title: '手机号',
447
+      dataIndex: 'phone',
448
+      key: 'phone',
449
+      align: 'center',
450
+      width: '10%',
451
+      // eslint-disable-next-line no-nested-ternary
452
+      // render: (_, record) => <><span>{customerType === 'helpSucceed' ? record.name : record.nickname}</span></>,
453
+    },
454
+    {
455
+      title: '发起时间',
456
+      dataIndex: 'createDate',
457
+      key: 'createDate',
458
+      align: 'center',
459
+      width: '10%',
460
+      render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
461
+      // eslint-disable-next-line no-nested-ternary
462
+    },
463
+    {
464
+      title: '助力者',
465
+      dataIndex: 'helpCount',
466
+      key: 'helpCount',
467
+      align: 'center',
468
+      width: '15%',
469
+      render: (text, record) => <a style={ { color: '#66B3FF' } } onClick={() => helpRecord(record)}>{record.helpCount}人</a>,
470
+    },
471
+    {
472
+      title: '核销状态',
473
+      dataIndex: 'reportRecommendStatus',
474
+      key: 'reportRecommendStatus',
475
+      align: 'center',
476
+      width: '10%',
477
+      // eslint-disable-next-line no-nested-ternary
478
+      render: (text, records) => {
479
+        if (records.verificationStatus === 0 || records.verificationStatus === null) { return '未核销' }
480
+        if (records.verificationStatus === 1) { return '已核销' }
481
+      },
482
+    },
483
+    {
484
+      title: '操作',
485
+      align: 'center',
486
+      width: '25%',
487
+      render: (x, row) => (
488
+        <>
489
+          {row.verificationStatus === 0 &&
490
+          <AuthButton name="admin.SignList.get" noRight={null}>
491
+           <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={() => helpInitiateRecordVerify(row)}>核销</span>
492
+          </AuthButton>
493
+        }
494
+        </>
495
+      ),
496
+    },
497
+  ]
498
+
499
+  return (
500
+    <>
501
+    {console.log('customerType', customerType)}
502
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
503
+        <Form.Item>
504
+          {getFieldDecorator('tel')(
505
+            <Input
506
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
507
+              placeholder="电话"
508
+            />,
509
+          )}
510
+        </Form.Item>
511
+        <Form.Item>
512
+            <Button type="primary" htmlType="submit" >
513
+              查询
514
+            </Button>
515
+            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
516
+              重置
517
+            </Button>
518
+            <Button style={{ marginLeft: 8 }} onClick={returList}>
519
+              返回
520
+            </Button>
521
+        </Form.Item>
522
+      </Form>
523
+      <Button name="admin.helpRecord.export.get" noRight={null} type="primary" onClick={() => exportCustomer()} style={{ float: 'right', margin: '20px 0', zIndex: 1 }}>
524
+        导出
525
+      </Button>
526
+
527
+      <div style={{ margin: '20px 0' }}>
528
+        <AuthButton name="admin.customer.recommend.get" noRight={null}>
529
+          <Radio.Group value={customerType} onChange={radioButtonHandleSizeChange} buttonStyle="solid">
530
+            <Radio.Button value="helpSucceed">助力成功</Radio.Button>
531
+            <Radio.Button value="helpUnderway">进行中</Radio.Button>
532
+            <Radio.Button value="helpUnfinished">助力失败</Radio.Button>
533
+          </Radio.Group>
534
+        </AuthButton>
535
+      </div>
536
+      {customerType === 'helpSucceed' ?
537
+        <Table dataSource={dataSource.list} columns={privateColumns} pagination={{ total: dataSource.total, onChange }} rowKey="customerList" /> :
538
+        <Table dataSource={dataSource.list} columns={publicColumns} pagination={{ total: dataSource.total, onChange }} rowKey="customerList" />
539
+      }
540
+        <Verifier visibleData={gVerifierData} onSuccess={e => onSuccess(e)} onCancel={(e) => onCancel(e)} />
541
+       <InviteTable visibleData={gInviteData} onSuccess={e => onSuccess(e)} onCancel={(e) => onCancel(e)}/>
542
+    </>
543
+  );
544
+}
545
+
546
+const WrappedBody = Form.create({ name: 'body' })(body);
547
+
548
+export default WrappedBody