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{
render(){
let {popupInfo} = this.props;
let {showPopup=false,popupChild=null} = popupInfo;
console.log(popupInfo,'这是从tokeStoke传过来的')
return (
<div className={"popupComponent " + (showPopup ? ' ' : 'hide ')}>
{popupChild}
......
client/containers/BreakageContainer/BreakageConatiner.jsx
import React from "react"
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import LeftContainer from '../LeftContainer/LeftContainer'
import RightContainer from '../RightContainer/RightContainer'
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 {
constructor(props){
super(props)
this.state={
showPage:2
}
}
......@@ -16,7 +21,9 @@ class BreakageContainer extends React.Component {
<HeaderComponent headerInfo={props.headerInfo} />
<LeftContainer leftInfo={props.headerInfo}/>
<RightContainer>
<Button text={'没有'} option={props.pullTaskList} />
{
this.getPages()
}
</RightContainer>
</div>
)
......@@ -24,5 +31,22 @@ class BreakageContainer extends React.Component {
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
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
......@@ -56,7 +56,7 @@ class PageContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
showPage : showPage[6],
showPage : showPage[5],
lastPage : '',
page : null,
popupInfo : defaultPopupInfo,
......
client/containers/TakeStokeContainer/TakeStokeContainer.jsx
......@@ -11,7 +11,7 @@ class TakeStokeContaniner extends React.Component {
super(props);
this.state={
showButton:true,
number:2,
number:1,
initNum:0
}
}
......
client/containers/TakeStokeContainer/index.css
.TokeStokeContainer{
width:100%;
height:100%;
background:#fff;
}
/* .rightContainer .TokeStokeContent{
width:100%;
height:100%;
position: relative;
} */
}
.commonPage .pageTitle span:nth-of-type(2){
margin-left:10px;
}
.pagebox{
display: flex;
padding-left:300px;
margin-left:300px;
box-sizing: border-box;
}
.pagebox .productImg{
......
client/css/common.css
......@@ -47,6 +47,7 @@ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
transform: translateX(5%);
}
.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