<template> <view class="scanCode-wrap"> <view class="barCode" id="barcode"></view> <view class="info-body"> <view class="info" v-if="productInfo"> <view> <view class="shelfPlaceCode"> <text v-if="productInfo.shelfCartApi">{{productInfo.shelfCartApi.shelfPlaceCode}}</text> <text v-else-if="productInfo.shelfProductApi">{{productInfo.shelfProductApi.shelfPlaceCode}}</text> <text v-else>{{shelfPlaceCode}}</text> </view> <view class="flex flex_1 align_center"> <view class="pimgs"> <u-image :src="productInfo.images?productInfo.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="pinfo flex_1"> <view class="ptxt flex align_center justify_between"> <view>{{productInfo.code}}</view> <view class="pcode" v-if="productInfo.shelfProductApi"> 可用库存: <text>{{productInfo.shelfProductApi.qty}}</text> {{productInfo.unit}} </view> </view> <view class="pname"> {{productInfo.productName}} </view> </view> </view> </view> <view class="product-nums"> <view>本次上架数量<text>(左右滑动选择)</text></view> <view class="numsBox flex align_center justify_between"> <view class="a-left" @click="numsBoxScroll(0)"><u-icon name="arrow-left"></u-icon></view> <scroll-view class="scroll-nums" scroll-x="true" :scroll-left="scleft"> <view class="ntabs-box flex align_center"> <view :id="'nums'+item" class="ntabs" @click="saveData(item)" :class="curQty==item?'active':''" v-for="item in 99" :key="item"> {{item<10?(' '+item+' '):item}} </view> </view> </scroll-view> <view class="a-right" @click="numsBoxScroll(1)"><u-icon name="arrow-right"></u-icon></view> </view> </view> <view class="infoTits" v-if="productInfo.shelfCartApi">产品已录入,请确认数量</view> </view> <view class="noData" v-else> 暂无扫描结果 </view> </view> <!-- 确认弹框 --> <u-popup v-model="confirmModal" closeable mode="bottom" border-radius="14" width="80%" @close="modalConfirm"> <view style="display: flex;flex-direction:column;justify-content: center;padding: 30rpx 30rpx 120rpx;"> <view style="margin-top: 40rpx;text-align: center;">没有找到该产品,请重新扫描</view> <view style="color: #999;padding: 30upx 30upx 50upx;text-align: center;">试一试</view> <view style="text-align: center;display: flex;justify-content: space-between;"> <u-button style="width: 40%;" type='primary' shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button> <!-- <u-button style="width: 40%;" @click="modalConfirm" type='primary' shape="circle" size="medium">继续扫码</u-button> --> </view> </view> </u-popup> </view> </template> <script> import { queryProduct, shelfCartSave } from '@/api/shelfCart' export default { components: { }, data() { return { barcode:null, shelfSn: null, shelfName: '', layer:'', confirmModal: false, productInfo: null, shelfPlaceCode: '', shelfCartSn: '', curQty: '', scleft: 0, fromPage: null, qrCode: '', numsWidth: 52 } }, onReady() { uni.setNavigationBarTitle({ title: '扫描条形码—' +this.layer+'层' }) // 设置高度 const query = uni.createSelectorQuery().in(this); query.select('#barcode').boundingClientRect(data => { this.barcode.setStyle({ width: data.width + 'px', height: data.height + 'px' // 调整扫码控件的位置 }) }).exec() }, onLoad(options) { this.shelfSn = options.shelfSn this.layer = options.layer this.shelfName = options.shelfName this.customerSn = options.customerSn this.fromPage = options.from // 初始化摄像头 this.init() }, onBackPress(e) { uni.$emit("updateTempHw") if(!this.fromPage){ uni.redirectTo({ url: "/pages/batchShelves/cartList?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn }) }else{ return false } return true }, onNavigationBarButtonTap(e) { this.searchProduct() }, methods: { numsBoxScroll(type){ this.scleft = type ? (this.scleft+this.numsWidth*3) : (this.scleft-this.numsWidth*3) }, searchProduct(){ uni.redirectTo({ url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from='+this.fromPage }) }, // 扫码结果 scanResult(){ const _this = this uni.showLoading({ title: "正在查询产品信息" }) let params = { qrCode: this.qrCode, shelfSn: this.shelfSn, shelfTierCode: this.layer } console.log(params) queryProduct(params).then(res => { console.log(res) if(res.status == 200&&res.data&&res.data.productList&&res.data.productList.length){ const ret = res.data.productList[0] this.productInfo = ret this.shelfPlaceCode = res.data.shelfPlaceCode // 数量区域宽度 const query = uni.createSelectorQuery().in(_this); query.select('#nums1').boundingClientRect(data => { _this.numsWidth = data ? (data.width + 20) : 52 }).exec() // 已录入 if(ret.shelfCartApi){ this.curQty = ret.shelfCartApi.qty _this.scleft = (_this.curQty -1) * _this.numsWidth }else{ this.curQty = '' this.scleft = 0 } setTimeout(()=>{ this.barcode.start() },2000) }else{ this.confirmModal = true } uni.hideLoading() }) }, // 保存 saveData(nums){ uni.showLoading({ title: '正在保存...' }) const row = this.productInfo const item = row.shelfCartApi || row.shelfProductApi const params = { shelfSn: this.shelfSn, shelfName: this.shelfName, shelfTierCode: item?item.shelfTierCode:this.layer, shelfPlaceSn: item?item.shelfPlaceSn:undefined, shelfPlaceCode: item?item.shelfPlaceCode:this.shelfPlaceCode, productSn: row.productSn, productCode: row.code, qty: nums, price: row.price, cost: row.terminalPrice, shelfCartSn: item?item.shelfCartSn:undefined } console.log(params) shelfCartSave(params).then(res => { console.log(res) if(res.status == 200){ this.toashMsg('保存成功,继续扫描') this.curQty = nums this.scanResult() } setTimeout(()=>{ uni.hideLoading() },4000) }) }, modalConfirm(){ this.confirmModal = false this.barcode.start() }, startScan(){ this.barcode.start() }, init(){ const _this = this // 初始化 this.barcode = plus.barcode.create('barcode', [ plus.barcode.QR, plus.barcode.EAN13, plus.barcode.EAN8, plus.barcode.UPCA, plus.barcode.UPCE, plus.barcode.CODABAR, plus.barcode.CODE39, plus.barcode.CODE128, plus.barcode.ITF ], { top:'0px', left:'0px', width: '100%', height: '45%', position: 'static', frameColor: '#00aaff', scanbarColor: '#00aaff' }) // 扫码成功后 this.barcode.onmarked = function(type, result) { console.log(type,result) _this.qrCode = result _this.scanResult() } // 扫码识别出错 this.barcode.onerror = function(error){ console.log(error) _this.toashMsg("条形码错误!") _this.barcode.start() } const currentWebview = this.$mp.page.$getAppWebview() currentWebview.append(this.barcode) this.barcode.start() } } } </script> <style lang="less"> page{ height: 100vh; } .scanCode-wrap{ width: 100%; height: 100vh; display: flex; flex-direction: column; .barCode{ height: 45%; } .info-body{ flex-grow: 1; overflow: auto; .noData{ padding: 100rpx 20rpx 0; text-align: center; color: #999; } .info{ background-color: #FFFFFF; padding: 10rpx 30upx; font-size: 32rpx; margin-top: 20rpx; .shelfPlaceCode{ background-color: #f6f6f6; text-align: center; padding: 10rpx 20rpx; border-radius: 50rpx; margin-bottom: 15rpx; } .pimgs{ padding:0.1rem; background:#f8f8f8; border-radius:0.3rem; } .pinfo{ line-height:normal; padding-left: 20rpx; color: #666; .pcode{ color:#999; text{ color: #000; } } } .product-nums{ border-top: 10rpx solid #eee; margin-top: 20rpx; > view{ &:first-child{ text-align: center; color: #999; margin-top: 20rpx; text{ font-size: 24rpx; } } } .numsBox{ .scroll-nums{ width: 80%; padding: 10rpx 0; .ntabs-box{ margin: 10rpx 0; } .ntabs{ background-color: #fff; border:1rpx solid #aeaeae; box-shadow: 2rpx 4rpx 6rpx #eee; border-radius: 15rpx; padding: 10rpx 15rpx; margin: 10rpx 20rpx; } .active{ border-color: crimson; background-color: crimson; color: #FFFFFF; } .a-left,.a-right{ color: #666; } } } } .infoTits{ padding: 30rpx; text-align: center; color: red; font-size: 24rpx; } } } } </style>