NFT/pages/user/shareQrCode.vue

<template>
	<view class="content">
		<u-swiper img-mode='scaleToFill' effect3d-previous-margin='80' :list="imgArr" height='800' :autoplay='false' :effect3d="true"  :circular="true" name='wap_poster'></u-swiper>
		<view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }">
			<text>长按图片下载</text>
		</view>
	</view>
</template>

<script>
import { spreadBanner } from '@/api/user.js';
export default {
	// components: { tkiQrcode },
	data() {
		return {
			loading: true,//是否载入图片中
			imgArr:[]
		};
	},
	onLoad() {
		this.loadCodeList()
	},
	methods: {
		loadCodeList() {
			uni.showLoading({
				title: '载入中',
				mask: true
			});
			// 加载二维码信息
			spreadBanner({
				// #ifdef H5
				type: 2,
				// #endif
				// #ifdef MP
				type: 1
				// #endif
			}).then(e => {
				uni.hideLoading()
				this.imgArr = e.data;
				
			}).catch((e) => {
					uni.showModal({
						title: '生成失败请刷新页面',
						showCancel: false
					});
					uni.hideLoading();
				});;
		},
	}
};
</script>

<style lang="scss">
.content {
	padding-top: 30rpx;
}
// #qrShareBox {
// 	position: absolute;
// 	left: -9999rpx;
// 	top: -9999rpx;
// }

.qrimg {
	position: absolute;
	left: -9999rpx;
	top: -9999rpx;
}
.tki-qrcode-canvas {
	// width: 700rpx;
	// height: 1245rpx;
	width: 532rpx;
	height: 945rpx;
	margin: 0 auto;
}
.share-bottom {
	width: 560rpx;
	height: 80rpx;
	color: #ffffff;
	background-color: $base-color;
	margin: 0 auto;
	font-size: $font-lg - 2rpx;
	margin-top: 30rpx;
	border-radius: 99rpx;
	justify-content: center;
	&.action-share-bottom {
		background-color: $color-gray;
	}
}
</style>