feat: 优化开屏广告展示逻辑和交互效果
This commit is contained in:
davy
parent
3c51474516
commit
6b7d8a6fcd
@ -74,17 +74,33 @@
|
||||
</view> -->
|
||||
<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
|
||||
<!-- 开屏广告 -->
|
||||
<uni-popup ref="ADRef" type="center" :is-mask-click="false" maskBackgroundColor="rgba(0,0,0,0.7)">
|
||||
<view class="flex flex-col align-center justify-center" style="width: 630rpx;height: 61vh;">
|
||||
<swiper class="swiper" style="width: 630rpx;height: 58vh;" circular :autoplay="true"
|
||||
:indicator-dots="true">
|
||||
<swiper-item v-for="(item,index) in ADList" :key="index">
|
||||
<image :src="item.bannerUrl" style="width: 630rpx;height: 50vh;border-radius: 30rpx;"
|
||||
<uni-popup ref="ADRef" type="center" :is-mask-click="false" maskBackgroundColor="rgba(0,0,0,0.7)" @change="handlePopupChange">
|
||||
<view class="ad-container">
|
||||
<swiper class="ad-swiper"
|
||||
:circular="false"
|
||||
:autoplay="false"
|
||||
:duration="300"
|
||||
:indicator-dots="true"
|
||||
:indicator-color="'rgba(255,255,255,0.3)'"
|
||||
:indicator-active-color="'#FFFFFF'"
|
||||
@change="handleAdSwiperChange">
|
||||
<swiper-item v-for="(item,index) in ADList"
|
||||
:key="index"
|
||||
class="ad-swiper-item"
|
||||
:class="{'active': currentAdIndex === index}"
|
||||
@click="handleAD(item)">
|
||||
<view class="ad-image-container">
|
||||
<image :src="item.bannerUrl"
|
||||
class="ad-image"
|
||||
mode="aspectFill"
|
||||
:lazy-load="true">
|
||||
</image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<text class="cuIcon-roundclose text-white" style="font-size: 68rpx !important;" @click="closeAd"></text>
|
||||
<view class="ad-close" @click="closeAd">
|
||||
<text class="cuIcon-roundclose"></text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
@ -126,6 +142,7 @@
|
||||
loading: false,
|
||||
finished: false,
|
||||
navItems: ['新酒上市', '生成酒单', '酒币换购', '关注厂牌'],
|
||||
currentAdIndex: 0, // 当前广告索引
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -231,21 +248,28 @@
|
||||
} else if (it.bannerType == 'homeBanner') { // 首页banner
|
||||
this.homeBanner.push(it)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
let showHomeAD = uni.getStorageSync('showHomeAD')
|
||||
if (!showHomeAD) {
|
||||
// 检查是否需要显示开屏广告
|
||||
this.checkShowAD()
|
||||
})
|
||||
},
|
||||
// 检查是否需要显示开屏广告
|
||||
checkShowAD() {
|
||||
if (this.ADList.length === 0) return
|
||||
|
||||
const currentSession = uni.getStorageSync('currentSession')
|
||||
const newSession = Date.now()
|
||||
|
||||
// 每次打开小程序都显示广告
|
||||
if (!currentSession || currentSession !== newSession) {
|
||||
this.$refs.ADRef.open()
|
||||
|
||||
// 记录本次会话时间
|
||||
uni.setStorageSync('currentSession', newSession)
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 关闭广告
|
||||
closeAd() {
|
||||
uni.setStorageSync('showHomeAD', true)
|
||||
this.$refs.ADRef.close()
|
||||
},
|
||||
handleAD(item) {
|
||||
@ -256,13 +280,6 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
// 立即认证门店
|
||||
toJoin() {
|
||||
if (!this.bannerJoin) return
|
||||
uni.navigateTo({
|
||||
url: this.bannerJoin.bannerLink,
|
||||
})
|
||||
},
|
||||
// 跳转专辑页
|
||||
toFeaturePage(item) {
|
||||
uni.navigateTo({
|
||||
@ -393,6 +410,12 @@
|
||||
url: "/pagesActivity/activityDetail?id=" + item.id
|
||||
})
|
||||
},
|
||||
handlePopupChange(e) {
|
||||
this.currentAdIndex = e.detail.current;
|
||||
},
|
||||
handleAdSwiperChange(e) {
|
||||
this.currentAdIndex = e.detail.current;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -692,4 +715,97 @@
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ad-container {
|
||||
position: relative;
|
||||
width: 750rpx;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ad-swiper {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ad-swiper-item {
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.85);
|
||||
opacity: 0.6;
|
||||
|
||||
&.active {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ad-image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.ad-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 30rpx;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.ad-close {
|
||||
margin-top: 40rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.cuIcon-roundclose {
|
||||
font-size: 44rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-swiper-dots {
|
||||
bottom: -20rpx !important;
|
||||
|
||||
.uni-swiper-dot {
|
||||
width: 12rpx !important;
|
||||
height: 12rpx !important;
|
||||
border-radius: 6rpx !important;
|
||||
margin: 0 6rpx !important;
|
||||
transition: all 0.3s ease !important;
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
|
||||
&.uni-swiper-dot-active {
|
||||
width: 28rpx !important;
|
||||
background-color: #FFFFFF !important;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user