添加权限限制

src/api/fetch.js

@@ -14,13 +14,24 @@ const service = axios.create({
 service.interceptors.request.use(
   conf => {
     let userId = store.getUserId();
-    let data = userId
-      ? {
-          ...conf.data,
-          userId,
-        }
-      : conf.data;
-    conf.data = data;
+    if (/post/.test(conf.method.toLocaleLowerCase())) {
+      let data = userId
+        ? {
+            ...conf.data,
+            userId,
+          }
+        : conf.data;
+      conf.data = data;
+    } else {
+      let data = userId
+        ? {
+            ...conf.params,
+            userId,
+          }
+        : conf.params;
+      conf.params = data;
+    }
+
     Toast.loading('Loading...', 10);
     conf.headers = {
       ...conf.headers,

src/components/Input/ImagePicker/ImagePicker.js

@@ -52,12 +52,10 @@ class ImagePicker extends Component {
       done: true,
     }));
     if (onChange) {
-      onChange([
-        {
-          filesList,
-          url: fileUrl,
-        },
-      ]);
+      onChange({
+        filesList,
+        url: fileUrl,
+      });
     }
   };
   createObjectURL = blob => {

src/components/Perview/Perview.js

@@ -7,43 +7,75 @@ import pageIcon from './images/next_pic_btn@2x.png';
 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;
-    }
+    this.state = {
+      index: props.index,
+      list: props.data.filter(i => i),
+    };
   }
-
-  componentWillUnmount() {
-    window.document.body.removeChild(this.node);
-  }
-
+  onChangeHandle = index => {
+    this.setState({
+      index: index,
+    });
+  };
+  goPer = () => {
+    const { index } = this.state;
+    if (index === 0) return;
+    this.setState({
+      index: index - 1,
+    });
+  };
+  goNext = () => {
+    const { index, list } = this.state;
+    if (index + 1 >= list.length) return;
+    this.setState({
+      index: index + 1,
+    });
+  };
   render() {
-    const { data, index } = this.props;
+    const { index, list } = this.state;
     return (
       <div>
         <div className={styles.content}>
           <div className={styles.imgBox}>
-            <Carousel selectedIndex={index} dots={false}>
-              {data.map(
-                (item, index) =>
-                  item ? <img className={styles.carouselImg} key={index} src={item.url} alt="" /> : null
+            <Carousel
+              selectedIndex={index}
+              dots={false}
+              afterChange={this.onChangeHandle}
+            >
+              {list.length === 1 ? (
+                <div>
+                  <img
+                    className={styles.carouselImg}
+                    src={list[0].url || list[0]}
+                    alt=""
+                  />
+                </div>
+              ) : (
+                list.map(
+                  (item, index) =>
+                    item ? (
+                      <img
+                        className={styles.carouselImg}
+                        key={index}
+                        src={item.url || item}
+                        alt=""
+                      />
+                    ) : null
+                )
               )}
             </Carousel>
           </div>
           <div className={styles.footer}>
-            <div className={styles.per}>
+            <div className={styles.per} onClick={this.goPer}>
               <div className={styles.leftIcon}>
                 <img src={pageIcon} alt="" />
               </div>
               <div>上一张</div>
             </div>
-            <div className={styles.pagination}>1/3</div>
-            <div className={styles.next}>
+            <div className={styles.pagination}>
+              {index + 1}/{list.length}
+            </div>
+            <div className={styles.next} onClick={this.goNext}>
               <div>下一张</div>
               <div className={styles.rightIcon}>
                 <img src={pageIcon} alt="" />

src/containers/App.js

@@ -20,12 +20,6 @@ class App extends Component {
   constructor(props) {
     super(props);
 
-    this.updateUserInfo = data => {
-      this.setState({
-        userinfo: { ...this.state.userinfo, ...data },
-      });
-    };
-
     this.state = {
       isWx: is_weixn(),
       userContext: {
@@ -70,14 +64,14 @@ class App extends Component {
     let params = this.getParams(location.search);
     if (params.code) {
       console.log('fetch UserInfo');
-      console.log('redirect', params, history);
+      console.log('redirect', params);
       wxAuth({
         code: params.code,
       })
         .then(res => {
           console.log(res);
-          const { firstLogin, user } = res.data;
-          this.updateUserInfo({ ...user, login: true });
+          const { firstLogin, user, author } = res.data;
+          this.updateUserInfo({ ...user, login: true, author });
           if (firstLogin) {
             history.replace('/login');
           } else {
@@ -90,6 +84,7 @@ class App extends Component {
         });
     } else {
       console.log('go in wxAuth');
+      // this.goWechatAuth()
     }
 
     return <div style={{ margin: '60px 24px 0' }}>加载中。。。</div>;
@@ -99,30 +94,29 @@ class App extends Component {
     window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${rUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
     return <div>授权中。。。</div>;
   };
-  validateUserinfo = (code, Component) => {
+  validateUserinfo = (props, code, Component) => {
     const {
       userContext: {
         userinfo: { login, author },
       },
     } = this.state;
+
     if (!login) {
-      return this.goWechatAuth();
+      console.log('no login');
+      // product 需要修改为去微信授权
+      return <Component />;
+      // return this.goWechatAuth();
     }
-    for (let index = 0; index < author.length; index++) {
-      const element = author[index];
-      if (element.code === code) {
-        if (element.type) {
-          return <Component />;
-        } else {
-          Toast.fail('无权使用该功能');
-          const { from } = this.props.location.state || {
-            from: { pathname: '/home' },
-          };
-          return <Redirect to={from} />;
-        }
-      }
+    let item = author.find(i => i.code === code);
+    if (item.type) {
+      return <Component {...props} />;
+    } else {
+      Toast.fail('无权使用该功能');
+      const { from } = props.location.state || {
+        from: { pathname: '/home' },
+      };
+      return <Redirect to={from} />;
     }
-    return <NoMatch />;
   };
   updateUserInfo = data => {
     this.setState({
@@ -142,10 +136,28 @@ class App extends Component {
             <Route exact path="/" render={this.renderIndex} />
             <Route path="/home" component={Home} />
             <Route path="/login" component={Login} />
-            <Route path="/publicCar" component={PublicCar} />
-            <Route path="/publicCarDeal" component={PublicCarDeal} />
-            <Route path="/Repair" component={Repair} />
-            <Route path="/RepairDeal" component={RepairDeal} />
+            <Route
+              path="/publicCar"
+              render={props =>
+                this.validateUserinfo(props, 'CSXY0003', PublicCar)
+              }
+            />
+            <Route
+              path="/publicCarDeal"
+              render={props =>
+                this.validateUserinfo(props, 'CSXY0004', PublicCarDeal)
+              }
+            />
+            <Route
+              path="/Repair"
+              render={props => this.validateUserinfo(props, 'CSXY0001', Repair)}
+            />
+            <Route
+              path="/RepairDeal"
+              render={props =>
+                this.validateUserinfo(props, 'CSXY0002', RepairDeal)
+              }
+            />
             <Route component={NoMatch} />
           </Switch>
         </UserInfoContext.Provider>

src/containers/Home/Index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './style.css';
+import { Link } from 'react-router-dom';
 
 export class Index extends React.Component {
   static propTypes = {
@@ -11,10 +12,13 @@ export class Index extends React.Component {
     return (
       <div className={styles.LoadPage}>
         <h2>HomePage</h2>
-        <a href="">功能1</a>
-        <a href="">功能2</a>
-        <a href="">功能3</a>
-        <a href="">功能4</a>
+        <Link to="/Repair">报修</Link>
+        <br />
+        <Link to="/RepairDeal">报修处理</Link>
+        <br />
+        <Link to="/publicCar">约车</Link>
+        <br />
+        <Link to="/publicCarDeal">约车处理</Link>
       </div>
     );
   }

src/containers/Repair/RepairList.js

 import React, { Component } from 'react';
-import { PullToRefresh } from 'antd-mobile';
+import { PullToRefresh, Modal } from 'antd-mobile';
 import styles from './style.css';
 import RepairItem from './components/RepairItem';
 import { fetchRepairList } from '../../api/index';
+import Perview from '../../components/Perview/Perview';
 
 class RepairList extends Component {
   constructor(props) {
@@ -16,6 +17,9 @@ class RepairList extends Component {
         pageSize: 50,
       },
       list: [],
+      perviewVisibility: false,
+      selectedImgList: [],
+      perviewIndex: 0,
     };
   }
   componentDidMount() {
@@ -44,7 +48,20 @@ class RepairList extends Component {
       this.setState({ refreshing: false });
     }, 1000);
   };
+  showViewHandle = (list, index) => {
+    this.setState({
+      perviewVisibility: true,
+      perviewIndex: index,
+      selectedImgList: list,
+    });
+  };
+  resetDialog = () => {
+    this.setState({
+      perviewVisibility: false,
+    });
+  };
   render() {
+    const { perviewVisibility, selectedImgList, perviewIndex } = this.state;
     return (
       <div className={styles.repairList}>
         <PullToRefresh
@@ -61,11 +78,23 @@ class RepairList extends Component {
         >
           <div className={styles.listInfo}>显示最近半年的报修记录</div>
           {this.state.list.length ? (
-            this.state.list.map(i => <RepairItem key={i.id} data={i} />)
+            this.state.list.map(i => (
+              <RepairItem key={i.id} data={i} showView={this.showViewHandle} />
+            ))
           ) : (
             <div className={styles.noData}>暂无数据</div>
           )}
         </PullToRefresh>
+        <Modal
+          className={styles.perViewDialog}
+          visible={perviewVisibility}
+          transparent
+          maskClosable={true}
+          onClose={this.resetDialog}
+          title=""
+        >
+          <Perview data={selectedImgList} index={perviewIndex} />
+        </Modal>
       </div>
     );
   }

src/containers/Repair/ReprtRepair.js

@@ -157,7 +157,7 @@ class ReprtRepair extends Component {
     this.state.applyForm.uploadImg.map(i => {
       if (i) {
         console.log(i);
-        formData.append('file', i[0]);
+        formData.append('file', i.filesList[0]);
       }
       return i;
     });

src/containers/Repair/components/RepairItem.js

@@ -23,9 +23,15 @@ class RepairItem extends Component {
       dealHandle(data.id);
     }
   };
+  showViewHandle = (e, imgList, index) => {
+    e.stopPropagation();
+    const { showView } = this.props;
+    showView && showView(imgList, index);
+  };
   render() {
     const { showDetail } = this.state;
     const { data } = this.props;
+    let imgList = data.uploadImg ? data.uploadImg.split(',') : [];
     return (
       <div className={styles.wrap}>
         <div
@@ -84,9 +90,13 @@ class RepairItem extends Component {
                   </div>
                 </div>,
                 <div key="uploadImg" className={styles.listLine}>
-                  {data.uploadImg.split(',')[0] &&
-                    data.uploadImg.split(',').map((item, idx) => (
-                      <div key={idx} className={styles.imgItem}>
+                  {imgList[0] &&
+                    imgList.map((item, idx) => (
+                      <div
+                        key={idx}
+                        className={styles.imgItem}
+                        onClick={e => this.showViewHandle(e, imgList, idx)}
+                      >
                         <img src={item} alt="" />
                       </div>
                     ))}

src/containers/RepairDeal/index.js

@@ -3,6 +3,7 @@ import { PullToRefresh, Modal, Toast } from 'antd-mobile';
 import styles from './style.css';
 import RepairItem from '../Repair/components/RepairItem';
 import { fetchReportRepairList, dealRepair } from '../../api/index';
+import Perview from '../../components/Perview/Perview';
 
 class RepairDeal extends Component {
   constructor(props) {
@@ -111,9 +112,23 @@ class RepairDeal extends Component {
       ]
     );
   };
+  showViewHandle = (list, index) => {
+    this.setState({
+      perviewVisibility: true,
+      perviewIndex: index,
+      selectedImgList: list,
+    });
+  };
+  resetDialog = () => {
+    this.setState({
+      perviewVisibility: false,
+    });
+  };
   render() {
-    return (
+    const { perviewVisibility, selectedImgList, perviewIndex } = this.state;
+    return [
       <PullToRefresh
+        key="repairList"
         damping={60}
         ref={el => (this.ptr = el)}
         style={{
@@ -128,13 +143,29 @@ class RepairDeal extends Component {
         <div className={styles.listInfo}>显示最近半年的报修记录</div>
         {this.state.list.length ? (
           this.state.list.map(i => (
-            <RepairItem key={i.id} data={i} dealHandle={this.dealHandle} />
+            <RepairItem
+              key={i.id}
+              data={i}
+              dealHandle={this.dealHandle}
+              showView={this.showViewHandle}
+            />
           ))
         ) : (
           <div className={styles.noData}>暂无数据</div>
         )}
-      </PullToRefresh>
-    );
+      </PullToRefresh>,
+      <Modal
+        key="repairImgPerview"
+        className={styles.perViewDialog}
+        visible={perviewVisibility}
+        transparent
+        maskClosable={true}
+        onClose={this.resetDialog}
+        title=""
+      >
+        <Perview data={selectedImgList} index={perviewIndex} />
+      </Modal>,
+    ];
   }
 }
 

src/containers/RepairDeal/style.css

@@ -30,3 +30,6 @@
   top: 50%;
   transform: translate(-50%, -50%);
 }
+.perViewDialog {
+  composes: perViewDialog from '../Repair/style.css';
+}