431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<template>
|
||
<view class="Box">
|
||
<view class="Box_item" v-show="qrodeshow == 0">
|
||
<view id="Box">
|
||
<view class="Box_item_content flex-colum">
|
||
<view class="Box_item_content_T flex-center" style="padding: 16rpx;">
|
||
<view style="width:242px; height:242px;"><canvas style="width:100%; height:100%;" id="qrcode"
|
||
ref="qrcode" canvas-id="qrcode"></canvas></view>
|
||
</view>
|
||
<view class="Box_item_content_f flex-center" @click="savealbum">保存二维码</view>
|
||
<view class="Box_item_content_fs flex-center">{{datares.string1}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="classvie" v-if="datares.tope != 0">
|
||
<view class="classvie_item flex-start">
|
||
<text class="classvie_itemone">发票金额：</text>
|
||
<text class="classvie_itemtow" style="color: #FF6565;">￥{{datares.price}}</text>
|
||
</view>
|
||
<view class="classvie_item flex-start">
|
||
<text class="classvie_itemone">发票名称：</text>
|
||
<text class="classvie_itemtow">{{datares.title}}</text>
|
||
</view>
|
||
<view class="classvie_item flex-start">
|
||
<text class="classvie_itemone">发票类型：</text>
|
||
<text class="classvie_itemtow">{{datares.type}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box_class" @click="box_class">
|
||
已完成
|
||
</view>
|
||
<view class="" v-show="qrodeshow == 1"></view>
|
||
<u-modal :show="modalshow.show" :showCancelButton="true" :title="modalshow.title"
|
||
:content="modalshow.content"></u-modal>
|
||
<u-popup :show="imgShow" @close="imgShow = false">
|
||
<view class="img-box">
|
||
<view class="tips">
|
||
<view class="close" @click="imgShow = false"><u-icon name="close" size="16" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<image :show-menu-by-longpress="true" class="img-box-img" :src="img" mode="widthFix"></image>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef H5
|
||
import dayjs from 'dayjs';
|
||
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 {
|
||
text: 'uQRCode',
|
||
qrodeshow: 0,
|
||
modalshow: {
|
||
show: false,
|
||
title: '温馨提示',
|
||
content: '微信支付认证未审核，该收款码，暂不支持微信支付'
|
||
},
|
||
userApp: uni.cache.get('userApp'),
|
||
size: 242,
|
||
data: {},
|
||
fowxAuditInfo: {},
|
||
imgShow: false,
|
||
img: '',
|
||
datares:{
|
||
tope:''
|
||
}
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
console.log(e)
|
||
if(e.tope == 0){
|
||
this.datares = e
|
||
this.datares.tope = 0
|
||
}else{
|
||
this.datares = e
|
||
}
|
||
},
|
||
onReady() {
|
||
this.merchantStoreshowMerchantStoreReceipt();
|
||
},
|
||
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();
|
||
},
|
||
savealbum(e) {
|
||
// #ifdef APP
|
||
uni.showLoading({
|
||
//加载框
|
||
title: '保存中...',
|
||
mask: true
|
||
});
|
||
uni.canvasToTempFilePath({
|
||
canvasId: "qrcode",
|
||
complete(res) {
|
||
// 在 app 中， 图片地址直接返回的值 临时地址 png 或 jpg，直接使用uni的方法
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success() {
|
||
uni.showToast({
|
||
title: "保存成功",
|
||
icon: "success"
|
||
});
|
||
},
|
||
fail() {
|
||
uni.showToast({
|
||
title: "保存失败",
|
||
icon: "error"
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
// let query = uni.createSelectorQuery().in(this);
|
||
// console.log(document.querySelector('#Box'));
|
||
// return;
|
||
if (this.img) {
|
||
this.imgShow = true;
|
||
} else {
|
||
uni.showLoading({
|
||
//加载框
|
||
title: '保存中...',
|
||
mask: true
|
||
});
|
||
html2canvas(document.querySelector('#Box'), {
|
||
backgroundColor: 'transparent',
|
||
useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
|
||
})
|
||
.then(canvas => {
|
||
uni.hideLoading();
|
||
// const dataURL = canvas.toDataURL('image/png');
|
||
const dataURL = canvas.toDataURL('image/png');
|
||
const creatDom = document.createElement('a');
|
||
document.body.appendChild(creatDom);
|
||
creatDom.href = dataURL;
|
||
console.log(creatDom.href)
|
||
creatDom.download = dayjs().valueOf();
|
||
creatDom.click();
|
||
// creatDom.remove(); // 下载之后把创建的元素删除
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
async merchantStoreshowMerchantStoreReceipt(lane) {
|
||
// 获取uQRCode实例
|
||
var qr = new uQRCode();
|
||
// 设置二维码内容
|
||
qr.data = this.datares.url;
|
||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||
qr.size = this.size;
|
||
// 调用制作二维码方法
|
||
qr.make();
|
||
// 获取canvas上下文
|
||
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
|
||
// 设置uQRCode实例的canvas上下文
|
||
qr.canvasContext = canvasContext;
|
||
// 调用绘制方法将二维码图案绘制到canvas上
|
||
qr.drawCanvas();
|
||
setTimeout(() => {
|
||
let info = uni.getSystemInfoSync();
|
||
if (info.deviceType == 'pc') {
|
||
this.print()
|
||
}
|
||
}, 1000)
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.img-box {
|
||
padding: 0 28upx 28upx;
|
||
|
||
.img-box-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 28upx 0;
|
||
font-size: 32upx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
position: relative;
|
||
|
||
.close {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
margin-top: -20upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Box {
|
||
.box_nav {
|
||
// background: #318afe;
|
||
padding: 100rpx 28rpx 0 28rpx;
|
||
|
||
.box_navT {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.box_navO {
|
||
font-size: 36rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
// background: #e5e5e5;
|
||
border-radius: 2rpx;
|
||
|
||
text {
|
||
padding: 8rpx 16rpx;
|
||
}
|
||
|
||
.box_navO_text_O {
|
||
color: #333333;
|
||
// background: #ffffff;
|
||
border-radius: 0 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Box_item {
|
||
padding: 28rpx;
|
||
|
||
.Box_item_content {
|
||
position: relative;
|
||
margin-top: 48rpx;
|
||
width: 100%;
|
||
background: #318AFE;
|
||
border-radius: 35rpx;
|
||
|
||
.Box_item_content_T {
|
||
margin-top: 62rpx;
|
||
background: #ffffff;
|
||
border-radius: 18rpx;
|
||
}
|
||
|
||
.Box_item_content_E {
|
||
margin-top: 24rpx;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
|
||
.Box_item_content_f {
|
||
margin-top: 32rpx;
|
||
width: 282rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(41, 112, 204, 0.99);
|
||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #318AFE;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.Box_item_content_fs {
|
||
margin-bottom: 36rpx;
|
||
margin-top: 30rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 0rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
|
||
.classvie {
|
||
padding: 16rpx 32rpx 32rpx 56rpx;
|
||
background: #fff;
|
||
border-radius: 0rpx 0rpx 12rpx 12rpx;
|
||
|
||
.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: #333333;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Box_item_content_botton_text {
|
||
margin-top: 48rpx;
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.Box_item_content_botton_bouut {
|
||
margin-top: 48rpx;
|
||
width: 100%;
|
||
|
||
view {
|
||
padding: 8rpx 0;
|
||
width: 558rpx;
|
||
background: #288efb;
|
||
border-radius: 50rpx;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.Box_item_content_botton_bouuts {
|
||
margin-top: 22rpx;
|
||
font-size: 36rpx;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.box_class {
|
||
margin: 100rpx 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;
|
||
}
|
||
}
|
||
</style> |