baseApp/pages/user/shareQrCode.vue

<template>
	<view class="container">
		<swiper
			class="posters-box"
			:autoplay="false" 
			:circular="false" 
			:interval="3000" 
			:duration="500"
			@change="bindchange" 
			previous-margin="40px" 
			next-margin="40px">
			<block v-for="(item, index ) in shareList" :key="index">
				<swiper-item>
					<!-- #ifndef MP -->
					<image 
						class="slide-image" 
						:class="swiperIndex == index ? 'active' : 'quiet'" 
						mode='aspectFill' 
						:src="item.wap_poster"
						
					></image>
					<!-- #endif -->
					
					<!-- #ifdef MP -->
					<image
						class="slide-image" 
						:class="swiperIndex == index ? 'active' : 'quiet'" 
						mode='aspectFill' 
						:src="item.poster"
						
					></image>
					<!-- #endif -->
					
				</swiper-item>
			</block>
		</swiper>
		<!-- #ifndef MP -->
		<div class="preserve">
			<div class="line"></div>
			<div class="tip">长按保存图片</div>
			<div class="line"></div>
		</div>
		<!-- #endif -->

		<!-- #ifdef MP -->
		<view class='keep' @click='savePosterPath'>保存海报</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
import { spreadBanner } from '@/api/user.js';
import { qrcode } from  '@/api/user.js';
import { mapState } from 'vuex';
export default {
	// #ifdef MP
	onShareAppMessage: function(res) {
		// if (res.from === 'button') {
			
			// 保存邀请人
			let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
			console.log('path',path)
			let data = {
				path: path,
				imageUrl: this.poster,
				title: this.userInfo.nickname + '邀请您进入绿津'
			};
			console.log('---data---',data)
			return data;
		// }
	},
	// #endif
	data() {
		return {
			shareList: [],
			swiperIndex: 0,
			poster: '',	// 当前海报
		}
	},
	onLoad(option) {
		// console.log('---option---',option)
		// let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
		// console.log('path',path)
		// if(option.scene){
		// 	// 存储邀请人
		// 	this.spread = opt.pid;
		// 	uni.setStorageSync('spread', opt.pid);
		// }
		this.loadData();
	},
	computed: {
		...mapState(['userInfo']),
	},
	methods: {
		bindchange(e) {
			let shareList = this.shareList;
			this.swiperIndex = e.detail.current;
			// #ifdef MP
			this.poster = shareList[this.swiperIndex].poster;
			// #endif 
			
			// // #ifndef MP
			// this.poster = shareList[this.swiperIndex].wap_poster;
			// // #endif 
			
			console.log(this.poster)
		},
		
		// 保存海报
		savePosterPath: function() {
			let that = this;
			if(that.poster==''){
				that.poster = that.shareList[0].poster;
			}
			uni.downloadFile({
				url: that.poster,
				success(resFile) {
					if (resFile.statusCode === 200) {
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success() {
											uni.saveImageToPhotosAlbum({
												filePath: resFile.tempFilePath,
												success: function(res) {
													uni.showToast({
														title: '保存成功' ,
														icon:"success"
													})
													return 
												},
												fail: function(res) {
													uni.showToast({
														title: res.errMsg ,
														icon:"none"
													})
													return
												},
												complete: function(res) {},
											})
										},
										fail() {
											uni.showModal({
												title: '您已拒绝获取相册权限',
												content: '是否进入权限管理，调整授权？',
												success(res) {
													if (res.confirm) {
														uni.openSetting({
															success: function(res) {
																console.log(res.authSetting)
															}
														});
													} else if (res.cancel) {
														uni.showToast({
															title: '已取消！' ,
															icon:"none"
														})
														return ;
													}
												}
											})
										}
									})
								} else {
									uni.saveImageToPhotosAlbum({
										filePath: resFile.tempFilePath,
										success: function(res) {
											uni.showToast({
												title: '保存成功' ,
												icon:"success"
											})
											return;
										},
										fail: function(res) {
											uni.showToast({
												title:  res.errMsg ,
												icon:"none"
											})
											return ;
										},
										complete: function(res) {},
									})
								}
							},
							fail(res) {
		
							}
						})
					} else {
						uni.showToast({
							title:  resFile.errMsg  ,
							icon:"none"
						})
						return 
					}
				},
				fail(res) {
					uni.showToast({
						title:  res.errMsg  ,
						icon:"none"
					})
					return 
				}
			})
		},
		
		// #ifdef MP-WEIXIN
		// 保存画图图片到本地
		seav(url) {
			uni.showLoading({
				title: '生成中...',
				mask: true
			});
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				complete(result) {
					uni.hideLoading();
					console.log(result);
					uni.showToast({
						title: '保存图片成功！',
						duration: 2000,
						icon: 'none'
					});
				}
			});
		},
		// #endif
		
		// 获取海报
		loadData() {
			let obj = this;
			uni.showLoading({
				title: '获取中',
				mask: true,
			});
			spreadBanner({
				// #ifdef H5
				type: 2,
				// #endif
				// #ifdef MP
				type: 1
				// #endif
			}).then(res =>{
				uni.hideLoading();
				obj.shareList = res.data;
				console.log('obj.shareList',obj.shareList);
			}).catch(err => {
				uni.hideLoading();
			});
		},
	}
}
</script>

<style lang="scss">
	page {
		background: #a3a3a3;
		height: 100%;
	}
.container {
	width: 100%;
	.posters-box {
		width: 100%;
		height: 1000rpx;
		margin-top: 40rpx;
		.slide-image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}
	}
	.posters-box .slide-image.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}
	
	.posters-box .slide-image.quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}
	
	.keep {
		font-size: 30rpx;
		background: $base-color;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}
}
.preserve {
	color: #fff;
	text-align: center;
	margin-top: 38rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}
	.tip {
		margin: 0 20rpx;
		font-size: 28rpx;
	}
}
</style>