cashier_admin_app/pages/shopSetUp/shopQRcode.vue

<template>
	<view class="page-wrapper">
		<view class="content">
			<view class="title">门店收款码</view>
			<view ref="qrcode" class="qrcode">
				<up-qrcode :size="vdata.size" @result="result" :val="vdata.paymentQrcode"></up-qrcode> 
			</view>
			<view class="bom">
				<view @click="download">下载收款码</view>
				<view>下载收款码样式</view>
			</view>
		</view>
		
	
	</view>
</template>

<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'

const vdata = reactive({
	size: 0,
	qrcodeUrl: null,
	paymentQrcode: null,
});

onLoad((options) => {
	vdata.paymentQrcode = options.paymentQrcode;

})


onShow(() => {
	// getshopList()

})
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', //写入当前文件的字符编码
		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
					})
				}
			})
		},
		fail: (err) => {
			console.log(err)
		}
	})
}

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()
	})
	
	
}






</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>