mp_exhibitor_miniprog/pages/index/components/popup-ad.vue

<template>
	<van-overlay :show="show">
		<view class="popup-ad-wrapper">
			<view class="popup-ad">
				<view class="popup-ad-image" @click="onClickImage">
					<image :src="adImage" mode="widthFix"/>
				</view>
				<view class="popup-ad-close" @click="onClickClose">
					<van-icon name="close" />
				</view>
			</view>
		</view>
		<van-action-sheet
		  :show="showActionSheet"
		  :actions="actions"
		  @select="onActionSelect"
			@cancel="onActionCancel"
			:close-on-click-overlay="true"
			:close-on-click-action="true"
			cancel-text="取消"
		/>
	</van-overlay>
</template>

<script>
  import VanOverlay from '@/wxcomponents/vant/overlay/index'
	import VanActionSheet from '@/wxcomponents/vant/action-sheet/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			VanOverlay,
			VanActionSheet
		},
		props: {
			show: Boolean
		},
		data() {
			return {
				adUrl: 'https://file.smarket.net.cn/s/template/hOM48k/index.html?customFormId=2310071208827845&instanceId=387836&linkId=345547&configId=3439487%23%2Fwap_index%3FrandNum%3D1709540499#/pc_index?randNum=1709540499',
				adImage: 'https://oss.starify.cn/prod/starify/up/0001018678/20241107/672c895e605c9.png',
				showActionSheet: false,
				actions: [{
						name: '保存图片',
						value: 'save'
				}, {
						name: '识别二唯码',
						value: 'open'
				}]
			}
		},
		created() {
			
		},
		methods: {
			onClickClose() {
				this.$emit('update:show', false)
			},
			onClickImage() {
				this.showActionSheet = true
				// uni.previewImage({
				// 	current: this.adImage,
				// 	urls: [this.adImage],
				// })
			},
			onActionSelect(e) {
				if (e.detail.value === 'save') {
					uni.getImageInfo({
						src: this.adImage,
						success: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: res.path,
								success() {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
									})
								},
								fail(err) {
									uni.showToast({
										title: '保存失败',
										icon: 'none',
									});
									console.error(err);
								},
							})
						},
						fail(err) {
							uni.showToast({
								title: '获取图片失败',
								icon: 'none',
							})
							console.error(err)
						},
					})
				} else if (e.detail.value === 'open') {
					this.navigateTo(this.adUrl)
				}
				this.showActionSheet = false
			},
			onActionCancel() {
				this.showActionSheet = false
			}
		}
	}
</script>

<style lang="scss">
	.popup-ad-wrapper{
		@include display-flex-center;
		height: 100%;
		.popup-ad{
			@include display-flex-center;
			width: 100%;
			position: relative;
			flex-direction: column;
			padding: 36rpx;
		}
		.popup-ad-image{
			width: 100%;
			image{
				width: 100%;
				height: auto;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
		.popup-ad-close{
			margin-top: 50rpx;
			.van-icon-close{
				font-size: 69rpx;
				color: #ffffff;
				cursor: pointer;
			}
		}
	}
</style>