Skip to content

M
max_android_panel
Commit 141017d2 by yaxiLiuu
Options

完finish upload ScanBarCodeContainer

parent 71347c6f
Showing with 331 additions and 48 deletions
client/containers/PageContainer/PageContainer.jsx
......@@ -18,9 +18,6 @@ class PageContainer extends React.Component {
componentWillUnmount(){
}
render() {
return (
<ScanBarCodeContainer></ScanBarCodeContainer>
)
}
}
......
client/containers/ScanBarCodeContainer/ScanBarCodeContaienr.jsx
......@@ -10,7 +10,9 @@ class ScanBarCodeContainer extends React.Component{
console.log(state);
console.log(props);
this.state = {
"barCodeValue":''
"barCodeValue":'',
"canChangeBtnColor":false,
"showProductInfo":true
}
}
......@@ -41,45 +43,111 @@ class ScanBarCodeContainer extends React.Component{
postData.skuBarcode = String(this.state.barCodeValue);
dispatch(scanBarCodeGetProductInfo(postData));
}
handleInputBarCode(){
console.log("dfdf")
this.setState({
canChangeBtnColor:true
})
}
handleOnclick(){
this.setState({
showProductInfo:true
})
}
render() {
return (
<div className={"scanBarCodeContainer"}>
<div className={"scanBarCodeTipText"}>请把遗留或者掉落货品的条形码输入到文本框中，每次一件。</div>
<div className={"scanBarInputContainer"}>
<label htmlFor="">商品条形码</label>
<input type="text" onChange={(e)=>this.handleInputBarCode(e)}/>
</div>
<div className={"opeationContainer"}>
<button onClick={()=>{this.handleSubmitClick.bind(this)()}}>确认</button>
</div>
<div className={"productInfoContainer"}>
<div className={"baseInfo"}>
<img className={"right"} src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt=""/>
<div className={"left"}>
<p>9038383898</p>
<p>SKU00001 <span>可口可乐</span></p>
<p>250ml</p>
</div>
</div>
<ul className={"locationInfo"}>
商品位置
<li>机械手平台</li>
<li>出货传送区</li>
<li>轨道</li>
<li>机械手平台</li>
<li>出货传送区</li>
<li>轨道</li>
</ul>
<ul className={"productStatusInfo"}>
商品状态
<li>包装完整</li>
<li>包装损坏</li>
<li>包装损坏</li>
</ul>
<div className={"operationContainer"}>
<button>提交</button>
<div className={"header"}></div>
<div className={"container"}>
<div className={"inputContaienr"}>
<input onFocus={()=>{this.handleInputBarCode.bind(this)()}} placeholder={"点击输入条形码 "} className={"barcodeValueInput"} type="text"/>
<button className={this.state.canChangeBtnColor?"submitBtn btnFous":"submitBtn"}>确定</button>
</div>
{
this.state.showProductInfo?(
<div className={"productContainer clearfix"}>
<div className={"baseInfo clearfix"}>
<img className={"productImg"} src={ require('./img/lol.gif')} alt=""/>
<div className={"skuInfo"}>
<p className={"barcode"}>9038383832</p>
<p className={"skuNumnber"}>SKU00001</p>
<p className={"productName"}>可口可乐</p>
<p className={"net"}>250ml</p>
</div>
</div>
<div className={"locationInfo clearfix"}>
<div className={"infoTitle"}>商品位置</div>
<ul className={"detailContainer clearfix"}>
<li>机械手平台</li>
<li className={"checkLi"}>出货传送区</li>
<li>轨道</li>
</ul>
</div>
<div className={"statusInfo"}>
<div className={"infoTitle"}>商品状态</div>
<ul className={"detailContainer clearfix"}>
<li className={"checkLi"}>包装完整</li>
<li>包装损坏</li>
</ul>
</div>
<div className={"uploadContainer clearfix"}>
<div className={"uploadImgRight"}>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
<div className={"imgItem"}>
<img src= { require('./img/lol.gif')}alt=""/>
<span className={"closeBtn"}>×</span>
</div>
</div>
<div className={"operationLeft"}>
<div className={"imgItem"}>
<img src={UTILPATH.localImg.addIcon} alt=""/>
</div>
<div className={"imgItem"}>
<img src={UTILPATH.localImg.refreshIcon} alt=""/>
</div>
</div>
</div>
<div className={"btnContainer"}>
<button className={"submitEditBtn"}>提交</button>
</div>
</div>
):""
}
</div>
</div>
)
......
client/containers/ScanBarCodeContainer/index.css
.scanBarCodeContainer{
width: 500px;
height: 500px;
background-color: orangered;
position: relative;
}
.scanBarCodeContainer .header{
height: 98px;
background-color: #34343e;
width: 100%;
}
.scanBarCodeContainer .container{
height: 856px;
background-color:darkmagenta;
padding-left: 600px;
padding-top: 197px;
padding-right: 75px ;
box-sizing: border-box;
}
.scanBarCodeContainer .container .inputContaienr{}
.scanBarCodeContainer .container .inputContaienr{}
.scanBarCodeContainer .container .inputContaienr .barcodeValueInput {
box-sizing: border-box;
height: 82px;
border: 1px solid #f2f2f2;
background-color: #e5e5e5;
color: #333333;
border-radius: 4px;
line-height: 57px;
font-size: 30px;
width: 430px;
line-height: 57px;
padding: 26px 0 26px 52px;
}
.scanBarCodeContainer .container .inputContaienr input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #999999;
}
.scanBarCodeContainer .container .inputContaienr input:-moz-placeholder, textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999999;
}
.scanBarCodeContainer .container .inputContaienr input::-moz-placeholder, textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999999;
}
.scanBarCodeContainer .container .inputContaienr .submitBtn{
margin-left: 20px;
background-color: #c5c5c5;
width: 270px;
height: 80px ;
border-radius: 4px;
font-size: 32px;
line-height: 88px;
color: #ffffff;
border: none;
vertical-align:sub;
}
.scanBarCodeContainer .btnFous{
color: #ffffff !important;
background-color: #ff785b !important;
}
.scanBarCodeContainer .productInfoContainer{}
.scanBarCodeContainer .productInfoContainer{}
\ No newline at end of file
.scanBarCodeContainer .productInfoContainer{}
/*商品弹窗样式start*/
.productContainer {
position: absolute;
left: 367px;
top: 133px;
background-color: #fff;
}
.productContainer{
box-sizing: border-box;
padding: 50px 75px 50px 110px;
}
.productContainer .baseInfo .productImg{
height: 200px;
width: 200px;
display: inline-block;
border: 1px solid #f2f2f2;
float: left;
}
.productContainer .baseInfo .skuInfo{
float: left;
width: 200px;
margin-left: 30px;
}
.productContainer .baseInfo .skuInfo p{
margin-top: 8px;
font-size: 32px;
line-height: 44px;
color: #333333;
}
.productContainer .baseInfo .skuInfo .barcode{
}
.productContainer .baseInfo .skuInfo .skuNumnber{}
.productContainer .baseInfo .skuInfo .productName{
font-weight: bolder;
}
.productContainer .baseInfo .skuInfo .net{
color: #999999;
font-size: 24px;
}
.productContainer .locationInfo{
margin-top: 24px;
}
.locationInfo,.statusInfo{
/* width: 855px;*/
}
.productContainer .infoTitle{
display: inline-block;
color: #333333;
font-size: 30px;
float: left;
line-height: 49.8px;
padding: 25px 0;
margin-right: 80px;
}
.productContainer .detailContainer{
overflow: auto;
width: 870px;
}
.productContainer .detailContainer li{
box-sizing: border-box;
float: left;
height: 80px;
width: 260px;
text-align: center;
line-height: 80px;
border: 1px solid #f2f2f2;
border-radius: 10px;
color: #333333;
margin: 20px 15px;
font-size: 30px;
}
.productContainer .detailContainer .checkLi{
border: 1px solid #26ce61;
}
/*.productContainer .locationInfo .infoTitle{}
.productContainer .locationInfo .detailContainer{}
.productContainer .locationInfo .detailContainer li{}
.productContainer .statusInfo .statusInfo{ }
.productContainer .statusInfo .infoTitle{ }
.productContainer .statusInfo .detailContainer{ }
.productContainer .btnContainer .submitEditBtn{}*/
.productContainer .btnContainer{
margin-top: 40px ;
text-align: center;
}
.btnContainer .submitEditBtn{
width: 260px;
text-align: center;
height: 80px;
line-height: 80px;
background-color: #c5c5c5;
color: #ffffff;
border: none;
margin: 0 auto;
border-radius: 10px;
font-size: 32px;
}
.btnContainer .selectBtn{
background-color: #ff785b;
color: #ffffff;
}
.productContainer .uploadContainer{
margin-top: 25px;
}
.productContainer .uploadContainer .uploadImgRight{
float: left;
display: inline-block;
}
.productContainer .uploadContainer .imgItem{
width: 90px;
height: 90px;
display: inline-block;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #f2f2f2;
margin-right: 30px;
position: relative;
}
/*.productContainer .uploadContainer .imgItem:nth-last-child(1){
margin-right: 0;
}*/
.productContainer .uploadContainer .imgItem img{
width: 90px;
height: 90px;
}
.productContainer .uploadContainer .imgItem .closeBtn{
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
background-color: #fe785b;
font-weight: 500;
color: #ffffff;
font-size: 26px;
line-height: 27px;
text-align: center;
position: absolute;
top: -16px;
right: -16px
}
.productContainer .uploadContainer .uploadImgRight{}
.productContainer .uploadContainer .operationLeft{
float: right;
display: inline-block;
}
.productContainer .uploadContainer .operationLeft .imgItem{
border: none;
}
\ No newline at end of file
client/image/addIcon.png 0 → 100644
client/image/addIcon.png

1.04 KB
client/image/refresh.png 0 → 100644
client/image/refresh.png

2.01 KB
client/util/image.js
import headlogo from '../image/header-logo.png';
import banner1 from '../image/banner1.png';
import banner2 from '../image/banner2.png';
import banner3 from '../image/banner3.png';
import defaultImg from '../image/default.png';
import addIcon from '../image/addIcon.png';
import refreshIcon from '../image/refresh.png';
const localHost = 'http://localhost:7788';
const devHost = 'http://test.mjitech.com';
......@@ -76,6 +75,6 @@ const handleImgLoad = (ref)=>{
return style;
}
const localImg = {headlogo,banner1,banner2,banner3,defaultImg}
const localImg = {headlogo,defaultImg,addIcon,refreshIcon}
module.exports = {localHost,devHost,masterHost,getPic,handleImgError,handleImgLoad,localImg};
\ 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