xiyi/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
			class="keep"
			@click="baocun"
			>保存图片</view
		>
	</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) {
			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);
			},
			baocun() {
				let that = this;
				uni.saveImageToPhotosAlbum({
				    filePath: that.shareList[0].wap_poster,
				    success: function () {
				        console.log('图片保存成功');
						uni.showToast({
							title:  '保存成功',
							duration: 2000,
							icon: "none",
						});
				        // 成功处理逻辑
				    },
				    fail: function (err) {
				        console.log('图片保存失败', err);
						that.$api.msg('图片保存失败')
				        // 失败处理逻辑
				    }
				});
			},
			// 保存海报
			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(
															 this.$t("huiyuan.b4")
														);
													},
													fail: function (res) {
														return that.$api.msg(
															res.errMsg
														);
													},
													complete: function (res) {},
												});
											},
											fail() {
												uni.showModal({
													title: this.$t("huiyuan.b5"),
													content:
														 this.$t("huiyuan.b6"),
													success(res) {
														if (res.confirm) {
															uni.openSetting({
																success:
																	function (
																		res
																	) {
																		console.log(
																			res.authSetting
																		);
																	},
															});
														} else if (res.cancel) {
															return that.$api.msg(
																 this.$t("huiyuan.b7")
															);
														}
													},
												});
											},
										});
									} else {
										uni.saveImageToPhotosAlbum({
											filePath: resFile.tempFilePath,
											success: function (res) {
												return that.$api.msg(
													 this.$t("huiyuan.b8")
												);
											},
											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>