#添加大屏订单绑定功能

skyouc

2025-01-11 b89f495ce0b028fc51456b9658a05572484a0f0a

 pages/print/print.vue

@@ -1,72 +1,174 @@
<template>
   <view>
      <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;"></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>
   export default {
      data() {
         return {
            style: {height:'3px'},
            mat: {matnr: '1200128-10055',matkx: 'X5S-4-M03/333'}
         }
      },
      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'
			
      }
   }
</script>

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

   <view>

      <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: {

         // 打印

         toPrint() {

            let that = this

            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;

   }



   .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>