添加报修页面

src/components/Input/Select/Select.js

@@ -2,24 +2,65 @@ import React, { Component } from 'react';
 import ReactDom from 'react-dom';
 import styles from './style.css';
 import arrIcon from './images/select_icon@2x.png';
-import { PickerView } from 'antd-mobile';
+import Popup from '../../Popup/Popup';
+
 class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: [],
+    };
+  }
+
   showPickerView = () => {
     console.log('showPickerView');
+    console.log(this.props);
+
+    const { placeholder, onChange, ...props } = this.props;
     let box = document.getElementById('ks-picker-box');
-    if (box) {
-      ReactDom.render(<PickerView />, box);
-    } else {
-      let box = document.createElement('div');
+    if (!box) {
+      box = document.createElement('div');
+      box.id = 'ks-picker-box';
       document.body.appendChild(box);
-      ReactDom.render(<PickerView />, box);
     }
+    this.picker = ReactDom.render(
+      <Popup
+        {...props}
+        onChange={this.changeHandle}
+        cancelHandle={this.cancelHandle}
+        okHandle={this.okHandle}
+      />,
+      box
+    );
+  };
+  changeHandle = val => {
+    console.log(val);
+    const { onChange } = this.props;
+    onChange && onChange(val);
+  };
+  okHandle = () => {
+    const { onChange } = this.props;
+    const { value } = this.picker.state;
+    onChange && onChange(value);
+    this.setState({
+      value: value,
+    });
+    this.closePickerHandle();
+  };
+  cancelHandle = () => {
+    this.closePickerHandle();
+  };
+  closePickerHandle = () => {
+    let box = document.getElementById('ks-picker-box');
+    document.body.removeChild(box);
   };
   render() {
     const { placeholder } = this.props;
+    const { value } = this.state;
+    let text = value.length ? value.join(' ') : placeholder ? placeholder : '';
     return (
       <div className={styles.selectWrap} onClick={this.showPickerView}>
-        {placeholder ? placeholder : ''}
+        {text}
         <span className={styles.arrow}>
           <img src={arrIcon} alt="" />
         </span>

src/components/Popup/Popup.js

+import React, { Component } from 'react';
+import styles from './style.css';
+import { PickerView } from 'antd-mobile';
+
+class Popup extends Component {
+  constructor(props) {
+    super(props);
+    let val = props.data[0] ? [props.data[0]] : [];
+    this.state = {
+      value: val,
+    };
+  }
+  changeHandle = val => {
+    const { onChange } = this.props;
+    this.setState({
+      value: val,
+    });
+    onChange(val);
+  };
+  render() {
+    const { cancelHandle, okHandle, onChange, ...props } = this.props;
+    const { value } = this.state;
+    return (
+      <div>
+        <div className={styles.mask} />
+        <div className={styles.ksPopupWrap}>
+          <div role="document" className={styles.ksPopupContent}>
+            <div className={styles.ksPopupHeader}>
+              <div className={styles.headerLeft} onClick={cancelHandle}>
+                取消
+              </div>
+              <div className={styles.headerTitle} />
+              <div className={styles.headerRight} onClick={okHandle}>
+                确定
+              </div>
+            </div>
+            <PickerView {...props} value={value} onChange={this.changeHandle} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Popup;

src/components/Popup/style.css

+.mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 100%;
+  z-index: 1000;
+  transform: translateZ(1px);
+}
+.ksPopupWrap {
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+  transform: translateZ(1px);
+}
+.ksPopupHeader {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.headerItem {
+  display: flex;
+  font-size: 26px;
+  padding: 23px 15px;
+  height: 40px;
+  line-height: 40px;
+}
+.headerLeft {
+  composes: headerItem;
+  padding-left: 40px;
+  color: #333;
+}
+.headerTitle {
+  composes: headerItem;
+  flex: 1;
+  text-align: center;
+  color: #000;
+}
+.headerRight {
+  composes: headerItem;
+  padding-right: 40px;
+  color: #4986cb;
+}
+.ksPopupContent {
+  left: 0;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+  background-color: #fff;
+  padding-bottom: env(safe-area-inset-bottom);
+}

src/containers/Repair/RepairList.js

 import React, { Component } from 'react';
+import { PullToRefresh } from 'antd-mobile';
+import styles from './style.css';
+import RepairItem from './components/RepairItem';
 
 class RepairList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      down: true,
+      height: document.documentElement.clientHeight,
+      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() {
+    let wrap = document.querySelector('.RepairContent');
+    const hei = wrap.clientHeight;
+    setTimeout(
+      () =>
+        this.setState({
+          height: hei,
+        }),
+      0
+    );
+  }
+  refreshHandle = () => {
+    this.setState({ refreshing: true });
+    setTimeout(() => {
+      this.setState({ refreshing: false });
+    }, 1000);
+  };
   render() {
     return (
-      <div>
-        保修记录
+      <div className={styles.repairList}>
+        <PullToRefresh
+          damping={60}
+          ref={el => (this.ptr = el)}
+          style={{
+            height: this.state.height,
+            overflow: 'auto',
+          }}
+          indicator={{ deactivate: '上拉可以刷新' }}
+          direction={'up'}
+          refreshing={this.state.refreshing}
+          onRefresh={this.refreshHandle}
+        >
+          <div className={styles.listInfo}>显示最近半年的报修记录</div>
+          {this.state.list.length
+            ? this.state.list.map(i => (
+                <div key={i} style={{ textAlign: 'center', padding: 20 }}>
+                  {'pull up'} {i}
+                </div>
+              ))
+            : // <div className={styles.noData}>暂无数据</div>
+              this.state.demoList.map(i => <RepairItem key={i.id} data={i} />)}
+        </PullToRefresh>
       </div>
     );
   }
 }
 
-export default RepairList;
+export default RepairList;
\ No newline at end of file

src/containers/Repair/ReprtRepair.js

@@ -16,7 +16,10 @@ class ReprtRepair extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      areaList: [],
+      areaList: [
+        { value: 'ddsd1', label: 'fgfasd1' },
+        { value: 'ddsd2', label: 'fgfasd2' },
+      ],
       termList: [],
       applyForm: {
         name: '',
@@ -62,6 +65,15 @@ class ReprtRepair extends Component {
       },
     }));
   };
+  onSelectHandle = (key, val) => {
+    console.log(key, val);
+    this.setState(({ applyForm }) => ({
+      applyForm: {
+        ...applyForm,
+        [key]: val,
+      },
+    }));
+  };
   validateForm = () => {
     const { applyForm } = this.state;
     if (!applyForm.name) {
@@ -96,7 +108,7 @@ class ReprtRepair extends Component {
     }
   };
   render() {
-    const { applyForm } = this.state;
+    const { applyForm, areaList, termList } = this.state;
 
     return (
       <div className={styles.wrap}>
@@ -166,10 +178,12 @@ class ReprtRepair extends Component {
           </i>
           <span className={styles.itemLabel}>报修区域</span>
           <div className={styles.inputBox}>
-            {/* <Picker data={areaList}>
-              <List.Item arrow="horizontal" onClick={this.onClick} />
-            </Picker> */}
-            <Select placeholder="请选择" />
+            <Select
+              placeholder="请选择"
+              data={areaList}
+              cols={1}
+              onChange={val => this.onSelectHandle('area', val)}
+            />
           </div>
         </div>
         <div className={styles.listItem}>
@@ -178,7 +192,13 @@ class ReprtRepair extends Component {
           </i>
           <span className={styles.itemLabel}>报修项目</span>
           <div className={styles.inputBox}>
-            <input className={styles.input} type="text" />
+            {/* <input className={styles.input} type="text" /> */}
+            <Select
+              placeholder="请选择"
+              data={termList}
+              cols={1}
+              onChange={val => this.onSelectHandle('term', val)}
+            />
           </div>
         </div>
         <div className={styles.listItem}>

src/containers/Repair/components/RepairItem.js

+import React, { Component } from 'react';
+import styles from './style.css';
+import titleIcon from '../images/dropdown_icon@2x.png';
+import { formatDate } from '../../../utils/index';
+
+class RepairItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showDetail: false,
+    };
+  }
+  toggleDetail = () => {
+    this.setState(({ showDetail }) => ({
+      showDetail: !showDetail,
+    }));
+  };
+  render() {
+    const { showDetail } = this.state;
+    const { data } = this.props;
+    return (
+      <div className={styles.wrap}>
+        <div
+          className={data.dealState === 1 ? styles.titleDealing : styles.title}
+        >
+          <i
+            className={
+              showDetail ? styles.titleIconShowDetail : styles.titleIcon
+            }
+          >
+            <img src={titleIcon} alt="" />
+          </i>
+        </div>
+        <div className={styles.content} onClick={this.toggleDetail}>
+          {data.dealState === 1 ? (
+            <div className={styles.dealing}>处理中</div>
+          ) : (
+            <div className={styles.dealed}>已处理</div>
+          )}
+          {showDetail
+            ? [
+                <div key="time" className={styles.listLine}>
+                  <div className={styles.listLabel}>报修时间：</div>
+                  <div className={styles.listValue}>
+                    {formatDate(new Date(data.createDate), 'yyyy-MM-dd')}
+                  </div>
+                </div>,
+                <div key="area" className={styles.listLine}>
+                  <div className={styles.listLine2ItemLeft}>
+                    <div className={styles.listLabel}>报修区域：</div>
+                    <div className={styles.listValue}>{data.area}</div>
+                  </div>
+                  <div className={styles.listLine2ItemRight}>
+                    <div className={styles.listLabel}>报修项目：</div>
+                    <div className={styles.listValue}>{data.term}</div>
+                  </div>
+                </div>,
+                <div key="address" className={styles.listLineArea}>
+                  <div className={styles.listLabel}>报修事项：</div>
+                  <div className={styles.listValueMutLine}>{data.address}</div>
+                </div>,
+                <div key="name" className={styles.listLine}>
+                  <div className={styles.listLine2ItemLeft}>
+                    <div className={styles.listLabel}>报修人：</div>
+                    <div className={styles.listValue}>{data.name}</div>
+                  </div>
+                  <div className={styles.listLine2ItemRight}>
+                    <div className={styles.listLabel}>报修人tel：</div>
+                    <div className={styles.listValue}>
+                      {data.applyCellphone}
+                    </div>
+                  </div>
+                </div>,
+                <div key="uploadImg" className={styles.listLine}>
+                  {data.uploadImg.split(',')[0] &&
+                    data.uploadImg.split(',').map((item, idx) => (
+                      <div key={idx} className={styles.imgItem}>
+                        <img src={item} alt="" />
+                      </div>
+                    ))}
+                </div>,
+              ]
+            : [
+                <div key="time" className={styles.listLine}>
+                  <div className={styles.listLabel}>报修时间：</div>
+                  <div className={styles.listValue}>
+                    {formatDate(new Date(data.createDate), 'yyyy-MM-dd')}
+                  </div>
+                </div>,
+                <div key="name" className={styles.listLine}>
+                  <div className={styles.listLine2ItemLeft}>
+                    <div className={styles.listLabel}>报修人：</div>
+                    <div className={styles.listValue}>{data.name}</div>
+                  </div>
+                  <div className={styles.listLine2ItemRight}>
+                    <div className={styles.listLabel}>报修人tel：</div>
+                    <div className={styles.listValue}>
+                      {data.applyCellphone}
+                    </div>
+                  </div>
+                </div>,
+                <div key="address" className={styles.listLineArea}>
+                  <div className={styles.listLabel}>报修事项：</div>
+                  <div className={styles.listValue}>{data.address}</div>
+                </div>,
+              ]}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RepairItem;

src/containers/Repair/components/style.css

+.wrap {
+  display: flex;
+  width: 600px;
+  margin: 0 auto 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.title {
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #3695c0;
+}
+.titleDealing {
+  composes: title;
+  background-color: #ff3131;
+}
+.titleIcon {
+  width: 24px;
+  height: 24px;
+  transform: rotate(90deg);
+}
+.titleIconShowDetail {
+  composes: titleIcon;
+  transform: rotate(0);
+}
+.content {
+  position: relative;
+  flex: 1;
+  padding: 30px 12px;
+  overflow: hidden;
+}
+.dealing {
+  position: absolute;
+  top: 24px;
+  right: 20px;
+  font-size: 26px;
+  color: #ff0000;
+}
+.dealed {
+  composes: dealing;
+  color: #999;
+}
+.listLine {
+  display: flex;
+  line-height: 30px;
+  margin-bottom: 30px;
+}
+.listLine:last-child {
+  margin-bottom: 0;
+}
+.listLineArea {
+  composes: listLine;
+  line-height: 26px;
+}
+.listLine2Item {
+  display: flex;
+}
+.listLine2ItemLeft {
+  composes: listLine2Item;
+  width: 250px;
+}
+.listLine2ItemRight {
+  composes: listLine2Item;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.listLabel {
+  white-space: nowrap;
+}
+.listValue {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.imgItem {
+  width: 170px;
+  height: 96px;
+}

src/containers/Repair/index.js

@@ -19,7 +19,7 @@ class index extends Component {
   render() {
     return (
       <div className="Content-Wrap">
-        <div className={styles.content}>
+        <div className="RepairContent">
           <Switch>
             <Route path="/repair/ReprtRepair" component={ReprtRepair} />
             <Route path="/repair/RepairList" component={RepairList} />

src/containers/Repair/style.css

 /* index */
-.content {
+:global(.RepairContent) {
   flex: auto;
-  overflow-y: scroll;
+  overflow: hidden;
 }
 .footer {
   width: 100%;
@@ -179,3 +179,20 @@
   font-weight: bold;
   background-color: #3695c0;
 }
+/* reportList */
+.repairList {
+  background-color: #f0f0f0;
+}
+.listInfo {
+  height: 60px;
+  line-height: 60px;
+  color: #ff3131;
+  font-size: 22px;
+  text-align: center;
+}
+.noData {
+  height: 300px;
+  line-height: 80px;
+  text-align: center;
+  padding: 50px 0;
+}

src/utils/index.js

@@ -2,3 +2,31 @@ export const is_weixn = () => {
   var ua = navigator.userAgent.toLowerCase();
   return ua.match(/MicroMessenger/i) === 'micromessenger';
 };
+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+    );
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
+    }
+  }
+  return fmt;
+}
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length);
+}