完善页面

src/api/repairAdd.js

+import config from '../config/index';
+import axios from 'axios';
+
+const path = config.SERVER_URL;
+
+export const reportRepair = entity =>
+  axios({
+    url: path + '/repair/app/addRepair',
+    method: 'post',
+    data: entity,
+  });

src/components/Input/ImagePicker/ImagePicker.js

@@ -8,34 +8,52 @@ class ImagePicker extends Component {
     super(props);
     this.state = {
       done: false,
+      hasValue:
+        Object.keys(props).find(i => i === 'value') === -1 ? false : true,
       files: [],
     };
   }
+  shouldComponentUpdate(nextProps, nextState) {
+    const { value } = nextProps;
+    const { files } = nextState;
+    if (!value && files.length) {
+      this.deleteImage();
+    }
+    return true;
+  }
   selectImage = () => {
     const { done } = this.state;
+    const { showView } = this.props;
     if (done) {
-      console.log('showView');
+      showView();
     } else {
       this.refs.input.dispatchEvent(new MouseEvent('click'));
     }
   };
   deleteImage = e => {
-    e.stopPropagation();
+    e && e.stopPropagation();
+    const { onChange } = this.props;
     console.log('del');
     this.refs.input.value = '';
     this.setState(() => ({
       files: [],
       done: false,
     }));
+    if (onChange) {
+      onChange(null);
+    }
   };
   uploadImg = e => {
+    const { onChange } = this.props;
     const filesList = e.target.files;
-    console.log(filesList);
     const fileUrl = this.createObjectURL(filesList[0]);
     this.setState(() => ({
       files: [fileUrl],
       done: true,
     }));
+    if (onChange) {
+      onChange(filesList);
+    }
   };
   createObjectURL = blob => {
     if (window.URL) {

src/components/Input/Select/Select.js

@@ -8,6 +8,8 @@ class Select extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      hasValue:
+        Object.keys(props).find(i => i === 'value') === -1 ? false : true,
       value: [],
     };
   }
@@ -41,10 +43,14 @@ class Select extends Component {
   okHandle = () => {
     const { onChange } = this.props;
     const { value } = this.picker.state;
-    onChange && onChange(value);
-    this.setState({
-      value: value,
-    });
+    const { hasValue } = this.state;
+    if (hasValue) {
+      onChange && onChange(value);
+    } else {
+      this.setState({
+        value: value,
+      });
+    }
     this.closePickerHandle();
   };
   cancelHandle = () => {
@@ -56,12 +62,23 @@ class Select extends Component {
   };
   render() {
     const { placeholder, data } = this.props;
-    const { value } = this.state;
-    let text = value.length
-      ? data.find(item => item.value === value[0]).label
-      : placeholder
-        ? placeholder
-        : '';
+    const { value, hasValue } = this.state;
+
+    let text = '';
+    if (hasValue) {
+      let val = this.props.value;
+      text = val.length
+        ? data.find(item => item.value === val[0]).label
+        : placeholder
+          ? placeholder
+          : '';
+    } else {
+      text = value.length
+        ? data.find(item => item.value === value[0]).label
+        : placeholder
+          ? placeholder
+          : '';
+    }
     return (
       <div className={styles.selectWrap} onClick={this.showPickerView}>
         {text}

src/components/Perview/Perview.js

+import React, { Component } from 'react';
+import { createPortal } from 'react-dom';
+import styles from './style.css';
+
+class Perview extends Component {
+  constructor(props) {
+    super(props);
+    let viewDom = document.getElementById('PerviewWrap');
+    if (viewDom) {
+      this.node = viewDom;
+    } else {
+      viewDom = document.createElement('div');
+      viewDom.id = 'PerviewWrap';
+      document.body.appendChild(viewDom);
+      this.node = viewDom;
+    }
+  }
+
+  componentWillUnmount() {
+    window.document.body.removeChild(this.node);
+  }
+
+  render() {
+    const { visibility } = this.props;
+    return visibility
+      ? createPortal(
+          <div className={styles}>
+            <div className={styles.mask} />
+            <div className={styles.content}>
+              <div className={styles.imgBox} />
+              <div className={styles.footer}>
+                <div className={styles.per}>
+                  <div className={styles.leftIcon} />
+                </div>
+                <div className={styles.pagination} />
+                <div className={styles.next}>
+                  <div className={styles.rightIcon} />
+                </div>
+              </div>
+            </div>
+          </div>,
+          this.node
+        )
+      : null;
+  }
+}
+
+export default Perview;

src/components/Perview/style.css

+.mask {
+  composes: mask from '../Popup/style.css';
+}
+.content {
+  
+}

src/containers/Repair/RepairList.js

@@ -16,50 +16,6 @@ class RepairList extends Component {
         pageSize: 50,
       },
       list: [],
-      demoList: [
-        {
-          address: '该卡北师大ask绝对不阿斯顿快捷巴士的科比爱的快捷巴士的空间',
-          applyCellphone: '18108099999',
-          applyIdentity: 'string',
-          area: 'string',
-          areaId: 0,
-          createDate: '2018-09-27T03:18:47.973Z',
-          dealDate: '2018-09-27T03:18:47.973Z',
-          dealState: 1,
-          endDate: '2018-09-27T03:18:47.973Z',
-          id: 0,
-          name: 'string',
-          pageNum: 0,
-          pageSize: 0,
-          repairCellphone: 'string',
-          startDate: '2018-09-27T03:18:47.973Z',
-          term: 'f阿斯顿 adasdasdasdasdasd',
-          termId: 0,
-          uploadImg: 'string',
-          userId: 0,
-        },
-        {
-          address: 'string',
-          applyCellphone: 'string',
-          applyIdentity: 'string',
-          area: 'string',
-          areaId: 0,
-          createDate: '2018-09-27T03:18:47.973Z',
-          dealDate: '2018-09-27T03:18:47.973Z',
-          dealState: 2,
-          endDate: '2018-09-27T03:18:47.973Z',
-          id: 1,
-          name: 'string',
-          pageNum: 0,
-          pageSize: 0,
-          repairCellphone: 'string',
-          startDate: '2018-09-27T03:18:47.973Z',
-          term: 'string',
-          termId: 0,
-          uploadImg: '',
-          userId: 0,
-        },
-      ],
     };
   }
   componentDidMount() {
@@ -77,6 +33,9 @@ class RepairList extends Component {
       ...pagination,
     }).then(res => {
       console.log(res);
+      this.setState({
+        list: res.data,
+      });
     });
   }
   refreshHandle = () => {

src/containers/Repair/ReprtRepair.js

@@ -11,15 +11,14 @@ import imgIcon from './images/upload_pic_icon@2x.png';
 import ImagePicker from '../../components/Input/ImagePicker/ImagePicker';
 import Select from '../../components/Input/Select/Select';
 import { fetchRepairArea, fetchRepairTerm } from '../../api/index';
+import { reportRepair } from '../../api/repairAdd';
+import Perview from '../../components/Perview/Perview';
 
 class ReprtRepair extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      areaList: [
-        { value: 'ddsd1', label: 'fgfasd1' },
-        { value: 'ddsd2', label: 'fgfasd2' },
-      ],
+      areaList: [],
       termList: [],
       applyForm: {
         name: '',
@@ -31,8 +30,10 @@ class ReprtRepair extends Component {
         term: '',
         termId: '',
         address: '',
-        uploadImg: [],
+        uploadImg: [null, null, null],
       },
+      perviewVisibility: true,
+      perviewIndex: 0,
     };
   }
   componentDidMount() {
@@ -67,7 +68,22 @@ class ReprtRepair extends Component {
         console.log(err);
       });
   }
-
+  resetApplyForm = () => {
+    this.setState({
+      applyForm: {
+        name: '',
+        userId: '',
+        repairCellphone: '',
+        applyIdentity: '学生',
+        area: '',
+        areaId: '',
+        term: '',
+        termId: '',
+        address: '',
+        uploadImg: [null, null, null],
+      },
+    });
+  };
   onChangeHandle = e => {
     const { name, value } = e.target;
     this.setState(({ applyForm }) => ({
@@ -86,6 +102,25 @@ class ReprtRepair extends Component {
       },
     }));
   };
+  onImagePicker = (index, val) => {
+    console.log(index, val);
+    const { uploadImg } = this.state.applyForm;
+    uploadImg[index] = val;
+    this.setState(({ applyForm }) => ({
+      applyForm: {
+        ...applyForm,
+        uploadImg: uploadImg,
+      },
+    }));
+  };
+  showViewHandle = index => {
+    console.log('showViewHandle');
+    console.log(index);
+    this.setState({
+      perviewVisibility: true,
+      perviewIndex: index,
+    });
+  };
   validateForm = () => {
     const { applyForm } = this.state;
     if (!applyForm.name) {
@@ -118,9 +153,50 @@ class ReprtRepair extends Component {
     if (!this.validateForm()) {
       return;
     }
+
+    let formData = new FormData();
+    this.state.applyForm.uploadImg.map(i => {
+      if (i) {
+        console.log(i);
+        formData.append('file', i[0]);
+      }
+      return i;
+    });
+    let area = this.state.areaList.find(
+      i => i.value === this.state.applyForm.areaId[0]
+    ).label;
+    let term = this.state.termList.find(
+      i => i.value === this.state.applyForm.termId[0]
+    ).label;
+    formData.append('userId', '1');
+    // product 需要登陆后的用户ID
+    formData.append('applyIdentity', this.state.applyForm.applyIdentity);
+    formData.append('area', area);
+    formData.append('term', term);
+    formData.append('address', this.state.applyForm.address);
+    formData.append('repairCellphone', this.state.applyForm.repairCellphone);
+    formData.append('termId', this.state.applyForm.termId);
+    formData.append('areaId', this.state.applyForm.areaId);
+    formData.append('name', this.state.applyForm.name);
+
+    reportRepair(formData)
+      .then(res => {
+        console.log(res);
+        console.log('resetForm');
+        this.resetApplyForm();
+      })
+      .catch(err => {
+        console.log(err);
+      });
   };
   render() {
-    const { applyForm, areaList, termList } = this.state;
+    const {
+      applyForm,
+      areaList,
+      termList,
+      perviewVisibility,
+      perviewIndex,
+    } = this.state;
 
     return (
       <div className={styles.wrap}>
@@ -194,7 +270,8 @@ class ReprtRepair extends Component {
               placeholder="请选择"
               data={areaList}
               cols={1}
-              onChange={val => this.onSelectHandle('area', val)}
+              value={applyForm.areaId}
+              onChange={val => this.onSelectHandle('areaId', val)}
             />
           </div>
         </div>
@@ -209,7 +286,8 @@ class ReprtRepair extends Component {
               placeholder="请选择"
               data={termList}
               cols={1}
-              onChange={val => this.onSelectHandle('term', val)}
+              value={applyForm.termId}
+              onChange={val => this.onSelectHandle('termId', val)}
             />
           </div>
         </div>
@@ -224,6 +302,15 @@ class ReprtRepair extends Component {
           placeholder="输入报修地址"
           rows={3}
           count={50}
+          value={this.state.applyForm.address}
+          onChange={val =>
+            this.setState(({ applyForm }) => ({
+              applyForm: {
+                ...applyForm,
+                address: val,
+              },
+            }))
+          }
         />
         <div className={styles.listItem}>
           <i className={styles.itemIcon}>
@@ -232,13 +319,30 @@ class ReprtRepair extends Component {
           <span className={styles.itemLabel}>上传图片</span>
         </div>
         <div className={styles.imageArea}>
-          <ImagePicker />
-          <ImagePicker />
-          <ImagePicker />
+          <ImagePicker
+            value={applyForm.uploadImg[0]}
+            showView={() => this.showViewHandle(0)}
+            onChange={fileList => this.onImagePicker(0, fileList)}
+          />
+          <ImagePicker
+            value={applyForm.uploadImg[1]}
+            showView={() => this.showViewHandle(1)}
+            onChange={fileList => this.onImagePicker(1, fileList)}
+          />
+          <ImagePicker
+            value={applyForm.uploadImg[2]}
+            showView={() => this.showViewHandle(2)}
+            onChange={fileList => this.onImagePicker(2, fileList)}
+          />
         </div>
         <Button className={styles.applyBtn} onClick={this.startApply}>
           提交
         </Button>
+        <Perview
+          visibility={perviewVisibility}
+          data={applyForm.uploadImg}
+          index={perviewIndex}
+        />
       </div>
     );
   }

src/containers/Repair/style.css

 /* index */
 :global(.RepairContent) {
   flex: auto;
-  overflow: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 .footer {
   width: 100%;

src/styles/index.css

@@ -15,6 +15,7 @@ p {
 img {
   display: block;
   width: 100%;
+  height: 100%;
 }
 [aspectratio] {
   position: relative;