Skip to content

M
max_android_panel
Commit 81c73473 by Zhang Xin
Options

优化故障页面逻辑

parent d27922d1
Showing with 111 additions and 32 deletions
client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx
...@@ -63,7 +63,7 @@ export default class TroubleItemComponent extends React.Component{ ...@@ -63,7 +63,7 @@ export default class TroubleItemComponent extends React.Component{
</div> </div>
<div className={"itemControl rel"}> <div className={"itemControl rel"}>
<div className={"plusImg controlBox "}> <div className={"plusImg controlBox "} onClick={()=>props.showQrcode(item.errorCode)}>
<img src={UTILPATH.localImg.plusIcon} alt=""/> <img src={UTILPATH.localImg.plusIcon} alt=""/>
</div> </div>
<div className={"refreshImg controlBox "}> <div className={"refreshImg controlBox "}>
......
client/config/index.js
import swiperContainers from './swiperContainer' import swiperContainers from './swiperContainer'
import showPage from './showPage' import showPage from './showPage'
import troubleType from './troubleType'
module.exports = {swiperContainers,...showPage} module.exports = {swiperContainers,...showPage,troubleType}
\ No newline at end of file \ No newline at end of file
client/config/troubleType.js 0 → 100644
const troubleType = {
1 : 'KN', //已知故障
3 : 'OP', //新建问题
};
module.exports = troubleType;
\ No newline at end of file
client/containers/Qrcode/Qrcode.jsx
import React from 'react'; import React from 'react';
import ReactQrCode from 'qrcode.react' import ReactQrCode from 'qrcode.react'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
require('./index.css'); require('./index.css');
export default class Qrcode extends React.Component{ export default class Qrcode extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.state = { this.getOtherHeader = this.getOtherHeader.bind(this);
url : 'http://www.baidu.com'
} }
getOtherHeader(){
let {goBack} = this.props;
return <div className={"otherHeader font32 clearfix"}>
<div className={"fl colfff"} onClick={()=>goBack()}>
<i className={"iconfont middle icon font58 icon-circle-left circleIcon"}></i>
<span className={"middle"}>添加照片</span>
</div>
</div>
} }
render(){ render(){
return( return(
<div>
<HeaderComponent
showHeader={CONFIG.headerStatus[2]}
>
{this.getOtherHeader()}
</HeaderComponent>
<div className="qrCodeContainer"> <div className="qrCodeContainer">
<div className={"qrcode"}> <div className={"qrcode"}>
<ReactQrCode value={this.state.url} size={312}/> <ReactQrCode value={this.props.url || ''} size={312}/>
</div> </div>
<div className={"qrcodeText font32"}> <div className={"qrcodeText font32"}>
请用手机微信扫一扫上方二维码 请用手机微信“扫一扫”上方二维码进行图片上传
</div> </div>
</div> </div>
</div>
) )
} }
} }
\ No newline at end of file
client/containers/TroubleContainer/TroubleContainer.jsx
import React from 'react'; import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent' import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent' import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent' import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import TextArea from "../TextAreaContainer/TextAreaContainer"; import TextArea from "../TextAreaContainer/TextAreaContainer";
import Qrcode from '../Qrcode/Qrcode'
import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent' import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
require('./index.css') require('./index.css')
const showDom={
1:'default',
2:'textArea',
3:'qrcode'
};
export default class TroubleContainer extends React.Component{ export default class TroubleContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
...@@ -13,13 +20,18 @@ export default class TroubleContainer extends React.Component{ ...@@ -13,13 +20,18 @@ export default class TroubleContainer extends React.Component{
showTrouble : true, showTrouble : true,
troubleList : {}, troubleList : {},
currentErrorCode : 0, currentErrorCode : 0,
showTextArea : false, tmpText : '',
tmpText : '' tmpUrl : '',
showStatus:showDom[1]
}; };
this.setItem = this.setItem.bind(this); this.setItem = this.setItem.bind(this);
this.showText = this.showText.bind(this); this.showText = this.showText.bind(this);
this.showQrcode = this.showQrcode.bind(this);
this.goBack = this.goBack.bind(this); this.goBack = this.goBack.bind(this);
this.saveText = this.saveText.bind(this); this.saveText = this.saveText.bind(this);
this.getDefaultDom = this.getDefaultDom.bind(this);
this.getTextAreaDom = this.getTextAreaDom.bind(this);
this.getQrcodeDom = this.getQrcodeDom.bind(this);
} }
...@@ -74,21 +86,31 @@ export default class TroubleContainer extends React.Component{ ...@@ -74,21 +86,31 @@ export default class TroubleContainer extends React.Component{
} }
showText(errcode){ showText(errcode){
console.log("errcode ",errcode)
let troubleList = this.state.troubleList; let troubleList = this.state.troubleList;
let details = troubleList.details; let details = troubleList.details;
let index = details.findIndex(d=>d.errorCode === errcode); let indexInfo = details.find(d=>d.errorCode === errcode);
if(index > -1){ if(indexInfo && indexInfo.id){
let text = details[index]['explanation']; let text = indexInfo.explanation;
console.log("text ",text)
this.setState({ this.setState({
currentErrorCode : errcode, currentErrorCode : errcode,
showTextArea : true, showStatus : showDom[2],
tmpText: text tmpText: text
}) })
} }
}
showQrcode(errcode){
let troubleList = this.state.troubleList;
let details = troubleList.details;
let indexInfo = details.find(d=>d.errorCode === errcode);
if(indexInfo && indexInfo.id){
this.setState({
currentErrorCode : errcode,
showStatus : showDom[3],
tmpUrl: `${ENV.uploadImg}/${indexInfo.id}/${indexInfo.type}`
})
}
} }
setItem(errcode,option,info){ setItem(errcode,option,info){
...@@ -114,20 +136,19 @@ export default class TroubleContainer extends React.Component{ ...@@ -114,20 +136,19 @@ export default class TroubleContainer extends React.Component{
goBack(){ goBack(){
this.setState({ this.setState({
currentErrorCode : 0, currentErrorCode : 0,
showTextArea : false, showStatus : showDom[1],
tmpText: '' tmpText: '',
tmpUrl : ''
}) })
} }
getDefaultDom(){
render(){
let {userInfo,storeInfo} = this.props; let {userInfo,storeInfo} = this.props;
let troubleList = this.state.troubleList; let troubleList = this.state.troubleList;
let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0; let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0;
let details = Array.isArray(troubleList.details) ? troubleList.details : []; let details = Array.isArray(troubleList.details) ? troubleList.details : [];
let dom = details.map((i,k)=>{ let dom = details.map((i,k)=>{
return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem} showText={this.showText}/>; return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem} showText={this.showText} showQrcode={this.showQrcode}/>;
}); });
let swiperOptions = { let swiperOptions = {
width : 1396, width : 1396,
...@@ -136,14 +157,7 @@ export default class TroubleContainer extends React.Component{ ...@@ -136,14 +157,7 @@ export default class TroubleContainer extends React.Component{
}; };
let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer; let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
let swiperCount = details.length; let swiperCount = details.length;
return ( return(
<div className={"troubleContainers "+(this.state.showTextArea ? 'backfff' : '')}>
{
this.state.showTextArea ? <TextArea
text={this.state.tmpText}
goBack={this.goBack}
saveText={this.saveText}
></TextArea> :
<div className={"toubleContainer " + (showTrouble ? '' : 'hide')}> <div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
<HeaderComponent <HeaderComponent
showHeader={CONFIG.headerStatus[1]} showHeader={CONFIG.headerStatus[1]}
...@@ -171,6 +185,40 @@ export default class TroubleContainer extends React.Component{ ...@@ -171,6 +185,40 @@ export default class TroubleContainer extends React.Component{
</div> : <FinishTrouble /> </div> : <FinishTrouble />
} }
</div> </div>
)
}
getTextAreaDom(){
return <TextArea
text={this.state.tmpText}
goBack={this.goBack}
saveText={this.saveText}
></TextArea>
}
getQrcodeDom(){
return <Qrcode goBack={this.goBack} url={this.state.tmpUrl}/>
}
getDom(){
switch (this.state.showStatus){
case showDom[1]:
return this.getDefaultDom();
case showDom[2]:
return this.getTextAreaDom();
case showDom[3]:
return this.getQrcodeDom();
default :
return null;
}
}
render(){
return (
<div className={"troubleContainers "+(this.state.showStatus === showDom[2] ? 'backfff' : '')}>
{
this.getDom()
} }
</div> </div>
) )
......
client/env/development.js
...@@ -2,5 +2,6 @@ ...@@ -2,5 +2,6 @@
* Created by ruibing on 16/11/2. * Created by ruibing on 16/11/2.
*/ */
module.exports = { module.exports = {
domain: 'http://test.mjitech.com' domain: 'http://test.mjitech.com',
uploadImg: 'https://test.mjitech.com/static/uploadTrouble',
} }
\ No newline at end of file
client/env/production.js
...@@ -2,5 +2,6 @@ ...@@ -2,5 +2,6 @@
* Created by ruibing on 16/11/2. * Created by ruibing on 16/11/2.
*/ */
module.exports = { module.exports = {
domain: 'http://www.mjitech.com' domain: 'http://www.mjitech.com',
uploadImg: 'https://www.mjitech.com/static/uploadTrouble',
} }
\ No newline at end of file
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