pz/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 { 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) {
													return that.$api.msg('保存成功');
												},
												fail: function(res) {
													return that.$api.msg(res.errMsg);
												},
												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) {
														return that.$api.msg('已取消！');
													}
												}
											});
										}
									});
								} else {
									uni.saveImageToPhotosAlbum({
										filePath: resFile.tempFilePath,
										success: function(res) {
											return that.$api.msg('保存成功');
										},
										fail: function(res) {
											return that.$api.msg(res.errMsg);
										},
										complete: function(res) {}
									});
								}
							},
							fail(res) {}
						});
					} else {
						return that.$api.msg(resFile.errMsg);
					}
				},
				fail(res) {
					return that.$api.msg(res.errMsg);
				}
			});
		},

		// #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>