优化故障页面逻辑

client/components/TroubleComponent/TroubleItemComponent/TroubleItemComponent.jsx

@@ -63,7 +63,7 @@ export default class TroubleItemComponent extends React.Component{
                 </div>
 
                 <div className={"itemControl rel"}>
-                    <div className={"plusImg controlBox "}>
+                    <div className={"plusImg controlBox "} onClick={()=>props.showQrcode(item.errorCode)}>
                         <img src={UTILPATH.localImg.plusIcon} alt=""/>
                     </div>
                     <div className={"refreshImg controlBox "}>

client/config/index.js

 import swiperContainers from './swiperContainer'
 import showPage from './showPage'
+import troubleType from './troubleType'
 
-module.exports = {swiperContainers,...showPage}
\ No newline at end of file
+module.exports = {swiperContainers,...showPage,troubleType}
\ No newline at end of file

client/config/troubleType.js

+
+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 ReactQrCode from 'qrcode.react'
+import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
 require('./index.css');
 
 export default class Qrcode extends React.Component{
     constructor(props){
         super(props);
-        this.state = {
-            url : 'http://www.baidu.com'
+        this.getOtherHeader = this.getOtherHeader.bind(this);
     }
+
+    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(){
         return(
+            <div>
+                <HeaderComponent
+                    showHeader={CONFIG.headerStatus[2]}
+                >
+                    {this.getOtherHeader()}
+                </HeaderComponent>
                 <div className="qrCodeContainer">
                     <div className={"qrcode"}>
-                    <ReactQrCode value={this.state.url} size={312}/>
+                        <ReactQrCode value={this.props.url || ''} size={312}/>
                     </div>
                     <div className={"qrcodeText font32"}>
-                    请用手机微信扫一扫上方二维码
+                        请用手机微信“扫一扫”上方二维码进行图片上传
                     </div>
                 </div>
+            </div>
+
         )
     }
 }
\ No newline at end of file

client/containers/TroubleContainer/TroubleContainer.jsx

 import React from 'react';
 import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
 import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
-import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
 import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
 import TextArea from "../TextAreaContainer/TextAreaContainer";
+import Qrcode from '../Qrcode/Qrcode'
 import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
 require('./index.css')
+
+const showDom={
+    1:'default',
+    2:'textArea',
+    3:'qrcode'
+};
+
 export default class TroubleContainer extends React.Component{
     constructor(props){
         super(props);
@@ -13,13 +20,18 @@ export default class TroubleContainer extends React.Component{
             showTrouble : true,
             troubleList : {},
             currentErrorCode : 0,
-            showTextArea : false,
-            tmpText : ''
+            tmpText : '',
+            tmpUrl : '',
+            showStatus:showDom[1]
         };
         this.setItem = this.setItem.bind(this);
         this.showText = this.showText.bind(this);
+        this.showQrcode = this.showQrcode.bind(this);
         this.goBack = this.goBack.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{
     }
 
     showText(errcode){
-        console.log("errcode ",errcode)
         let troubleList = this.state.troubleList;
         let details = troubleList.details;
-        let index = details.findIndex(d=>d.errorCode === errcode);
-        if(index > -1){
-            let text = details[index]['explanation'];
-            console.log("text ",text)
+        let indexInfo = details.find(d=>d.errorCode === errcode);
+        if(indexInfo && indexInfo.id){
+            let text = indexInfo.explanation;
             this.setState({
                 currentErrorCode : errcode,
-                showTextArea : true,
+                showStatus : showDom[2],
                 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){
@@ -114,20 +136,19 @@ export default class TroubleContainer extends React.Component{
     goBack(){
         this.setState({
             currentErrorCode : 0,
-            showTextArea : false,
-            tmpText: ''
+            showStatus : showDom[1],
+            tmpText: '',
+            tmpUrl : ''
         })
     }
 
-
-    render(){
-
+    getDefaultDom(){
         let {userInfo,storeInfo} = this.props;
         let troubleList = this.state.troubleList;
         let showTrouble = Array.isArray(troubleList.details) && troubleList.details.length > 0;
         let details = Array.isArray(troubleList.details) ? troubleList.details : [];
         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 = {
             width : 1396,
@@ -136,14 +157,7 @@ export default class TroubleContainer extends React.Component{
         };
         let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
         let swiperCount = details.length;
-        return (
-            <div className={"troubleContainers "+(this.state.showTextArea ? 'backfff' : '')}>
-                {
-                    this.state.showTextArea ? <TextArea
-                            text={this.state.tmpText}
-                            goBack={this.goBack}
-                            saveText={this.saveText}
-                        ></TextArea> :
+        return(
             <div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
                 <HeaderComponent
                     showHeader={CONFIG.headerStatus[1]}
@@ -171,6 +185,40 @@ export default class TroubleContainer extends React.Component{
                         </div> : <FinishTrouble />
                 }
             </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>
         )

client/env/development.js

@@ -2,5 +2,6 @@
  * Created by ruibing on 16/11/2.
  */
 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 @@
  * Created by ruibing on 16/11/2.
  */
 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