Skip to content

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

添加报修页面

parent c423ca2b
Showing with 520 additions and 21 deletions
src/components/Input/Select/Select.js
......@@ -2,24 +2,65 @@ import React, { Component } from 'react';
import ReactDom from 'react-dom';
import styles from './style.css';
import arrIcon from './images/select_icon@2x.png';
import { PickerView } from 'antd-mobile';
import Popup from '../../Popup/Popup';
class Select extends Component {
constructor(props) {
super(props);
this.state = {
value: [],
};
}
showPickerView = () => {
console.log('showPickerView');
console.log(this.props);
const { placeholder, onChange, ...props } = this.props;
let box = document.getElementById('ks-picker-box');
if (box) {
ReactDom.render(<PickerView />, box);
} else {
let box = document.createElement('div');
if (!box) {
box = document.createElement('div');
box.id = 'ks-picker-box';
document.body.appendChild(box);
ReactDom.render(<PickerView />, box);
}
this.picker = ReactDom.render(
<Popup
{...props}
onChange={this.changeHandle}
cancelHandle={this.cancelHandle}
okHandle={this.okHandle}
/>,
box
);
};
changeHandle = val => {
console.log(val);
const { onChange } = this.props;
onChange && onChange(val);
};
okHandle = () => {
const { onChange } = this.props;
const { value } = this.picker.state;
onChange && onChange(value);
this.setState({
value: value,
});
this.closePickerHandle();
};
cancelHandle = () => {
this.closePickerHandle();
};
closePickerHandle = () => {
let box = document.getElementById('ks-picker-box');
document.body.removeChild(box);
};
render() {
const { placeholder } = this.props;
const { value } = this.state;
let text = value.length ? value.join(' ') : placeholder ? placeholder : '';
return (
<div className={styles.selectWrap} onClick={this.showPickerView}>
{placeholder ? placeholder : ''}
{text}
<span className={styles.arrow}>
<img src={arrIcon} alt="" />
</span>
......
src/components/Popup/Popup.js 0 → 100644
import React, { Component } from 'react';
import styles from './style.css';
import { PickerView } from 'antd-mobile';
class Popup extends Component {
constructor(props) {
super(props);
let val = props.data[0] ? [props.data[0]] : [];
this.state = {
value: val,
};
}
changeHandle = val => {
const { onChange } = this.props;
this.setState({
value: val,
});
onChange(val);
};
render() {
const { cancelHandle, okHandle, onChange, ...props } = this.props;
const { value } = this.state;
return (
<div>
<div className={styles.mask} />
<div className={styles.ksPopupWrap}>
<div role="document" className={styles.ksPopupContent}>
<div className={styles.ksPopupHeader}>
<div className={styles.headerLeft} onClick={cancelHandle}>
取消
</div>
<div className={styles.headerTitle} />
<div className={styles.headerRight} onClick={okHandle}>
确定
</div>
</div>
<PickerView {...props} value={value} onChange={this.changeHandle} />
</div>
</div>
</div>
);
}
}
export default Popup;
src/components/Popup/style.css 0 → 100644
.mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
z-index: 1000;
transform: translateZ(1px);
}
.ksPopupWrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
-webkit-overflow-scrolling: touch;
outline: 0;
transform: translateZ(1px);
}
.ksPopupHeader {
display: flex;
align-items: center;
position: relative;
}
.headerItem {
display: flex;
font-size: 26px;
padding: 23px 15px;
height: 40px;
line-height: 40px;
}
.headerLeft {
composes: headerItem;
padding-left: 40px;
color: #333;
}
.headerTitle {
composes: headerItem;
flex: 1;
text-align: center;
color: #000;
}
.headerRight {
composes: headerItem;
padding-right: 40px;
color: #4986cb;
}
.ksPopupContent {
left: 0;
bottom: 0;
position: fixed;
width: 100%;
background-color: #fff;
padding-bottom: env(safe-area-inset-bottom);
}
src/containers/Repair/RepairList.js
import React, { Component } from 'react';
import { PullToRefresh } from 'antd-mobile';
import styles from './style.css';
import RepairItem from './components/RepairItem';
class RepairList extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
down: true,
height: document.documentElement.clientHeight,
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() {
let wrap = document.querySelector('.RepairContent');
const hei = wrap.clientHeight;
setTimeout(
() =>
this.setState({
height: hei,
}),
0
);
}
refreshHandle = () => {
this.setState({ refreshing: true });
setTimeout(() => {
this.setState({ refreshing: false });
}, 1000);
};
render() {
return (
<div>
保修记录
<div className={styles.repairList}>
<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 => (
<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} />)}
</PullToRefresh>
</div>
);
}
}
export default RepairList;
\ No newline at end of file
export default RepairList;
src/containers/Repair/ReprtRepair.js
......@@ -16,7 +16,10 @@ class ReprtRepair extends Component {
constructor(props) {
super(props);
this.state = {
areaList: [],
areaList: [
{ value: 'ddsd1', label: 'fgfasd1' },
{ value: 'ddsd2', label: 'fgfasd2' },
],
termList: [],
applyForm: {
name: '',
......@@ -62,6 +65,15 @@ class ReprtRepair extends Component {
},
}));
};
onSelectHandle = (key, val) => {
console.log(key, val);
this.setState(({ applyForm }) => ({
applyForm: {
...applyForm,
[key]: val,
},
}));
};
validateForm = () => {
const { applyForm } = this.state;
if (!applyForm.name) {
......@@ -96,7 +108,7 @@ class ReprtRepair extends Component {
}
};
render() {
const { applyForm } = this.state;
const { applyForm, areaList, termList } = this.state;
return (
<div className={styles.wrap}>
......@@ -166,10 +178,12 @@ class ReprtRepair extends Component {
</i>
<span className={styles.itemLabel}>报修区域</span>
<div className={styles.inputBox}>
{/* <Picker data={areaList}>
<List.Item arrow="horizontal" onClick={this.onClick} />
</Picker> */}
<Select placeholder="请选择" />
<Select
placeholder="请选择"
data={areaList}
cols={1}
onChange={val => this.onSelectHandle('area', val)}
/>
</div>
</div>
<div className={styles.listItem}>
......@@ -178,7 +192,13 @@ class ReprtRepair extends Component {
</i>
<span className={styles.itemLabel}>报修项目</span>
<div className={styles.inputBox}>
<input className={styles.input} type="text" />
{/* <input className={styles.input} type="text" /> */}
<Select
placeholder="请选择"
data={termList}
cols={1}
onChange={val => this.onSelectHandle('term', val)}
/>
</div>
</div>
<div className={styles.listItem}>
......
src/containers/Repair/components/RepairItem.js 0 → 100644
import React, { Component } from 'react';
import styles from './style.css';
import titleIcon from '../images/dropdown_icon@2x.png';
import { formatDate } from '../../../utils/index';
class RepairItem extends Component {
constructor(props) {
super(props);
this.state = {
showDetail: false,
};
}
toggleDetail = () => {
this.setState(({ showDetail }) => ({
showDetail: !showDetail,
}));
};
render() {
const { showDetail } = this.state;
const { data } = this.props;
return (
<div className={styles.wrap}>
<div
className={data.dealState === 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.dealState === 1 ? (
<div className={styles.dealing}>处理中</div>
) : (
<div className={styles.dealed}>已处理</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="area" className={styles.listLine}>
<div className={styles.listLine2ItemLeft}>
<div className={styles.listLabel}>报修区域：</div>
<div className={styles.listValue}>{data.area}</div>
</div>
<div className={styles.listLine2ItemRight}>
<div className={styles.listLabel}>报修项目：</div>
<div className={styles.listValue}>{data.term}</div>
</div>
</div>,
<div key="address" className={styles.listLineArea}>
<div className={styles.listLabel}>报修事项：</div>
<div className={styles.listValueMutLine}>{data.address}</div>
</div>,
<div key="name" className={styles.listLine}>
<div className={styles.listLine2ItemLeft}>
<div className={styles.listLabel}>报修人：</div>
<div className={styles.listValue}>{data.name}</div>
</div>
<div className={styles.listLine2ItemRight}>
<div className={styles.listLabel}>报修人tel：</div>
<div className={styles.listValue}>
{data.applyCellphone}
</div>
</div>
</div>,
<div key="uploadImg" className={styles.listLine}>
{data.uploadImg.split(',')[0] &&
data.uploadImg.split(',').map((item, idx) => (
<div key={idx} className={styles.imgItem}>
<img src={item} alt="" />
</div>
))}
</div>,
]
: [
<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="name" className={styles.listLine}>
<div className={styles.listLine2ItemLeft}>
<div className={styles.listLabel}>报修人：</div>
<div className={styles.listValue}>{data.name}</div>
</div>
<div className={styles.listLine2ItemRight}>
<div className={styles.listLabel}>报修人tel：</div>
<div className={styles.listValue}>
{data.applyCellphone}
</div>
</div>
</div>,
<div key="address" className={styles.listLineArea}>
<div className={styles.listLabel}>报修事项：</div>
<div className={styles.listValue}>{data.address}</div>
</div>,
]}
</div>
</div>
);
}
}
export default RepairItem;
src/containers/Repair/components/style.css 0 → 100644
.wrap {
display: flex;
width: 600px;
margin: 0 auto 20px;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
}
.title {
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #3695c0;
}
.titleDealing {
composes: title;
background-color: #ff3131;
}
.titleIcon {
width: 24px;
height: 24px;
transform: rotate(90deg);
}
.titleIconShowDetail {
composes: titleIcon;
transform: rotate(0);
}
.content {
position: relative;
flex: 1;
padding: 30px 12px;
overflow: hidden;
}
.dealing {
position: absolute;
top: 24px;
right: 20px;
font-size: 26px;
color: #ff0000;
}
.dealed {
composes: dealing;
color: #999;
}
.listLine {
display: flex;
line-height: 30px;
margin-bottom: 30px;
}
.listLine:last-child {
margin-bottom: 0;
}
.listLineArea {
composes: listLine;
line-height: 26px;
}
.listLine2Item {
display: flex;
}
.listLine2ItemLeft {
composes: listLine2Item;
width: 250px;
}
.listLine2ItemRight {
composes: listLine2Item;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.listLabel {
white-space: nowrap;
}
.listValue {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.imgItem {
width: 170px;
height: 96px;
}
src/containers/Repair/index.js
......@@ -19,7 +19,7 @@ class index extends Component {
render() {
return (
<div className="Content-Wrap">
<div className={styles.content}>
<div className="RepairContent">
<Switch>
<Route path="/repair/ReprtRepair" component={ReprtRepair} />
<Route path="/repair/RepairList" component={RepairList} />
......
src/containers/Repair/style.css
/* index */
.content {
:global(.RepairContent) {
flex: auto;
overflow-y: scroll;
overflow: hidden;
}
.footer {
width: 100%;
......@@ -179,3 +179,20 @@
font-weight: bold;
background-color: #3695c0;
}
/* reportList */
.repairList {
background-color: #f0f0f0;
}
.listInfo {
height: 60px;
line-height: 60px;
color: #ff3131;
font-size: 22px;
text-align: center;
}
.noData {
height: 300px;
line-height: 80px;
text-align: center;
padding: 50px 0;
}
src/utils/index.js
......@@ -2,3 +2,31 @@ export const is_weixn = () => {
var ua = navigator.userAgent.toLowerCase();
return ua.match(/MicroMessenger/i) === 'micromessenger';
};
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
);
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? str : padLeftZero(str)
);
}
}
return fmt;
}
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
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