menduner-uniapp/components/Advertisement/index.vue

<template>
  <view >
		<uni-popup ref="inputDialog"  class="pop" :mask-click="false" @close="closeAdd">
			<view class="popup-content" >
					<swiper class="swiper-box" @change="swiperChange">
						<swiper-item v-for="(item ,index) in swiperList" :key="index" class="f-straight">
							<image class="img-item" :src="item.img" @click="skipLink(item)" mode="widthFix"></image>
							<view @click="closeAdd" class="f-horizon-center">
								<uni-icons style="display: flex;justify-content: flex-end;" type="closeempty"	size="40"	color="#fff"/>
							</view>
						</swiper-item>
					</swiper>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getWebContent } from '@/api/common'

const current = ref(0)
const inputDialog = ref()
const swiperList = ref([])

// 获取广告图
const getSystemWebContent = async () => {
  const { data } = await getWebContent()
  swiperList.value = data.appAdvertisement || []
}
getSystemWebContent()

const closeAdd = () => {
  inputDialog.value.close()
	uni.removeStorageSync('firstOpen')
}

const openDialog = () => {
  inputDialog.value.open()
}

const skipLink = ({ link, title }) => {
	closeAdd()
	if (link) {
		const url = link.indexOf('http') !== -1 ? `/pages/addWebView/index?url=${link}&title=${title}` : link
		uni.navigateTo({ url })
	}
}

const swiperChange = (e) => {
  current.value = e.detail.current
}

onMounted(() => {
  if(uni.getStorageSync('firstOpen')) openDialog()
})
</script>

<style scoped lang="scss">
.popup-content {
	align-items: center;
	justify-content: center;
	width: 80vw;
	height: 100vh;
}
.img-item{
	width: 100%;
	height: 60vh;
	margin: 0;
	border-radius: 20px;
}
.swiper-box{
	height: 100vh;
}
.f-straight{
	display: flex;
	justify-content: center;
	flex-direction: column;
}
</style>