uniapp 轮播需要请求接口 vuex 获取用户信息生成海报

信息技术：海报分享与二维码动态保存

最新推荐文章于 2025-05-13 15:34:43 发布

原创

最新推荐文章于 2025-05-13 15:34:43 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了如何在弹出框中展示动态海报，通过Swiper实现海报切换，并利用微信API生成并保存带有二维码的海报。开发者展示了如何获取用户购物ID，调用API获取海报列表，以及在海报上绘制二维码的技术细节。

<template>
	<u-popup :value="show" mode="center" class="popup" @close="onClose" @open="onOpen">
		<view class="close" @click="onClose">x</view>
		<swiper class="swiper" :current="current" next-margin="120rpx" @change="swiperChange" previous-margin="120rpx">
			<swiper-item class="item" v-for="(item,index) in poster">
				<view :class="index==current?'wrapper':'wrapper-activity'">
					<image :src="item.posterPath" mode="aspectFit" class="img"></image>
					<image :src="qrCode" :style="{	position: 'absolute',
						top: item.y/3+'px',
						left:  item.x/3 +'px',
						width:  Width(item.w) +'rpx',
						height: Width(item.h)+'rpx'}"></image>
					<button class="btn" @click="onSavePoster(item)">保存海报</button>
					<canvas type="2d" id="myCanvas"
						style="width: 750px; height: 1060px;position: fixed; top: -999999px; left: -999999px;"></canvas>
				</view>
			</swiper-item>
		</swiper>
	</u-popup>
</template>

<script>
	import { createWxQRCode, queryExtensionPoster } from "@/api"
	import { mapGetters } from 'vuex'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			idata: {
				type: Object,
				default () {
					return {
						list: [],

					}
				}
			},
		},
		data() {