添加图片资源和接口调用

src/api/fetch.js

@@ -2,8 +2,9 @@ import axios from 'axios';
 import config from '../config/index';
 import errorHandle from './errorHandle';
 // import store from '../store/index';
+import { Toast } from 'antd-mobile';
 
-const path = config.SERVER_URL + '/dcxy/api/gx/construction';
+const path = config.SERVER_URL;
 // 创建axios实例
 const service = axios.create({
   baseURL: path, // api的base_url
@@ -13,7 +14,7 @@ const service = axios.create({
 service.interceptors.request.use(
   conf => {
     // let token = store.getToken();
-
+    Toast.loading('Loading...', 10);
     conf.headers = {
       ...conf.headers,
       reqSource: 'wx',
@@ -28,17 +29,24 @@ service.interceptors.request.use(
 );
 
 // respone拦截器
-service.interceptors.response.use(response => {
+service.interceptors.response.use(
+  response => {
     const res = response.data;
 
+    Toast.hide();
     /**
-   * code为非'0'是抛错
+     * code为非1000是抛错
      */
     if (res.code !== 1000) {
       return Promise.reject(response.data);
     } else {
       return response.data;
     }
-}, errorHandle);
+  },
+  err => {
+    Toast.hide();
+    return errorHandle(err);
+  }
+);
 
 export default service;

src/api/index.js

 import fetch from './fetch';
 
+// login
+export const sendMsg = entity =>
+  fetch({
+    url: '/login/sendMsg',
+    params: entity,
+  });
+// publicCar
 export const fetchPublicCarList = entity =>
   fetch({
     url: '/publicCar/app/pageList4PublicCar',
@@ -24,6 +31,7 @@ export const dealPublicCar = entity =>
     params: entity,
   });
 
+// repair
 export const fetchRepairList = entity =>
   fetch({
     url: '/repair/app/pageList4Repair',

src/config/index.js

 export const APP_ID = 'wxed39740c39fa1c0a';
-export const SERVER_URL = 'http://ex-dev-gx-manager.168cad.top';
-// export const SERVER_URL = 'http://192.168.1.150:8080';
+// export const SERVER_URL = 'http://ex-dev-gx-manager.168cad.top';
+export const SERVER_URL = 'http://192.168.1.33:8888';
 
 export default {
   APP_ID,

src/containers/App.js

@@ -10,6 +10,7 @@ import Report from './report/report';
 import Login from './Login/Login';
 import PublicCarList from './PublicCar/PublicCarList';
 import PublicCarApply from './PublicCar/PublicCarApply';
+import Repair from './Repair/index';
 import NoMatch from './NoMatch';
 
 class App extends Component {
@@ -90,6 +91,7 @@ class App extends Component {
             <Route path="/login" component={Login} />
             <Route path="/PublicCarList" component={PublicCarList} />
             <Route path="/PublicCarApply" component={PublicCarApply} />
+            <Route path="/Repair" component={Repair} />
             <Route component={NoMatch} />
           </Switch>
         </UserInfoContext.Provider>

src/containers/PublicCar/PublicCarApply.js

 import React, { Component } from 'react';
+import { List, InputItem, DatePicker, Button, Toast } from 'antd-mobile';
+import styles from './style.css';
+import { applyPublicCar, sendMsg } from '../../api/index';
 
+const minDate = new Date();
 class PublicCarApply extends Component {
+  state = {
+    department: '',
+    createDate: '',
+    name: '',
+    categoryName: '',
+    userCount: '',
+    beginDate: '',
+    endDate: '',
+    lineDescription: '',
+  };
+  onSubmit = () => {
+    // applyPublicCar({
+    //   ...this.state,
+    // })
+    //   .then(res => {
+    //     console.log('res: ' + res);
+    //   })
+    //   .catch(err => {
+    //     console.log('err: ' + err);
+    //   });
+    sendMsg({
+      cellphone: '18108096099',
+    })
+      .then(res => {
+        console.log(res);
+        Toast.success('发送成功！');
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
   render() {
     return (
-      <div>
-        PublicCarApply
+      <div className={styles.bg}>
+        公务约车
+        <List className={styles.content}>
+          <InputItem clear placeholder="用车部门">
+            用车部门
+          </InputItem>
+          <InputItem clear placeholder="申请时间">
+            申请时间
+          </InputItem>
+          <InputItem clear placeholder="申请人">
+            申请人
+          </InputItem>
+          <InputItem clear placeholder="用车类型">
+            用车类型
+          </InputItem>
+          <InputItem clear placeholder="用车人数">
+            用车人数
+          </InputItem>
+          <DatePicker
+            minDate={minDate}
+            value={this.state.beginDate}
+            onChange={date => this.setState({ beginDate: date })}
+          >
+            <List.Item arrow="horizontal">用车开始时间</List.Item>
+          </DatePicker>
+          <DatePicker
+            minDate={this.state.beginDate}
+            value={this.state.endDate}
+            onChange={date => this.setState({ endDate: date })}
+          >
+            <List.Item arrow="horizontal">用车结束时间</List.Item>
+          </DatePicker>
+        </List>
+        <Button type="primary" size="small" inline onClick={this.onSubmit}>
+          提交
+        </Button>
       </div>
     );
   }

src/containers/PublicCar/style.css

+.bg {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}

src/containers/Repair/RepairList.js

+import React, { Component } from 'react';
+
+class RepairList extends Component {
+  render() {
+    return (
+      <div>
+        保修记录
+      </div>
+    );
+  }
+}
+
+export default RepairList;
\ No newline at end of file

src/containers/Repair/ReprtRepair.js

+import React, { Component } from 'react';
+import styles from './style.css';
+import peopleIcon from './images/repair_people_icon@2x.png';
+import phoneIcon from './images/phone_tel_icon@2x.png';
+import roleIcon from './images/user_role_icon@2x.png';
+import areaIcon from './images/repair_area_icon@2x.png';
+import typeIcon from './images/repair_item_icon@2x.png';
+import addrIcon from './images/repair_addr_icon@2x.png';
+import imgIcon from './images/upload_pic_icon@2x.png';
+
+class ReprtRepair extends Component {
+  render() {
+    return (
+      <div className={styles.wrap}>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={peopleIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>报修人</span>
+          <div className={styles.inputBox}>
+            <input className={styles.input} type="text" />
+          </div>
+        </div>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={phoneIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>报修人tel</span>
+          <div className={styles.inputBox}>
+            <input className={styles.input} type="text" />
+          </div>
+        </div>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={roleIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>报修身份</span>
+          <div className={styles.inputBox}>
+            <input className={styles.input} type="text" />
+          </div>
+        </div>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={areaIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>报修区域</span>
+          <div className={styles.inputBox}>
+            <input className={styles.input} type="text" />
+          </div>
+        </div>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={typeIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>报修项目</span>
+          <div className={styles.inputBox}>
+            <input className={styles.input} type="text" />
+          </div>
+        </div>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={addrIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>报修地址</span>
+        </div>
+        <div className={styles.listItem}>
+          <i className={styles.itemIcon}>
+            <img src={imgIcon} alt="" />
+          </i>
+          <span className={styles.itemLabel}>上传图片</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ReprtRepair;

src/containers/Repair/index.js

+import React, { Component } from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import styles from './style.css';
+import ReprtRepair from './ReprtRepair';
+import RepairList from './RepairList';
+class index extends Component {
+  state = {
+    tab: 'ReprtRepair',
+  };
+  toggleRouteHandle = name => {
+    if (name === this.state.tab) return;
+    console.log(name);
+    const { history } = this.props;
+    this.setState({
+      tab: name,
+    });
+    history.replace('/repair/' + name);
+  };
+  render() {
+    const { tab } = this.state;
+    return (
+      <div className="Content-Wrap">
+        <div className={styles.content}>
+          <Switch>
+            <Route path="/repair/ReprtRepair" component={ReprtRepair} />
+            <Route path="/repair/RepairList" component={RepairList} />
+            <Route render={() => <Redirect to="/repair/ReprtRepair" />} />
+          </Switch>
+        </div>
+        <div className={styles.footer}>
+          <span
+            className={`${[styles['footer-item']]} ${
+              tab === 'ReprtRepair' ? styles.activated : ''
+            }`}
+            onClick={() => this.toggleRouteHandle('ReprtRepair')}
+          >
+            报修服务
+          </span>
+          <span className={styles.line}></span>
+          <span
+            className={`${[styles['footer-item']]} ${
+              tab === 'RepairList' ? styles.activated : ''
+            }`}
+            onClick={() => this.toggleRouteHandle('RepairList')}
+          >
+            报修记录
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default index;

src/containers/Repair/style.css

+/* index */
+.content {
+  flex: auto;
+}
+.footer {
+  width: 100%;
+  height: 80px;
+  line-height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  color: #999;
+}
+.line {
+  width: 2px;
+  height: 50px;
+  background-color: #f0f0f0;
+}
+.footer-item {
+  margin: 0 80px;
+}
+.activated {
+  color: #3695c0;
+}
+/* Report */
+.wrap {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+}
+.listItem {
+  margin-top: 32px;
+  height: 48px;
+  line-height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+}
+.itemIcon {
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+}
+.itemLabel {
+  width: 120px;
+  margin: 0 12px 0 10px;
+  font-size: 26px;
+  color: #333;
+  text-align: justify;
+  text-justify: distribute-all-lines;
+  text-align-last: justify;
+}
+.inputBox {
+  position: relative;
+  flex: auto;
+}
+.input {
+  border: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  text-align: center;
+  font-size: 26px;
+  color: #666;
+}
+.inputBox::after {
+  content: '';
+  position: absolute;
+  background-color: #f0f0f0;
+  display: block;
+  z-index: 1;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  transform-origin: 50% 100%;
+  transform: scaleY(0.5);
+}

src/styles/index.css

@@ -99,3 +99,10 @@ img {
   overflow: hidden;
   overflow-y: scroll;
 }
+:global(.Content-Wrap) {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}