Skip to content

M
max_android_panel
Commit a10a0cfc by wujiabao
Options

add BreakageContainer

parent d45f476a
Showing with 204 additions and 12 deletions
client/components/BreakageComponent/BreakageCode/BreakageCode.jsx 0 → 100644
import React from 'react'
class BreakageCode extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div className={'breakageContent'}>
</div>
)
}
}
export default BreakageCode;
\ No newline at end of file
client/components/BreakageComponent/BreakageProductDetail/BreakageProductDetail.jsx 0 → 100644
import React from 'react'
import Button from '../../../components/CommonComponent/ButtonComponent/ButtonComponent'
require('./index.css')
class BreakageProductDetail extends React.Component{
constructor(props){
super(props)
}
render (){
return (
<div className={'breakageContent'}>
<div className={'commonPage'}>
<div className={'pageTitle clo333 font40'}>
<span>上报遗留货品信息</span>
</div>
<div className={'pagebox'}>
<div className={'breakProduct'}>
<div className={'breakProductInfo'}>
<div className={'breakProductImg'}>
<img src={UTILPATH.localImg.defaultImg} alt=""/>
</div>
<div style={{marginTop:'30px',textAlign:'left',marginLeft:'10px'}}>
<h2 className={'col333 font40'} style={{fontWeight:'800'}}>雪碧 250ml</h2>
<p className={'col333 font28'} style={{marginTop:'20px'}}><span>条形码:</span>56546213456554</p>
</div>
</div>
<div className={'breakProductStatus'}>
<h4 className={'col333 font32'}>货品状态</h4>
<p className={'col333 font28'}>
<span className={'active'}>包装完整</span>
<span>包装损坏</span>
</p>
</div>
<div className={'ProductPosition'}>
<h4 className={'col333 font32'}>请选择货品的位置:</h4>
<ul>
<li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>上</span></li>
<li className={'active'}><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>下</span></li>
<li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>左</span></li>
<li><img src={UTILPATH.localImg.defaultImg} alt=""/><span className={'font28 col333'}>右</span></li>
</ul>
</div>
</div>
<div className={'breakProductPosition'}>
<img src={UTILPATH.localImg.defaultImg} alt=""/>
</div>
</div>
</div>
<Button btnContainer={'colfff font30 backff775c'} text={'提交'} style={{position:'absolute',bottom:'120px',left:'50%',transform:'translate(-50%)'}} />
</div>
)
}
}
export default BreakageProductDetail
\ No newline at end of file
client/components/BreakageComponent/BreakageProductDetail/index.css 0 → 100644
.breakageContent .pagebox{
display: flex;
margin:0;
margin-left:40px;
}
.pagebox .breakProductImg{
width:150px;
height:150px;
border:2px solid #e5e5e5;
}
.pagebox .breakProductInfo{
display: flex;
}
.pagebox .breakProductInfo .breakProductImg img{
width:100%;
height:100%;
}
.pagebox .breakProductStatus,.pagebox .ProductPosition{
text-align: left;
margin-top:20px;
}
.pagebox .breakProductStatus p {
margin-top:20px;
}
.pagebox .breakProductStatus p span{
display: inline-block;
width:164px;
height: 60px;
line-height: 60px;
border:2px solid #ccc;
border-radius: 10px;
text-align: center;
}
.pagebox .breakProductStatus p span.active{
border:2px solid #05bb09;
color:#05bb09;
}
.pagebox .breakProductStatus p span:nth-of-type(2){
margin-left:20px;
}
.pagebox .ProductPosition ul{
display: flex;
margin-top:20px;
}
.pagebox .ProductPosition ul li{
width:146px;
height:146px;
border:2px solid #e5e5e5;
margin-right:20px;
}
.pagebox .ProductPosition ul li span{
text-align: center;
display: block;
}
.pagebox .ProductPosition ul li img{
width:100%;
height:100%;
}
.pagebox .breakProductPosition{
width:500px;
height:500px;
margin-left:100px;
border:4px solid #e5e5e5;
}
.pagebox .breakProductPosition img{
width:100%;
height:100%;
}
.pagebox .ProductPosition ul li.active{
border:6px solid #05bb09;
}
\ No newline at end of file
client/components/BreakageComponent/defaultComponent/DefaultComponnet.jsx 0 → 100644
import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
class DefaultComponent extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div className={'breakageContent'}>
<p className={'currentTarget col333 font40'} ><span>任务目标:</span>请仔细检查非货道区是否有遗留的商品</p>
<Button
text={'有,扫码上报'}
btnContainer={'col333 font30'}
style={{marginTop:'150px',marginLeft:'50%',transform:'translate(-150%)'}}
/>
<Button
text={'没有'}
btnContainer={'col333 font30'}
style={{marginTop:'30px',marginLeft:'50%',transform:'translate(-150%)'}}
/>
</div>
)
}
}
export default DefaultComponent;
\ No newline at end of file
client/components/CommonComponent/PopupComponent/PopupComponent.jsx
...@@ -9,7 +9,6 @@ export default class PopupComponent extends React.Component{ ...@@ -9,7 +9,6 @@ export default class PopupComponent extends React.Component{
render(){ render(){
let {popupInfo} = this.props; let {popupInfo} = this.props;
let {showPopup=false,popupChild=null} = popupInfo; let {showPopup=false,popupChild=null} = popupInfo;
console.log(popupInfo,'这是从tokeStoke传过来的')
return ( return (
<div className={"popupComponent " + (showPopup ? ' ' : 'hide ')}> <div className={"popupComponent " + (showPopup ? ' ' : 'hide ')}>
{popupChild} {popupChild}
......
client/containers/BreakageContainer/BreakageConatiner.jsx
import React from "react" import React from "react"
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import LeftContainer from '../LeftContainer/LeftContainer' import LeftContainer from '../LeftContainer/LeftContainer'
import RightContainer from '../RightContainer/RightContainer' import RightContainer from '../RightContainer/RightContainer'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent' import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import DefaultComponent from '../../components/BreakageComponent/defaultComponent/DefaultComponnet'
import BreakageProductDetail from '../../components/BreakageComponent/BreakageProductDetail/BreakageProductDetail'
require('./index.css')
class BreakageContainer extends React.Component { class BreakageContainer extends React.Component {
constructor(props){ constructor(props){
super(props) super(props)
this.state={
showPage:2
}
} }
...@@ -16,7 +21,9 @@ class BreakageContainer extends React.Component { ...@@ -16,7 +21,9 @@ class BreakageContainer extends React.Component {
<HeaderComponent headerInfo={props.headerInfo} /> <HeaderComponent headerInfo={props.headerInfo} />
<LeftContainer leftInfo={props.headerInfo}/> <LeftContainer leftInfo={props.headerInfo}/>
<RightContainer> <RightContainer>
<Button text={'没有'} option={props.pullTaskList} /> {
this.getPages()
}
</RightContainer> </RightContainer>
</div> </div>
) )
...@@ -24,5 +31,22 @@ class BreakageContainer extends React.Component { ...@@ -24,5 +31,22 @@ class BreakageContainer extends React.Component {
componentDidMount(){ componentDidMount(){
} }
changePage(page){
this.setState({
showPage:page
})
}
getPages(){
let pages=null;
switch(this.state.showPage){
case 1 :
pages=<DefaultComponent />
break;
case 2 :
pages=<BreakageProductDetail />
break;
}
return pages;
}
} }
export default BreakageContainer export default BreakageContainer
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -56,7 +56,7 @@ class PageContainer extends React.Component { ...@@ -56,7 +56,7 @@ class PageContainer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showPage : showPage[6], showPage : showPage[5],
lastPage : '', lastPage : '',
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
......
client/containers/TakeStokeContainer/TakeStokeContainer.jsx
...@@ -11,7 +11,7 @@ class TakeStokeContaniner extends React.Component { ...@@ -11,7 +11,7 @@ class TakeStokeContaniner extends React.Component {
super(props); super(props);
this.state={ this.state={
showButton:true, showButton:true,
number:2, number:1,
initNum:0 initNum:0
} }
} }
......
client/containers/TakeStokeContainer/index.css
.TokeStokeContainer{ .TokeStokeContainer{
width:100%;
height:100%;
background:#fff; background:#fff;
}
/* .rightContainer .TokeStokeContent{
width:100%; width:100%;
height:100%; height:100%;
position: relative; }
} */
.commonPage .pageTitle span:nth-of-type(2){ .commonPage .pageTitle span:nth-of-type(2){
margin-left:10px; margin-left:10px;
} }
.pagebox{ .pagebox{
display: flex; display: flex;
padding-left:300px; margin-left:300px;
box-sizing: border-box; box-sizing: border-box;
} }
.pagebox .productImg{ .pagebox .productImg{
......
client/css/common.css
...@@ -47,6 +47,7 @@ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent ...@@ -47,6 +47,7 @@ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box;
transform: translateX(5%); transform: translateX(5%);
} }
.commonPage .pageTitle{ .commonPage .pageTitle{
......
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