You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
5.0 KiB
198 lines
5.0 KiB
<template>
|
|
<!-- 如何让他点击遮罩层的时候关闭弹窗 -->
|
|
<view v-if="visible" class="popup-overlay" @click="close">
|
|
<view class="popup-content" @click.stop :animation="animationData">
|
|
<image class="popup-bg" :src="bgImage" mode="aspectFit"></image>
|
|
<image class="popup-title" :src="titleImage" mode="aspectFit"></image>
|
|
<!-- <view class="popup-header"> -->
|
|
<text class="popup-text">{{ content }}</text>
|
|
<text class="popup-subtext">{{ subContent }}</text>
|
|
<!-- </view> -->
|
|
<button v-if="popupType === 'success'" class="popup-btn success" @click="close">我知道了</button>
|
|
<button v-else class="popup-btn fail" @click="close">好的</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'GlobalPopup',
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
content: '',
|
|
subContent: '',
|
|
titleType: '',
|
|
popupType: '',
|
|
animationData: {},
|
|
closefn: () => {}
|
|
}
|
|
},
|
|
computed: {
|
|
bgImage() {
|
|
return `${this.popupType === 'success' ? '/static/成功弹窗.png' : '/static/失败弹窗.png'}`
|
|
},
|
|
titleImage() {
|
|
switch (this.titleType) {
|
|
case 'exchange':
|
|
if (this.popupType === 'success') {
|
|
return '/static/兑换成功.png'
|
|
}else{
|
|
return '/static/兑换失败.png'
|
|
}
|
|
case 'signup':
|
|
return '/static/报名成功.png'
|
|
case 'submit':
|
|
return '/static/提交成功.png'
|
|
default:
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.createHideAnimation()
|
|
this.closefn()
|
|
},
|
|
// 主内容 副内容 标题类型 弹窗类型
|
|
open({
|
|
content = '默认内容',
|
|
subContent = '默认子内容',
|
|
titleType = 'exchange', // 报名 兑换 提交
|
|
popupType = 'success', // 成功 失败
|
|
closefn = () => {}
|
|
}) {
|
|
this.content = content
|
|
this.subContent = subContent
|
|
this.titleType = titleType
|
|
this.popupType = popupType
|
|
// 先设置初始动画状态
|
|
this.setInitialAnimation()
|
|
// 显示弹窗
|
|
this.visible = true
|
|
|
|
// 延迟执行显示动画
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
this.createShowAnimation()
|
|
}, 50)
|
|
})
|
|
this.closefn = closefn
|
|
},
|
|
// 设置初始动画状态
|
|
setInitialAnimation() {
|
|
const animation = uni.createAnimation({
|
|
transformOrigin: "50% 50%",
|
|
duration: 0,
|
|
timingFunction: "ease-out",
|
|
delay: 0
|
|
})
|
|
animation.translateX('-50%').translateY('-50%').scale(0).opacity(0).step()
|
|
this.animationData = animation.export()
|
|
},
|
|
// 创建弹窗显示动画
|
|
createShowAnimation() {
|
|
const animation = uni.createAnimation({
|
|
transformOrigin: "50% 50%",
|
|
duration: 200,
|
|
timingFunction: "ease-out",
|
|
delay: 0
|
|
})
|
|
// 动画到最终状态：保持居中，缩放为1，透明度为1
|
|
animation.translateX('-50%').translateY('-50%').scale(1).opacity(1).step()
|
|
this.animationData = animation.export()
|
|
},
|
|
// 创建弹窗隐藏动画
|
|
createHideAnimation() {
|
|
const animation = uni.createAnimation({
|
|
transformOrigin: "50% 50%",
|
|
duration: 200,
|
|
timingFunction: "ease-in",
|
|
delay: 0
|
|
})
|
|
animation.translateX('-50%').translateY('-50%').scale(0).opacity(0).step()
|
|
this.animationData = animation.export()
|
|
// 动画结束后隐藏弹窗
|
|
setTimeout(() => {
|
|
this.visible = false
|
|
}, 200)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.popup-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #00000050;
|
|
z-index: 999;
|
|
.popup-content {
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 632rpx;
|
|
padding: 0;
|
|
height: 830rpx;
|
|
// background: red;
|
|
// border-radius: 20rpx;
|
|
// background-size: 100% 100%;
|
|
.popup-bg{
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
width: 632rpx;
|
|
height: 830rpx;
|
|
}
|
|
.popup-title{
|
|
position: absolute;
|
|
top: 44rpx;
|
|
left: 88rpx;
|
|
height: 100rpx;
|
|
width: 254rpx;
|
|
}
|
|
.popup-btn{
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 432rpx;
|
|
height: 94rpx;
|
|
border-radius: 20.5px;
|
|
// width: 28px;
|
|
font-size: 14px;
|
|
line-height: 94rpx;
|
|
color: #ffffff;
|
|
}
|
|
.success{
|
|
background: #1488db;
|
|
}
|
|
.fail{
|
|
background: #e54b4b;
|
|
}
|
|
.popup-text{
|
|
font-size: 16px;
|
|
position: absolute;
|
|
top: 480rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-weight: 700;
|
|
color: #000000;
|
|
white-space: nowrap;
|
|
// text-align: center;
|
|
}
|
|
.popup-subtext{
|
|
position: absolute;
|
|
bottom: 252rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 14px;
|
|
color: #999999;
|
|
white-space: nowrap;
|
|
// text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|