| <template> | 
|     <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"> | 
|         <view | 
|             class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> | 
|             <view class="login__info__item__input__content"> | 
|                 <input maxlength="500" :disabled="isfill" v-model="barcode" placeholder-class="input-placeholder" | 
|                     focus="true" @input="barcodeInput" placeholder="请扫描条码"   /> | 
|                      | 
|             </view> | 
|             <button class="" size="mini" @click="clearSN" > 清空</button> | 
|         </view> | 
|         <!-- <view class="login__info__item__button tn-cool-bg-color-7--reverse" @tap="resrt()" hover-class="tn-hover" | 
|             :hover-stay-time="150">重置条码</view> --> | 
|         <view | 
|             class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> | 
|             <view class="login__info__item__input__content"> | 
|                 <input  maxlength="500" v-model="station" placeholder-class="input-placeholder" @click="show = true" | 
|                     placeholder="请选择货位号" /> | 
|                 <u-picker v-model="show" mode="selector" :range="selectorObj" range-key="cateName" @confirm="confirm"> | 
|                 </u-picker> | 
|             </view> | 
|         </view> | 
|         <view class="login__info__item__button tn-cool-bg-color-7--reverse" @tap="submit()" hover-class="tn-hover" | 
|             :hover-stay-time="150">绑定车轮</view> | 
|         <u-toast ref="uToast"></u-toast> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     export default { | 
|          | 
|         data() { | 
|             return { | 
|                 barcode: '', | 
|                 isfill: false, | 
|                 show: false, | 
|                 station: '', | 
|                 stationNo: '', | 
|                 selectorObj: [{ | 
|                         cateName: '1单元1号下料口', | 
|                         id: "1" | 
|                     }, | 
|                     { | 
|                         cateName: '1单元2号下料口', | 
|                         id: "2" | 
|                     }, | 
|                     { | 
|                         cateName: '1单元3号下料口', | 
|                         id: "3" | 
|                     }, | 
|                     { | 
|                         cateName: '2单元2号下料口', | 
|                         id: "5" | 
|                     }, | 
|                     { | 
|                         cateName: '2单元3号下料口', | 
|                         id: "6" | 
|                     } | 
|                 ] | 
|             } | 
|         }, | 
|         methods: { | 
|             barcodeInput: function(e) { | 
|                 if (e.detail.value == "") { | 
|                     this.barcode = e.detail.value; | 
|                 } else { | 
|                     var len = this.barcode.split(',').length; | 
|                     if (len < 4){ | 
|                         this.barcode = this.barcode+','; | 
|                         this.barcode = e.detail.value; | 
|                         //this.isfill=true; | 
|                     } | 
|                     else if (len < 5) { | 
|                         this.barcode =  this.barcode ; | 
|                         this.barcode = e.detail.value; | 
|                         //this.isfill=true; | 
|                     } else { | 
|                         this.$t.message.toast('数量最多为5个'); | 
|                         this.isfill=true; | 
|                         //this.isfill=false; | 
|                         return; | 
|                     } | 
|                 } | 
|             }, | 
|             confirm(e) { | 
|                 console.log(e) | 
|                 let x = this.selectorObj[e]; | 
|                 this.station = x.cateName | 
|                 this.stationNo = x.id | 
|             }, | 
|             clearSN:function(e){ | 
|                 this.barcode=""; | 
|                 this.isfill=false; | 
|             }, | 
|             submit() { | 
|                 if (this.barcode == '') { | 
|                     this.$t.message.toast('条码不能为空') | 
|                     return; | 
|                 } | 
|   | 
|                 this.$u.post("/api/ToWms/OutsourceInbound", { | 
|                     MainData: { | 
|                         dataSN: this.barcode, | 
|                         stationNo: this.stationNo, | 
|                         creator: uni.getStorageSync('jo_user').userName, | 
|                     } | 
|                 }).then(res => { | 
|                     if (res.status) { | 
|                         this.barcode = '', | 
|                             this.station = '', | 
|                             this.stationNo = '', | 
|                             this.$t.message.toast('通知AGV成功,请等待AGV取货'); | 
|                     } else { | 
|                         this.$t.message.toast(res.message); | 
|                     } | 
|                     console.log(res); | 
|                 }).catch(err => { | 
|   | 
|                 }) | 
|             } | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     // @import '@/static/css/templatePage/custom_nav_bar.scss'; | 
|     /* 悬浮 */ | 
|     .rocket-sussuspension { | 
|         animation: suspension 3s ease-in-out infinite; | 
|     } | 
|   | 
|     @keyframes suspension { | 
|   | 
|         0%, | 
|         100% { | 
|             transform: translate(0, 0); | 
|         } | 
|   | 
|         50% { | 
|             transform: translate(-0.8rem, 1rem); | 
|         } | 
|     } | 
|   | 
|     .login { | 
|         position: relative; | 
|         height: 100%; | 
|         z-index: 1; | 
|   | 
|         /* 背景图片 start */ | 
|         &__bg { | 
|             z-index: -1; | 
|             position: fixed; | 
|   | 
|             &--top { | 
|                 top: 0; | 
|                 left: 0; | 
|                 right: 0; | 
|                 width: 100%; | 
|   | 
|                 .bg { | 
|                     width: 750rpx; | 
|                     will-change: transform; | 
|                 } | 
|   | 
|                 .rocket { | 
|                     margin: 50rpx 28%; | 
|                     width: 400rpx; | 
|                     will-change: transform; | 
|                 } | 
|             } | 
|   | 
|             &--bottom { | 
|                 bottom: -10rpx; | 
|                 left: 0; | 
|                 right: 0; | 
|                 width: 100%; | 
|                 // height: 144px; | 
|                 margin-bottom: env(safe-area-inset-bottom); | 
|   | 
|                 image { | 
|                     width: 750rpx; | 
|                     will-change: transform; | 
|                 } | 
|             } | 
|         } | 
|   | 
|         /* 背景图片 end */ | 
|   | 
|         /* 内容 start */ | 
|         &__wrapper { | 
|             margin-top: 403rpx; | 
|             width: 100%; | 
|         } | 
|   | 
|         /* 切换 start */ | 
|         &__mode { | 
|             position: relative; | 
|             margin: 0 auto; | 
|             width: 476rpx; | 
|             height: 77rpx; | 
|             background-color: #FFFFFF; | 
|             box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1); | 
|             border-radius: 39rpx; | 
|   | 
|             &__item { | 
|                 height: 77rpx; | 
|                 width: 100%; | 
|                 line-height: 77rpx; | 
|                 text-align: center; | 
|                 font-size: 31rpx; | 
|                 color: #908f8f; | 
|                 letter-spacing: 1em; | 
|                 text-indent: 1em; | 
|                 z-index: 2; | 
|                 transition: all 0.4s; | 
|   | 
|                 &--active { | 
|                     font-weight: bold; | 
|                     color: #FFFFFF; | 
|                 } | 
|             } | 
|   | 
|             &__slider { | 
|                 position: absolute; | 
|                 height: inherit; | 
|                 width: calc(476rpx); | 
|                 border-radius: inherit; | 
|                 box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1); | 
|                 z-index: 1; | 
|                 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | 
|             } | 
|         } | 
|   | 
|         /* 切换 end */ | 
|   | 
|         /* 登录注册信息 start */ | 
|         &__info { | 
|             margin: 0 30rpx; | 
|             margin-top: 105rpx; | 
|             padding: 30rpx 51rpx; | 
|             padding-bottom: 0; | 
|             border-radius: 20rpx; | 
|             background-color: #ffff; | 
|             box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1); | 
|   | 
|             &__item { | 
|   | 
|                 &__input { | 
|                     margin-top: 59rpx; | 
|                     width: 100%; | 
|                     height: 100rpx; | 
|                     border: 1rpx solid #E6E6E6; | 
|                     border-radius: 39rpx; | 
|   | 
|                     &__left-icon { | 
|                         width: 10%; | 
|                         font-size: 44rpx; | 
|                         margin-left: 20rpx; | 
|                         color: #AAAAAA; | 
|                     } | 
|   | 
|                     &__content { | 
|                         width: 80%; | 
|                         padding-left: 10rpx; | 
|   | 
|                         &--verify-code { | 
|                             width: 56%; | 
|                         } | 
|   | 
|                         input { | 
|                             font-size: 48rpx; | 
|                             // letter-spacing: 0.1em; | 
|                         } | 
|                     } | 
|   | 
|                     &__right-icon { | 
|                         width: 10%; | 
|                         font-size: 44rpx; | 
|                         margin-right: 20rpx; | 
|                         color: #AAAAAA; | 
|                     } | 
|   | 
|                     &__right-verify-code { | 
|                         width: 34%; | 
|                         margin-right: 20rpx; | 
|                     } | 
|                 } | 
|   | 
|                 &__button { | 
|                     margin-top: 75rpx; | 
|                     margin-bottom: 39rpx; | 
|                     width: 100%; | 
|                     height: 77rpx; | 
|                     text-align: center; | 
|                     font-size: 48rpx; | 
|                     font-weight: bold; | 
|                     line-height: 77rpx; | 
|                     letter-spacing: 1em; | 
|                     text-indent: 1em; | 
|                     border-radius: 39rpx; | 
|                     box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35); | 
|                 } | 
|                  | 
|                  | 
|                 &__tips { | 
|                     margin: 30rpx 0; | 
|                     color: #AAAAAA; | 
|                 } | 
|             } | 
|         } | 
|   | 
|         /* 登录注册信息 end */ | 
|   | 
|         /* 登录方式切换 start */ | 
|         &__way { | 
|             margin: 0 auto; | 
|             margin-top: 110rpx; | 
|   | 
|             &__item { | 
|                 &--icon { | 
|                     width: 77rpx; | 
|                     height: 77rpx; | 
|                     font-size: 50rpx; | 
|                     border-radius: 100rpx; | 
|                     margin-bottom: 18rpx; | 
|                     position: relative; | 
|                     z-index: 1; | 
|   | 
|                     &::after { | 
|                         content: " "; | 
|                         position: absolute; | 
|                         z-index: -1; | 
|                         width: 100%; | 
|                         height: 100%; | 
|                         left: 0; | 
|                         bottom: 0; | 
|                         border-radius: inherit; | 
|                         opacity: 1; | 
|                         transform: scale(1, 1); | 
|                         background-size: 100% 100%; | 
|                         background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png); | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|   | 
|         /* 登录方式切换 end */ | 
|         /* 内容 end */ | 
|   | 
|     } | 
|   | 
|     /deep/.input-placeholder { | 
|         font-size: 24rpx; | 
|         color: #E6E6E6; | 
|     } | 
| </style> |