guosen-ldt-shop/pages/material-download/comps/mp-swiper.vue

<template>
	<view class="swiper">
		<view class="swiper-title">
			<swiper :style="{height:fullHeight}" class="swiper-tall" :indicator-dots="indicatorDots"
				:autoplay="autoplay" :previous-margin="previousMargin" :next-margin="nextMargin" :circular="circular"
				@change="change" :current="swiperCurrentIndex">
				<swiper-item class="swiper-container" v-for="(item,index) in list" :key="index" :item-id="index"
					:data-year="index">
					<view :animation="animationData[index]" class="swiper-item" style="position: relative;">
						<image :src="item.image" mode=""></image>
						<view class="content">
							<text class="">{{shopDetail.name}}</text>
							<tki-qrcode style="margin-top: -100rpx;" cid="1" ref="qrcode-charge" :val="shopDetail.id" size="260" :onval="true"
								:loadMake="true" :usingComponents="true" />
						</view>

					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="center">
			<view class="cu-btn  flex round text-lg"
				style="padding: 46rpx 0;background-color: #EF9944;color: #FFFFFF;width: 76%;">
				生成海报
			</view>
		</view>
	</view>
</template>
<script>
	import tkiQrcode from "tki-qrcode"
	export default {
		props: {
			list: Array
		},
		components: {
			tkiQrcode
		},
		data() {
			return {
				screenHeight: 0,
				animationData: {
					0: {},
					1: {},
					2: {},
					3: {}
				},
				title: '0',
				indicatorDots: false,
				autoplay: false,
				previousMargin: uni.upx2px(82) + 'px',
				nextMargin: uni.upx2px(82) + 'px',
				circular: true,
				zoomParam: 1.10,
				swiperCurrentIndex: 0,
				data: [],
				max: 0,
				//商户详情

				shopDetail: {}
			}
		},
		computed: {
			fullHeight() {
				const res = uni.getSystemInfoSync();
				return res.windowHeight - (res.statusBarHeight + 44) + 'px';
			}
		},
		async mounted(option) {
			let res = await this.$api.shop.detail({
				id: this.vuex_shopId
			})
			this.shopDetail = res.data
		},
		created() {
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			this.animationData[0] = this.animation.export();
		},
		methods: {
			change(e) {
				this.swiperCurrentIndex = e.detail.current;
				this.title = e.detail.currentItemId;
				for (let key in this.animationData) {
					if (e.detail.currentItemId == key) {
						this.animation.scale(this.zoomParam).step();
						this.animationData[key] = this.animation.export();
					} else {
						this.animation.scale(1.0).step();
						this.animationData[key] = this.animation.export();
					}
				}
				this.$emit('change', this.swiperCurrentIndex)
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-wrap: wrap;
	}

	.content {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		top: 30rpx;
	}


	.save-btn {
		background-color: #EF9944;
		color: #FFFFFF;
	}

	.swiper-container {
		display: flex;
		align-items: center;
	}

	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		height: 760upx;
		width: 544upx;
		line-height: 300upx;
		text-align: center;
		margin-bottom: 50upx;
	}



	.swiper-tall {
		display: flex;
		align-items: center;
	}

	.swiper-title {
		margin-top: -100rpx;
		width: 760upx;
		text-align: center;
	}
</style>