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