yizhizan-h5/components/global-push-ad/global-push-ad.vue

<template>
	<view v-if="visible" class="gpa-mask" @click="onMask">
		<view class="gpa-box" @click.stop>
			<image
				class="gpa-img"
				:src="imageUrl"
				mode="widthFix"
				@click="onImageClick"
			/>
			<view class="gpa-close" @click="close">×</view>
		</view>
	</view>
</template>

<script>
import { pushAdState, closePushAd } from '@/common/pushAdStore.js'

export default {
	name: 'GlobalPushAd',
	computed: {
		visible() {
			return pushAdState.visible
		},
		imageUrl() {
			return pushAdState.imageUrl
		},
		linkUrl() {
			return pushAdState.linkUrl
		}
	},
	methods: {
		close() {
			closePushAd()
		},
		onMask() {
			this.close()
		},
		onImageClick() {
			const url = this.linkUrl
			if (!url) return
			// #ifdef APP-PLUS
			if (/^https?:\/\//i.test(url)) {
				plus.runtime.openURL(url)
				return
			}
			// #endif
			// #ifdef H5
			if (/^https?:\/\//i.test(url)) {
				window.location.href = url
				return
			}
			// #endif
			if (url.startsWith('/')) {
				uni.navigateTo({ url, fail: () => uni.switchTab({ url }) })
			}
		}
	}
}
</script>

<style scoped>
.gpa-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48rpx;
	box-sizing: border-box;
}

.gpa-box {
	position: relative;
	max-width: 100%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gpa-img {
	width: 600rpx;
	max-width: 100%;
	display: block;
	border-radius: 16rpx;
}

.gpa-close {
	margin-top: 32rpx;
	width: 72rpx;
	height: 72rpx;
	line-height: 68rpx;
	text-align: center;
	font-size: 48rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	flex-shrink: 0;
}
</style>