#

whycq

2023-05-06 1a82b901e82456f76e60b9aed066f72b00e55eb2

 pages/print/print.vue

@@ -1,58 +1,117 @@
<template>
   <view>
      <button @click="connectBluetooth">connect</button>
      <view class="print-model" :style="style">
         <view class="display" :style="">
            <table>
               <tr>
                  <td>料号</td>
                  <td>{{mat.matnr}}</td>
                  <td colspan="1" rowspan="2" style="width: 150px;">
                     <!-- 二维码 -->
                     <view class="qr-box">
                        <canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;" />
                     </view>
                  </td>
               </tr>
               <tr>
                  <td>商品</td>
                  <td colspan="1">{{mat.matkx}}</td>
               </tr>
               <tr>
                  <td>日期</td>
                  <td colspan="2">2023-04-24 15:25:32</td>
               </tr>
            </table>
         </view>
      </view>
   </view>
</template>

<script>
   import uQRCode from '@/static/js/uqrcode.js' //引入uqrcode.js
   export default {
      data() {
         return {

            style: {
               height: '3px'
            },
            mat: {
               matnr: '1200128-10055',
               matkx: 'X5S-4-M03/333'
            },
            qrShow: false
         }
      },
      methods: {
         connectBluetooth() {
            let that = this
            uni.openBluetoothAdapter({
               success(res) {
                  console.log(res)
                  uni.getBluetoothAdapterState({
                     success(res) {
                        console.log(res);
                        if (!res.discovering) {
                           uni.startBluetoothDevicesDiscovery({
                              success(res) {
                                 console.log(res);
                                 uni.onBluetoothDeviceFound(devices => {
                                    console.log('开始监听寻找到新设备的事件');
                                    // this.$set(this.disabled, 3, false);
                                    uni.getBluetoothDevices({
                                       success: res => {
                                          this.newDeviceLoad = false;
                                          console.log('获取蓝牙设备成功:' + res.errMsg);
                                          // console.log(JSON.stringify(res))
                                       },
                                    });
                                 });
                              },
                              fail(err) {
                                 console.log();
                              }
                           })
                        }
                     }
                  })
               },
            })
            // 监听蓝牙设备列表
				
         },
      onShow() {
         let getWindowInfo = uni.getWindowInfo()
         console.log(getWindowInfo.screenHeight); //屏幕高度
         console.log(getWindowInfo.screenWidth); //屏幕宽度
         console.log(getWindowInfo.windowHeight); //可操作页面高度
         console.log(getWindowInfo.windowWidth); //可操作页面宽度
         console.log(getWindowInfo);
         console.log('获取窗口信息');
         let height = (getWindowInfo.screenWidth + 10) * 48 / 74
         console.log(height);
         this.style.height = height + 'px'
         this.qrFun("1200128-10055")

      },
      methods: {
         //**生成二维码**//
         qrFun(text) {
            this.qrShow = true
            uQRCode.make({
               canvasId: 'qrcode',
               componentInstance: this,
               text: text,
               size: 150,
               margin: 0,
               backgroundColor: '#ffffff',
               foregroundColor: '#000000',
               fileType: 'jpg',
               errorCorrectLevel: uQRCode.errorCorrectLevel.H,
               success: res => {}
            })
         }
      }
   }
</script>

<style>
   .print-model {
      width: 100%;
      /* background-color: #555555; */
      display: flex;
      align-items: center;
      justify-content: center;
   }

</style>
   .display {
      width: 96%;
      height: 96%;
      border-radius: 5px;
      background-color: #FFF;
      box-shadow: #bdbdbd;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .display-pak {
      margin: 2%;
      height: 92%;
      border: 1px solid #8a8a8a;
   }

   table {
      width: 92%;
      height: 92%;
      border: 0;
      border-collapse: collapse;
   }

   td {
      border: 1px solid #8a8a8a;
      text-align: center;
   }
</style>