spring-festival-greetings/components/LuckyPopup/LuckyPopup.vue

<template>
  <view class="lucky-popup-container">
    <uni-popup ref="popup" type="center" :mask-click="false">
      <!-- 动画阶段 -->
      <view v-if="isAnimating" class="animation-container">
        <view class="card-flip-wrapper" :class="{ flipped: isFlipping }">
          <view class="card-front">
            <view class="loading-circle">
              <view class="particle p1"></view>
              <view class="particle p2"></view>
              <view class="particle p3"></view>
              <view class="particle p4"></view>
            </view>
            <text class="loading-text">{{ loadingText }}</text>
          </view>
          <view class="card-back"></view>
        </view>
        <view class="light-effect" v-if="showLight"></view>
      </view>

      <!-- 结果阶段 -->
      <view v-else class="result-container">
        <view class="lucky-card" id="lucky-card">
          <!-- 头部渐变区 -->
          <view class="card-header">
            <view class="header-decor left">福</view>
            <view class="header-decor right">禧</view>

            <text class="header-label">今日好运指数</text>
            <view class="score-wrap">
              <text class="score">{{ resultData.score }}</text>
              <text class="percent">%</text>
            </view>
            <text class="lucky-word">{{ resultData.luckyWord }}</text>

            <view class="tag-year">2026 CNY SPECIAL</view>
          </view>

          <!-- 内容区 -->
          <view class="card-body">
            <!-- 宜忌 -->
            <view class="yi-ji-grid">
              <view class="grid-item yi">
                <view class="item-title">
                  <uni-icons type="checkmarkempty" size="16" color="#d81e06" />
                  <text>今日宜</text>
                </view>
                <text class="item-content">{{ resultData.yi }}</text>
              </view>
              <view class="grid-item ji">
                <view class="item-title">
                  <uni-icons type="closeempty" size="16" color="#666" />
                  <text>今日忌</text>
                </view>
                <text class="item-content">{{ resultData.ji }}</text>
              </view>
            </view>

            <!-- 幸运元素 -->
            <view class="lucky-elements">
              <view class="elements-title">
                <uni-icons type="star-filled" size="16" color="#ffca28" />
                <text>幸运元素</text>
              </view>
              <view class="elements-row">
                <view class="el-item">
                  <text class="label">颜色</text>
                  <text class="value color-val">{{
                    resultData.luckyColor
                  }}</text>
                </view>
                <view class="divider"></view>
                <view class="el-item">
                  <text class="label">数字</text>
                  <text class="value">{{ resultData.luckyNumber }}</text>
                </view>
                <view class="divider"></view>
                <view class="el-item">
                  <text class="label">方向</text>
                  <text class="value">{{ resultData.luckyDirection }}</text>
                </view>
              </view>
            </view>

            <view class="quote-text">“{{ resultData.quote }}”</view>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="bottom-actions">
          <view class="action-btn" @tap="onSaveImage">
            <uni-icons type="download" size="24" color="#fff" />
            <text class="btn-label">保存</text>
          </view>

          <button class="action-btn share-btn" open-type="share">
            <uni-icons type="paperplane" size="24" color="#fff" />
            <text class="btn-label">好友</text>
          </button>

          <view class="action-btn" @tap="onShareMoments">
            <uni-icons type="camera" size="24" color="#fff" />
            <text class="btn-label">朋友圈</text>
          </view>

          <view class="action-btn close-btn" @tap="close">
            <uni-icons type="closeempty" size="24" color="#fff" />
            <text class="btn-label">关闭</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";

const popup = ref(null);
const isAnimating = ref(true);
const isFlipping = ref(false);
const showLight = ref(false);
const loadingText = ref("好运加载中...");

const resultData = ref({
  score: 88,
  luckyWord: "鸿运当头",
  yi: "沟通合作、尝试新事物",
  ji: "熬夜、冲动消费",
  luckyColor: "如意金",
  luckyNumber: "6",
  luckyDirection: "东南",
  quote: "今天适合向前一步，好运正在回应你的努力。",
});

const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];

const open = () => {
  isAnimating.value = true;
  isFlipping.value = false;
  showLight.value = false;
  loadingText.value = texts[0];
  popup.value.open();

  startAnimation();
};

const close = () => {
  popup.value.close();
};

const startAnimation = () => {
  // 文字轮播
  let step = 0;
  const timer = setInterval(() => {
    step++;
    if (step < texts.length) {
      loadingText.value = texts[step];
    }
  }, 600);

  // 1.5s 后翻转
  setTimeout(() => {
    clearInterval(timer);
    isFlipping.value = true;
    showLight.value = true;

    // 动画结束后显示结果
    setTimeout(() => {
      isAnimating.value = false;
    }, 600);
  }, 1800);
};

const onSaveImage = () => {
  uni.showToast({ title: "保存功能开发中", icon: "none" });
};

const onShareMoments = () => {
  uni.showToast({ title: "请点击右上角分享", icon: "none" });
};

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

<style lang="scss" scoped>
.lucky-popup-container {
  /* 动画容器 */
  .animation-container {
    width: 600rpx;
    height: 850rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    perspective: 1000px;
  }

  .card-flip-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    &.flipped {
      transform: rotateY(180deg);
    }
  }

  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.3);
  }

  .card-front {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
    z-index: 2;

    .loading-circle {
      width: 120rpx;
      height: 120rpx;
      position: relative;
      margin-bottom: 40rpx;

      .particle {
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        background: #ffd700;
        border-radius: 50%;
        animation: orbit 1.5s linear infinite;

        &.p1 {
          animation-delay: 0s;
        }
        &.p2 {
          animation-delay: -0.375s;
        }
        &.p3 {
          animation-delay: -0.75s;
        }
        &.p4 {
          animation-delay: -1.125s;
        }
      }
    }

    .loading-text {
      color: #ffd700;
      font-size: 28rpx;
      letter-spacing: 2rpx;
    }
  }

  .card-back {
    background: #fff;
    transform: rotateY(180deg);
  }

  .light-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle,
      rgba(255, 215, 0, 0.8) 0%,
      transparent 70%
    );
    opacity: 0;
    animation: flash 0.6s ease-out forwards;
    pointer-events: none;
  }

  /* 结果展示 */
  .result-container {
    width: 600rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lucky-card {
    width: 100%;
    height: 850rpx;
    background: #fff;
    border-radius: 40rpx;
    overflow: hidden;
    margin-bottom: 40rpx;

    .card-header {
      height: 360rpx;
      background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;

      .header-decor {
        position: absolute;
        top: 20rpx;
        font-size: 24rpx;
        opacity: 0.6;

        &.left {
          left: 30rpx;
        }
        &.right {
          right: 30rpx;
        }
      }

      .header-label {
        font-size: 24rpx;
        margin-bottom: 16rpx;
        opacity: 0.9;
        letter-spacing: 2rpx;
      }

      .score-wrap {
        display: flex;
        align-items: baseline;
        line-height: 1;
        margin-bottom: 16rpx;

        .score {
          font-size: 120rpx;
          font-weight: bold;
          text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        }

        .percent {
          font-size: 40rpx;
          margin-left: 4rpx;
          font-weight: 500;
        }
      }

      .lucky-word {
        font-size: 48rpx;
        font-weight: bold;
        letter-spacing: 4rpx;
        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        margin-bottom: 32rpx;
      }

      .tag-year {
        background: rgba(0, 0, 0, 0.15);
        padding: 8rpx 24rpx;
        border-radius: 30rpx;
        font-size: 20rpx;
        letter-spacing: 2rpx;
      }
    }

    .card-body {
      padding: 40rpx 32rpx;

      .yi-ji-grid {
        display: flex;
        gap: 24rpx;
        margin-bottom: 32rpx;

        .grid-item {
          flex: 1;
          background: #fbfbfb;
          border-radius: 20rpx;
          padding: 24rpx;
          border: 2rpx solid #f5f5f5;

          .item-title {
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;

            text {
              font-size: 24rpx;
              font-weight: bold;
              color: #333;
              margin-left: 8rpx;
            }
          }

          .item-content {
            font-size: 22rpx;
            color: #666;
            line-height: 1.4;
          }
        }
      }

      .lucky-elements {
        background: #fbfbfb;
        border-radius: 20rpx;
        padding: 24rpx;
        border: 2rpx solid #f5f5f5;
        margin-bottom: 32rpx;

        .elements-title {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          text {
            font-size: 26rpx;
            font-weight: bold;
            color: #333;
            margin-left: 8rpx;
          }
        }

        .elements-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .el-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .label {
              font-size: 20rpx;
              color: #999;
              margin-bottom: 8rpx;
            }

            .value {
              font-size: 26rpx;
              color: #333;
              font-weight: 600;

              &.color-val {
                color: #d84315;
              }
            }
          }

          .divider {
            width: 2rpx;
            height: 40rpx;
            background: #eee;
          }
        }
      }

      .quote-text {
        text-align: center;
        font-size: 22rpx;
        color: #999;
        font-style: italic;
      }
    }
  }

  .bottom-actions {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 40rpx;
    box-sizing: border-box;

    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      line-height: 1.2;

      &::after {
        border: none;
      }

      :deep(.uni-icons) {
        width: 88rpx;
        height: 88rpx;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10rpx);
        border: 2rpx solid rgba(255, 255, 255, 0.2);
        margin-bottom: 12rpx;
        transition: all 0.3s;
      }

      &:active :deep(.uni-icons) {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(0.95);
      }

      .btn-label {
        font-size: 24rpx;
        color: #fff;
        opacity: 0.9;
      }
    }
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(40rpx) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
  }
}

@keyframes flash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
</style>