添加约车页面

src/api/fetch.js

 import axios from 'axios';
 import config from '../config/index';
 import errorHandle from './errorHandle';
-// import store from '../store/index';
+import store from '../store/index';
 import { Toast } from 'antd-mobile';
 
 const path = config.SERVER_URL;
@@ -13,12 +13,18 @@ const service = axios.create({
 // request拦截器
 service.interceptors.request.use(
   conf => {
-    // let token = store.getToken();
+    let userId = store.getUserId();
+    let data = userId
+      ? {
+          ...conf.data,
+          userId,
+        }
+      : conf.data;
+    conf.data = data;
     Toast.loading('Loading...', 10);
     conf.headers = {
       ...conf.headers,
       reqSource: 'wx',
-      // token: token ? token : '',
     };
     return conf;
   },

src/api/index.js

@@ -4,63 +4,74 @@ import fetch from './fetch';
 export const sendMsg = entity =>
   fetch({
     url: '/login/sendMsg',
-    params: entity,
+    method: 'post',
+    data: entity,
   });
 // base
 export const fetchRepairArea = () =>
   fetch({
     url: '/baseData/getBaseData',
-    params: { type: 1 },
+    method: 'post',
+    data: { type: 1 },
   });
 export const fetchRepairTerm = () =>
   fetch({
     url: '/baseData/getBaseData',
-    params: { type: 2 },
+    method: 'post',
+    data: { type: 2 },
   });
 // publicCar
 export const fetchPublicCarList = entity =>
   fetch({
-    url: '/publicCar/app/pageList4PublicCar',
-    params: entity,
+    url: '/publicCar/app/teacherAppoCar4AppPage',
+    method: 'post',
+    data: entity,
   });
 
 export const applyPublicCar = entity =>
   fetch({
-    url: '/publicCar/app/addPublicCar',
-    params: entity,
+    url: '/publicCar/app/teacherAppoCar4Add',
+    method: 'post',
+    data: entity,
   });
 
 export const fetchApplyPublicCarList = entity =>
   fetch({
-    url: '/publicCar/app/pageListAdmin4PublicCar',
-    params: entity,
+    url: '/publicCar/app/teacherAppoCar4AppPageAdmin',
+    method: 'post',
+    data: entity,
   });
 
 export const dealPublicCar = entity =>
   fetch({
-    url: '/publicCar/app/deal4PublicCar',
-    params: entity,
+    url: '/publicCar/app/teacherAppoCar4AppDeal',
+    method: 'post',
+    data: entity,
   });
 
 // repair
 export const fetchRepairList = entity =>
   fetch({
     url: '/repair/app/pageList4Repair',
-    params: entity,
+    method: 'post',
+    data: entity,
   });
 
 export const reportRepair = entity =>
   fetch({
     url: '/repair/app/addRepair',
-    params: entity,
+    method: 'post',
+    data: entity,
   });
 export const fetchReportRepairList = entity =>
   fetch({
     url: '/repair/app/pageListAdmin4Repair',
-    params: entity,
+    method: 'post',
+    data: entity,
   });
 export const dealRepair = entity =>
   fetch({
     url: '/repair/app/deal4Repair',
-    params: entity,
+    method: 'post',
+    data: entity,
   });

src/components/Input/Select/Select.js

@@ -55,9 +55,13 @@ class Select extends Component {
     document.body.removeChild(box);
   };
   render() {
-    const { placeholder } = this.props;
+    const { placeholder, data } = this.props;
     const { value } = this.state;
-    let text = value.length ? value.join(' ') : placeholder ? placeholder : '';
+    let text = value.length
+      ? data.find(item => item.value === value[0]).label
+      : placeholder
+        ? placeholder
+        : '';
     return (
       <div className={styles.selectWrap} onClick={this.showPickerView}>
         {text}

src/containers/App.js

@@ -8,9 +8,10 @@ import { Route, Switch } from 'react-router-dom';
 import Home from './Home/Index';
 import Report from './report/report';
 import Login from './Login/Login';
-import PublicCarList from './PublicCar/PublicCarList';
-import PublicCarApply from './PublicCar/PublicCarApply';
+import PublicCar from './PublicCar/index';
+import PublicCarDeal from './PublicCarDeal/index';
 import Repair from './Repair/index';
+import RepairDeal from './RepairDeal/index';
 import NoMatch from './NoMatch';
 
 class App extends Component {
@@ -89,9 +90,10 @@ class App extends Component {
             <Route exact path="/" render={this.validateUserinfo} />
             <Route path="/report" component={Report} />
             <Route path="/login" component={Login} />
-            <Route path="/PublicCarList" component={PublicCarList} />
-            <Route path="/PublicCarApply" component={PublicCarApply} />
+            <Route path="/publicCar" component={PublicCar} />
+            <Route path="/publicCarDeal" component={PublicCarDeal} />
             <Route path="/Repair" component={Repair} />
+            <Route path="/RepairDeal" component={RepairDeal} />
             <Route component={NoMatch} />
           </Switch>
         </UserInfoContext.Provider>

src/containers/PublicCar/PublicCarApply.js

@@ -16,15 +16,15 @@ class PublicCarApply extends Component {
     lineDescription: '',
   };
   onSubmit = () => {
-    // applyPublicCar({
-    //   ...this.state,
-    // })
-    //   .then(res => {
-    //     console.log('res: ' + res);
-    //   })
-    //   .catch(err => {
-    //     console.log('err: ' + err);
-    //   });
+    applyPublicCar({
+      ...this.state,
+    })
+      .then(res => {
+        console.log('res: ' + res);
+      })
+      .catch(err => {
+        console.log('err: ' + err);
+      });
     sendMsg({
       cellphone: '18108096099',
     })
@@ -39,7 +39,6 @@ class PublicCarApply extends Component {
   render() {
     return (
       <div className={styles.bg}>
-        公务约车
         <List className={styles.content}>
           <InputItem clear placeholder="用车部门">
             用车部门

src/containers/PublicCar/PublicCarList.js

 import React, { Component } from 'react';
 import { fetchPublicCarList } from '../../api/index';
+import { PullToRefresh } from 'antd-mobile';
+import styles from './style.css';
+import PublicCarItem from './components/PublicCarItem';
 
 class PublicCarList extends Component {
-  static state = {
-    list: [],
-    pagination: {
-      pageNum: 1,
-      pageSize: 50,
-    },
-  };
-  componentWillMount() {
-    fetchPublicCarList()
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      down: true,
+      height: document.documentElement.clientHeight,
+      list: [],
+      pagination: {
+        pageNum: 1,
+        pageSize: 50,
+      },
+    };
+  }
+
+  componentDidMount() {
+    let wrap = document.querySelector('.RepairContent');
+    const hei = wrap.clientHeight;
+    setTimeout(
+      () =>
+        this.setState({
+          height: hei,
+        }),
+      0
+    );
+    this.fetchList();
+  }
+  fetchList = () => {
+    const { pagination } = this.state;
+    fetchPublicCarList(pagination)
       .then(res => {
         console.log(res);
+        this.setState({
+          list: res.data,
+        });
       })
       .catch(err => {
         console.log(err);
       });
-  }
+  };
+  refreshHandle = () => {
+    this.setState({ refreshing: true });
+    setTimeout(() => {
+      this.setState({ refreshing: false });
+    }, 1000);
+  };
   render() {
-    return <div>PublicCarList</div>;
+    return (
+      <div className={styles.publicCarList}>
+        <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 => <PublicCarItem key={i.id} data={i} />)
+          ) : (
+            <div className={styles.noData}>暂无数据</div>
+          )}
+        </PullToRefresh>
+      </div>
+    );
   }
 }
 

src/containers/PublicCar/components/PublicCarItem.js

+import React, { Component } from 'react';
+import styles from './style.css';
+import titleIcon from '../../Repair/images/dropdown_icon@2x.png';
+import { formatDate } from '../../../utils/index';
+
+class PublicCarItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showDetail: false,
+    };
+  }
+  toggleDetail = () => {
+    this.setState(({ showDetail }) => ({
+      showDetail: !showDetail,
+    }));
+  };
+  getCategoryValue = str => {
+    let list = str ? JSON.parse(str) : [];
+    let item = list.find(item => item.checked);
+    return item ? item.name : '';
+  };
+  dealHandle = e => {
+    const { dealHandle, data } = this.props;
+    if (dealHandle && data.dealResult === 1) {
+      e.stopPropagation();
+      e.preventDefault();
+      dealHandle(data.id);
+    }
+  };
+  render() {
+    const { showDetail } = this.state;
+    const { data } = this.props;
+    return (
+      <div className={styles.wrap}>
+        <div
+          className={data.dealResult === 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.dealResult === 1 ? (
+            <div className={styles.dealing} onClick={this.dealHandle}>
+              处理中
+            </div>
+          ) : data.dealResult === 2 ? (
+            <div className={styles.dealedY}>已同意</div>
+          ) : (
+            <div className={styles.dealedN}>不同意</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="type" className={styles.listLine}>
+                  <div className={styles.listLabel}>用车类型：</div>
+                  <div className={styles.listValueMutLine}>
+                    {this.getCategoryValue(data.categoryName)}
+                  </div>
+                </div>,
+                <div key="line" className={styles.listLine}>
+                  <div className={styles.listLabel}>用车路线：</div>
+                  <div className={styles.listValueMutLine}>
+                    {data.lineDescription}
+                  </div>
+                </div>,
+                <div key="department" className={styles.listLine}>
+                  <div className={styles.listLabel}>用车部门：</div>
+                  <div className={styles.listValue}>{data.department}</div>
+                </div>,
+                <div key="userCount" className={styles.listLine}>
+                  <div className={styles.listLabel}>用车人数：</div>
+                  <div className={styles.listValue}>{data.userCount}人</div>
+                </div>,
+                <div key="beginDate" className={styles.listLine}>
+                  <div className={styles.listLabel}>开始时间：</div>
+                  <div className={styles.listValue}>
+                    {formatDate(new Date(data.beginDate), 'yyyy-MM-dd hh:mm')}
+                  </div>
+                </div>,
+                <div key="endDate" className={styles.listLine}>
+                  <div className={styles.listLabel}>结束时间：</div>
+                  <div className={styles.listValue}>
+                    {formatDate(new Date(data.endDate), 'yyyy-MM-dd hh:mm')}
+                  </div>
+                </div>,
+                <div
+                  key="dealName"
+                  className={`${styles.listLine} ${
+                    data.dealResult === 1
+                      ? styles.dealingColor
+                      : styles.dealedColor
+                  }`}
+                >
+                  <div className={styles.listLabel}>处理人：</div>
+                  <div className={styles.listValue}>{data.dealName}</div>
+                </div>,
+                <div
+                  key="dealDate"
+                  className={`${styles.listLine} ${
+                    data.dealResult === 1
+                      ? styles.dealingColor
+                      : styles.dealedColor
+                  }`}
+                >
+                  <div className={styles.listLabel}>处理时间：</div>
+                  <div className={styles.listValue}>{data.dealDate}</div>
+                </div>,
+                <div
+                  key="carPlate"
+                  className={`${styles.listLine} ${
+                    data.dealResult === 1
+                      ? styles.dealingColor
+                      : styles.dealedColor
+                  }`}
+                >
+                  <div className={styles.listLabel}>派车车牌：</div>
+                  <div className={styles.listValue}>{data.carPlate}</div>
+                </div>,
+                data.dealResult === 3 ? (
+                  <div
+                    key="dealOpinion"
+                    className={`${styles.listLine} ${styles.dealedColor}`}
+                  >
+                    <div className={styles.listLabel}>处理意见：</div>
+                    <div className={styles.listValue}>{data.dealOpinion}</div>
+                  </div>
+                ) : null,
+              ]
+            : [
+                <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="type" className={styles.listLine}>
+                  <div className={styles.listLabel}>用车类型：</div>
+                  <div className={styles.listValue}>
+                    {this.getCategoryValue(data.categoryName)}
+                  </div>
+                </div>,
+              ]}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PublicCarItem;

src/containers/PublicCar/components/style.css

+.wrap {
+  display: flex;
+  width: 600px;
+  margin: 0 auto 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.title {
+  composes: title from '../../Repair/components/style.css';
+}
+.titleDealing {
+  composes: titleDealing from '../../Repair/components/style.css';
+}
+.titleIcon {
+  composes: titleIcon from '../../Repair/components/style.css';
+}
+.titleIconShowDetail {
+  composes: titleIconShowDetail from '../../Repair/components/style.css';
+}
+.content {
+  composes: content from '../../Repair/components/style.css';
+}
+.dealing {
+  composes: dealing from '../../Repair/components/style.css';
+}
+.dealedN {
+  composes: dealed from '../../Repair/components/style.css';
+}
+.dealedY {
+  composes: dealed from '../../Repair/components/style.css';
+  color: #3695c0;
+}
+.listLine {
+  composes: listLine from '../../Repair/components/style.css';
+}
+.listLabel {
+  composes: listLabel from '../../Repair/components/style.css';
+}
+.listValue {
+  composes: listValue from '../../Repair/components/style.css';
+}
+.listValueMutLine {
+  composes: listValueMutLine from '../../Repair/components/style.css';
+}
+.dealingColor {
+  color: #ff3131;
+}
+.dealedColor {
+  color: #3695c0;
+}

src/containers/PublicCar/index.js

+import React, { Component } from 'react';
+import { Switch, Route, Redirect, NavLink } from 'react-router-dom';
+import PublicCarList from './PublicCarList';
+import PublicCarApply from './PublicCarApply';
+import styles from './style.css';
+
+class PublicCar extends Component {
+  render() {
+    return (
+      <div className="Content-Wrap">
+        <div className="RepairContent">
+          <Switch>
+            <Route
+              path="/publicCar/PublicCarApply"
+              component={PublicCarApply}
+            />
+            <Route path="/publicCar/PublicCarList" component={PublicCarList} />
+            <Route render={() => <Redirect to="/publicCar/PublicCarApply" />} />
+          </Switch>
+        </div>
+        <div className={styles.footer}>
+          <NavLink
+            className={styles['footer-item']}
+            to="/publicCar/PublicCarApply"
+          >
+            约车服务
+          </NavLink>
+          <span className={styles.line} />
+          <NavLink
+            className={styles['footer-item']}
+            to="/publicCar/PublicCarList"
+          >
+            约车记录
+          </NavLink>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PublicCar;

src/containers/PublicCar/style.css

-.bg {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
+.footer {
+  composes: footer from '../Repair/style.css';
+}
+.footer-item {
+  composes: footer-item from '../Repair/style.css';
+}
+.publicCarList {
+  composes: repairList from '../Repair/style.css';
+}
+.listInfo {
+  composes: listInfo from '../Repair/style.css';
+}
+.noData {
+  composes: noData from '../Repair/style.css';
 }

src/containers/PublicCarDeal/index.js

+import React, { Component } from 'react';
+import { PullToRefresh, Modal, Toast, TextareaItem } from 'antd-mobile';
+import styles from './style.css';
+import PublicCarItem from '../PublicCar/components/PublicCarItem';
+import { fetchApplyPublicCarList, dealPublicCar } from '../../api/index';
+
+class PublicCarDeal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      down: true,
+      height: document.documentElement.clientHeight,
+      pagination: {
+        pageNum: 1,
+        pageSize: 50,
+      },
+      list: [],
+      dealDialogVisible: false,
+      selected: {
+        id: '',
+        value: '',
+        carPlate: '',
+        dealOpinion: '',
+      },
+    };
+  }
+  componentDidMount() {
+    this.fetchList();
+  }
+  fetchList = () => {
+    const { pagination } = this.state;
+    fetchApplyPublicCarList({
+      ...pagination,
+    }).then(res => {
+      // const { list, ...pagination } = res.data;
+      // this.setState({
+      //   list: list,
+      //   pagination: pagination,
+      // });
+      this.setState({
+        list: res.data.map(i => ({
+          ...i,
+          dealResult: 1,
+        })),
+      });
+    });
+  };
+  refreshHandle = () => {
+    this.fetchList();
+  };
+  toggleSelectedState = val => {
+    this.setState({
+      selected: val,
+    });
+  };
+  dealHandle = id => {
+    this.setState(({ selected }) => ({
+      dealDialogVisible: true,
+      selected: {
+        ...selected,
+        id,
+      },
+    }));
+  };
+  resetDialog = () => {};
+  toggleSelectedState = val => {
+    this.setState(({ selected }) => ({
+      selected: {
+        ...selected,
+        value: val,
+      },
+    }));
+  };
+  submitHandle = () => {
+    const {
+      selected: { id, value, carPlate, dealOpinion },
+    } = this.state;
+    const entity =
+      value === 1
+        ? {
+            id: id,
+            dealResult: value,
+            carPlate: carPlate,
+          }
+        : {
+            id: id,
+            dealResult: value,
+            dealOpinion: dealOpinion,
+          };
+    dealPublicCar(entity)
+      .then(res => {
+        Toast.fail(res.msg || '处理成功！');
+      })
+      .catch(err => {
+        Toast.fail(err.msg || '处理失败！');
+      });
+  };
+  render() {
+    const {
+      selected: { value, carPlate, dealOpinion },
+      dealDialogVisible,
+    } = this.state;
+    return (
+      <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 => (
+            <PublicCarItem key={i.id} data={i} dealHandle={this.dealHandle} />
+          ))
+        ) : (
+          <div className={styles.noData}>暂无数据</div>
+        )}
+        <Modal
+          className={styles.dealDialog}
+          visible={dealDialogVisible}
+          transparent
+          maskClosable={false}
+          onClose={this.resetDialog}
+          title=""
+          footer={[
+            { text: '放弃', onPress: () => console.log('cancel') },
+            {
+              text: '提交',
+              onPress: this.submitHandle,
+            },
+          ]}
+        >
+          <div key="radio" className={styles.alertInfo}>
+            <div
+              className={styles.radioBox}
+              onClick={() => this.toggleSelectedState(1)}
+            >
+              <span className={styles.checkLabel}>
+                <span className={value === 1 ? styles.checkInner : ''} />
+              </span>
+              <span>同意</span>
+            </div>
+            <div
+              className={styles.radioBox}
+              onClick={() => this.toggleSelectedState(2)}
+            >
+              <span className={styles.checkLabel}>
+                <span className={value === 2 ? styles.checkInner : ''} />
+              </span>
+              <span>不同意</span>
+            </div>
+          </div>
+          {value === 1 ? (
+            <div key="agree" className={styles.agree}>
+              <span className={styles.dialogLabel}>派车车牌</span>
+            </div>
+          ) : value === 2 ? (
+            <div key="notAgree" className={styles.notAgree}>
+              <span className={styles.dialogLabel}>处理结果</span>
+              <TextareaItem
+                className={styles.textarea}
+                placeholder="输入报修地址"
+                rows={3}
+                count={50}
+                // value={dealOpinion}
+              />
+            </div>
+          ) : null}
+        </Modal>
+      </PullToRefresh>
+    );
+  }
+}
+
+export default PublicCarDeal;

src/containers/PublicCarDeal/style.css

+.listInfo {
+  composes: listInfo from '../Repair/style.css';
+}
+.noData {
+  composes: noData from '../Repair/style.css';
+}
+
+.dealDialog {
+  width: 520px;
+}
+.alertInfo {
+  display: flex;
+  justify-content: center;
+}
+.radioBox {
+  display: flex;
+  align-items: center;
+  margin-right: 84px;
+}
+.radioBox:last-child {
+  margin-right: 0;
+}
+.checkLabel {
+  composes: checkLabel from '../RepairDeal/style.css';
+}
+.checkInner {
+  composes: checkInner from '../RepairDeal/style.css';
+}
+
+.dialogLabel {
+  margin-top: 20px;
+  margin-left: 30px;
+  margin-right: 14px;
+}
+.notAgree {
+  display: flex;
+  font-size: 26px;
+  color: #333;
+}
+.textarea {
+  width: 310px;
+  height: 180px;
+  box-sizing: border-box;
+  line-height: 30px;
+}

src/containers/Repair/RepairList.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { PullToRefresh } from 'antd-mobile';
 import styles from './style.css';
 import RepairItem from './components/RepairItem';
+import { fetchRepairList } from '../../api/index';
 
 class RepairList extends Component {
   constructor(props) {
@@ -10,6 +11,10 @@ class RepairList extends Component {
       refreshing: false,
       down: true,
       height: document.documentElement.clientHeight,
+      pagination: {
+        pageNum: 1,
+        pageSize: 50,
+      },
       list: [],
       demoList: [
         {
@@ -67,6 +72,12 @@ class RepairList extends Component {
         }),
       0
     );
+    const { pagination } = this.state;
+    fetchRepairList({
+      ...pagination,
+    }).then(res => {
+      console.log(res);
+    });
   }
   refreshHandle = () => {
     this.setState({ refreshing: true });
@@ -90,14 +101,11 @@ class RepairList extends Component {
           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} />)}
+          {this.state.list.length ? (
+            this.state.list.map(i => <RepairItem key={i.id} data={i} />)
+          ) : (
+            <div className={styles.noData}>暂无数据</div>
+          )}
         </PullToRefresh>
       </div>
     );

src/containers/Repair/ReprtRepair.js

@@ -38,8 +38,14 @@ class ReprtRepair extends Component {
   componentDidMount() {
     fetchRepairArea()
       .then(res => {
+        let list = res.data.length
+          ? res.data.map(i => ({
+              value: i.id,
+              label: i.name,
+            }))
+          : [];
         this.setState(() => ({
-          areaList: res.data,
+          areaList: list,
         }));
       })
       .catch(err => {
@@ -47,8 +53,14 @@ class ReprtRepair extends Component {
       });
     fetchRepairTerm()
       .then(res => {
+        let list = res.data.length
+          ? res.data.map(i => ({
+              value: i.id,
+              label: i.name,
+            }))
+          : [];
         this.setState(() => ({
-          termList: res.data,
+          termList: list,
         }));
       })
       .catch(err => {

src/containers/Repair/components/RepairItem.js

@@ -15,6 +15,14 @@ class RepairItem extends Component {
       showDetail: !showDetail,
     }));
   };
+  dealHandle = e => {
+    const { dealHandle, data } = this.props;
+    if (dealHandle && data.dealState === 1) {
+      e.stopPropagation();
+      e.preventDefault();
+      dealHandle(data.id);
+    }
+  };
   render() {
     const { showDetail } = this.state;
     const { data } = this.props;
@@ -33,9 +41,13 @@ class RepairItem extends Component {
         </div>
         <div className={styles.content} onClick={this.toggleDetail}>
           {data.dealState === 1 ? (
-            <div className={styles.dealing}>处理中</div>
+            <div className={styles.dealing} onClick={this.dealHandle}>
+              处理中
+            </div>
           ) : (
-            <div className={styles.dealed}>已处理</div>
+            <div className={styles.dealed} onClick={this.dealHandle}>
+              已处理
+            </div>
           )}
           {showDetail
             ? [

src/containers/Repair/components/style.css

@@ -21,6 +21,7 @@
   width: 24px;
   height: 24px;
   transform: rotate(90deg);
+  transition: all 500ms ease-in;
 }
 .titleIconShowDetail {
   composes: titleIcon;

src/containers/RepairDeal/index.js

+import React, { Component } from 'react';
+import { PullToRefresh, Modal, Toast } from 'antd-mobile';
+import styles from './style.css';
+import RepairItem from '../Repair/components/RepairItem';
+import { fetchReportRepairList, dealRepair } from '../../api/index';
+
+class RepairDeal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      down: true,
+      height: document.documentElement.clientHeight,
+      pagination: {
+        pageNum: 1,
+        pageSize: 50,
+      },
+      list: [
+        {
+          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() {
+    this.fetchList();
+  }
+  fetchList = () => {
+    const { pagination } = this.state;
+    fetchReportRepairList({
+      ...pagination,
+    }).then(res => {
+      // const { list, ...pagination } = res.data;
+      // this.setState({
+      //   list: list,
+      //   pagination: pagination,
+      // });
+      this.setState({
+        list: res.data,
+      });
+    });
+  };
+  refreshHandle = () => {
+    this.fetchList();
+  };
+  dealHandle = id => {
+    console.log('in date');
+    Modal.alert(
+      '',
+      <div className={styles.alertInfo}>
+        <span className={styles.checkLabel}>
+          <span className={styles.checkInner} />
+        </span>
+        <span>已处理</span>
+      </div>,
+      [
+        { text: '放弃', onPress: () => console.log('cancel') },
+        {
+          text: '提交',
+          onPress: () =>
+            dealRepair({
+              id: id,
+              userId: '',
+            })
+              .then(res => {
+                Toast.fail(res.msg || '处理成功！');
+              })
+              .catch(err => {
+                Toast.fail(err.msg || '处理失败！');
+              }),
+        },
+      ]
+    );
+  };
+  render() {
+    return (
+      <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 => (
+            <RepairItem key={i.id} data={i} dealHandle={this.dealHandle} />
+          ))
+        ) : (
+          <div className={styles.noData}>暂无数据</div>
+        )}
+      </PullToRefresh>
+    );
+  }
+}
+
+export default RepairDeal;

src/containers/RepairDeal/style.css

+.listInfo {
+  composes: listInfo from '../Repair/style.css';
+}
+.noData {
+  composes: noData from '../Repair/style.css';
+}
+
+.alertInfo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #000;
+  height: 86px;
+}
+.checkLabel {
+  margin-right: 14px;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #666;
+  border-radius: 50%;
+  position: relative;
+}
+.checkInner {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  background-color: #3695c0;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

src/store/index.js

+class Store {
+  constructor() {
+    this.userId = '1';
+  }
+  static getUserId = () => {
+    return this.userId;
+  };
+  static updateUserId = userId => {
+    this.userId = userId;
+  };
+}
+
+export default Store;