VAVABUY/components/blindModel.vue

<template>
  <Theme>
    <Popup ref="popRef" mode="center">
      <template #content>
        <view class="content">
          <view class="content_success" v-if="giftStatus == 'await'">
            <trans _t="恭喜！您有一份盲盒待解锁" class="title"></trans>
            <view class="gift_container">
              <image
                src="/static/user/gift_bg.png"
                class="gift_box_img"
              ></image>
            </view>
            <view class="gift_bottom"></view>
          </view>
          <view class="opening_animation" v-else-if="giftStatus == 'loading'">
            <view class="gift_container opening">
              <image
                src="/static/user/gift_bg.png"
                class="gift_box_img opening"
              ></image>
              <view class="crack_effect">
                <view
                  class="crack"
                  v-for="i in 4"
                  :key="i"
                  :style="{ '--delay': i * 0.1 + 's' }"
                ></view>
              </view>
              <view class="explosion_particles">
                <view
                  class="explosion"
                  v-for="i in 12"
                  :key="i"
                  :style="{
                    '--delay': i * 0.05 + 's',
                    '--angle': i * 30 + 'deg',
                  }"
                ></view>
              </view>
            </view>
            <image
              class="fireworks_img"
              src="/static/user/fireworks.gif"
            ></image>
          </view>
          <view class="content_success" v-else-if="giftStatus == 'open'">
            <trans _t="恭喜！您获得" class="title"></trans>
            <view class="gift_box">
              <image src="/static/user/get_gift.png" class="img"></image>
              <view class="cont_box">
                <view class="title">
                  <trans _t="盲盒兑换券" />
                  ×1</view
                >
                <view class="time">
                  <trans _t="有效期限：" />
                  <view class="days">
                    180
                    <trans _t="天" />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template #footer>
        <slot name="footer">
          <view class="footer">
            <template v-if="giftStatus == 'await'">
              <view class="submit_btn" @click="openGift">
                <trans _t="立即打开" />
              </view>
              <view class="submit_btn submit_shop" @click="close">
                <trans _t="一会儿再说" />
              </view>
            </template>
            <view
              class="submit_btn"
              @click="gitGift"
              v-else-if="giftStatus == 'open'"
            >
              <trans _t="领取" />
            </view>
          </view>
        </slot>
      </template>
    </Popup>

    <floatButton
      bottom="120px"
      right="0"
      image="/static/user/get_gift.png"
      :unclaimedNum="count"
      @onConfirm="open"
      v-if="!giftShow && count"
    />
  </Theme>
</template>

<script setup>
import { ref, watch, computed, nextTick } from "vue";
import Popup from "@/components/popup.vue";
import { t } from "@/locale";
import { useSystemStore } from "@/store";
import { CONTENT_RECEIVE_BOX } from "@/api";
import { Toast, TimeOut } from "@/utils";
import floatButton from "@/components/floatButton";

const popRef = ref(null);
const useSystem = useSystemStore();
const count = computed(() => useSystem.getCount);
const giftShow = ref(false);
const giftStatus = ref("await");

const emit = defineEmits(["complete", "close", "open"]);

const open = () => {
  giftStatus.value = "await";
  popRef.value && popRef.value.open();
  giftShow.value = true;
  emit("open");
};

const close = () => {
  emit("close");
  giftShow.value = false;
  popRef.value && popRef.value.close();
};
const openGift = async () => {
  giftStatus.value = "loading";
  try {
    await CONTENT_RECEIVE_BOX();
    useSystem.setBoxes();
    giftStatus.value = "open";
  } catch (error) {
    Toast(error.msg);
    giftStatus.value = "await";
  }
  // 添加开启动画的延迟，让用户看到完整的动画效果
  // setTimeout(async () => {

  // }, 2000);
};
const gitGift = () => {
  uni.navigateTo({ url: "/pages/user/weal_center" });
  giftStatus.value = "await";
  close();
};
watch(
  () => count.value,
  (val) => {
    if (giftStatus.value == "await") {
      if (val) {
        nextTick(() => {
          open();
        });
      } else {
        close();
      }
    }
  },
  {
    immediate: true,
  }
);

defineExpose({ open, close });
</script>

<style lang="less" scoped>
@import url("@/style.less");

// 关键帧动画定义
@keyframes giftFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10rpx) rotate(1deg);
  }
  50% {
    transform: translateY(-5rpx) rotate(0deg);
  }
  75% {
    transform: translateY(-15rpx) rotate(-1deg);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes particleFloat {
  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20rpx) scale(1.2);
    opacity: 1;
  }
}

@keyframes giftShake {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  10% {
    transform: translateX(-5rpx) scale(1.05);
  }
  20% {
    transform: translateX(5rpx) scale(1.05);
  }
  30% {
    transform: translateX(-5rpx) scale(1.05);
  }
  40% {
    transform: translateX(5rpx) scale(1.05);
  }
  50% {
    transform: translateX(-5rpx) scale(1.05);
  }
  60% {
    transform: translateX(5rpx) scale(1.05);
  }
  70% {
    transform: translateX(-5rpx) scale(1.05);
  }
  80% {
    transform: translateX(5rpx) scale(1.05);
  }
  90% {
    transform: translateX(-5rpx) scale(1.05);
  }
}

@keyframes giftExplode {
  0% {
    transform: scale(1.1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes crackAppear {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: var(--width, 80%);
    opacity: 1;
  }
}

@keyframes explosionFly {
  0% {
    transform: rotate(var(--angle)) translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(var(--angle)) translateX(100rpx) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: rotate(var(--angle)) translateX(200rpx) scale(0.5);
    opacity: 0;
  }
}

:deep(.conts) {
  min-width: 85vw;
  max-width: 95vw;
}

.content {
  padding: 40rpx 0;
  flex: 1;
  .flex_center();

  &_success {
    position: relative;
    .flex_center();
    flex-direction: column;
    gap: 20rpx;
    .gift_bottom {
      position: absolute;
      left: 50%;
      bottom: 10rpx;
      width: 180rpx;
      height: 40rpx;
      border-radius: 20rpx;
      background: #ffdbbb;
      transform: translateX(-90rpx);
      filter: blur(40rpx);
    }
    .gift_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      border-radius: 20rpx;
      padding: 10rpx 16rpx 0;
      background: linear-gradient(180deg, #e6734c 0%, #eb3a68 100%);
      .img {
        width: 140rpx;
        height: 140rpx;
        margin-bottom: 20rpx;
      }
      .cont_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 450rpx;
        height: 222rpx;
        background: url("/static/user/gift_box.png");
        background-size: 100% 100%;
        padding: 40rpx 0 50rpx;

        .title {
          .size(32rpx);
          color: var(--red);
        }
        .time {
          display: flex;
          .size(28rpx);
          color: var(--text-02);
          .days {
            color: var(--text);
            font-weight: 700;
          }
        }
      }
    }
  }
  .title {
    .size(32rpx);
    color: #3d3d3d;
    font-weight: 600;
    margin-bottom: 40rpx;
  }
  .img {
    width: 300rpx;
    height: 300rpx;
  }

  // 盲盒容器
  .gift_container {
    position: relative;
    width: 300rpx;
    height: 300rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .gift_box_img {
      width: 300rpx;
      height: 300rpx;
      transition: all 0.3s ease;
      animation: giftFloat 2s ease-in-out infinite;

      &.opening {
        animation: giftShake 0.5s ease-in-out, giftExplode 0.8s ease-out 0.5s;
        transform: scale(1.1);
      }
    }

    // 拆开时的裂纹效果
    .crack_effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .crack {
        position: absolute;
        background: linear-gradient(45deg, transparent, #ff6b35, transparent);
        animation: crackAppear 0.3s ease-out;
        animation-delay: var(--delay);

        &:nth-child(1) {
          top: 20%;
          left: 10%;
          width: 80%;
          height: 2rpx;
          transform: rotate(15deg);
        }
        &:nth-child(2) {
          top: 40%;
          left: 20%;
          width: 60%;
          height: 2rpx;
          transform: rotate(-25deg);
        }
        &:nth-child(3) {
          top: 60%;
          left: 15%;
          width: 70%;
          height: 2rpx;
          transform: rotate(35deg);
        }
        &:nth-child(4) {
          top: 80%;
          left: 25%;
          width: 50%;
          height: 2rpx;
          transform: rotate(-15deg);
        }
      }
    }

    // 爆炸粒子效果
    .explosion_particles {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .explosion {
        position: absolute;
        width: 6rpx;
        height: 6rpx;
        background: radial-gradient(circle, #ff6b35, #ffd700);
        border-radius: 50%;
        animation: explosionFly 1s ease-out forwards;
        animation-delay: var(--delay);
        transform: rotate(var(--angle)) translateX(0);
      }
    }
  }

  // 开启动画容器
  .opening_animation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300rpx;

    .fireworks_img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400rpx;
      height: 400rpx;
      z-index: 10;
    }
  }
}

.footer {
  .submit_btn {
    width: 100%;
    height: 76rpx;
    padding: 16rpx 30rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 16rpx;
    .size(24rpx);
    margin-top: 24rpx;
    &.submit_shop {
      background-color: var(--bg);
      border: 1rpx solid var(--black);
      color: var(--black);
    }
  }
}
</style>