CBB3/pages/user/qrcode/index.vue

<template>
	<view>
		<view id="box">
			<view class='distribution-posters'>
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
					:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
					<block v-for="(item,index) in spreadList" :key="index">
						<swiper-item>
							<view class="fx-h fx-bc fx-ac" style="height: 100%;">
								<image v-if="item.qrcode_img != ''" :src="item.qrcode_img" class="slide-image"
									:class="swiperIndex == index ? 'active' : 'quiet'" mode="widthFix" />
								<image v-else :src="item.poster_img" class="slide-image"
									:class="swiperIndex == index ? 'active' : 'quiet'" mode="widthFix" />
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>

			<view class="foot-view fx-r">


				<view class="save fx-h fx-bc fx-ac" @tap="tapScheng">
					<image src="/static/img/foot-save.png" mode="widthFix"></image>
					<view class="text">重新生成</view>
				</view>

				<view class="save fx-h fx-bc fx-ac" @tap="savePosterPath">
					<image src="/static/img/foot-down.png" mode="widthFix"></image>
					<view class="text">保存海报</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {

				indicatorDots: false,
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				userInfo: {},
				poster: '',
				navIndex: 0
			};
		},
		computed: mapState(['user']),
		onLoad() {
			this.userSpreadBannerList();
		},

		methods: {
			...mapMutations(['checkUserLogin']),

			onLoadFun: function(e) {
				this.$set(this, 'userInfo', e);
				this.userSpreadBannerList();
			},

			bindchange(e) {
				this.navIndex = e.detail.current;
				this.changeImg(e.detail.current);
			},

			tapScheng: function() {
				let spreadList = this.spreadList;
				uni.showLoading({
					title: '获取推广码中..',
					mask: true
				});
				this
					.request
					.post("userSpreadQrcode", {
						id: spreadList[this.navIndex].id,
						type: 1
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.spreadList[this.navIndex].qrcode_img = res.data.img;
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
						uni.hideLoading();
						this.utils.Tip("加载失败，返回在尝试!");
					});

			},

			changeImg: function(index) {
				let spreadList = this.spreadList;
				this.swiperIndex = index;
				this.$set(this, 'poster', spreadList[index].poster);
				if (!this.utils.isDefine(spreadList[index].qrcode_img)) {
					uni.showLoading({
						title: '获取推广码中..',
						mask: true
					});
					this
						.request
						.post("userSpreadQrcode", {
							id: spreadList[index].id
						})
						.then(res => {
							uni.hideLoading();
							if (res.code == 200) {
								this.spreadList[index].qrcode_img = res.data.img;
							} else {
								this.utils.Tip(res.msg);
							}
						})
						.catch(err => {
							console.log(err);
							uni.hideLoading();
							this.utils.Tip("加载失败，返回在尝试!");
						});
				}
			},

			savePosterPath: function() {
				var img = this.spreadList[this.swiperIndex].qrcode_img;
				if (img == '') {
					return this.utils.Tip("海报在生成中!");
				}
				let that = this;
				// #ifdef APP
				let p = uni.getSystemInfoSync().platform;
				if (p === "ios") {
					that.domImage(img);
				} else {
					that.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
						that.domImage(img);
					});
				}
				// #endif
				// #ifndef APP
				that.domImage(img);
				// #endif
			},
			domImage(img) {
				const that = this;
				uni.downloadFile({
					url: img,
					success(resFile) {
						if (resFile.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: resFile.tempFilePath,
								success: function(res) {
									return that.utils.Tip("保存成功");
								},
								fail: function(res) {
									return that.utils.Tip(res.errMsg);
								},
								complete: function(res) {},
							})
						} else {
							return that.utils.Tip(resFile.errMsg);
						}
					},
					fail(res) {

						return that.utils.Tip(res.errMsg);
					}
				})
			},
			userSpreadBannerList: function() {
				let that = this;
				uni.showLoading({
					title: '获取中',
					mask: true
				});
				this
					.request
					.post("userSpreadBanner")
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							that.$set(that, 'spreadList', res.data);
							that.changeImg(0);
						} else {
							this.utils.showAlert({
								title: res.msg,
								icon: "none",
								mask: true
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});
			}
		}
	}
</script>

<style lang="scss">
	.about {
		width: 100%;
		height: 100%;
		background: #303033;
		;
	}

	.distribution-posters {
		padding-top: 40rpx;
	}

	.distribution-posters swiper {
		width: 100%;
		height: calc(100vh - 120rpx - 40rpx);
		position: relative;
	}

	/* #ifdef H5 */
	.distribution-posters swiper {
		height: calc(100vh - 120rpx - 40rpx - 50px);
	}

	/* #endif */

	.distribution-posters .slide-image {
		width: calc(54 - 86rpx);
		height: calc(100vh - 160rpx);
		margin: 0 auto;
		border-radius: 15rpx;
	}

	.distribution-posters .slide-image.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters .slide-image.quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters .keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}

	.distribution-posters .preserve {
		color: #fff;
		text-align: center;
		margin-top: 38rpx;
	}

	.distribution-posters .preserve .line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}

	.distribution-posters .preserve .tip {
		margin: 0 30rpx;
	}


	.bg-color {
		background: #844bff;
	}


	.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}

	.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center
	}

	.row-around {
		justify-content: space-around;
		-webkit-justify-content: space-around
	}

	.foot-view {
		height: 120rpx;
	}

	.foot-view .save {
		width: 50%;
	}

	.foot-view .save image {
		width: 60rpx;
		height: 60rpx;
	}

	.foot-view .save .text {
		color: #999999;
		text-align: center;
		font-size: 14px;
		margin-top: 6px;
	}
</style>