ts_aimz_uni/components/ad-popup.vue

296 lines
229 KiB
Vue
Raw Normal View History

2025-04-18 18:04:07 +08:00
<template>
<view class="poster-ad-popup" v-if="visible">
<view class="poster-ad-content" :animation="animation"
:style="{'left':initPosition.left,'top':initPosition.top}">
<view class="poster-ic-close poster-close-icon" @click="onClose"></view>
<view class="poster-image-box">
<view class="poster-ad-bg"></view>
<view class="poster-content">
<view class="poster-price-box">
<view class="poster-p-icon">¥</view>
<view class="poster-p-content">{{coupons.amount/100}}</view>
</view>
<view class="poster-ad-desc-box">
<text class="poster-ad-desc">{{coupons.title}}</text>
<view class="poster-ad-period">有效期:{{coupons.useGmtStart}}{{coupons.useGmtEnd}}</view>
</view>
</view>
</view>
<view class="poster-custom-checkbox-group" @click="toggleCheck">
<view class="poster-custom-checkbox" :class="checked ? 'checked' : ''">
<text v-if="checked"></text>
</view>
<view style="margin-left: 5px;margin-top: 1px;">今日不再显示</view>
</view>
<view class="poster-btn" @click="onFurl">收下优惠卷</view>
</view>
</view>
</template>
<script>
export default {
name: "ad-popup",
props: {
// 是否显示弹窗
visible: {
type: Boolean,
value: false
},
coupons: {
type: Object,
value: null
}
},
data() {
return {
localVisible: this.visible,
checked: false,
initPosition: {
left: 50,
top: 50
},
// top: 35%;
// left: 8%;
content: {
left: 20,
top: 150,
},
animation: {},
screenWidth: 0,
screenHeight: 0,
top: 590,
left: 80
};
},
mounted() {
// #ifdef H5 || MP-WEIXIN
const windowInfo = uni.getWindowInfo()
this.screenHeight = windowInfo.screenHeight
this.screenWidth = windowInfo.screenWidth
//#endif
//#ifdef MP-BAIDU || MP-TOUTIAO || MP-XHS || MP-ALIPAY
const sysInfo = uni.getSystemInfoSync()
this.screenHeight = sysInfo.screenHeight
this.screenWidth = sysInfo.screenWidth
//#endif
},
methods: {
toggleCheck() {
this.checked = !this.checked
},
// 关闭弹窗
onClose() {
this.$emit('ad-close', this.checked)
},
onFurl() {
this.startAnimation()
this.$emit('ad-furl', this.checked)
},
startAnimation() {
// 先重置元素状态
this.showBox = true
this.animation = {}
// 短暂延迟确保重置完成
setTimeout(() => {
const animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease-in-out'
});
const targetLeft = this.screenWidth - 170;
const targetTop = this.screenHeight - 170;
animation
.translate(targetLeft - this.initPosition.left, targetTop - this.initPosition
.top)
.scale(0.03)
.rotate(180)
.skew(10, 10)
.opacity(0)
.step();
this.animation = animation.export()
// 动画结束后隐藏元素
setTimeout(() => {
// this.visible = false
this.$emit('ad-close', false)
this.initPosition = {
left: 50,
top: 50
}
this.animation = {}
}, 1000);
}, 50);
}
}
}
</script>
<style>
.poster-ad-popup {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.poster-ad-content {
position: relative;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.poster-close-icon {
height: 50rpx;
width: 50rpx;
align-self: flex-end;
margin-right: 10px;
}
.poster-custom-checkbox-group {
color: #FFA900;
margin-top: 5px;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.poster-custom-checkbox {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.poster-custom-checkbox.checked {
background-color: #FFA900;
border-color: #FFA900;
color: white;
border-radius: 50%;
}
.poster-ic-close {
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MDA3MjkxNjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM1ODkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTg3Mi42MDgxOTkgMTUwLjMyNjE0NUM2NzQuMjM5Njc5LTQ5LjU5MjEzIDM0OC43OTEzMjUtNDkuNTkyMTMgMTUwLjQyMjgwNCAxNTAuMzI2MTQ1Yy0xOTkuOTE4Mjc1IDE5OS45MTgyNzUtMTk5LjkxODI3NSA1MjMuODE2ODc1IDAgNzIzLjczNTE0OSAxOTkuOTE4Mjc1IDE5OS45MTgyNzUgNTIzLjgxNjg3NSAxOTkuOTE4Mjc1IDcyMy43MzUxNDkgMCAxOTguMzY4NTIxLTE5OS45MTgyNzUgMTk4LjM2ODUyMS01MjUuMzY2NjI5LTEuNTQ5NzU0LTcyMy43MzUxNDl6IG0tNDAuMjkzNjA1IDY4MS44OTE3ODljLTE3Ni42NzE5NjQgMTc2LjY3MTk2NC00NjYuNDc1OTc0IDE3Ni42NzE5NjQtNjQzLjE0NzkzOCAwLTE3Ni42NzE5NjQtMTc2LjY3MTk2NC0xNzYuNjcxOTY0LTQ2NC45MjYyMiAwLTY0My4xNDc5MzhDMzY1LjgzODYxOSAxMi4zOTgwMzMgNjU1LjY0MjYzIDEyLjM5ODAzMyA4MzIuMzE0NTk0IDE4OS4wNjk5OTZjMTc4LjIyMTcxOCAxNzguMjIxNzE4IDE3OC4yMjE3MTggNDY2LjQ3NTk3NCAwIDY0My4xNDc5Mzh6TTcxMi45ODM1MyAzMDkuOTUwODEzYy0xMC44NDgyNzgtMTAuODQ4Mjc4LTI5LjQ0NTMyNy0xMC44NDgyNzgtNDAuMjkzNjA1IDBMNTExLjUxNTUwMiA0NzEuMTI1MjM2IDM1MC4zNDEwNzkgMzA5Ljk1MDgxM2MtMTAuODQ4Mjc4LTEwLjg0ODI3OC0yOS40NDUzMjctMTAuODQ4Mjc4LTQwLjI5MzYwNiAwLTEwLjg0ODI3OCAxMC44NDgyNzgtMTAuODQ4Mjc4IDI5LjQ0NTMyNyAwIDQwLjI5MzYwNkw0NzEuMjIxODk2IDUxMS40MTg4NDIgMzEwLjA0NzQ3MyA2NzIuNTkzMjY1Yy0xMC44NDgyNzggMTAuODQ4Mjc4LTEwLjg0ODI3OCAyOS40NDUzMjcgMCA0MC4yOTM2MDYgMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNiAwTDUxMS41MTU1MDIgNTUxLjcxMjQ0OCA2NzIuNjg5OTI1IDcxMi44ODY4NzFjMTAuODQ4Mjc4IDEwLjg0ODI3OCAyOS40NDUzMjcgMTAuODQ4Mjc4IDQwLjI5MzYwNSAwIDEwLjg0ODI3OC0xMC44NDgyNzggMTAuODQ4Mjc4LTI5LjQ0NTMyNyAwLTQwLjI5MzYwNkw1NTEuODA5MTA3IDUxMS40MTg4NDIgNzEyLjk4MzUzIDM1MC4yNDQ0MTljMTAuODQ4Mjc4LTEwLjg0ODI3OCAxMC44NDgyNzgtMjcuODk1NTczIDAtNDAuMjkzNjA2eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMzU5MCI+PC9wYXRoPjwvc3ZnPg==');
background-size: cover;
background-repeat: no-repeat;
}
.poster-image-box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.poster-content {
position: absolute;
height: 218rpx;
left: 73rpx;
top: 170rpx;
width: 62vw;
transform: rotate(-11.6deg);
transform-origin: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
}
.poster-price-box {
display: flex;
flex-direction: row;
text-align: justify;
align-items: baseline;
justify-content: center;
flex: 0.4;
}
.poster-p-icon {
font-size: 16px;
margin-bottom: 5px;
color: #FFA900;
}
.poster-p-content {
font-size: 30px;
margin-left: 5px;
color: #FFA900;
font-weight: bold;
}
.poster-ad-desc-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: #cc8a05fb;
margin-top: 8px;
flex: 0.6;
}
.poster-ad-desc {
font-size: 18px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
.poster-ad-period {
font-size: 14px;
}
.poster-btn {
border-radius: 14px;
background-color: rgba(255, 169, 0, 1);
color: rgba(255, 255, 255, 1);
font-size: 14px;
text-align: center;
font-family: PingFangSC-regular;
margin-top: 20px;
padding: 10px;
width: 55vw;
}
.poster-close-btn {
position: absolute;
top: 10rpx;
right: 10rpx;
width: 40rpx;
height: 40rpx;
background: #ccc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
color: #fff;
}
.poster-ad-bg {
width: 600rpx;
height: 600rpx;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/png;base64,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
}
</style>