discounts-minapp/invite/invite.vue

<template>
	<view class="invite">
		<view class="title">
			邀请好友加入慧研学惠生活
		</view>
		<view class="desc">
			您将获得现金红包奖励
		</view>

		<view class="code-box">
			<image class="head" :src="userInfo.imgPath" mode=""></image>
			<view class="user-name">
				{{ userInfo.nickname }}
			</view>

			<view class="qrcode-box">
				<u--image width="380rpx" height="380rpx" :src="src">
					<template v-slot:loading>
						<u-loading-icon size="56rpx" color="#FF4C3A"></u-loading-icon>
					</template>
				</u--image>
			</view>

		</view>

		<view class="save-btn">

			<u-button color="linear-gradient(265deg, #FF4A39 0%, #FC8B45 100%)" shape="circle" type="primary"
				@click="save">保存二维码</u-button>
		</view>

	</view>
</template>

<script>
import { BASE_URL } from '@/utils/config.js'
export default {
	data() {
		return {
			src: '',
			userInfo: {}
		}
	},
	methods: {
		save() {
			// uni.getImageInfo({
			// 	src:this.src,
			// 	success: function (image) {
			// 		uni.saveImageToPhotosAlbum({
			// 			filePath:image.path
			// 		})
			// 	}
			// })

			uni.showLoading({
				title: '正在保存图片...'
			});
			//获取用户的当前设置。获取相册权限
			uni.getSetting({
				success: (res) => {
					//如果没有相册权限
					if (!res.authSetting["scope.writePhotosAlbum"]) {
						//向用户发起授权请求
						uni.authorize({
							scope: "scope.writePhotosAlbum",
							success: () => {




								//授权成功保存图片到系统相册
								// uni.saveImageToPhotosAlbum({
								// 	//图片路径，不支持网络图片路径
								// 	filePath: url,
								// 	success: (res) => {
								// 		uni.hideLoading();
								// 		return uni.showToast({
								// 			title: "保存成功！",
								// 		});
								// 	},
								// 	fail: (res) => {
								// 		console.log(res.errMsg);
								// 		return uni.showToast({
								// 			title: res.errMsg,
								// 		});
								// 	},
								// 	complete: (res) => { uni.hideLoading(); },
								// });

								console.log(this.src.slice(22))
								console.log(this.src)
								console.log( wx.env.USER_DATA_PATH + '/pic' + number + '.png')

								const number = Math.random()
								wx.getFileSystemManager().writeFile({
									filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
									data: this.src.slice(22),
									encoding: 'base64',
									success: res => {
										wx.saveImageToPhotosAlbum({
											filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
											success: function (res) {
												wx.showToast({ title: '保存成功', })
											},
											fail: function (err) {
												console.log(err)
											}
										})
										console.log(res)
									}, fail: err => {
										console.log(err)
									}
								})



							},
							//授权失败
							fail: () => {
								uni.hideLoading();
								uni.showModal({
									title: "您已拒绝获取相册权限",
									content: "是否进入权限管理，调整授权？",
									success: (res) => {
										if (res.confirm) {
											//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
											uni.openSetting({
												success: (res) => {
													console.log(res.authSetting);
												},
											});
										} else if (res.cancel) {
											return uni.showToast({
												title: "已取消！",
											});
										}
									},
								});
							},
						});
					} else {




						//如果已有相册权限，直接保存图片到系统相册
						// uni.saveImageToPhotosAlbum({
						// 	filePath: url,
						// 	success: (res) => {
						// 		uni.hideLoading();
						// 		return uni.showToast({
						// 			title: "保存成功！",
						// 		});
						// 	},
						// 	fail: (res) => {
						// 		uni.hideLoading();
						// 		console.log(res.errMsg);
						// 		return uni.showToast({
						// 			title: res.errMsg,
						// 		});
						// 	},
						// 	//无论成功失败都走的回调
						// 	complete: (res) => { uni.hideLoading(); },
						// });


						const number = Math.random()
						wx.getFileSystemManager().writeFile({
							filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
							data: this.src.slice(22),
							encoding: 'base64',
							success: res => {
								wx.saveImageToPhotosAlbum({
									filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
									success: function (res) {
										wx.showToast({ title: '保存成功', })
									},
									fail: function (err) {
										console.log(err)
									}
								})
								console.log(res)
							}, fail: err => {
								console.log(err)
							}
						})


					}
				},
				fail: (res) => { },
			});
		},
	},
	created() {
		this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
		uni.request({
			url: BASE_URL + '/zswl-cloud-bdb/promotion/qrcode',
			method: "post",
			data: {
				"scene": JSON.parse(uni.getStorageSync('userInfo')).userId,
			},
			responseType: 'arraybuffer'
		}).then(res => {
			this.src = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
		})
	}
}
</script>

<style lang="scss">
.invite .u-image__loading,
.u-image__error {
	background-color: #fff !important;
}

.invite {
	padding: 0 30rpx;
	min-height: 100vh;
	background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/SpRgpIr81Trt13ba08b3b78f59f72c0a555b82b73492.png/1.png') no-repeat;
	background-size: 100% 100%;

	.title {
		text-align: center;
		font-size: 48rpx;
		font-weight: 800;
		margin-top: 178rpx;
	}

	.desc {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}

	.code-box {
		width: 690rpx;
		height: 650rpx;
		background: #fff;
		box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		position: relative;
		margin-top: 110rpx;

		.head {
			width: 162rpx;
			height: 162rpx;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.user-name {
			padding-top: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #222222;
			font-weight: bold;
		}

		.qrcode-box {
			width: 380rpx;
			height: 380rpx;
			margin: 80rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;

		}
	}

	.save-btn {
		position: fixed;
		bottom: 100rpx;
		width: calc(100% - 60rpx);
	}
}
</style>