martial-arts/pagesA/my-share/my-share.vue

<template>
	<view>
		<status-container titlet="我的分享" returnc="#FFFFFF">
			
		</status-container>
		<!-- 分享图 -->
		<image :src="shareImg" mode="widthFix" lazy-load class="qrIamge"></image>
		<view style="height: 100rpx;"></view>
		<!-- 底部按钮 -->
		<view class="bottom-btn"> 
			<view @tap="downloadImgEv">下载图片</view>
		</view>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	import yzQr from '@/components/yz-qr/yz-qr.vue';
	import {base64ToPath} from '@/jsFile/base64-src.js';
	export default {
		components:{
			pitera,
			yzQr
		},
		data() {
			return {
				shareImg:'',
				hostapi:'',// 域名
			}
		},
		onLoad() {
			this.hostapi = getApp().globalData.hostapi;
			this.qrCode();
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: ``, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: ``//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		methods: {
			// 生成二维码
			qrCode() {
				uni.showLoading({
					title:'正在生成推广码',
					icon:'loading',
					duration:4000
				})
				
				// 生成推广码
				this.$requst.get('/api/user/personal-poster').then(res=>{
					if(res.code==0){
						uni.hideLoading();
						this.shareImg = this.hostapi + res.data.poster;
					}
				}).catch(err=>{
					uni.hideLoading();
					uni.showToast({
						title:'生成失败',
						icon:'none',
						position:'bottom'
					})
					setTimeout(()=>{
						uni.navigateBack({delta:1})
					},1000)
				})
			},
			
			//保存相册
			downloadImgEv(){
				uni.getSetting({//获取用户的当前设置
					success:(res)=> {
						if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						}else{
							uni.authorize({//如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success:()=> {
									this.saveImageToPhotosAlbum();
								},
								fail:()=>{
									uni.showModal({
										content:'检测到您没打开保存图片的权限，是否去设置打开？',
											confirmText: "确认",
											cancelText:'取消',
											success: (res) => {
												if(res.confirm){
													uni.openSetting({
														success: (res) => {
															console.log(res);
															// this.getLocation();
														}
													})
												}else{
													console.log('取消');
													return false;
												}
											}
									})
									setTimeout(()=>{
										uni.openSetting({//调起客户端小程序设置界面,让用户开启访问相册
											success:(res2)=> {
												// console.log(res2.authSetting)
											}
										});
									},3000);
								}
							})
						}
					}
				})

			},
			// saveImageToPhotosAlbum(){
			// 	let base64=this.shareImg.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
			// 	let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
			// 	uni.getFileSystemManager().writeFile({
			// 		filePath:filePath ,  //创建一个临时文件名
			// 		data: base64,    //写入的文本或二进制数据
			// 		encoding: 'base64',  //写入当前文件的字符编码
			// 		success: res => {
			// 			uni.saveImageToPhotosAlbum({
			// 				filePath: filePath,
			// 				success: function(res2) {
			// 					uni.showToast({
			// 						title:'保存成功',
			// 						icon:'success',
			// 						duration:2000
			// 					})
			// 				},
			// 				fail: function(err) {
			// 					uni.showToast({
			// 						title:'保存失败',
			// 						icon:'error',
			// 						duration:2000
			// 					})
			// 				}
			// 			})
			// 		},
			// 		fail: err => {
			// 			//console.log(err)
			// 		}
			// 	})
			// }
			saveImageToPhotosAlbum(){
				uni.downloadFile({
					url: this.shareImg,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: ()=> {
								uni.showToast({
									title:'保存成功',
									icon:'success',
									duration:2000
								})
							},
							fail: () => {
								uni.showToast({
									title:'保存失败',
									icon:'error',
									duration:2000
								})
							}
						});
					}
				})
			}
			
		}
	}
</script>

<style>
	image {
		width: 100%;
	}
	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding:20rpx 20rpx;
		display: flex;
		justify-content: flex-end;
		box-shadow: 0rpx -3rpx 20rpx rgba(0,0,0,.05);
	}
	.bottom-btn view {
		background-color: #eb5d10;
		color: #FFFFFF;
		padding: 20rpx 40rpx;
		border-radius: 80rpx;
		font-size: 36rpx;
	}
	
	.qrIamge {
		width: 90%;
		display: block;
		margin: -120rpx auto 0;
	}
</style>