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{
<ul className={"shelfInfo font30 col333"}>
<li className={""}>
<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 className={""}>
<span className={""}>所在区域：{skuInfo.shortPosition || ''} <span className={"areaBtn colff775c"}>位置照片</span></span>
<span className={"currentNum"}>已回收数量：<span className={"font40 colff775c"}>{skuInfo.recoverNum || 0}</span></span>
<span className={""}>所在区域：{skuInfo.shortPosition || ''}
{
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 className={""}>货到信息：{skuInfo.position || ''}</li>
<li className={""}>货道信息：{skuInfo.position || ''}</li>
</ul>
</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';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
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 PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css');
const replenishPageIndex = {
1 : 'getHomePage',
2 : 'getSkuPage',
3 : 'getScanPage',
}
export default class ReplenishContainer extends React.Component{
constructor(props){
super(props);
this.beginScan = this.beginScan.bind(this)
this.state = {
pageType : 1,
showScanQrcode : false
}
}
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});
getPage(type){
console.log("type ",type)
return (props)=>this[replenishPageIndex[type]](props)
}
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(
<div className={"replenishSkuInfo"}>
<div className={"skuName font30 col333"}>商品名称：雪碧</div>
......@@ -46,9 +72,12 @@ export default class ReplenishContainer extends React.Component{
</div>
<div className={"skuPos col333 font30"}>
<ul>
<li>所在区域：A区域<span className={"colff775c"}>区域照片</span></li>
<li>一个字一个字一个字一个字一个字一个字</li>
<li>一个字</li>
<li><span className={"skuPosTitle fl"}>所在区域：</span>A区域<span className={"colff775c showAreaImg"}>区域照片</span></li>
<li className={""}>
<span className={"skuPosTitle"}>货道信息：</span>
<span className={""}>一个字一个字一个字一个字一个字一个字</span>
</li>
<li><span className={"skuPosTitle fl"}>货道编号：</span>一个字</li>
</ul>
</div>
</div>
......@@ -56,44 +85,102 @@ export default class ReplenishContainer extends React.Component{
)
}
scanQrcode(){
console.log("扫描下一个")
getOtherHeader(){
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"}>请将货品放到对应货架上
<span className={"font26 progressText"}>补货进度：3/30</span>
//扫描货品异常
errorSku(){
//货道已满解决办法
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 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 className={"btn"}>
{btnDom}
<div className={"colff775c font30"}>忘记该货品的样子</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>
</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 className={"btn"}>
{btnDom}
</div>
</PopModel>
showPopup({popupChild:popDom});
}
render(){
let props = this.props;
return (
<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 ?
<Header headerInfo={props.headerInfo}/> : null
}
<LeftContainer leftInfo={props.headerInfo}/>
<RightContainer>
{this.getPage()}
{this.getPage(this.state.pageType)(props)}
</RightContainer>
</div>
}
</div>
)
}
}
\ No newline at end of file
client/containers/ReplenishContainer/index.css
......@@ -7,8 +7,22 @@
position: absolute;
right: 40px;
}
.replenishScanQrcodeHeader{
background-color: #000;
height: 100%;
text-align: center;
position: relative;
line-height: 98px;
}
.replenishScanQrcodeHeader .icon{
}
.replenishSkuInfo{
padding-left: 15%;
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.replenishSkuInfo .skuName{
text-align: left;
......@@ -34,20 +48,14 @@
line-height: 46px;
flex: 1;
}
.replenishPage .btn{
margin-top: 20%;
.replenishSkuInfo .skuInfo .skuPos ul>li{
padding-left: 26%;
position: relative;
}
.replenishPage .btn .tips{
display: inline-block;
.replenishSkuInfo .skuInfo .skuPos ul>li .skuPosTitle{
position: absolute;
left: 0;
bottom: 0;
}
.replenishPage .btn .replenishPageBtn1{
margin-right: 40px;
display: inline-block;
}
.replenishPage .btn .replenishPageBtn2{
display: inline-block;
.replenishSkuInfo .skuInfo .skuPos ul>li .showAreaImg{
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