Skip to content

C
cdsf-wx-app
Commit fd181f78 by 姜雷
Options

完善页面

parent d6dcd9a5
Showing with 235 additions and 70 deletions
src/api/repairAdd.js 0 → 100644
import config from '../config/index';
import axios from 'axios';
const path = config.SERVER_URL;
export const reportRepair = entity =>
axios({
url: path + '/repair/app/addRepair',
method: 'post',
data: entity,
});
src/components/Input/ImagePicker/ImagePicker.js
......@@ -8,34 +8,52 @@ class ImagePicker extends Component {
super(props);
this.state = {
done: false,
hasValue:
Object.keys(props).find(i => i === 'value') === -1 ? false : true,
files: [],
};
}
shouldComponentUpdate(nextProps, nextState) {
const { value } = nextProps;
const { files } = nextState;
if (!value && files.length) {
this.deleteImage();
}
return true;
}
selectImage = () => {
const { done } = this.state;
const { showView } = this.props;
if (done) {
console.log('showView');
showView();
} else {
this.refs.input.dispatchEvent(new MouseEvent('click'));
}
};
deleteImage = e => {
e.stopPropagation();
e && e.stopPropagation();
const { onChange } = this.props;
console.log('del');
this.refs.input.value = '';
this.setState(() => ({
files: [],
done: false,
}));
if (onChange) {
onChange(null);
}
};
uploadImg = e => {
const { onChange } = this.props;
const filesList = e.target.files;
console.log(filesList);
const fileUrl = this.createObjectURL(filesList[0]);
this.setState(() => ({
files: [fileUrl],
done: true,
}));
if (onChange) {
onChange(filesList);
}
};
createObjectURL = blob => {
if (window.URL) {
......
src/components/Input/Select/Select.js
......@@ -8,6 +8,8 @@ class Select extends Component {
constructor(props) {
super(props);
this.state = {
hasValue:
Object.keys(props).find(i => i === 'value') === -1 ? false : true,
value: [],
};
}
......@@ -41,10 +43,14 @@ class Select extends Component {
okHandle = () => {
const { onChange } = this.props;
const { value } = this.picker.state;
onChange && onChange(value);
this.setState({
value: value,
});
const { hasValue } = this.state;
if (hasValue) {
onChange && onChange(value);
} else {
this.setState({
value: value,
});
}
this.closePickerHandle();
};
cancelHandle = () => {
......@@ -56,12 +62,23 @@ class Select extends Component {
};
render() {
const { placeholder, data } = this.props;
const { value } = this.state;
let text = value.length
? data.find(item => item.value === value[0]).label
: placeholder
? placeholder
: '';
const { value, hasValue } = this.state;
let text = '';
if (hasValue) {
let val = this.props.value;
text = val.length
? data.find(item => item.value === val[0]).label
: placeholder
? placeholder
: '';
} else {
text = value.length
? data.find(item => item.value === value[0]).label
: placeholder
? placeholder
: '';
}
return (
<div className={styles.selectWrap} onClick={this.showPickerView}>
{text}
......
src/components/Perview/Perview.js 0 → 100644
import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import styles from './style.css';
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;
}
}
componentWillUnmount() {
window.document.body.removeChild(this.node);
}
render() {
const { visibility } = this.props;
return visibility
? createPortal(
<div className={styles}>
<div className={styles.mask} />
<div className={styles.content}>
<div className={styles.imgBox} />
<div className={styles.footer}>
<div className={styles.per}>
<div className={styles.leftIcon} />
</div>
<div className={styles.pagination} />
<div className={styles.next}>
<div className={styles.rightIcon} />
</div>
</div>
</div>
</div>,
this.node
)
: null;
}
}
export default Perview;
src/components/Perview/style.css 0 → 100644
.mask {
composes: mask from '../Popup/style.css';
}
.content {
}
src/containers/Repair/RepairList.js
......@@ -16,50 +16,6 @@ class RepairList extends Component {
pageSize: 50,
},
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() {
......@@ -77,6 +33,9 @@ class RepairList extends Component {
...pagination,
}).then(res => {
console.log(res);
this.setState({
list: res.data,
});
});
}
refreshHandle = () => {
......
src/containers/Repair/ReprtRepair.js
......@@ -11,15 +11,14 @@ import imgIcon from './images/upload_pic_icon@2x.png';
import ImagePicker from '../../components/Input/ImagePicker/ImagePicker';
import Select from '../../components/Input/Select/Select';
import { fetchRepairArea, fetchRepairTerm } from '../../api/index';
import { reportRepair } from '../../api/repairAdd';
import Perview from '../../components/Perview/Perview';
class ReprtRepair extends Component {
constructor(props) {
super(props);
this.state = {
areaList: [
{ value: 'ddsd1', label: 'fgfasd1' },
{ value: 'ddsd2', label: 'fgfasd2' },
],
areaList: [],
termList: [],
applyForm: {
name: '',
......@@ -31,8 +30,10 @@ class ReprtRepair extends Component {
term: '',
termId: '',
address: '',
uploadImg: [],
uploadImg: [null, null, null],
},
perviewVisibility: true,
perviewIndex: 0,
};
}
componentDidMount() {
......@@ -67,7 +68,22 @@ class ReprtRepair extends Component {
console.log(err);
});
}
resetApplyForm = () => {
this.setState({
applyForm: {
name: '',
userId: '',
repairCellphone: '',
applyIdentity: '学生',
area: '',
areaId: '',
term: '',
termId: '',
address: '',
uploadImg: [null, null, null],
},
});
};
onChangeHandle = e => {
const { name, value } = e.target;
this.setState(({ applyForm }) => ({
......@@ -86,6 +102,25 @@ class ReprtRepair extends Component {
},
}));
};
onImagePicker = (index, val) => {
console.log(index, val);
const { uploadImg } = this.state.applyForm;
uploadImg[index] = val;
this.setState(({ applyForm }) => ({
applyForm: {
...applyForm,
uploadImg: uploadImg,
},
}));
};
showViewHandle = index => {
console.log('showViewHandle');
console.log(index);
this.setState({
perviewVisibility: true,
perviewIndex: index,
});
};
validateForm = () => {
const { applyForm } = this.state;
if (!applyForm.name) {
......@@ -118,9 +153,50 @@ class ReprtRepair extends Component {
if (!this.validateForm()) {
return;
}
let formData = new FormData();
this.state.applyForm.uploadImg.map(i => {
if (i) {
console.log(i);
formData.append('file', i[0]);
}
return i;
});
let area = this.state.areaList.find(
i => i.value === this.state.applyForm.areaId[0]
).label;
let term = this.state.termList.find(
i => i.value === this.state.applyForm.termId[0]
).label;
formData.append('userId', '1');
// product 需要登陆后的用户ID
formData.append('applyIdentity', this.state.applyForm.applyIdentity);
formData.append('area', area);
formData.append('term', term);
formData.append('address', this.state.applyForm.address);
formData.append('repairCellphone', this.state.applyForm.repairCellphone);
formData.append('termId', this.state.applyForm.termId);
formData.append('areaId', this.state.applyForm.areaId);
formData.append('name', this.state.applyForm.name);
reportRepair(formData)
.then(res => {
console.log(res);
console.log('resetForm');
this.resetApplyForm();
})
.catch(err => {
console.log(err);
});
};
render() {
const { applyForm, areaList, termList } = this.state;
const {
applyForm,
areaList,
termList,
perviewVisibility,
perviewIndex,
} = this.state;
return (
<div className={styles.wrap}>
......@@ -194,7 +270,8 @@ class ReprtRepair extends Component {
placeholder="请选择"
data={areaList}
cols={1}
onChange={val => this.onSelectHandle('area', val)}
value={applyForm.areaId}
onChange={val => this.onSelectHandle('areaId', val)}
/>
</div>
</div>
......@@ -209,7 +286,8 @@ class ReprtRepair extends Component {
placeholder="请选择"
data={termList}
cols={1}
onChange={val => this.onSelectHandle('term', val)}
value={applyForm.termId}
onChange={val => this.onSelectHandle('termId', val)}
/>
</div>
</div>
......@@ -224,6 +302,15 @@ class ReprtRepair extends Component {
placeholder="输入报修地址"
rows={3}
count={50}
value={this.state.applyForm.address}
onChange={val =>
this.setState(({ applyForm }) => ({
applyForm: {
...applyForm,
address: val,
},
}))
}
/>
<div className={styles.listItem}>
<i className={styles.itemIcon}>
......@@ -232,13 +319,30 @@ class ReprtRepair extends Component {
<span className={styles.itemLabel}>上传图片</span>
</div>
<div className={styles.imageArea}>
<ImagePicker />
<ImagePicker />
<ImagePicker />
<ImagePicker
value={applyForm.uploadImg[0]}
showView={() => this.showViewHandle(0)}
onChange={fileList => this.onImagePicker(0, fileList)}
/>
<ImagePicker
value={applyForm.uploadImg[1]}
showView={() => this.showViewHandle(1)}
onChange={fileList => this.onImagePicker(1, fileList)}
/>
<ImagePicker
value={applyForm.uploadImg[2]}
showView={() => this.showViewHandle(2)}
onChange={fileList => this.onImagePicker(2, fileList)}
/>
</div>
<Button className={styles.applyBtn} onClick={this.startApply}>
提交
</Button>
<Perview
visibility={perviewVisibility}
data={applyForm.uploadImg}
index={perviewIndex}
/>
</div>
);
}
......
src/containers/Repair/style.css
/* index */
:global(.RepairContent) {
flex: auto;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.footer {
width: 100%;
......
src/styles/index.css
......@@ -15,6 +15,7 @@ p {
img {
display: block;
width: 100%;
height: 100%;
}
[aspectratio] {
position: relative;
......
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