Skip to content

M
max_android_panel
Commit c9fe86ab by Zhang Xin
Options

修改回收UI样式，开发补货UI

parent 53b49060
Showing with 328 additions and 75 deletions
client/components/CommonComponent/ButtonComponent/ButtonComponent.jsx
......@@ -8,11 +8,9 @@ export default class ButtonComponent extends React.Component{
render(){
let props = this.props;
let classInfo = props.classInfo && props.classInfo.className ? props.classInfo.className : '';
let colorClass = props.classInfo && props.classInfo.colorInfo ? props.classInfo.colorInfo : "col333";
let fontClass = props.classInfo && props.classInfo.fontInfo ? props.classInfo.fontInfo : "font32";
let {btnContainer="",style={},option=null} = props;
return(
<div className={`buttonComponent ${fontClass} ${colorClass} ${classInfo}`} style={props.style} onClick={()=>{props.option()}}>
<div className={`buttonComponent ${btnContainer}`} style={style} onClick={()=>{option()}}>
{props.text}
</div>
)
......
client/components/CommonComponent/ButtonComponent/index.css
.buttonComponent{
width: 413px;
width: 280px;
height: 80px;
border: 2px solid #e5e5e5;
background-color: #ffffff;
line-height: 80px;
text-align: center;
border-radius: 10px;
color: #333;
}
......
client/components/CommonComponent/PopupComponent/PopupChildComponent.jsx 0 → 100644
import React from 'react';
require('./index.css')
export default class PopupChildComponent extends React.Component{
constructor(props){
super(props);
}
render(){
let props = this.props;
let {classContainer='',popupTitle=''} = props;
return (
<div className={"popupChildComponent " + classContainer}>
{
popupTitle ? <div className={"popupTitle colfff font36"}>{popupTitle}</div> : null
}
<div className={"popupContent"}>
{this.props.children}
</div>
</div>
)
}
}
\ No newline at end of file
client/components/CommonComponent/PopupComponent/PopupComponent.jsx
......@@ -8,10 +8,9 @@ export default class PopupComponent extends React.Component{
render(){
let {popupInfo} = this.props;
console.log(popupInfo);
let {showPopup=false,classNames='',popupChild=null} = popupInfo;
let {showPopup=false,popupChild=null} = popupInfo;
return (
<div className={"popupComponent " + (showPopup ? ' ' : 'hide ') + classNames}>
<div className={"popupComponent " + (showPopup ? ' ' : 'hide ')}>
{popupChild}
</div>
)
......
client/components/CommonComponent/PopupComponent/index.css
......@@ -48,6 +48,32 @@
}
.popupChildComponent{
width: 1200px;
height: 800px;
background: #fff;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translate(-50% ,-50%);
position: absolute;
text-align: center;
overflow: hidden;
}
.popupChildComponent .popupTitle{
width: 100%;
background-color: #ff775c;
height: 100px;
line-height: 100px;
}
.popupChildComponent .popupContent{
width: 100%;
}
/*.popupComponent{*/
/*position: absolute;*/
/*background: rgba(0,0,0,.6);*/
......
client/components/CommonComponent/SkuInfoComponent/index.css
......@@ -15,6 +15,7 @@
background: #fff;
text-align: center;
margin-right: 40px;
border:1px solid #e5e5e5;
}
.skuInfoComponent ul>li{
display: flex;
......
client/components/RecoveryComponent/RecoverySecondPage/RecoverySecondPage.jsx
import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent'
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css')
export default class RecoverySecondPage extends React.Component{
constructor(props){
......@@ -20,46 +21,47 @@ export default class RecoverySecondPage extends React.Component{
}
getPopInfo(){
let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':"100%","marginTop":"36%"}} text={"已放入"} option={this.putSkuToBox}/>
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerCorrectQrcode"} text={"已放入"} option={this.putSkuToBox}/>
return (
<div className={"recoveryPopInfo"}>
<div className={"icon iconfont icon-correct font100"} />
<PopModel popupTitle={"货品匹配成功"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-correct font150 col27ce61"} />
<div className={"text font40 col000"}>
<p>请将货品放入回收箱</p>
</div>
<div className={"btn"}>
{btnDom}
</div>
</div>
</PopModel>
)
}
wrongQrcode(){
//拿错货品
let {showPopup,hidePopup} = this.props;
let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':"100%","marginTop":"36%"}} text={"关闭"} option={hidePopup}/>
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32"} key={"recoveryContainerWrongQrcode"} text={"关闭"} option={hidePopup}/>
let popDom =
<div className={"recoveryPopInfo"}>
<div className={"icon iconfont icon-wrong font100"} />
<PopModel popupTitle={"遇到问题-货品不对"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}>
<p>您拿错货品了，请放回货架！</p>
</div>
<div className={"btn"}>
{btnDom}
</div>
</div>;
showPopup(popDom);
</PopModel>
showPopup({popupChild:popDom});
}
wrongSku(){
//货道商品不符
let {showPopup,hidePopup} = this.props;
let marginTop = '40px';
let btnDom1 = <Button key={"recoveryContainerShelfWrong1"} style={{'width':"100%"}} text={"货品不符"} option={this.uploadWrongSku}/>
let btnDom2 = <Button key={"recoveryContainerShelfWrong2"} style={{'width':"100%","marginTop":marginTop}} text={"关闭窗口"} option={hidePopup}/>
let btnDom1 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn1 font32"} key={"recoveryContainerShelfWrong1"} style={{'width':"100%"}} text={"货品不符"} option={this.uploadWrongSku}/>
let btnDom2 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn2 backff775c colfff font32"} key={"recoveryContainerShelfWrong2"} style={{'width':"100%","marginTop":marginTop}} text={"关闭窗口"} option={hidePopup}/>
let popDom =
<div className={"recoveryPopInfo"}>
<div className={"icon iconfont icon-exclamation font100"} />
<PopModel popupTitle={"遇到问题-货品不符"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-exclamation font150 colf5a623"} />
<div className={"text font40 col000"}>
<p>请确认货道信息，不要数错货道哦</p>
</div>
......@@ -67,14 +69,14 @@ export default class RecoverySecondPage extends React.Component{
{btnDom1}
{btnDom2}
</div>
</div>;
showPopup(popDom);
</PopModel>;
showPopup({popupChild:popDom});
}
correctQrcode(){
let {showPopup} = this.props;
let popDom = this.getPopInfo();
showPopup(popDom);
showPopup({popupChild:popDom});
}
putSkuToBox(){
......@@ -96,20 +98,15 @@ export default class RecoverySecondPage extends React.Component{
render(){
let props = this.props;
let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
let classInfo = {
colorInfo : "colfff",
className : ''
};
let {headerInfo} = props;
return(
<div className={"RecoverySecondPage"}>
<div className={"title font40 col333"}>任务目标：请将该货道货品进行扫码回收</div>
<div className={"box"}>
<div className={"RecoverySecondPage commonPage"}>
<div className={"title font40 col333 pageTitle"}>任务目标：请将该货道货品进行扫码回收</div>
<div className={"box pagebox"}>
<SkuInfoComponent style={{'display':'flex'}} skuInfo={headerInfo.taskList || {}}/>
<div className={"btn"}>
<Button key={"RecoverySecondPageBtn"} classInfo={classInfo} style={style} text={'扫码回收'} option={this.scanQrcode}/>
<div className={"text colff775c font28"} onClick={()=>this.wrongSku()}>货品不符？</div>
<Button btnContainer={"recoverySecondPageBtn font32 colfff"} key={"RecoverySecondPageBtn"} text={'扫码回收'} option={this.scanQrcode}/>
<div className={"text colff775c font28"} onClick={()=>this.wrongQrcode()}>货品不符？</div>
</div>
</div>
</div>
......
client/components/RecoveryComponent/RecoverySecondPage/index.css
.RecoverySecondPage{
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
.RecoverySecondPage .title{
margin: 60px 0;
}
.RecoverySecondPage .box{
width: 90%;
height: 60.7%;
background: #f2f2f2;
border:2px solid #e5e5e5;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
}
.RecoverySecondPage .btn{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 7%;
bottom: 10%;
}
.RecoverySecondPage .btn .text{
margin-top: 40px;
}
.RecoverySecondPage .recoverySecondPageBtn{
background: #ff7860;
width: 410px;
}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
......@@ -27,7 +27,7 @@ import HomePage from '../HomePageContainer/HomePageContainer'
import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer'
import BreakageContainer from '../BreakageContainer/BreakageConatiner'
import RecoveryPage from '../RecoveryContainer/RecoveryContainer'
import AllClassify from '../AllClassifyContainer/AllClassifyContainer'
import ReplenishContainer from '../ReplenishContainer/ReplenishContainer'
/*二期引用 end*/
import {on,remove} from '../../util/event';
......@@ -41,7 +41,8 @@ const headerStatus = CONFIG.headerStatus;
const defaultPopupInfo = {
showPopup : false, //是否显示弹窗
popupChild : null, // 自定义弹窗内部htmls
popupChild : null, // 自定义弹窗内部htmls,
popupTitle : ''
};
const initPage = 13;
......@@ -55,7 +56,7 @@ class PageContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
showPage : showPage[initPage],
showPage : showPage[11],
lastPage : '',
page : null,
popupInfo : defaultPopupInfo,
......@@ -225,7 +226,7 @@ class PageContainer extends React.Component {
this.changePages(CONFIG.showPage[10]);
break;
case 4 :
this.changePages(CONFIG.showPage[13]);
this.changePages(CONFIG.showPage[11]);
break;
}
}
......@@ -243,7 +244,7 @@ class PageContainer extends React.Component {
classNames : className
})
this.showPopup(showErrorDom)
this.showPopup({popupChild:showErrorDom})
}
hideError(){
......@@ -334,7 +335,7 @@ class PageContainer extends React.Component {
popupText : '您是否还在店铺准备执行您的任务',
popupButtons:[btnDom,clockDom]
})
this.showPopup(countBackDom)
this.showPopup({popupChild:countBackDom})
}
},this.count);
}
......@@ -384,7 +385,7 @@ class PageContainer extends React.Component {
this.setState({
popupInfo : defaultPopupInfo
},()=>{
this.showPopup(showAlarmDom);
this.showPopup({popupChild:showAlarmDom});
this.playAlarmMusic()
})
......@@ -408,7 +409,7 @@ class PageContainer extends React.Component {
popupText : '关门倒数，请尽快站到设备外关闭设备门',
popupButtons:[clockDom]
});
this.showPopup(beginCloseDoorDom)
this.showPopup({popupChild:beginCloseDoorDom})
})
}
......@@ -451,10 +452,9 @@ class PageContainer extends React.Component {
}
showPopup(info){
let popupInfo = Object.assign({},defaultPopupInfo);
if(info){
let popupInfo = Object.assign({},defaultPopupInfo,info);
if(info.popupChild){
popupInfo.showPopup = true; //以防未设置显示弹窗，做此判断。
popupInfo.popupChild = info; //以防未设置显示弹窗，做此判断。
}
this.setState({
popupInfo : popupInfo,
......@@ -601,6 +601,12 @@ class PageContainer extends React.Component {
wrongShelf={()=>dispatch(wrongShelf())}
/>;
break;
case showPage[11]:
pages = <ReplenishContainer
headerInfo = {state.commonInfo}
showPopup={(info)=>this.showPopup(info)}
hidePopup={()=>this.hidePopup()}
/>
/*以下是二期页面 end*/
}
return pages;
......
client/containers/RecoveryContainer/index.css
.recoveryPopInfo{
width: 800px;
height: 600px;
background: #fff;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translate(-50% ,-50%);
position: absolute;
text-align: center;
}
.recoveryPopInfo .icon{
margin: 70px 0 ;
color: #27ce61;
margin: 50px 0 60px ;
}
.recoveryPopInfo .icon.icon-wrong{
color: #ff0000;
......@@ -24,5 +12,8 @@
position: relative;
left: 50%;
transform: translateX(-50%);
width: 410px;
}
.recoveryPopInfo .btn .recoveryContainerQrcode{
display: inline-block;
margin-top: 10%;
}
\ No newline at end of file
client/containers/ReplenishContainer/ReplenishContainer.jsx 0 → 100644
import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css');
export default class ReplenishContainer extends React.Component{
constructor(props){
super(props);
}
componentWillMount(){
}
wrongQrcode(){
//货道商品不符
let {showPopup,hidePopup} = this.props;
let btnDom1 = <Button btnContainer={"replenishPopInfoWrongSkuBtn font32"} key={"replenishContainerShelfWrong1"} text={"确认扫描完毕"} option={this.uploadWrongSku}/>
let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
<div className={"icon iconfont icon-exclamation font150 colf5a623"} />
<div className={"text font40 col000"}>
<p>您需要补完【XXX】，才能补其它货品</p>
</div>
<div className={"btn"}>
{btnDom1}
<div className={"tip"}>忘记该货品的样子</div>
</div>
</PopModel>;
showPopup({popupChild:popDom});
}
getSkuDom(){
return(
<div className={"replenishSkuInfo"}>
<div className={"skuName font30 col333"}>商品名称：雪碧</div>
<div className={"skuInfo"}>
<div className={"skuImg"}>
<img src="" alt=""/>
</div>
<div className={"areaImg"}>
<img src="" alt=""/>
</div>
<div className={"skuPos col333 font30"}>
<ul>
<li>所在区域：A区域<span className={"colff775c"}>区域照片</span></li>
<li>一个字一个字一个字一个字一个字一个字</li>
<li>一个字</li>
</ul>
</div>
</div>
</div>
)
}
scanQrcode(){
console.log("扫描下一个")
}
scanOver(){
console.log("扫描结束")
}
getPage(){
return (
<div className={"replenishPage commonPage"}>
<div className={"title font40 col333 pageTitle"}>请将货品放到对应货架上
<span className={"font26 progressText"}>补货进度：3/30</span>
</div>
<div className={"pagebox"}>
{this.getSkuDom()}
<div className={"btn pageBtn"}>
<div className={"tips colff775c font30"}>遇到问题？</div>
<Button btnContainer={"replenishPageBtn1 font32"} key={"replenishPageBtn1"} text={'扫描工作结束'} option={this.scanOver}/>
<Button btnContainer={"replenishPageBtn2 font32 colfff backff775c"} key={"replenishPageBtn2"} text={'扫描下一个'} option={this.scanQrcode}/>
</div>
</div>
</div>
)
}
render(){
let props = this.props;
return (
<div className={"replenishContainer"}>
{
props.headerInfo && props.headerInfo.storeInfo ?
<Header headerInfo={props.headerInfo}/> : null
}
<LeftContainer leftInfo={props.headerInfo}/>
<RightContainer>
{this.getPage()}
</RightContainer>
</div>
)
}
}
\ No newline at end of file
client/containers/ReplenishContainer/index.css 0 → 100644
.replenishContainer{
position: relative;
width: 100%;
height: 100%;
}
.replenishContainer .progressText{
position: absolute;
right: 40px;
}
.replenishSkuInfo{
padding-left: 15%;
}
.replenishSkuInfo .skuName{
text-align: left;
}
.replenishSkuInfo .skuInfo{
text-align: left;
margin-top: 60px;
display: flex;
align-items: center;
}
.replenishSkuInfo .skuInfo .skuImg{
width: 200px;
height: 200px;
border: 1px solid #e5e5e5;
}
.replenishSkuInfo .skuInfo .areaImg{
width: 200px;
height: 200px;
border: 1px solid #e5e5e5;
margin: 0 80px 0 60px;
}
.replenishSkuInfo .skuInfo .skuPos{
line-height: 46px;
flex: 1;
}
.replenishPage .btn{
margin-top: 20%;
position: relative;
}
.replenishPage .btn .tips{
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
}
.replenishPage .btn .replenishPageBtn1{
margin-right: 40px;
display: inline-block;
}
.replenishPage .btn .replenishPageBtn2{
display: inline-block;
}
\ No newline at end of file
client/css/color.css
......@@ -27,6 +27,15 @@
.colff775c{
color: #ff775c!important;
}
.colf5a623{
color: #f5a623!important;
}
.col27ce61{
color: #27ce61!important;
}
.border-green{
border-color: #26ce61!important;
}
.backff775c{
background-color: #ff775c!important;
}
\ No newline at end of file
client/css/common.css
......@@ -38,4 +38,29 @@ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent
.troubleSwiperContainer .swiper-slide , .productPostionContainer .swiper-slide,.damageSwiperContainer .swiper-slide , .editProblemSwiperContainer .swiper-slide{
width: auto!important;
}
.commonPage{
width: 90%;
height: 100%;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateX(5%);
}
.commonPage .pageTitle{
width: 100%;
background: #f2f2f2;
border: 2px solid #e5e5e5;
line-height: 100px;
white-space: nowrap;
margin: 50px 0;
position: relative;
}
.commonPage .pagebox{
flex: 1;
width: 100%;
/*position: relative;*/
overflow: hidden;
}
\ No newline at end of file
client/css/font.css
......@@ -19,6 +19,7 @@ body{
@value font28: 28px;
@value font30: 30px;
@value font32: 32px;
@value font36: 36px;
@value font40: 40px;
@value font42: 42px;
@value font44: 44px;
......@@ -28,6 +29,7 @@ body{
@value font70: 70px;
@value font90: 90px;
@value font100: 100px;
@value font150: 150px;
.font10 {
font-size: calc(font10 * var(--base)) !important;
......@@ -140,6 +142,17 @@ body{
[data-dpr="3"] .font32 {
font-size: calc(var(--font3) * font32 * var(--base)) !important;
}
.font36 {
font-size: calc(font36 * var(--base)) !important;
}
[data-dpr="2"] .font36 {
font-size: calc(var(--font2) * font36 * var(--base)) !important;
}
[data-dpr="3"] .font36 {
font-size: calc(var(--font3) * font36 * var(--base)) !important;
}
.font40 {
font-size: calc(font40 * var(--base)) !important;
......@@ -240,4 +253,16 @@ body{
[data-dpr="3"] .font100 {
font-size: calc(var(--font3) * font100 * var(--base)) !important;
}
.font150 {
font-size: calc(font150 * var(--base)) !important;
}
[data-dpr="2"] .font150 {
font-size: calc(var(--font2) * font150 * var(--base)) !important;
}
[data-dpr="3"] .font150 {
font-size: calc(var(--font3) * font150 * var(--base)) !important;
}
\ 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