Skip to content

M
max_android_panel
Commit 7ff102c5 by Zhang Xin
Options

修修改弹窗æŽç»组件

parent 0cc822f0
Showing with 44 additions and 72 deletions
client/components/CommonComponent/PopupComponent/PopupComponent.jsx
...@@ -3,48 +3,16 @@ require('./index.css') ...@@ -3,48 +3,16 @@ require('./index.css')
export default class PopupComponent extends React.Component{ export default class PopupComponent extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.getDefaultPopup = this.getDefaultPopup.bind(this);
} }
getDefaultPopup(){
let props = this.props;
let {popupInfo} = props;
let arrButton = popupInfo.popupButtons ? popupInfo.popupButtons : []
let dom = arrButton.map((a,k)=>{
return a;
});
let text = Array.isArray(popupInfo.popupText) ? popupInfo.popupText.map((text,key)=>{
return <p>
{text}
</p>
}) : popupInfo.popupText
return (
<div className={"defaultPopup col333"} style={popupInfo.style}>
{
popupInfo.iconInfo ? <div className={`icon iconfont ${popupInfo.iconInfo}`}/> : null
}
{
popupInfo.imageInfo && popupInfo.imageInfo.image ? <div className={"image"} style={popupInfo.imageInfo.imageStyle}>
<img src={popupInfo.imageInfo.image} alt=""/>
</div> : null
}
<div className={"defaultPopupText font30"}>
{text}
</div>
<div className={"defaultPopupButtons font32"}>
{dom}
</div>
</div>
)
}
render(){ render(){
let {popupInfo} = this.props; let {popupInfo} = this.props;
console.log(popupInfo);
let {showPopup=false,classNames='',popupChild=null} = popupInfo;
return ( return (
<div className={"popupComponent " + (popupInfo.showPopup ? ' ' : 'hide ') + popupInfo.classNames}> <div className={"popupComponent " + (showPopup ? ' ' : 'hide ') + classNames}>
{popupInfo.popupChild ? popupInfo.popupChild : {popupChild}
this.getDefaultPopup()
}
</div> </div>
) )
} }
......
client/components/RecoveryComponent/RecoverySecondPage/RecoverySecondPage.jsx
...@@ -46,10 +46,8 @@ export default class RecoverySecondPage extends React.Component{ ...@@ -46,10 +46,8 @@ export default class RecoverySecondPage extends React.Component{
<div className={"btn"}> <div className={"btn"}>
{btnDom} {btnDom}
</div> </div>
</div> </div>;
showPopup({ showPopup(popDom);
popupChild:popDom
});
} }
wrongSku(){ wrongSku(){
...@@ -69,19 +67,14 @@ export default class RecoverySecondPage extends React.Component{ ...@@ -69,19 +67,14 @@ export default class RecoverySecondPage extends React.Component{
{btnDom1} {btnDom1}
{btnDom2} {btnDom2}
</div> </div>
</div>; </div>;
showPopup({ showPopup(popDom);
popupChild:popDom
});
} }
correctQrcode(){ correctQrcode(){
let {showPopup} = this.props; let {showPopup} = this.props;
let popDom = this.getPopInfo(); let popDom = this.getPopInfo();
showPopup({ showPopup(popDom);
popupChild:popDom
});
} }
putSkuToBox(){ putSkuToBox(){
......
client/containers/PageContainer/PageContainer.jsx
...@@ -41,11 +41,6 @@ const headerStatus = CONFIG.headerStatus; ...@@ -41,11 +41,6 @@ const headerStatus = CONFIG.headerStatus;
const defaultPopupInfo = { const defaultPopupInfo = {
showPopup : false, //是否显示弹窗 showPopup : false, //是否显示弹窗
popupChild : null, // 自定义弹窗内部htmls popupChild : null, // 自定义弹窗内部htmls
popupText : "", //默认弹窗的文本 （必填）
popupButtons : [], // 默认弹窗的按钮
classNames : '', //自定义类名
iconInfo : "",
imageInfo : {}
}; };
const initPage = 13; const initPage = 13;
...@@ -220,12 +215,14 @@ class PageContainer extends React.Component { ...@@ -220,12 +215,14 @@ class PageContainer extends React.Component {
showError(errMsg){ showError(errMsg){
let className = errMsg.length > 24 ? 'popupExtClass' : ''; let className = errMsg.length > 24 ? 'popupExtClass' : '';
let style = {'width':UTILPATH.getRemByPx(260)} let style = {'width':UTILPATH.getRemByPx(260)}
let btnDom = <Button key={"pagecountBack1"} style={style} text={'确定'} option={this.hideError}/> let btnDom = <Button key={"pagecountBack1"} style={style} text={'确定'} option={this.hideError}/>;
this.showPopup({ let showErrorDom = this.getPopDom({
popupText : errMsg, popupText : errMsg,
popupButtons:[btnDom], popupButtons:[btnDom],
classNames : className classNames : className
}) })
this.showPopup(showErrorDom)
} }
hideError(){ hideError(){
...@@ -307,11 +304,12 @@ class PageContainer extends React.Component { ...@@ -307,11 +304,12 @@ class PageContainer extends React.Component {
let clockDom = <Clock key={"pagecountBack2"} totalTime={60} let clockDom = <Clock key={"pagecountBack2"} totalTime={60}
style={{'width':btnWidth,'marginLeft':btnMarginLeft,'borderRadius':btnBorderRadius}} style={{'width':btnWidth,'marginLeft':btnMarginLeft,'borderRadius':btnBorderRadius}}
callback={this.showAlarm} callback={this.showAlarm}
/> />;
this.showPopup({ let countBackDom = this.getPopDom({
popupText : '您是否还在店铺准备执行您的任务', popupText : '您是否还在店铺准备执行您的任务',
popupButtons:[btnDom,clockDom] popupButtons:[btnDom,clockDom]
}) })
this.showPopup(countBackDom)
} }
},this.count); },this.count);
} }
...@@ -322,6 +320,24 @@ class PageContainer extends React.Component { ...@@ -322,6 +320,24 @@ class PageContainer extends React.Component {
let {dispatch,state} = this.props; let {dispatch,state} = this.props;
dispatch(uploadError(Object.assign({},state.commonInfo,{exceptionType:type}))); dispatch(uploadError(Object.assign({},state.commonInfo,{exceptionType:type})));
} }
getPopDom(info){
let {text,arrButton} = info
let dom = arrButton.map((a,k)=>{
return a;
});
return <div className={"defaultPopup col333"} style={popupInfo.style}>
<div className={"defaultPopupText font30"}>
{text}
</div>
<div className={"defaultPopupButtons font32"}>
{dom}
</div>
</div>
}
//弹出警告弹窗，并报警 //弹出警告弹窗，并报警
showAlarm(){ showAlarm(){
console.log("showAlarm"); console.log("showAlarm");
...@@ -336,13 +352,14 @@ class PageContainer extends React.Component { ...@@ -336,13 +352,14 @@ class PageContainer extends React.Component {
style={{'width':btnWidth,'marginLeft':btnMarginLeft,'borderRadius':btnBorderRadius}} style={{'width':btnWidth,'marginLeft':btnMarginLeft,'borderRadius':btnBorderRadius}}
callback={this.beginCloseDoor} callback={this.beginCloseDoor}
/>; />;
this.setState({ let showAlarmDom = this.getPopDom({
popupInfo : defaultPopupInfo
},()=>{
this.showPopup({
popupText : '检测到店铺反常，请站出店铺，关闭店铺门后重新验证您的身份', popupText : '检测到店铺反常，请站出店铺，关闭店铺门后重新验证您的身份',
popupButtons:[btnDom,clockDom] popupButtons:[btnDom,clockDom]
}); });
this.setState({
popupInfo : defaultPopupInfo
},()=>{
this.showPopup(showAlarmDom);
this.playAlarmMusic() this.playAlarmMusic()
}) })
...@@ -362,10 +379,11 @@ class PageContainer extends React.Component { ...@@ -362,10 +379,11 @@ class PageContainer extends React.Component {
text={"关门中"} text={"关门中"}
callback={this.judgeDoorStatus} callback={this.judgeDoorStatus}
/>; />;
this.showPopup({ let beginCloseDoorDom = this.getPopDom({
popupText : '关门倒数，请尽快站到设备外关闭设备门', popupText : '关门倒数，请尽快站到设备外关闭设备门',
popupButtons:[clockDom] popupButtons:[clockDom]
}) });
this.showPopup(beginCloseDoorDom)
}) })
} }
...@@ -408,18 +426,11 @@ class PageContainer extends React.Component { ...@@ -408,18 +426,11 @@ class PageContainer extends React.Component {
} }
showPopup(info){ showPopup(info){
//eg : info = {popupText:'test',popupButtons:[{text : '返回',option:FUNCTION}]} let popupInfo = Object.assign({},defaultPopupInfo);
console.log("showPopup ",info) if(info){
let popupInfo = Object.assign({},defaultPopupInfo,info);
if(
( popupInfo.popupChild ||
popupInfo.popupText ||
(popupInfo.popupButtons && popupInfo.popupButtons.length > 0)
) && !popupInfo.showPopup
){
popupInfo.showPopup = true; //以防未设置显示弹窗，做此判断。 popupInfo.showPopup = true; //以防未设置显示弹窗，做此判断。
popupInfo.popupChild = info; //以防未设置显示弹窗，做此判断。
} }
this.setState({ this.setState({
popupInfo : popupInfo, popupInfo : popupInfo,
}) })
......
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