xc-app/pages/components/pagePopUp.vue

<template>
	<view v-if="visible">
		<template v-if="list.length > 0">
			<template v-for="(item,index) in list">
				<view class="page-popup-page" v-if="visible && dlgIndex-1 === index" @click.stop="activityClose(index)" :key="index">
					<view class="dlg">
						<view class="dlg-main">
							<!-- <image src="@/static/new/mryh.png" mode="" class="dlg-title"></image> -->
							<template v-if="item.img.coverResource">
								<image :src="item.img.coverResource.url" mode="aspectFit" class="activity-img" @click.stop="goActivityDetail(item)"></image>
							</template>
							<template v-if="item.button.coverResource">
								<image :src="item.button.coverResource.url" mode="" class="now-buy" @click.stop="goActivityPre(item)"></image>
							</template>
							<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click.stop="activityClose(index)"></image>
						</view>
					</view>
				</view>
			</template>
		</template>
		<!-- <web-view :src="webViewUrl" v-if="isCustomerPath" style="position: fixed;top: -1000rpx;"></web-view> -->
	</view>

</template>

<script>
	import {
		popupAdPageApi,popupAdPageChannelApi
	} from '@/API/index.js'
	import {
		showWebview
	} from '@/utils/webViewCom.js'
	
	
	export default {
		data() {
			return {
				list: [],
				dlgIndex:null,
				visible: false,
				webViewUrl:'',
				isCustomerPath:false
			}
		},
		props: {
			page: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'POPUP'
			}
		},
		onLoad() {
			console.log("onLoad")
		},
		created() {
			console.log("created")
		},
		onShow() {
			console.log("onShow")
		},
		mounted() {
			this.getPopupAdPage(this.page)
		},
		methods: {
			getPopupAdPage(page) {
				popupAdPageChannelApi({
					page,
					type: this.type
				}).then(res => {
					console.log("res:",res)
					if (res.code === 200) {
						this.list = res.data
						if (this.list.length > 0) {
							this.visible = true
							this.dlgIndex = this.list.length
						}
					} else {
						this.$api.msg(res.message)
					}
				})
				// popupAdPageApi({
				// 	page,
				// 	type: this.type
				// }).then(res => {
				// 	console.log("res:",res)
				// 	if (res.code === 200) {
				// 		this.list = res.data
				// 		if (this.list.length > 0) {
				// 			this.visible = true
				// 			this.dlgIndex = this.list.length
				// 		}
				// 	} else {
				// 		this.$api.msg(res.message)
				// 	}
				// })
			},
			goActivityDetail(item) {
				if(this.page === '/pages/index/new-index'){
					this.$emit('click',item,'img')
					this.visible = false
				}else{
					if (item.img.type === 'INSIDE') {
						if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
							.url === '/pages/mine/boxRecrd' || item.img.url === '/pages/mine/mine') {
								uni.switchTab({
									url: `${item.img.url}`,
								});
								uni.$emit('updateTabData', {newData:'newData'});
						} else {
							uni.navigateTo({
								url: `${item.img.url}`
							})
						}
					
					} else {
						// showWebview(item.img.url)
						window.location.href = item.img.url
					}
				}
				
			},
			goActivityPre(item) {
				if(this.page === '/pages/index/new-index'){
					this.$emit('click',item,'btn')
					this.visible = false
				}else{
					if (item.button.type === 'INSIDE') {
						if (item.button.url === '/pages/index/new-index' || item.button.url === '/pages/shop/index' || item.button
							.url === '/pages/mine/sign' || item.button.url === '/pages/mine/mine') {
							uni.switchTab({
								url: `${item.button.url}`
							})
							uni.$emit('updateTabData', {newData:'newData'});
						} else {
							uni.navigateTo({
								url: `${item.button.url}`
							})
						}
					} else {
						// showWebview(item.img.url)
						window.location.href = item.button.url
					}
				}
				
			},
			activityClose(index) {
				console.log(index)
				// this.dlgIndex = index
				if (index === 0) {
					this.visible = false
				} else {
					this.list.splice(index, 1)
					this.dlgIndex -= 1
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page-popup-page {
		.dlg {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 888;

			.dlg-main {
				position: absolute;
				top: 0;
				left: 0;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 888;
				flex-direction: column;
				// width: 490rpx;
				// height: 608rpx;
				// background-image: url('@/static/new/box/hdtc.png');
				// background-repeat: no-repeat;
				// background-size: 100%;

				// .dlg-title {
				// 	display: block;
				// 	margin: 0 auto;
				// 	width: 148rpx;
				// 	height: 52rpx;
				// }

				.activity-img {
					width: 579rpx;
					height: 549rpx;
					border-radius: 20rpx;
					display: block;
					margin: 20rpx auto;
					z-index: 2;
				}

				.now-buy {
					width: 296rpx;
					height: 95rpx;
					// background-image: url('@/static/home/dlg-ljgm.png');
					// background-repeat: no-repeat;
					// background-size: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: YouSheBiaoTiHei;
					font-size: 45rpx;
					color: #FFFFFF;
					margin: 0 auto;
				}

				.dlg-close-img {
					display: block;
					width: 79rpx;
					height: 79rpx;
					z-index: 888;
					margin: 55rpx auto 0 auto;
				}
			}
		}
	}
</style>