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

H5

Browse Source
This commit is contained in:
魏啾
2024-04-30 18:07:59 +08:00
parent b72c4d7af1
commit 56863dd624
1369 changed files with 156460 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
pages/index/wxinvoicing.vue Normal file
View File

@@ -0,0 +1,391 @@
<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">
<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
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: ''
};
},
onLoad(e) {
console.log(e)
this.datares = e
},
onReady() {
this.merchantStoreshowMerchantStoreReceipt();
},
computed: {},
methods: {
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');
// this.imgShow = true;
// this.img = dataURL;
// console.log(this.img)
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();
// 设置二维码内容
console.log(lane)
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();
},
requestlang() {
uni.request({
url: uni.conf.baseUrl + 'wap/merchant/authPay',
// url:'http://192.168.1.117:8084/wap/merchant/authPay',
data: {
//参数
userAppId: 2,
channel: 1,
qrNo: 1,
view: 1
},
header: {
'user-agent': 'micromessenger' //自定义请求头信息
},
method: 'GET', //请求方式，必须为大写
success: res => {
console.log('接口返回------', res);
}
});
},
}
};
</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>