#

whycq

2024-05-20 5ac8e5d92ca3b8e70744bfc9316817bd182e6c7e

 pages/print/print.vue

@@ -1,58 +1,174 @@
<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.maktx}}</td>
               </tr>
               <tr>
                  <td>日期</td>
                  <td colspan="2">{{time}}</td>
               </tr>
            </table>
         </view>
      </view>
      <view>
         <button @click="toPrint">打印</button>
      </view>
   </view>
</template>

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

            style: {
               height: '3px'
            },
            mat: {
               matnr: '1200128-10055',
               maktx: 'X5S-4-M03/333'
            },
            qrShow: false,
            time: ''
         }
      },
      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.getDate()

      },
      onLoad(opt) {
         let that = this
         const eventChannel = this.getOpenerEventChannel();
         eventChannel.on('data', function(data) {
            that.mat = data.data 
            that.qrFun(that.mat.matnr)
         })
			
      },
      methods: {
         connectBluetooth() {
         // 打印
         toPrint() {
            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();
                              }
                           })
                        }
                     }
            uni.navigateTo({
               url: "../print/printUNI",
               success: function(res) {
                  // 通过eventChannel向被打开页面传送数据   向另外一个页面传递值的
                  res.eventChannel.emit('data1', {
                     data: that.mat,
                     time: that.time
                  })
               },
            })
            // 监听蓝牙设备列表
               events: {
                  // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据  另外一个页面传过来的
                  acceptDataFromOpenedPage: function(data) {
                     that.matnr = data.data
                  },
               },
            
				
            });
         },

         //**生成二维码**//
         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 => {}
            })
         },
         // 日历
         getDate() {
            var dt = new Date();
            var year,month,day,hours,minutes,seconds,weeks
            year = dt.getFullYear();
            month = (dt.getMonth()+1) < 10 ? '0'+ (dt.getMonth()+1) : (dt.getMonth()+1);
            day = dt.getDate() < 10 ? '0'+dt.getDate() : dt.getDate();
            hours = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours();
            minutes = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes();
            seconds = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds(); 
            weeks = dt.getDay(); 
            switch (weeks) {
               case 0: weeks = "星期日"; break;
               case 1: weeks = "星期一"; break;
               case 2: weeks = "星期二"; break;
               case 3: weeks = "星期三"; break;
               case 4: weeks = "星期四"; break;
               case 5: weeks = "星期五"; break;
               default : weeks = "星期六";
            }
            this.time = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " "
         },
      }
   }
</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>