printTag.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view class="printTag">
  3. <view class="print-nums flex flex_column align_center justify_center">
  4. <view>打印数量</view>
  5. <view class="u-ninput">
  6. <u-number-box :min="1" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="100"></u-number-box>
  7. </view>
  8. </view>
  9. <view class="shelf-info">
  10. <view class="shelf-info-title">
  11. <view>西安车领主常青二路数字货架</view>
  12. <view><text class="pno">A02</text></view>
  13. </view>
  14. <view>产品编码:JO-21026E</view>
  15. <view>产品名称:箭牌机油滤清器 10款进口大众途锐...</view>
  16. <view>库存数量:3</view>
  17. </view>
  18. <view class="buttons flex align_center justify_center">
  19. <view v-if="fromPage == 'bdtq'"><u-button @click="cansel" shape="circle" plain>返回列表</u-button></view>
  20. <view v-if="fromPage == 'smdy'"><u-button @click="cansel" shape="circle" plain>重新扫描</u-button></view>
  21. <view>
  22. <kk-printer ref="kkprinter" @startPrint="startPrint"></kk-printer>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import kkPrinter from '@/components/kk-printer/index.vue';
  29. export default {
  30. components:{
  31. kkPrinter
  32. },
  33. data() {
  34. return {
  35. part: null,
  36. fromPage: '',
  37. printInfo: null
  38. }
  39. },
  40. onLoad(opts) {
  41. this.fromPage = opts.from
  42. this.printInfo = {
  43. dealerName: '剪冠汽配西安长ab路店123汽配西安长青二路',
  44. shelfName: '西安车领主常青二路数字货架',
  45. productCode: 'JO-21026E',
  46. productName: '箭牌机油滤清器 10款进口大众途锐...',
  47. shelfPlaceCode: 'A01',
  48. currentInven: 3,
  49. printDate: '2021-12-21 15:30',
  50. printUser: '张三',
  51. barCode: 'dealerSn=1033242&shelfSn=342326735950757888&productCode=RPF2340&shelfPlaceCode=A01&shelfPlaceSn=123213'
  52. }
  53. console.log(this.printInfo.shelfName.length,'=====')
  54. },
  55. onUnload() {
  56. this.$refs.kkprinter.closeConnect()
  57. },
  58. methods: {
  59. cansel(){
  60. uni.navigateBack()
  61. },
  62. textFormat(command,text,maxFontNums,left,top,lightHeight){
  63. const textLen = text.length
  64. console.log(textLen,maxFontNums)
  65. if(textLen > maxFontNums){
  66. const rows = Math.ceil(textLen/maxFontNums)
  67. for(let i=0;i<rows;i++){
  68. top = top+i*lightHeight
  69. console.log(top)
  70. // 最后一行
  71. if(i==rows-1){
  72. const ltxt = text.substring(i*maxFontNums)
  73. const ltlen = ltxt.length
  74. command.setText(left+((maxFontNums-ltlen)/2)*lightHeight, top, "TSS24.BF2", 1, 1, ltxt)
  75. }else{
  76. command.setText(left, top, "TSS24.BF2", 1, 1, text.substring(i*maxFontNums,maxFontNums))
  77. }
  78. }
  79. }else{
  80. command.setText(left+((maxFontNums-textLen)/2)*lightHeight, top, "TSS24.BF2", 1, 1, text)
  81. }
  82. return top
  83. },
  84. // 打印
  85. startPrint(opt,tsc,blesdk){
  86. console.log(opt,'opt')
  87. let top = 10 // 距离顶部10点像素
  88. const left = 10 // 距离左边10点
  89. const lightHeight = 24 // 行高3mm,1mm = 8点
  90. const pageW = 40 // 页签宽度mm
  91. const pageH = 30 // 页签高度mm
  92. const maxFontNums = Math.floor((pageW*8-left*2)/lightHeight) // 每行最多字体数
  93. // 初始化打印机
  94. const command = tsc.jpPrinter.createNew()
  95. command.init()
  96. command.setSize(pageW, pageH) // 标签纸张宽高,单位mm
  97. command.setGap(2) // 标签上下间距,单位mm
  98. command.setCls() // 清除缓冲区数据
  99. // 经销商文字高度,是否换行
  100. top = this.textFormat(command,this.printInfo.dealerName,maxFontNums,left,top,lightHeight)
  101. // 数字货架名称文字
  102. top = top+lightHeight
  103. top = this.textFormat(command,this.printInfo.shelfName,Math.floor(maxFontNums*0.6),left,top,lightHeight)
  104. // 产品编码
  105. top = top+lightHeight+15
  106. command.setText(left, top, "TSS24.BF2", 1, 1, this.printInfo.productCode)
  107. // 产品名称
  108. top = top+lightHeight
  109. this.textFormat(command,this.printInfo.productName,Math.floor(maxFontNums*0.6),left,top,lightHeight)
  110. // command.setQR(50, 50, "L", 5, "A", "https://www.baidu.com")
  111. // command.setBox(5, 5, 795, 595, 1)
  112. command.setPagePrint(1,1) // 打印分数1,每个标签重发打印2次
  113. console.log("开始打印了",command.getData())
  114. blesdk.senBlData(opt.deviceId, opt.serviceId, opt.writeId, command.getData(), this.onPrintSuccess);
  115. },
  116. // 打印成功
  117. onPrintSuccess(){
  118. // uni.navigateBack()
  119. this.$refs.kkprinter.onPrintSuccess()
  120. }
  121. }
  122. }
  123. </script>
  124. <style lang="less">
  125. .printTag{
  126. background-color: #fff;
  127. width: 100vh;
  128. padding: 50rpx 30rpx;
  129. .print-nums{
  130. padding: 50rpx 30rpx;
  131. color: #999;
  132. font-size: 32rpx;
  133. > view{
  134. padding: 20rpx 0;
  135. }
  136. .u-ninput{
  137. border: 2rpx solid #eee;
  138. border-radius: 50rpx;
  139. padding: 0 12rpx;
  140. }
  141. /deep/ .u-icon-disabled{
  142. background: #fff!important;
  143. }
  144. /deep/ .u-number-input{
  145. margin: 0 2rpx;
  146. border: 2rpx solid #eee;
  147. border-top: 0;
  148. border-bottom: 0;
  149. }
  150. /deep/ .u-icon-plus, /deep/ .u-icon-minus{
  151. border-radius: 50rpx;
  152. }
  153. }
  154. .shelf-info{
  155. background-color: #f8f8f8;
  156. padding: 30rpx;
  157. border-radius: 12rpx;
  158. color: #707070;
  159. .shelf-info-title{
  160. font-size: 32rpx;
  161. color: #222222;
  162. display: flex;
  163. justify-content: space-between;
  164. margin-bottom: 10rpx;
  165. .pno{
  166. background: rgba(3, 54, 146, 0.15);
  167. border-radius: 100rpx;
  168. padding: 6rpx 20rpx;
  169. color: #033692;
  170. font-size: 24rpx;
  171. }
  172. }
  173. }
  174. .buttons{
  175. padding: 50rpx 0;
  176. > view{
  177. width: 36%;
  178. margin: 0 2%;
  179. }
  180. }
  181. }
  182. </style>