MeiMeiZhuan/pages/user/ShareIndex.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';
export default {
	data() {
		return {
			shareList: [],
			swiperIndex: 0,
			poster: '',	// 当前海报
		}
	},
	onLoad() {
		this.loadData();
	},
	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 MP
				'1'
				// #endif
			).then(res => {
				uni.hideLoading();
				obj.shareList = res.data;
				console.log(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>