bigDataApp/pages/index/components/ImagePopup.vue

<template>
	<view class="popup-mask" v-if="visible" @click="handleClose">
		<view class="popup-content" @click.stop>
			<view class="close-btn" @click="handleClose">×</view>
			<image
				class="popup-image"
				:src="imageUrl"
				mode="widthFix"
			></image>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ImagePopup',
	props: {
		imageUrl: {
			type: String,
			default: ''
		},
		storageKey: {
			type: String,
			default: 'version_shown'
		}
	},
	data() {
		return {
			visible: false
		}
	},
	mounted() {
		this.checkAndShowPopup()
	},
	methods: {
		checkAndShowPopup() {
			const hasShown = uni.getStorageSync(this.storageKey)
			if (!hasShown) {
				this.visible = true
			}
		},
		handleClose() {
			this.visible = false
			uni.setStorage({
				key: this.storageKey,
				data: true
			})
			this.$emit('close')
		}
	}
}
</script>

<style lang="less" scoped>
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;

	.popup-content {
		position: relative;
		width: 85%;
		max-width: 600rpx;
		background-color: transparent;
		border-radius: 16rpx;
		box-sizing: border-box;

		.close-btn {
			position: absolute;
			bottom: -60rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 56rpx;
			height: 56rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 40rpx;
			color: #999;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			border: 2rpx solid #ddd;
			z-index: 10;
			cursor: pointer;

			&:active {
				background-color: #f5f5f5;
			}
		}

		.popup-image {
			width: 100%;
			border-radius: 8rpx;
		}
	}
}
</style>