Applet - uniapp realizes the functions of two-dimensional code picture pop-up and picture saving

Applet uniapp You need to click a button , Pop up the QR code picture , And it has the function of saving pictures .

Code implementation ：
html part ：
Use uniapp Medium unipopup Component pop-up

<uni-popup ref="kefu" type="center" :mask-click="false" class="kefu">
	<view class="popup">
		<view class="icon-close">
			<uni-icons type="close" size="30" @click="close" color="#fff">
			</uni-icons>
		</view>
		<image src="../../static/images/showModal/qrcode.png" mode="widthFix" class="QRcode"></image>
		<button type="warn" size="default" class="btn-savecode" @click="saveQRcode"> Save the picture </button>
	</view>
</uni-popup>

css part ：

matters needing attention ：
because uniapp Of unipoup The component has a hidden white background , And when the Font Icon needs to appear in the upper right corner of the picture , So you need to modify the component class css Medium background-color For transparency ,overfloew-y Prevent icons from being hidden away from the picture

/deep/.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
    
	background-color: transparent;
	position: relative;
	max-width: 80%;
	max-height: 80%;
	overflow-y: visible; .popup{
    
		width: 100%; .icon-close{
    
			display: block;
			text-align: right;
			margin-right: -60rpx;
		}
		.QRcode{
    
			width: 450rpx;
			display: block;
		}
		.btn-savecode{
    
			margin: 20rpx 100rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
		}
	}
}

JS part ：
Uniapp In the use of uni.authorize When authorizing , If the user clicks reject for the first time , When you want to authorize again , The authorization page cannot pop up , The authorization will fail directly , Very affecting the user experience . You need to pop up a reminder , Let the user set the authorization manually .

saveQRcode(){
    
	uni.getSetting({
    
		success:(res)=>{
    
			if(res.authSetting['scope.writePhotosAlbum']){
     // Verify that the user is authorized to access the album 
				this.saveQRcodeToPhotosAlbum();
			}else{
    
				uni.authorize({
    
					scope:'scope.writePhotosAlbum',
					success:(res)=>{
    
						console.log(' Authorized information ：',res);
						this.saveQRcodeToPhotosAlbum();
					},
					fail:(err)=>{
     // Get authorization after canceling authorization , It needs to be set manually 
						uni.showModal({
    
							content:' It is detected that you do not have permission to open and save photo album , Whether to set on ',
							confirmText:' confirm ',
							cancelText:' Cancel ',
							success(res){
    
								if(res.confirm){
    
									uni.openSetting({
    
										success(res) {
    
											console.log(' Authorized success ');
										}
									})
								}else{
    
									console.log(' Cancel Authorization ');
								}
							}
						})
					}
				})
			}
		}
	})
},
saveQRcodeToPhotosAlbum(){
    
	let that = this
			uni.saveImageToPhotosAlbum({
    
				filePath:'static/images/showModal/qrcode.png',
				success(res) {
    
					uni.showToast({
    
						title:' Saved successfully ',
						icon:'success'
					})
					that.close()
				},
				fail(err){
    
					console.log(err);
				}
			})
		}