Skip to content

C
cdsf-wx-app
Commit 05e43a36 by 姜雷
Options

添加权限限制

parent 5d02a4f0
Showing with 193 additions and 63 deletions
src/api/fetch.js
......@@ -14,6 +14,7 @@ const service = axios.create({
service.interceptors.request.use(
conf => {
let userId = store.getUserId();
if (/post/.test(conf.method.toLocaleLowerCase())) {
let data = userId
? {
...conf.data,
......@@ -21,6 +22,16 @@ service.interceptors.request.use(
}
: 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([
{
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(
<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} alt="" /> : null
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();
}
for (let index = 0; index < author.length; index++) {
const element = author[index];
if (element.code === code) {
if (element.type) {
console.log('no login');
// product 需要修改为去微信授权
return <Component />;
// return this.goWechatAuth();
}
let item = author.find(i => i.code === code);
if (item.type) {
return <Component {...props} />;
} else {
Toast.fail('无权使用该功能');
const { from } = this.props.location.state || {
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';
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment