许静 5 years ago
parent
commit
3f28178cf4
2 changed files with 10 additions and 68 deletions
  1. 4
    4
      src/components/XForm/ImageUpload.jsx
  2. 6
    64
      src/pages/activity/editActivity.jsx

+ 4
- 4
src/components/XForm/ImageUpload.jsx View File

@@ -34,10 +34,10 @@ class ImageUpload extends React.Component {
34 34
     }
35 35
   };
36 36
 
37
-  render () {
37
+  render() {
38 38
     const uploadButton = (
39 39
       <div>
40
-        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />        
40
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
41 41
       </div>
42 42
     );
43 43
 
@@ -56,8 +56,8 @@ class ImageUpload extends React.Component {
56 56
         {(this.state.imageUrl || value) ? (
57 57
           <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
58 58
         ) : (
59
-          uploadButton
60
-        )}
59
+            uploadButton
60
+          )}
61 61
       </Upload>
62 62
     );
63 63
   }

+ 6
- 64
src/pages/activity/editActivity.jsx View File

@@ -169,12 +169,13 @@ const Edit = (props) => {
169 169
   const Poster = (props) => {
170 170
     const [inputValue, changeInput] = useState('')
171 171
     const [textAreaValue, changeTextArea] = useState('')
172
+    const [imgValue, changeImg] = useState('')
172 173
     return <div>
173 174
       <div style={{ display: 'flex' }}>
174 175
         <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
175 176
           <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
 
177
-            <img style={{ width: '100%', height: '300px' }} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" alt="" />
178
+            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg'} alt="" />
178 179
 
179 180
             <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
180 181
               <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="" />
@@ -208,7 +209,7 @@ const Edit = (props) => {
208 209
         <div >
209 210
           <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
210 211
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
211
-            <Avatar />
212
+            <ImageUploader onChange={e => changeImg(e)} />
212 213
           </div>
213 214
           <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
214 215
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
@@ -226,71 +227,12 @@ const Edit = (props) => {
226 227
     </div>
227 228
 
228 229
   }
229
-  // 图片上传
230
-  function getBase64(img, callback) {
231
-    const reader = new FileReader();
232
-    reader.addEventListener('load', () => callback(reader.result));
233
-    reader.readAsDataURL(img);
234
-  }
235 230
 
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;
246
-  }
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 231
 
291 232
 
292 233
   const Share = (props) => {
293 234
     const [inputValue, changeInput] = useState('')
235
+    const [imgValue, changeImg] = useState('')
294 236
     // const changeInputValue = e => {
295 237
     //   changeInput(e.target.value)
296 238
     // }
@@ -305,7 +247,7 @@ const Edit = (props) => {
305 247
         <div>
306 248
           <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />知与行互动</p>
307 249
           <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
308
-          <img style={{ width: '200px', height: '140px' }} src="http://house.china.com.cn/nanjing/UserFiles/20171124/11070256.jpg" alt="" />
250
+          <img style={{ width: '200px', height: '140px' }} src={imgValue ? imgValue : 'http://house.china.com.cn/nanjing/UserFiles/20171124/11070256.jpg'} alt="" />
309 251
         </div>
310 252
       </div>
311 253
       <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
@@ -314,7 +256,7 @@ const Edit = (props) => {
314 256
       </div>
315 257
       <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
316 258
         <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
317
-        <Avatar />
259
+        <ImageUploader onChange={e => changeImg(e)} />
318 260
       </div>
319 261
       <Button type="primary" htmlType="submit" style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
320 262
       <Button onClick={() => router.go(-1)}>取消</Button>