jingcai/pages/user/favorites.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) {
			// 保存邀请人
			let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: this.poster,
				title: this.userInfo.nickname + '邀请您进入绿津'
			};
			return data;
		},
		// #endif
		data() {
			return {
				shareList: [],
				swiperIndex: 0,
				poster: '', // 当前海报
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t("tab.b2"),
			});
			this.loadData();
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			bindchange(e) {
				let shareList = this.shareList;
				this.swiperIndex = e.detail.current;
				// #ifdef MP
				this.poster = shareList[this.swiperIndex].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>