czg_team/Hfive
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加打印机

Browse Source
This commit is contained in:
魏啾
2024-05-14 14:18:49 +08:00
parent 7c568a8383
commit ea34ec97fc
6 changed files with 380 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
pages/index/index.vue
View File

@@ -1,24 +1,29 @@
<template>
<view class="Box flex-between">
<view class="content flex-colum" @click="indexInvoicing" v-if="improveinformation">
<image src="@/static/item3.png" mode="aspectFill"></image>
<text>极速开票</text>
<view class="content">
<view class="Box flex-between">
<view class="content flex-colum" @click="indexInvoicing" v-if="improveinformation">
<image src="@/static/item3.png" mode="aspectFill"></image>
<text>极速开票</text>
</view>
<view class="content flex-colum" @click="webview" v-if="improveinformation">
<image src="@/static/item2.png" mode="aspectFill"></image>
<text>后台管理</text>
</view>
<view class="content flex-colum" @click="indexorder" v-if="improveinformation">
<image src="@/static/item1.png" mode="aspectFill"></image>
<text>开票记录</text>
</view>
<view class="content flex-colum" @click="notification" v-if="improveinformation">
<image src="@/static/item6.png" mode="aspectFill"></image>
<text>绑定通知</text>
</view>
<view class="content flex-colum" @click="drawer" v-if="improveinformation">
<image src="@/static/item5.png" mode="aspectFill"></image>
<text>新增开票员</text>
</view>
</view>
<view class="content flex-colum" @click="webview" v-if="improveinformation">
<image src="@/static/item2.png" mode="aspectFill"></image>
<text>后台管理</text>
</view>
<view class="content flex-colum" @click="indexorder" v-if="improveinformation">
<image src="@/static/item1.png" mode="aspectFill"></image>
<text>开票记录</text>
</view>
<view class="content flex-colum" @click="notification" v-if="improveinformation">
<image src="@/static/item6.png" mode="aspectFill"></image>
<text>绑定通知</text>
</view>
<view class="content flex-colum" @click="drawer" v-if="improveinformation">
<image src="@/static/item5.png" mode="aspectFill"></image>
<text>新增开票员</text>
<view class="setClipboardDataclass" @click="setClipboardData" v-if="infos.deviceType != 'pc'">
网页版地址:https://h5-invoice.sxczgkj.cn
</view>
</view>
</template>
@@ -30,7 +35,8 @@
improveinformation: false,
improveinformationlist: {},
onLoaduserId: '',
onLoadtype: ''
onLoadtype: '',
infos:uni.getSystemInfoSync()
};
},
async onLoad(e) {
@@ -42,7 +48,7 @@
let res = await this.api.storestorestatus({
store_id: uni.cache.get('userId')
})
if(res.code == 1){
if (res.code == 1) {
this.improveinformationform = res.data.store
uni.cache.set('form', this.improveinformationform);
// uni.cache.set('userId', this.improveinformationform.id);
@@ -79,7 +85,13 @@
},
onShow() {},
methods: {
drawer(){
setClipboardData() {
uni.setClipboardData({
data: 'https://h5-invoice.sxczgkj.cn/?userId=' + uni.cache.get('userId'),
success: function() {}
});
},
drawer() {
uni.pro.navigateTo('index/drawer');
},
merchant() {
@@ -133,34 +145,45 @@
background: #F9F9F9;
}
.Box {
padding: 0rpx 28rpx;
.content {
.setClipboardDataclass{
width: 100%;
text-align: center;
margin-top: 90rpx;
color: #2f87fd;
font-weight: bold;
font-size: 28rpx;
}
.Box {
padding: 0rpx 28rpx;
.content {
margin-top: 32rpx;
width: 218rpx;
height: 218rpx;
background: #FFFFFF;
.content {
margin-top: 32rpx;
width: 30%;
height: 218rpx;
background: #FFFFFF;
image {
width: 60rpx;
height: 60rpx;
image {
width: 60rpx;
height: 60rpx;
}
text {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
text {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
}
.Box::after {
content: '';
width: 218rpx;
display: inline-block;
.Box::after {
content: '';
width: 30%;
display: inline-block;
}
}
</style>

64
pages/index/notificationdd.vue
View File

@@ -12,7 +12,27 @@
</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>
<!-- <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>
@@ -20,6 +40,7 @@
</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() {
@@ -43,21 +64,33 @@
},
methods: {
print() {
// const receipt = document.getElementById('receipt');
// const printWindow = window.open('', '_blank');
// printWindow.document.write(receipt.innerHTML);
// printWindow.document.close();
// printWindow.focus();
// printWindow.print();
// printWindow.close();
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()
window.print({
mediaType: 'print',
orientation: 'portrait',
pageSize: '50mm',
printBackground: true,
scale: 0.5
});
},
storeinvoicelist() {
uni.request({
@@ -69,7 +102,6 @@
method: 'POST', //请求方式，必须为大写
success: res => {
this.datalsit = res.data.data.qrcode;
console.log(this.datalsit)
// 获取uQRCode实例
var qr = new uQRCode();
// 设置二维码内容

57
pages/index/wxinvoicing.vue
View File

@@ -50,6 +50,7 @@
import html2canvas from 'html2canvas';
// #endif
import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; // npm install uqrcodejs
import getLodop from '@/common/js/LodopFuncs.js'
export default {
data() {
return {
@@ -77,6 +78,55 @@
},
computed: {},
methods: {
print() {
var date = new Date();
var year = date.getFullYear(); //月份从0~11，所以加一
let month = date.getMonth();
var dateArr = [
date.getMonth() + 1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
//如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
for (var i = 0; i < dateArr.length; i++) {
if (dateArr[i] >= 1 && dateArr[i] <= 9) {
dateArr[i] = "0" + dateArr[i];
}
}
var strDate =
year +
"-" +
dateArr[0] +
"-" +
dateArr[1] +
" " +
dateArr[2] +
":" +
dateArr[3] +
":" +
dateArr[4];
let LODOP = getLodop();
if (LODOP == null) {
alert('请先安装打印控件')
return;
}
LODOP.PRINT_INIT('')
// 设置打印纸大小
LODOP.SET_PRINT_PAGESIZE(1, 800, '300px', "");
// 二维码控制大小
LODOP.ADD_PRINT_BARCODE('', '30px', '150px', '150px', "QRCode", this.datares.url); //打印产品代码条码
LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width "); //设置打印风格，这里是等宽打印
LODOP.SET_PRINTER_INDEX("GP-58MB Series"); //设置默认打印机(这里用的是打印机名称)
// 文字内容
LODOP.ADD_PRINT_HTM('150px', '5px', "100%", "100%",
`<div style="width: 100%;font-size: 12px; ">销售方名称:${this.datares.title}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">开票金额:${this.datares.price}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">生成时间:${strDate}</div><div style="width: 100%;font-size: 12px; margin-top:6px;">${this.datares.string1}</div><div style="width: 100%;font-size: 14px; margin-top: 15px;">您可以使用微信，扫码开票</div>`
);
LODOP.SET_LICENSES("", "DCFF409304DFCEB3E2C644BF96CD0720", "", "");
// LODOP.PREVIEW(); //带预览的打印
LODOP.PRINT()
},
box_class() {
uni.navigateBack();
},
@@ -148,7 +198,6 @@
// 获取uQRCode实例
var qr = new uQRCode();
// 设置二维码内容
console.log(lane)
qr.data = this.datares.url;
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = this.size;
@@ -160,6 +209,12 @@
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
setTimeout(() => {
let info = uni.getSystemInfoSync();
if (info.deviceType == 'pc') {
this.print()
}
}, 1000)
},
requestlang() {
uni.request({