scanCodePrint.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <view class="scanCodePrint-wrap">
  3. <view class="barCode" id="barcode"></view>
  4. <view class="info-body">
  5. <view class="info partList">
  6. <!-- 补货产品 -->
  7. <partList :list="partList" title="补货产品" model="view" fromPage="scanCodePrint" ref="partList" noDataText="暂无产品"></partList>
  8. </view>
  9. </view>
  10. <!-- 确认弹框 -->
  11. <common-modal v-if="confirmModal" :openModal="confirmModal" title="扫码失败" content="抱歉,该产品不是此补货单的产品请更换产品重新扫描?" confirmText="好的" :isCancel="false" @confirm="modalConfirm" @close="confirmModal=false" />
  12. </view>
  13. </template>
  14. <script>
  15. import partList from '@/pages/common/partList.vue'
  16. import commonModal from '@/pages/common/commonModal.vue'
  17. import { shelfReplenishDetailList, shelfReplenishQrCode, shelfReplenishDetailOutScan } from '@/api/shelfReplenish'
  18. export default {
  19. components: { partList, commonModal },
  20. data() {
  21. return {
  22. barcode:null,
  23. replenishBillSn: null,
  24. partList: [],
  25. confirmModal: false
  26. }
  27. },
  28. onReady() {
  29. // 初始化摄像头
  30. this.init()
  31. },
  32. onLoad(options) {
  33. this.replenishBillSn = options.sn
  34. this.getPartList()
  35. // 监听整改完成后刷新事件
  36. uni.$on('refreshBL', this.modalConfirm)
  37. },
  38. onUnload() {
  39. uni.$off('refreshBL')
  40. },
  41. methods: {
  42. // 查询列表
  43. getPartList(){
  44. const _this = this
  45. shelfReplenishDetailList({ replenishBillSn: this.replenishBillSn }).then(res => {
  46. if(res.status == 200 && res.data){
  47. res.data.map(item =>{
  48. item.confirmQty = item.confirmQty ? Number(item.confirmQty) : 0
  49. })
  50. this.partList = res.data || []
  51. }else{
  52. this.partList = []
  53. }
  54. })
  55. },
  56. // 扫码结果
  57. scanResult(qrCode){
  58. const _this = this
  59. uni.showLoading({
  60. title: "正在查询产品信息"
  61. })
  62. console.log({
  63. productQrCode: qrCode,
  64. replenishBillSn: this.replenishBillSn
  65. })
  66. shelfReplenishQrCode({
  67. productQrCode: qrCode,
  68. replenishBillSn: this.replenishBillSn
  69. }).then(res => {
  70. console.log(res)
  71. if(res.status == 200){
  72. let params = {
  73. shelfName: res.data&&res.data[0]&&res.data[0].shelf&&res.data[0].shelf.shelfName,
  74. productName: res.data&&res.data[0]&&res.data[0].product&&res.data[0].product.name,
  75. productCode: res.data&&res.data[0]&&res.data[0].product&&res.data[0].product.code,
  76. productSn: res.data&&res.data[0]&&res.data[0].product&&res.data[0].product.productSn,
  77. confirmQty: res.data&&res.data[0]&&res.data[0].confirmQty,
  78. shelfSn: res.data&&res.data[0]&&res.data[0].shelfSn,
  79. replenishBillDetailSn: res.data&&res.data[0]&&res.data[0].replenishBillDetailSn,
  80. shelfPlaceCode: res.data&&res.data[0]&&res.data[0].shelfPlaceCode,
  81. shelfPlaceSn: res.data&&res.data[0]&&res.data[0].shelfPlaceSn
  82. }
  83. uni.navigateTo({ url: "/pages/common/printTag/printTag?page=smdy&data="+JSON.stringify(params) })
  84. }else{
  85. this.confirmModal = true
  86. }
  87. uni.hideLoading()
  88. })
  89. },
  90. modalConfirm(){
  91. this.confirmModal = false
  92. this.barcode.start()
  93. },
  94. init(){
  95. const _this = this
  96. // 初始化
  97. this.barcode = plus.barcode.create('barcode', [], {
  98. top:'0px',
  99. left:'0px',
  100. width: '100%',
  101. height: '28%',
  102. position: 'static',
  103. frameColor: '#00aaff',
  104. scanbarColor: '#00aaff'
  105. })
  106. // 设置高度
  107. const query = uni.createSelectorQuery().in(this);
  108. query.select('#barcode').boundingClientRect(data => {
  109. this.barcode.setStyle({
  110. height: data.height + 'px' // 调整扫码控件的位置
  111. })
  112. }).exec()
  113. // 扫码成功后
  114. this.barcode.onmarked = function(type, result) {
  115. _this.scanResult(result)
  116. }
  117. // 扫码识别出错
  118. this.barcode.onerror = function(error){
  119. console.log(error)
  120. _this.toashMsg("条形码错误!")
  121. _this.barcode.start()
  122. }
  123. const currentWebview = this.$mp.page.$getAppWebview()
  124. currentWebview.append(this.barcode)
  125. this.barcode.start()
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="less">
  131. page{
  132. height: 100vh;
  133. }
  134. .scanCodePrint-wrap{
  135. width: 100%;
  136. height: 100%;
  137. .barCode{
  138. height: 28%;
  139. }
  140. .info-body{
  141. flex-flow: 1;
  142. overflow: auto;
  143. height: 72%;
  144. }
  145. .info{
  146. background-color: #FFFFFF;
  147. padding: 10rpx 30upx;
  148. font-size: 32rpx;
  149. margin-top: 20rpx;
  150. }
  151. }
  152. </style>