uniapp 微信小程序轮播海报

<!--基于swiper 导入背景图和小程序码-->
<swiper class="post-box" @change="postChange" circular :indicator-dots="true"  :interval="5000" :duration="150">
							<swiper-item v-for="(item,index) in bgList" :key="index">
								<image :src="item.url" mode="widthFix" class="fui-share__bg"></image>
								<!-- <image src="https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/858e82cbf2cd482597cf68c512bfbe89-cover.jpeg" mode="widthFix" class="fui-share__bg"></image> -->
								<view class="fui-logo__box">
									<view class="fui-qrcode__box">
										<image :src="dataInfo.qrCode" mode="widthFix" class="fui-qrcode"></image>
									</view>
								</view>
							</swiper-item>
</swiper>
<!--引入first-ui海报插件-->
<fui-poster ref="generator" :width="750" :height="1334" ></fui-poster>
<script type="ts">
import noData from "@/components/no-data.vue";
	import api from "@/servers/api";
	import {to} from "@/utils";
	import pubFn from "/common/pubFunction";
import { get } from "lodash";
	
	export default {
		data() {
			return {
				popupStatus: false,
				dataInfo: {},
				bgList:[
					{id: 100, url: 'https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/6ee8609977c14d2e950c00e6629dc9ba-cover.jpg'},
					{id: 101, url: 'https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/2c1d140de14a408fb3b27950117eb787-cover.jpg'},
					{id: 102, url: 'https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/20f4e1aed22649b7a22f402e75166cc8-cover.jpg'},
					{id: 103, url: 'https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/76ad87e588d648aeafe3f91f36fa4938-cover.jpg'},
					{id: 104, url: 'https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/2a9e7f7c17c04533878f0f62b37b09e7-cover.jpg'},
					{id: 105, url: 'https://blt-common.obs.cn-east-3.myhuaweicloud.com/0/pic/2af6498d964145e9979858f2eac06f1e-cover.jpg'},
				],
				posterData : {
					imgs: [{
						imgResource: '',
						x: 0,
						y: 0,
						width: 750,
						height: 1334,
						zIndex: 1,
						type: 2
					}, {
						imgResource: '',
						x: 440,
						y: 1035,
						width: 245,
						height: 245,
						zIndex: 3,
						type: 2,
						borderRadius: 245
					}],
					blocks: [{
						width: 750,
						height: 1334,
						x: 0,
						y: 0,
						backgroundColor: '#F1F4FA'
					}],
					texts: []
				},
				isReady: false,
				bgCurrent: '',
				postCurrentIndex:0,
				posterKey:'posters',  //海报缓存key
				}
		},
		methods: {
			shareImage() {
				let post = this.getCurrentPost()
				if(!post){
					uni.showToast({
				            title: '请先生成海报'
				    });
					return;
				}
				wx.showShareImageMenu({path: post})

			},
			saveCurrentPost(post){
				if(!post){
					return;
				}
				let map = pubFn.getStorageSync(this.posterKey);
				if(!map){
					map = {};
				}
				let postId = this.bgList[this.postCurrentIndex].id;
				map[postId] = post;
				pubFn.setStorageSync(this.posterKey, map);
				
			},
			getCurrentPost() {
				let map = pubFn.getStorageSync(this.posterKey);
				if(!map){
					return;
				}
				let postId = get(this.bgList, [this.postCurrentIndex, 'id'], null);
				if(!postId){
					return;
				}
				let url = map[postId];
				if(url){
					return url;
				}
				return null;
			},
			
			async getData() {
			  const params = {
			    
			  };
			  uni.showLoading({
			    title: '加载中...',
			    mask: true
			  })
			  const [err, res] = await to(api.distribute.getDistributeSubject(params));
			  uni.hideLoading();
			  if (err) throw err;
			  this.dataInfo = res;
			},
			generatePoster() {
				let that = this;
				const posterData = JSON.parse(JSON.stringify(this.posterData));
				posterData.imgs[1].imgResource = this.dataInfo.qrCode;
				let post = this.getCurrentPost();
				posterData.imgs[0].imgResource = this.bgCurrent || this.bgList[0].url;
				if (post) {
					this.previewImage();
				} else {
					uni.showLoading({
						title: '正在生成...'
					});
					this.$refs.generator.generatePoster(posterData, (res) => {
						that.saveCurrentPost(res);
						that.previewImage();
						uni.hideLoading();
					});
				}
			},
			previewImage() {
				uni.previewImage({
					urls: [this.getCurrentPost()]
				});
			},
			postChange(e){
				// e.detail.current 是当前swiper索引
				const currentIndex = e.detail.current;
				const currentImg = this.bgList[currentIndex].url;
				// 可根据需要保存到变量
				this.bgCurrent = currentImg;
				this.postCurrentIndex = currentIndex;
			},
		},
		onLoad() {
			this.getData()
		}
	}

</script>
<style>
.fui-post__box {
		width: 100%;
		position: relative;
		height: 1030rpx;
	}
    .post-box{
		height: 100%;
		display: block;
	}
	.fui-share__bg {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 20rpx;
		/* margin-top: 112rpx; */
	}

	.fui-logo__box {
		position: absolute;
		bottom: -10px;
		right: 0;
	}

	.fui-logo {
		width: 96rpx;
		height: 96rpx;
		border-radius: 16rpx;
	}

	.fui-text {
		font-size: 35rpx;
		padding-top: 32rpx;
        color:white;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
	}

	.fui-qrcode__box {
        width: 320rpx;
        height: 320rpx;
        padding: 56rpx;
        box-sizing: border-box;
        background: #ffffff00;
        box-shadow: 0 20rpx 20rpx 0 rgba(9, 41, 134, 0.12);
        border-radius: 48rpx;
        position: relative;
        z-index: 10;
	}

	.fui-qrcode {
		border-radius: 117rpx;
		width: 100%;
		height: 400rpx;
	}

	.fui-btn__box {
		width: 100%;
	}

	.fui-share__ic {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.fui-ani__box {
		width: 600rpx;
		border-radius: 24rpx;
	}

	.fui-poster__img {
		width: 100%;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		display: block;
	}
</style>