zhapp/pages/tool/poster.vue

<template>
	<view class="page">
		<!-- 头部吸顶tab标签 -->
		<u-sticky bgColor="#fff">
			<view class="tabView">
				<u-tabs :list="classifyList" @click="click" :scrollable="false" lineWidth="32"
					:activeStyle="{ color: '#333', fontWeight: 'bold' }" :inactiveStyle="{ color: '#999' }"
					:itemStyle="{ height: '48rpx' }"></u-tabs>
			</view>
		</u-sticky>

		<!-- 海报图片列表 -->
		<view class="waterfallImage">
			<image class="poster-img" :src="item" lazy-load mode="" v-for="(item, index) in list" :key="index"
				@click="showLargeImage(item)"></image>
		</view>

		<!-- 大图预览弹窗 -->
		<u-overlay :show="showLargeImageShow" @click="showLargeImageShow = false" :opacity="0.6" class="u-overlay">
			<view class="close-btn dis a-c j-c" @click="showLargeImageShow = false">×</view>
			<view class="posterview u-overlay dis f-c" @tap.stop>
				<image class="promoImage" :src="sctiveimg" mode=""></image>
				<view class="userinfo dis a-c j-s">
					<view class="dis f-c">
						<view class="item dis mb-1">
							<view>业务员</view>
							<text>{{ userInfo.sysUser.name }}</text>
						</view>
						<view class="item dis">
							<view>电话</view>
							<text>{{ userInfo.sysUser.mobile }}</text>
						</view>
					</view>
					<view class="panelcanvas " id="panelcanvas">
						<image :src="qrcodeImg" mode="widthFix" lazy-load></image>
					</view>
				</view>
			</view>

			<!-- 分享操作栏 -->
			<view class="share-prop" @tap.stop>
				<view class="header-title dis a-c j-c">分享到</view>
				<view class="foo-btn dis a-c j-s">
					<view class="interact-item dis f-c a-c">
						<image src="/static/icon/tool/saveImg.png" mode=""></image>
						<text>保存到相册</text>
					</view>
					<view class="interact-item dis f-c a-c">
						<image src="/static/icon/tool/wx.png" mode=""></image>
						<text>微信</text>
					</view>
					<view class="interact-item dis f-c a-c">
						<image src="/static/icon/tool/friendsCircleLogo.png" mode=""></image>
						<text>朋友圈</text>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import QR from "@/common/wxqrcode.js"
	import {
		turnBase64Image
	} from '@/plugins/utils.js';

	export default {
		data() {
			return {
				showLargeImageShow: false,
				qrcodeImg: "", //二维码图片
				currentTab: 'baoxian', // 当前选中分类
				sctiveimg: "", // 放大显示的图片

				classifyList: [ // 分类标签
					{
						name: '保险',
						key: 'baoxian'
					},
					{
						name: '产品',
						key: 'product'
					},
					{
						name: '节气',
						key: 'season'
					},
					{
						name: '节日',
						key: 'festival'
					},
					{
						name: '增员',
						key: 'recruit'
					}
				],
				posterData: { // 分类图片数据
					baoxian: [
						'/static/image/poster/baoxian/poster1.jpg',
						'/static/image/poster/baoxian/poster2.jpg',
						'/static/image/poster/baoxian/poster3.jpg',
						'/static/image/poster/baoxian/poster4.jpg',
						'/static/image/poster/baoxian/poster5.jpg',
						'/static/image/poster/baoxian/poster6.jpg',
						'/static/image/poster/baoxian/poster7.jpg',
						'/static/image/poster/baoxian/poster8.jpg',
					],
					product: [
						'/static/image/poster/product/poster1.jpg',
					],
					season: [],
					festival: [
						'/static/image/poster/festival/poster1.jpg',
						'/static/image/poster/festival/poster2.jpg',
						'/static/image/poster/festival/poster3.jpg',
						'/static/image/poster/festival/poster4.jpg',
						'/static/image/poster/festival/poster5.jpg',
						'/static/image/poster/festival/poster6.jpg',
					],
					recruit: [],
					// ...其他分类
				},
				imageCache: {} // 缓存已转换的Base64图片
			};
		},
		onLoad() {
			this.qrcodeImg = QR.createQrCodeImg(this.$base.h5BaseUrl + '"/#/pages/registr/h5Registr?systemCode=' + this
				.system_code, {
					size: parseInt(200) //二维码大小  
				})
		},
		computed: {
			...mapState(['userInfo', 'system_code']),
			// 动态获取当前分类的图片列表
			list() {
				return this.posterData[this.currentTab] || [];
			}
		},
		methods: {
			// 切换分类
			click(tab) {
				this.currentTab = tab.key;
			},
			// 显示大图（带缓存优化）
			async showLargeImage(item) {
				try {
					if (!this.imageCache[item]) {
						this.imageCache[item] = await turnBase64Image(item);
					}
					this.sctiveimg = this.imageCache[item];
					this.showLargeImageShow = true;
				} catch (error) {
					console.error("图片转换失败:", error);
					uni.showToast({
						title: "图片加载失败",
						icon: "none"
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.tabView {
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	/* 网格布局 */
	.waterfallImage {
		background-color: #f8f8f8;
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;

		.poster-img {
			border-radius: 10rpx;
			width: 330rpx;
			height: 484rpx;
		}
	}

	/* 大图预览弹窗 */
	.posterview {
		margin: 20% 80rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;



		.promoImage {
			width: 100%;
			height: 860rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.userinfo {
			padding: 25rpx 40rpx;

			.item {
				font-size: 28rpx;

				view:first-child {
					color: #666;
					width: 84rpx;
				}

				text:last-child {
					color: #333;
					margin-left: 36rpx;
				}
			}

			.panelcanvas {
				position: relative;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

		}
	}

	/* 分享操作栏 */
	.share-prop {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.header-title {
			padding: 24rpx;
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
		}

		.foo-btn {
			padding: 30rpx 128rpx;

			.interact-item {
				image {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	.close-btn {
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		right: 20rpx;
		top: 20rpx;
		font-size: 36rpx;
		line-height: 0.8;
		font-weight: bold;
		z-index: 10;
		background-color: #fff;
		border-radius: 50%;
	}

	/* 自定义tab滑块样式 */
	::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #FDE935 10%, rgba(253, 233, 53, 0.1) 100%) !important;
		border-radius: 6rpx;
	}
</style>