retailStore/pages/index/postShare/index.vue

<template>
	<view class="share-bg-box" @longpress="saveCode">
		<image class="logo" :src="sharePicture"></image>
		<view class="poster-info-box">
			
			<view class="user-box">
				<image :src="userHead" mode=""></image>
				<view class="test">
					<view style="font-size: 14px;">{{userName}}</view>
					<view style="color: #999;">为您分享好物，享受生活</view>
				</view>
			</view>
			
			<view class="code-box">
				<image :src="codeUrl" mode="aspectFit"></image>
			</view>
			
		</view>
		<button type="default" class="saveBtn">长按保存到相册</button>
	  <!--  <view class="code-box">
		  <image :src="codeUrl" mode="aspectFit" ></image>
		</view> -->

		<!-- <view class="share-page-title">
			<view class="first-title">长按图片保存为二维码海报</view>
			<view class="second-title">快去分享给好友扫码加入吧~</view>
		</view> -->
	</view>
</template>

<script>
var md5 = require('../../../common/md5.js');
export default {
	data() {
		return {
			inviteId: getApp().globalData.user_id,
			codeUrl: '',
			sharePicture:getApp().globalData.shareImg,
			userName:getApp().globalData.user_name,
			userHead:getApp().globalData.user_headUrl,
		};
	},
	onLoad(options) {
		// this.sharePicture = getApp().globalData.shareImg;
		this.getCodeRequest();
	},
	onShow() {
		//this.getUserTimes();
	},
	onShareAppMessage() {
		return {
			title: '阿拉灯神丁',
			path: '/pages/index/index?inviteId=' + getApp().globalData.user_id
		};
	},
	methods: {
		getCodeRequest() {
			let that = this;
			uni.showLoading({
				title: '生成中'
			});
			uni.request({
				url: getApp().globalData.shareUrl, //需要设置为全局
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					method: 'creatQrcode',
					timestamp: getApp().globalData.globalTimestamp, //Date.now()
					uid: getApp().globalData.user_id,
					sign: md5('creatQrcode' + getApp().globalData.globalTimestamp)
				},
				success: res => {
					uni.hideLoading();
					if (res.data.code === 200) {
						that.codeUrl = res.data.msg;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				}
			});
		},
		saveCode() {
			const that = this;
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								//这里是用户同意授权后的回调
								that.saveImgToLocal();
							},
							fail() {
								//这里是用户拒绝授权后的回调
								uni.showModal({
									title: '相册授权',
									content: '点击确定重新获取授权。',
									success: function(res) {
										if (res.confirm) {
											uni.openSetting({
												success: res => {
													console.log('授权成功');
												}
											});
										}
									}
								});
							}
						});
					} else {
						//用户已经授权过了
						that.saveImgToLocal();
					}
				}
			});
		},
		saveImgToLocal() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定保存到相册吗',
				success: function(res) {
					if (res.confirm) {
						uni.downloadFile({
							url: that.codeUrl, //图片地址
							success: res => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: '保存成功',
												icon: 'none'
											});
										},
										fail: function() {
											uni.showToast({
												title: '保存失败',
												icon: 'none'
											});
										}
									});
								}
							}
						});
					} else if (res.cancel) {
						return false;
					}
				}
			});
		}
	}
};
</script>

<style>
.logo {
	height:70%;
	width: 100%;
	}
.poster-info-box {
	width: 100%;
	height: 20%;
	background: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
}	
.share-bg-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.user-box {
	display: flex;
	font-size: 13px;
	/* justify-content: space-around; */
	width: 70%;
	align-items: center;
}
.user-box image {
	height: 100rpx;
	width: 100rpx;
	border-radius: 50%;
	margin-right: 5%;
}


.code-box {
	width: 80px;
	height:80px;
}

.code-box image {
	width: 100%;
	height: 100%;
}
.share-page-title {
	text-align: center;
	padding-top: 10%;
}

.first-title {
	color: #fff;
	font-size: 44rpx;
	font-weight: bold;
}
.second-title {
	color: orange;
	font-size: 36upx;
	font-weight: 550;
}
.test{ 
	background: transparent;
	position: relative;
	border: 1px solid #ccc;
	/* border-radius: 5px; */
	padding: 10px;
	/* background: #9eea6a; */
	font-size: 28rpx;
	border-top-right-radius: 20rpx;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.saveBtn {
	width: 60%;
	margin-top: 3%;
	background-color: #27BCEF!important;
	color: #fff!important;
	font-size: 16px;
}
</style>