community-front/pages/components/GlobalPopup.vue

<template>
  <!-- 如何让他点击遮罩层的时候关闭弹窗 -->
  <view v-if="visible" class="popup-overlay" @click="close">
    <view class="popup-content" @click.stop :animation="animationData" :style="{backgroundImage: `${bgImage}`}">
      <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 `url(${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: absolute;
    top: 50%;
    left: 50%;
    width: 632rpx;
    padding: 0;
    height: 830rpx;
    // background: red;
    // border-radius: 20rpx;
    background-size: 100% 100%;
    .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>