|  |  |  | 
|---|
|  |  |  | <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.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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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> | 
|---|