|
@@ -0,0 +1,310 @@
|
|
|
+<template>
|
|
|
+ <view class="scanCodePrint-wrap flex flex_column">
|
|
|
+ <view class="barCode" id="barcode"></view>
|
|
|
+ <view class="info-body">
|
|
|
+ <view class="flex align-center orderTj" v-if="info">
|
|
|
+ <view>
|
|
|
+ <view class="redText">{{info.totalQty}}</view>
|
|
|
+ <view>总数量</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>{{info.outQty}}</view>
|
|
|
+ <view>已扫码</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info partList" v-if="partList.length">
|
|
|
+ <view class="infoList">
|
|
|
+ <view class="title">配件列表</view>
|
|
|
+ <view>
|
|
|
+ {{partList.length}}款,共<text class="redText">{{totalNums}}</text>件
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-for="item in partList" :key="item.id" class="flex align-center item-list">
|
|
|
+ <view>
|
|
|
+ <u-image border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="item-name">
|
|
|
+ <text>{{item.productName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-nums">
|
|
|
+ <text>{{item.productCode}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-head">
|
|
|
+ <view>
|
|
|
+ 数量:<text class="redText">{{item.totalQty}}</text>
|
|
|
+ 已扫:<text>{{item.outQty}}</text>
|
|
|
+ </view>
|
|
|
+ <text class="item-no">{{item.shelfPlaceCode}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer flex align-center" v-if="info">
|
|
|
+ <u-button :throttle-time="100" @click="outShelfOrder" :style="{background:$config('buttonColors'),color:'#fff'}" shape="circle" type="info">确认取货</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import { findBySnShelfOrder, outShelfOrder, scanConfirmShelfOrder } from '@/api/shelf.js'
|
|
|
+ // import { clzConfirm } from '@/libs/tools.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ barcode:null,
|
|
|
+ shelfOrderSn: null,
|
|
|
+ info: null,
|
|
|
+ partList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalNums(){
|
|
|
+ let ret = 0
|
|
|
+ this.partList.map(item => {
|
|
|
+ ret += item.totalQty
|
|
|
+ })
|
|
|
+ return ret
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 初始化摄像头
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.shelfOrderSn = options.shelfOrderSn
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取详情
|
|
|
+ getDetail(){
|
|
|
+ // findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
|
|
|
+ // if(res.status == 200){
|
|
|
+ // this.info = res.data
|
|
|
+ // this.partList = res.data.shelfOrderDetailList
|
|
|
+ // // 此单已全部扫码,是否确认取货
|
|
|
+ // if(this.info.totalQty == this.info.outQty){
|
|
|
+ // clzConfirm({
|
|
|
+ // title: '扫码成功',
|
|
|
+ // content: '此单已全部扫码,是否确认取货?',
|
|
|
+ // success: (ret) => {
|
|
|
+ // if(ret.confirm||ret.index==0){
|
|
|
+ // _this.outShelfOrder()
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 确认取货
|
|
|
+ outShelfOrder(){
|
|
|
+ // if(this.info.totalQty == this.info.outQty){
|
|
|
+ // outShelfOrder({id:this.info.id}).then(res => {
|
|
|
+ // if(res.status == 200){
|
|
|
+
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }else{
|
|
|
+ // this.toashMsg("请先扫码取货")
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 扫码结果
|
|
|
+ scanResult(qrCode){
|
|
|
+ console.log(qrCode)
|
|
|
+ // const _this = this
|
|
|
+ // scanConfirmShelfOrder({
|
|
|
+ // qrCode: qrCode,
|
|
|
+ // id: _this.info.id
|
|
|
+ // }).then(res => {
|
|
|
+ // if(res.status == 200){
|
|
|
+ // _this.toashMsg("扫码成功!")
|
|
|
+ // // 刷新列表
|
|
|
+ // _this.getDetail()
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // _this.barcode.start()
|
|
|
+ // },1000)
|
|
|
+ // }else{
|
|
|
+ // // clzConfirm({
|
|
|
+ // // title: '扫码失败',
|
|
|
+ // // content: res.message,
|
|
|
+ // // showCancel: false,
|
|
|
+ // // success: (ret) => {
|
|
|
+ // // _this.barcode.start()
|
|
|
+ // // }
|
|
|
+ // // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ const _this = this
|
|
|
+ // 初始化
|
|
|
+ this.barcode = plus.barcode.create('barcode', ['EAN13'], {
|
|
|
+ top:'0px',
|
|
|
+ left:'0px',
|
|
|
+ width: '100%',
|
|
|
+ height: '35%',
|
|
|
+ position: 'static',
|
|
|
+ frameColor: '#00aaff',
|
|
|
+ scanbarColor: '#00aaff'
|
|
|
+ })
|
|
|
+ // 设置高度
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.select('#barcode').boundingClientRect(data => {
|
|
|
+ this.barcode.setStyle({
|
|
|
+ height: data.height + 'px' // 调整扫码控件的位置
|
|
|
+ })
|
|
|
+ }).exec()
|
|
|
+
|
|
|
+ // 扫码成功后
|
|
|
+ this.barcode.onmarked = function(type, result) {
|
|
|
+ _this.scanResult(result)
|
|
|
+ }
|
|
|
+ // 扫码识别出错
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .scanCodePrint-wrap{
|
|
|
+ height: 100%;
|
|
|
+ .barCode{
|
|
|
+ background-color: #000;
|
|
|
+ height: 500upx;
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+ .info-body{
|
|
|
+ flex-flow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ height: 60%;
|
|
|
+ }
|
|
|
+ .redText{
|
|
|
+ color: #FB1E1E;
|
|
|
+ }
|
|
|
+ .orderTj{
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ > view{
|
|
|
+ text-align: center;
|
|
|
+ border-right: 2rpx solid #eee;
|
|
|
+ width: 50%;
|
|
|
+ color: #666E75;
|
|
|
+ .redText{
|
|
|
+ color: #FB1E1E;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ color: #666E75;
|
|
|
+ &:first-child{
|
|
|
+ font-size: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 10rpx 30upx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .infoList{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 2rpx solid #f2f2f2;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ > text{
|
|
|
+ &:first-child{
|
|
|
+ color: #666E75;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-list{
|
|
|
+ border-bottom: 2rpx solid #f2f2f2;
|
|
|
+ &:last-child{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ > view{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ &:first-child{
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-name{
|
|
|
+ word-wrap: break-word;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ .item-nums{
|
|
|
+ padding: 10rpx 0;
|
|
|
+ text{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-head{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #666;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ font-size: 28rpx;
|
|
|
+ text{
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-no{
|
|
|
+ font-size: 28rpx;
|
|
|
+ background: rgba(3, 54, 146, 0.15);
|
|
|
+ color: #033692;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ padding: 2rpx 30rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ padding: 20upx 40upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ uni-button{
|
|
|
+ &:after{
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ width: 90%;
|
|
|
+ color: #585858;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|