Skip to content

M
max_android_panel
Commit 6a12c70a by Zhang Xin
Options

完成捕补货UI 以及部分逻辑 & 修改之前的一些å¤样式

parent eb46e7bf
Showing with 314 additions and 53 deletions
client/components/CommonComponent/SkuInfoComponent/SkuInfoComponent.jsx
...@@ -36,13 +36,24 @@ export default class SkuInfoComponent extends React.Component{ ...@@ -36,13 +36,24 @@ export default class SkuInfoComponent extends React.Component{
<ul className={"shelfInfo font30 col333"}> <ul className={"shelfInfo font30 col333"}>
<li className={""}> <li className={""}>
<span className={""}>货品名称：{skuInfo.skuName || ''}</span> <span className={""}>货品名称：{skuInfo.skuName || ''}</span>
<span className={"totalNum "}>需回收数量：<span className={"font40 colff775c"}>{skuInfo.targetNum || 0}</span></span> {
skuInfo.targetNum ? <span className={"totalNum "}>需回收数量：<span className={"font40 colff775c"}>{skuInfo.targetNum || 0}</span></span>
: null
}
</li> </li>
<li className={""}> <li className={""}>
<span className={""}>所在区域：{skuInfo.shortPosition || ''} <span className={"areaBtn colff775c"}>位置照片</span></span> <span className={""}>所在区域：{skuInfo.shortPosition || ''}
<span className={"currentNum"}>已回收数量：<span className={"font40 colff775c"}>{skuInfo.recoverNum || 0}</span></span> {
skuInfo.areaImage ? <span className={"areaBtn colff775c"}>位置照片</span> : null
}
</span>
{
skuInfo.recoverNum ? <span className={"currentNum"}>已回收数量：<span className={"font40 colff775c"}>{skuInfo.recoverNum || 0}</span></span>
: null
}
</li> </li>
<li className={""}>货到信息：{skuInfo.position || ''}</li> <li className={""}>货道信息：{skuInfo.position || ''}</li>
</ul> </ul>
</div> </div>
) )
......
client/components/ReplenishComponent/ReplenishHomePage/ReplenishHomePage.jsx 0 → 100644
import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
export default class ReplenishHomePage extends React.Component{
constructor(props){
super(props);
}
render(){
let props = this.props;
let {headerInfo} = props;
let {taskInfo={}} = headerInfo;
return(
<div className={"replenishHomePage"}>
<div className={"text font40 col333"}>任务目标：请将{taskInfo.area}区补货箱中的货品扫码放到货架上</div>
<Button btnContainer={"replenishHomePageBtn backff775c colfff font30"} key={"replenishHomePageBtn"} text={'开始扫码补货'} option={props.scanQrcode}/>
</div>
)
}
}
client/components/ReplenishComponent/ReplenishHomePage/index.css 0 → 100644
.replenishHomePage{
text-align: center;
padding-top: 240px;
}
.replenishHomePage .text{
margin-bottom: 180px;
}
.replenishHomePage .replenishHomePageBtn{
display: inline-block;
}
\ No newline at end of file
client/components/ReplenishComponent/ReplenishScanPage/ReplenishScanPage.jsx 0 → 100644
import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
export default class ReplenishScanPage extends React.Component{
constructor(props){
super(props);
}
render(){
let props = this.props;
let {headerInfo} = props;
let {taskInfo={}} = headerInfo;
return(
<div className={"replenishHomePage"}>
<div className={"text font40 col333"}>任务目标：请将{taskInfo.area}区补货箱中的货品扫码放到货架上</div>
<Button btnContainer={"replenishHomePageBtn backff775c colfff font30"} key={"replenishHomePageBtn"} text={'开始扫码补货'} option={props.scanQrcode}/>
</div>
)
}
}
client/components/ReplenishComponent/ReplenishScanPage/index.css 0 → 100644
.replenishHomePage{
text-align: center;
padding-top: 240px;
}
.replenishHomePage .text{
margin-bottom: 180px;
}
.replenishHomePage .replenishHomePageBtn{
display: inline-block;
}
\ No newline at end of file
client/components/ReplenishComponent/ReplenishSkuPage/index.css 0 → 100644
.replenishSkuPage .btn{
margin-top: 13%;
position: relative;
}
.replenishSkuPage .btn .tips{
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
}
.replenishSkuPage .btn .replenishPageBtn1{
margin-right: 40px;
display: inline-block;
}
.replenishSkuPage .btn .replenishPageBtn2{
display: inline-block;
}
.replenishPopInfo .btn{
display: flex;
justify-content: center;
margin-top: 15%;
}
.replenishPopInfo .btn .replenishHandleScanOverBtn1{
margin-right: 3%;
}
.replenishPopInfo .text{
line-height: 40px;
margin-bottom: 80px;
}
.replenishPopInfo .icon{
margin: 50px 0 60px ;
}
.replenishQuestionPage .icon,.replenishWrongSkuPage .icon{
float: left;
margin-left: 30px;
}
.replenishQuestionPage .tips {
margin: 20px 0 80px;
}
.replenishQuestionPage .replenishQuestionPageBtn{
margin-top: 40px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.replenishWrongSkuPage .wrongSkuIcon{
margin: 10px 0 40px;
}
.replenishWrongSkuPage .tips {
margin-bottom: 46px;
}
.replenishWrongSkuPage .text {
text-align: left;
}
.replenishWrongSkuPage .btn{
text-align: center;
margin-top: 2%;
}
.replenishWrongSkuPage .btn .replenishWrongSkuBtn{
display: inline-block;
}
.replenishWrongSkuPage .skuInfo{
background-color: #fafafa;
padding: 20px;
}
.replenishWrongSkuPage .skuInfoComponent .img{
width: 150px;
height: 150px;
}
.replenishQuestionPopup .text{
text-align: left;
padding: 130px 0 0 120px;
line-height: 72px;
}
.replenishQuestionPopup .btn{
margin-top: 15%;
text-align: center;
}
.replenishQuestionPopup .btn .replenishQuestionPopupBtn{
display: inline-block;
}
\ No newline at end of file
client/containers/ReplenishContainer/ReplenishContainer.jsx
...@@ -2,38 +2,64 @@ import React from 'react'; ...@@ -2,38 +2,64 @@ import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent'; import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer'; import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer'; import RightContainer from '../RightContainer/RightContainer';
import ReplenishHomePage from '../../components/ReplenishComponent/ReplenishHomePage/ReplenishHomePage'
import ReplenishSkuPage from '../../components/ReplenishComponent/ReplenishSkuPage/ReplenishSkuPage'
import ReplenishScanPage from '../../components/ReplenishComponent/ReplenishScanPage/ReplenishScanPage'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent' import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent' import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css'); require('./index.css');
const replenishPageIndex = {
1 : 'getHomePage',
2 : 'getSkuPage',
3 : 'getScanPage',
}
export default class ReplenishContainer extends React.Component{ export default class ReplenishContainer extends React.Component{
constructor(props){ constructor(props){
super(props); super(props);
this.beginScan = this.beginScan.bind(this)
this.state = {
pageType : 1,
showScanQrcode : false
}
} }
componentWillMount(){ componentWillMount(){
} }
wrongQrcode(){ getPage(type){
//货道商品不符 console.log("type ",type)
let {showPopup,hidePopup} = this.props; return (props)=>this[replenishPageIndex[type]](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(){ beginScan(){
this.setState({
showScanQrcode : true,
})
}
getHomePage(props){
let {headerInfo} = props;
return(
<ReplenishHomePage headerInfo={headerInfo}
scanQrcode={()=>this.beginScan()}
/>
)
}
getSkuPage(props){
return <ReplenishSkuPage {...props}/>
}
getScanPage(props){
return <ReplenishScanPage {...props}/>
}
getSkuInfo(){
return( return(
<div className={"replenishSkuInfo"}> <div className={"replenishSkuInfo"}>
<div className={"skuName font30 col333"}>商品名称：雪碧</div> <div className={"skuName font30 col333"}>商品名称：雪碧</div>
...@@ -46,9 +72,12 @@ export default class ReplenishContainer extends React.Component{ ...@@ -46,9 +72,12 @@ export default class ReplenishContainer extends React.Component{
</div> </div>
<div className={"skuPos col333 font30"}> <div className={"skuPos col333 font30"}>
<ul> <ul>
<li>所在区域：A区域<span className={"colff775c"}>区域照片</span></li> <li><span className={"skuPosTitle fl"}>所在区域：</span>A区域<span className={"colff775c showAreaImg"}>区域照片</span></li>
<li>一个字一个字一个字一个字一个字一个字</li> <li className={""}>
<li>一个字</li> <span className={"skuPosTitle"}>货道信息：</span>
<span className={""}>一个字一个字一个字一个字一个字一个字</span>
</li>
<li><span className={"skuPosTitle fl"}>货道编号：</span>一个字</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -56,44 +85,102 @@ export default class ReplenishContainer extends React.Component{ ...@@ -56,44 +85,102 @@ export default class ReplenishContainer extends React.Component{
) )
} }
scanQrcode(){ getOtherHeader(){
console.log("扫描下一个") return <div className={"otherHeader replenishScanQrcodeHeader font32 clearfix colfff "}>
<i className={"iconfont middle icon font50 icon-circle-left circleIcon fl"} onClick={()=>this.goBack.bind(this)()}/>
<span className={"middle"}>任务目标：将A区补货箱中的货品扫码后放到货架上</span>
</div>
} }
scanOver(){
console.log("扫描结束") goBack(){
this.setState({
showScanQrcode : false,
pageType : 1
})
} }
getPage(){
return (
<div className={"replenishPage commonPage"}> //扫描货品异常
<div className={"title font40 col333 pageTitle"}>请将货品放到对应货架上 errorSku(){
<span className={"font26 progressText"}>补货进度：3/30</span> //货道已满解决办法
let {showPopup,hidePopup} = this.props;
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"确认扫描完毕"} option={hidePopup}/>
let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}>
<p>您需要补完【XXX】，才能补其他货品</p>
</div> </div>
<div className={"pagebox"}> <div className={"btn"}>
{this.getSkuDom()} {btnDom}
<div className={"btn pageBtn"}> <div className={"colff775c font30"}>忘记该货品的样子</div>
<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>
</PopModel>
showPopup({popupChild:popDom});
}
//忘记样子
forgetSku(){
let {showPopup,hidePopup} = this.props;
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"继续扫描"} option={hidePopup}/>
let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
{this.getSkuInfo()}
<div className={"btn"}>
{btnDom}
</div> </div>
</PopModel>
showPopup({popupChild:popDom});
}
//不在本次补货范围
outReplenish(){
//货道已满解决办法
let {showPopup,hidePopup} = this.props;
let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerWrongQrcode"} text={"关闭"} option={hidePopup}/>
let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}>
<p>此货品不在本次补货范围内，请放入物流回收箱！</p>
</div> </div>
) <div className={"btn"}>
{btnDom}
</div>
</PopModel>
showPopup({popupChild:popDom});
} }
render(){ render(){
let props = this.props; let props = this.props;
return ( return (
<div className={"replenishContainer"}> <div className={"replenishContainer"}>
{ {
this.state.showScanQrcode ?
<div className={"replenishQrcode"} style={{width:'100%',height:'100%',backgroundColor:'#000'}}>
<Header
showHeader={CONFIG.headerStatus[2]}
>
{this.getOtherHeader()}
</Header>
</div> :
<div style={{width:'100%',height:'100%'}}>
{
props.headerInfo && props.headerInfo.storeInfo ? props.headerInfo && props.headerInfo.storeInfo ?
<Header headerInfo={props.headerInfo}/> : null <Header headerInfo={props.headerInfo}/> : null
} }
<LeftContainer leftInfo={props.headerInfo}/> <LeftContainer leftInfo={props.headerInfo}/>
<RightContainer> <RightContainer>
{this.getPage()} {this.getPage(this.state.pageType)(props)}
</RightContainer> </RightContainer>
</div> </div>
}
</div>
) )
} }
} }
\ No newline at end of file
client/containers/ReplenishContainer/index.css
...@@ -7,8 +7,22 @@ ...@@ -7,8 +7,22 @@
position: absolute; position: absolute;
right: 40px; right: 40px;
} }
.replenishScanQrcodeHeader{
background-color: #000;
height: 100%;
text-align: center;
position: relative;
line-height: 98px;
}
.replenishScanQrcodeHeader .icon{
}
.replenishSkuInfo{ .replenishSkuInfo{
padding-left: 15%; width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
} }
.replenishSkuInfo .skuName{ .replenishSkuInfo .skuName{
text-align: left; text-align: left;
...@@ -34,20 +48,14 @@ ...@@ -34,20 +48,14 @@
line-height: 46px; line-height: 46px;
flex: 1; flex: 1;
} }
.replenishPage .btn{ .replenishSkuInfo .skuInfo .skuPos ul>li{
margin-top: 20%; padding-left: 26%;
position: relative; position: relative;
} }
.replenishPage .btn .tips{ .replenishSkuInfo .skuInfo .skuPos ul>li .skuPosTitle{
display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0;
}
.replenishPage .btn .replenishPageBtn1{
margin-right: 40px;
display: inline-block;
} }
.replenishPage .btn .replenishPageBtn2{ .replenishSkuInfo .skuInfo .skuPos ul>li .showAreaImg{
display: inline-block; margin-left: 10px;
} }
\ 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