扫码或复制链接至浏览器下载

This commit is contained in:
wwz
2024-12-24 17:41:28 +08:00
parent 82d4aa5f6c
commit 6e174be3b2
4 changed files with 273 additions and 59 deletions

View File

@@ -159,17 +159,36 @@
</view>
</view>
</u-popup>
<u-popup :show="qrcodeshow" @close="qrcodeshow = !qrcodeshow" :round="10" mode="center">
<view class="qrcodeclass">
<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="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/static/icons.png" mode=""></image>
</view>
<view class="content_boxt_towtexts" @click="setClipboardData">
复制
</view>
</view>
</u-popup>
<u-datetime-picker :show="showpicker" mode="date" @cancel="showpicker = !showpicker"
@confirm="confirmpicker"></u-datetime-picker>
</view>
</template>
<script>
import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; // npm install uqrcodejs
export default {
data() {
return {
uqrCodeurl: '',
size: 242,
detailsshow: false, //详情
popupshow: false,
qrcodeshow: false,
showpicker: false, //选择时间
showpickerbox: false, //是否显示这个盒子
clickshowpicker: '',
@@ -224,33 +243,62 @@
this.detailsshow = true
}
},
// 下载
downloadFile(url) {
// uni.downloadFile({
// url: url, //仅为示例,并非真实的资源
// success: (res) => {
// if (res.statusCode === 200) {
// console.log('下载成功');
// }
// }
// });
uni.downloadFile({
url: url,
success: res => {
console.log(res)
if (res.statusCode === 200) {
// 预览pdf文件
uni.openDocument({
filePath: res.tempFilePath,
showMenu: true, // 右上角菜单可以进行分享保存pdf
success: function(file) {
console.log("文件打开成功", file)
}
})
}
// 复制
setClipboardData() {
uni.setClipboardData({
data: this.uqrCodeurl,
success: () => {
uni.showToast({
title: '复制成功'
})
this.qrcodeshow = false
}
})
},
// 下载
downloadFile(url) {
uni.showLoading({
title: '加载中',
mask: true
})
try {
this.uqrCodeurl = url
// 获取uQRCode实例
var qr = new uQRCode();
// 设置二维码内容
qr.data = url;
// 设置二维码大小必须与canvas设置的宽高一致
qr.size = this.size;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
this.qrcodeshow = true
} catch (error) {
//TODO handle the exceptio
}
uni.hideLoading()
// uni.downloadFile({
// url: url,
// success: res => {
// console.log(res)
// if (res.statusCode === 200) {
// // 预览pdf文件
// uni.openDocument({
// filePath: res.tempFilePath,
// showMenu: true, // 右上角菜单可以进行分享保存pdf
// success: function(file) {
// console.log("文件打开成功", file)
// }
// })
// }
// }
// })
},
clickdatastatuslist(item, index) {
this.datastatuslistshow = item.id
},
@@ -350,8 +398,7 @@
} else {
this.form.list = [...this.form.list, ...res.data]
}
if (res.data.length < 10) this.form.status = 'nomore';
else this.form.status = 'loadmore';
this.form.status = res.data.length < 10 ? 'nomore' : 'loadmore'
}, 500)
}
}
@@ -429,6 +476,62 @@
}
}
.qrcodeclass {
padding: 0 28rpx;
width: 100%;
padding: 0 28rpx;
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: 500;
font-size: 28rpx;
color: #333;
}
.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;
}
}
}
.popupshow {
padding: 0 28rpx;