296 lines
229 KiB
Vue
296 lines
229 KiB
Vue
|
<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>
|