店铺详情收款码下载处理，耗材报损增加
This commit is contained in:
GaoHao
@@ -3,10 +3,12 @@
|
||||
<view class="content">
|
||||
<view class="title">门店收款码</view>
|
||||
<view ref="qrcode" class="qrcode">
|
||||
<up-qrcode :size="vdata.size" @result="result" :val="vdata.paymentQrcode"></up-qrcode>
|
||||
<!-- <up-qrcode cid="123" :size="vdata.size" @result="result" :val="vdata.paymentQrcode"></up-qrcode> -->
|
||||
<!-- <canvas canvas-id="qrcodeCanvas" style="width: 200px; height: 200px;"></canvas> -->
|
||||
<image :src="vdata.paymentQrcodeUrl" style="width: 100%;height: 100%;" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="bom">
|
||||
<view @click="download">下载收款码</view>
|
||||
<view @click="saveImage">下载收款码</view>
|
||||
<view>下载收款码样式</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -18,18 +20,19 @@
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import ak from '@/commons/utils/ak.js';
|
||||
import { getShopList } from '@/http/yskApi/shop.js'
|
||||
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import qrCode from '@/commons/utils/qrCode.js'
|
||||
import { saveHeadImgFile } from '@/commons/utils/saveImg.js'
|
||||
const vdata = reactive({
|
||||
size: 0,
|
||||
size: 20,
|
||||
qrcodeUrl: null,
|
||||
paymentQrcode: null,
|
||||
paymentQrcodeUrl: "",
|
||||
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
vdata.paymentQrcode = options.paymentQrcode;
|
||||
|
||||
vdata.paymentQrcodeUrl = qrCode.drawImg(options.paymentQrcode)
|
||||
})
|
||||
|
||||
|
||||
@@ -38,106 +41,100 @@ onShow(() => {
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
|
||||
// 设置二维码大小
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.qrcode').boundingClientRect(data => {
|
||||
if (data) {
|
||||
vdata.size = data.width
|
||||
}
|
||||
}).exec();
|
||||
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* 二维码图片
|
||||
*/
|
||||
let result = (e) => {
|
||||
vdata.qrcodeUrl = e;
|
||||
console.log(vdata.qrcodeUrl)
|
||||
let blob = dataURLtoBlob()
|
||||
console.log(blob)
|
||||
}
|
||||
let dataURLtoBlob = (dataurl) => {
|
||||
var arr = vdata.qrcodeUrl.split(',')
|
||||
var mime = arr[0].match(/:(.*?);/)[1]
|
||||
var bstr = atob(arr[1])
|
||||
var n = bstr.length
|
||||
var u8arr = new Uint8Array(n)
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n)
|
||||
}
|
||||
return new Blob([u8arr], { type: mime })
|
||||
}
|
||||
let saveImageToPhotosAlbum = (imgSrc) => {
|
||||
let base64 = imgSrc.replace(/^data:image\/\w+;base64,/, ""); //图片替换
|
||||
let filePath = '123' + '/qrcode.png';
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
const saveImage = () => {
|
||||
// #ifdef APP-PLUS
|
||||
saveQrcodeImg()
|
||||
uni.downloadFile({
|
||||
url: vdata.paymentQrcodeUrl,
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(res)
|
||||
if (res.statusCode == 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: (r) => {
|
||||
infoBox.showSuccessToast('保存成功')
|
||||
uni.vibrateShort()
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er)
|
||||
infoBox.showErrorToast('保存失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
infoBox.showErrorToast('保存失败')
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
//#ifdef MP-WEIXIN
|
||||
downloadQR()
|
||||
//#endif
|
||||
}
|
||||
|
||||
let getUrlBase64 = (url) => {
|
||||
return new Promise(resolve => {
|
||||
let canvas = document.createElement('canvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
let img = new Image()
|
||||
img.crossOrigin = 'Anonymous' //允许跨域
|
||||
img.src = vdata.qrcodeUrl
|
||||
img.onload = function() {
|
||||
canvas.height = 300
|
||||
canvas.width = 300
|
||||
ctx.drawImage(img, 0, 0, 300, 300)
|
||||
let dataURL = canvas.toDataURL('image/png')
|
||||
canvas = null
|
||||
resolve(dataURL)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let download = () => {
|
||||
// 这里是获取到的图片base64编码
|
||||
let link = document.createElement('a')
|
||||
let url = vdata.qrcodeUrl//要下载的路径
|
||||
// 这里是将url转成blob地址，
|
||||
fetch(url).then(res => res.blob()).then(blob => { //将链接地址字符内容转变成blob地址
|
||||
link.href = URL.createObjectURL(blob)
|
||||
console.log(link.href)
|
||||
link.download ='QrCode'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
//#ifdef MP-WEIXIN
|
||||
function downloadQR() {
|
||||
wx.getSetting({
|
||||
//获取权限
|
||||
success(res) {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) {
|
||||
saveWxQrcodeImg(vdata.paymentQrcodeUrl)
|
||||
} else {
|
||||
wx.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
saveWxQrcodeImg(vdata.paymentQrcodeUrl)
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
//#endif
|
||||
const saveQrcodeImg = () => {
|
||||
saveHeadImgFile(vdata.paymentQrcodeUrl, 80)
|
||||
.then((success) => {
|
||||
infoBox.showSuccessToast('保存成功')
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
infoBox.showErrorToast('保存失败')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const saveWxQrcodeImg = (data) => {
|
||||
const fileManager = wx.getFileSystemManager()
|
||||
console.log( )
|
||||
const filePath = wx.env.USER_DATA_PATH + '/qrCode'+new Date().getTime()+'.png'
|
||||
//这块是定义图片的名称，可自定义其他
|
||||
fileManager.writeFile({
|
||||
filePath: filePath,
|
||||
data: data.slice(22),
|
||||
encoding: 'base64',
|
||||
success: (res) => {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: function (res) {
|
||||
//保存成功
|
||||
infoBox.showSuccessToast('保存成功')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log(err)
|
||||
//保存失败
|
||||
infoBox.showErrorToast('保存失败')
|
||||
},
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
infoBox.showErrorToast('保存失败')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user