314 lines
8.3 KiB
Vue
314 lines
8.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- <view class="content_boxtop flex-between">
|
||
<view class="content_boxtopone">
|
||
{{datalsit.type}}
|
||
</view>
|
||
|
||
</view> -->
|
||
<view class="content_boxt_tow" id="printSection" ref="print">
|
||
<view class="content_boxt_towtext">
|
||
扫码绑定公众号，将会收到通知
|
||
</view>
|
||
<view class="content_boxt_towrelative" style="242px;height: 242px;">
|
||
<canvas id="qrcode" style="242px;height: 242px;" ref="qrcode" canvas-id="qrcode"></canvas>
|
||
<!-- <image class="content_boxt_towabsolute" src="@/static/icons.png" mode=""></image> -->
|
||
</view>
|
||
<view class="" id="viewtext" ref="viewtext">
|
||
<div style="width: 100%;font-size: 12px; ">
|
||
销售方名称:任公司任公司任公司任公司任公司任公司任公司任公司任公司
|
||
</div>
|
||
<!-- <div style="width: 100%;font-size: 12px; margin-top: 10rpx;">
|
||
企业联系电话:18092145635
|
||
</div> -->
|
||
<div style="width: 100%;font-size: 12px; margin-top: 10rpx;">
|
||
开票金额:1135.42
|
||
</div>
|
||
<!-- <div style="width: 100%;font-size: 12px;margin-top: 10rpx;">
|
||
订单号:1775391602999693313
|
||
</div> -->
|
||
<div style="width: 100%;font-size: 12px;margin-top: 10rpx;">
|
||
生成时间:2024-04-03 13:15:17
|
||
</div>
|
||
<div style="width: 100%;font-size: 12px;margin-top: 10rpx;">
|
||
二维码有效期:30天
|
||
</div>
|
||
</view>
|
||
<button @click="print">打印</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import getLodop from '@/common/js/LodopFuncs.js'
|
||
import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; // npm install uqrcodejs
|
||
export default {
|
||
data() {
|
||
return {
|
||
text: 'uQRCode',
|
||
size: 242,
|
||
datalsit: {},
|
||
ID: '',
|
||
resurl: ''
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.ID = e.id
|
||
this.status = e.status
|
||
|
||
},
|
||
onReady() {
|
||
setTimeout(() => {
|
||
uni.$u.debounce(this.storeinvoicelist(), 500)
|
||
}, 500)
|
||
},
|
||
methods: {
|
||
print() {
|
||
let LODOP = getLodop();
|
||
console.log(LODOP)
|
||
if (LODOP == null) {
|
||
alert('请先安装打印控件')
|
||
return;
|
||
}
|
||
LODOP.PRINT_INIT('')
|
||
// 设置打印纸大小
|
||
LODOP.SET_PRINT_PAGESIZE(1, 800, '50px', "");
|
||
// LODOP.SET_PRINT_PAGESIZE(1, 800, '300px', "");
|
||
|
||
// // 二维码控制大小
|
||
// LODOP.ADD_PRINT_BARCODE('', '30px', '150px', '150px', "QRCode", 'https://www.baidu.com'); //打印产品代码条码
|
||
// LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width "); //设置打印风格，这里是等宽打印
|
||
// LODOP.SET_PRINTER_INDEX("GP-58MB Series"); //设置默认打印机(这里用的是打印机名称)
|
||
|
||
// // 文字内容
|
||
// var strHTML = document.getElementById('viewtext')
|
||
// console.log(strHTML.innerHTML)
|
||
// LODOP.ADD_PRINT_HTM('150px', '5px', "100%", "100%",
|
||
// `<div style="width: 100%;font-size: 12px; ">销售方名称:${this.ID}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">开票金额:${this.ID}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">生成时间:${this.ID}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">生成时间:${this.ID}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">二维码有效期:30天</div><div style="width: 100%;font-size: 14px; margin-top: 15px;">您可以使用微信，扫码开票</div>`
|
||
// );
|
||
LODOP.SET_LICENSES("","DCFF409304DFCEB3E2C644BF96CD0720","","");
|
||
// LODOP.PREVIEW(); //带预览的打印
|
||
LODOP.PRINT()
|
||
|
||
|
||
},
|
||
storeinvoicelist() {
|
||
uni.request({
|
||
url: uni.conf.baseUrl + 'store/bindinginvopush',
|
||
data: {
|
||
//参数
|
||
store_id: uni.getStorageSync('userId')
|
||
},
|
||
method: 'POST', //请求方式，必须为大写
|
||
success: res => {
|
||
this.datalsit = res.data.data.qrcode;
|
||
// 获取uQRCode实例
|
||
var qr = new uQRCode();
|
||
// 设置二维码内容
|
||
qr.data = res.data.data.qrcode;
|
||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||
qr.size = this.size;
|
||
// 调用制作二维码方法
|
||
qr.make();
|
||
// 获取canvas上下文
|
||
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
|
||
// 设置uQRCode实例的canvas上下文
|
||
qr.canvasContext = canvasContext;
|
||
// 调用绘制方法将二维码图案绘制到canvas上
|
||
qr.drawCanvas();
|
||
}
|
||
});
|
||
},
|
||
savealbum(e) {
|
||
uni.pro.navigateBack();
|
||
},
|
||
// savealbum(e) {
|
||
// // #ifdef APP
|
||
// uni.showLoading({
|
||
// //加载框
|
||
// title: '保存中...',
|
||
// mask: true
|
||
// });
|
||
// var pages = getCurrentPages();
|
||
// var page = pages[pages.length - 1];
|
||
// console.log('当前页' + pages.length - 1);
|
||
// var bitmap = null;
|
||
// var currentWebview = page.$getAppWebview();
|
||
// bitmap = new plus.nativeObj.Bitmap('amway_img');
|
||
// // 将webview内容绘制到Bitmap对象中
|
||
// currentWebview.draw(
|
||
// bitmap,
|
||
// function() {
|
||
// console.log('截屏绘制图片成功');
|
||
// bitmap.save(
|
||
// '_doc/a.jpg', {},
|
||
// function(i) {
|
||
// console.log('保存图片成功：' + JSON.stringify(i));
|
||
// uni.saveImageToPhotosAlbum({
|
||
// filePath: i.target,
|
||
// success: function() {
|
||
// bitmap.clear(); //销毁Bitmap图片
|
||
// uni.showToast({
|
||
// title: '保存图片成功',
|
||
// mask: false,
|
||
// duration: 1500
|
||
// });
|
||
// uni.hideLoading();
|
||
// }
|
||
// });
|
||
// },
|
||
// function(e) {
|
||
// console.log('保存图片失败：' + JSON.stringify(e));
|
||
// }
|
||
// );
|
||
// },
|
||
// function(e) {
|
||
// console.log('截屏绘制图片失败：' + JSON.stringify(e));
|
||
// }
|
||
// );
|
||
// // #endif
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style media="print">
|
||
@page {
|
||
size: 56mm 60mm;
|
||
/* 宽度50mm, 高度100mm */
|
||
margin: 0;
|
||
}
|
||
|
||
@media print {
|
||
|
||
body {
|
||
width: 50px;
|
||
/* 小票宽度 */
|
||
height: 60mm;
|
||
/* 小票宽度 */
|
||
border: 1px solid #999;
|
||
}
|
||
|
||
#printSection {
|
||
width: 60mm;
|
||
/* 小票宽度 */
|
||
height: 60mm;
|
||
/* 小票高度 */
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.content {
|
||
padding: 32rpx 28rpx;
|
||
|
||
.content_boxtop {
|
||
padding: 22rpx 16rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
||
.content_boxtopone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.content_boxtoptow {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.content_boxt_one {
|
||
margin-top: 32rpx;
|
||
padding: 32rpx;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
background: #FFFFFF;
|
||
|
||
.content_boxt_oneone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FF6565;
|
||
}
|
||
|
||
.classvie_item {
|
||
margin-top: 16rpx;
|
||
|
||
.classvie_itemone {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.classvie_itemtow {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_boxt_tow {
|
||
margin: 32rpx 0;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
padding-bottom: 50rpx;
|
||
|
||
.content_boxt_towtext {
|
||
padding-top: 32rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.content_boxt_towtexts {
|
||
margin: 50rpx auto 0 auto;
|
||
width: 558rpx;
|
||
height: 84rpx;
|
||
background: #288EFB;
|
||
border-radius: 50rpx 50rpx 50rpx 50rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
|
||
}
|
||
|
||
.content_boxt_towrelative {
|
||
position: relative;
|
||
width: 242px;
|
||
height: 242px;
|
||
margin: 32rpx auto;
|
||
|
||
.content_boxt_towabsolute {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-top: -50rpx;
|
||
margin-left: -50rpx;
|
||
border-radius: 16rpx;
|
||
// transform: translate(-50% -50%);
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |