206 lines
4.2 KiB
Vue
206 lines
4.2 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="content">
|
|
<view class="title">门店收款码</view>
|
|
<view ref="qrcode" class="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="saveImage">下载收款码</view>
|
|
<!-- <view>下载收款码样式</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
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: 20,
|
|
qrcodeUrl: null,
|
|
paymentQrcode: null,
|
|
paymentQrcodeUrl: "",
|
|
|
|
});
|
|
|
|
onLoad((options) => {
|
|
vdata.paymentQrcodeUrl = qrCode.drawImg(options.paymentQrcode)
|
|
})
|
|
|
|
|
|
onShow(() => {
|
|
// getshopList()
|
|
|
|
})
|
|
onMounted(() => {
|
|
|
|
})
|
|
|
|
|
|
const saveImage = () => {
|
|
// #ifdef APP-PLUS
|
|
saveQrcodeImg()
|
|
uni.downloadFile({
|
|
url: vdata.paymentQrcodeUrl,
|
|
success: (res) => {
|
|
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
|
|
}
|
|
//#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('保存失败')
|
|
},
|
|
})
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
min-height: calc(100vh - 90rpx);
|
|
padding: 48rpx 52rpx;
|
|
box-sizing: border-box;
|
|
|
|
.content{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 64rpx 0;
|
|
box-sizing: border-box;
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #333333;
|
|
}
|
|
.qrcode{
|
|
width: 416rpx;
|
|
height: 416rpx;
|
|
margin-top: 50rpx;
|
|
border: 2rpx solid #333;
|
|
padding: 15rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
::v-deep .u-qrcode,::v-deep .u-qrcode__content,::v-deep .u-qrcode__canvas{
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
|
|
}
|
|
.bom{
|
|
display: flex;
|
|
margin-top: 110rpx;
|
|
view{
|
|
width: 218rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #318AFE;
|
|
border-radius: 8rpx;
|
|
}
|
|
view:nth-child(1){
|
|
color: #318AFE;
|
|
border: 2rpx solid #318AFE;
|
|
margin-right: 80rpx;
|
|
}
|
|
view:nth-child(2){
|
|
color: #7074A0;
|
|
border: 2rpx solid #7074A0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|