From 28f0f83531ed7632e29c880e99e64af9a52ad540 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Tue, 24 Feb 2026 17:32:45 +0800
Subject: [PATCH] fix:  page

---
 components/LoginPopup/LoginPopup.vue |  15 +-
 components/LuckyPopup/LuckyPopup.vue | 530 +++++++++++++++++++++++++++
 pages/index/index.vue                |  17 +-
 3 files changed, 557 insertions(+), 5 deletions(-)
 create mode 100644 components/LuckyPopup/LuckyPopup.vue

diff --git a/components/LoginPopup/LoginPopup.vue b/components/LoginPopup/LoginPopup.vue
index 139ba20..9880cc9 100644
--- a/components/LoginPopup/LoginPopup.vue
+++ b/components/LoginPopup/LoginPopup.vue
@@ -88,7 +88,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useUserStore } from "@/stores/user";
 import { getPlatformProvider, isSinglePageMode } from "@/utils/system";
 import { uploadImage } from "@/utils/common";
@@ -112,6 +112,19 @@ const props = defineProps({
 
 const emit = defineEmits(["logind"]);
 
+// 监听全局事件
+const handleGlobalShow = () => {
+  open();
+};
+
+onMounted(() => {
+  uni.$on("show-login-popup", handleGlobalShow);
+});
+
+onUnmounted(() => {
+  uni.$off("show-login-popup", handleGlobalShow);
+});
+
 // 是否处于单页模式（朋友圈打开）
 const isSinglePage = computed(() => isSinglePageMode());
 
diff --git a/components/LuckyPopup/LuckyPopup.vue b/components/LuckyPopup/LuckyPopup.vue
new file mode 100644
index 0000000..7677cd7
--- /dev/null
+++ b/components/LuckyPopup/LuckyPopup.vue
@@ -0,0 +1,530 @@
+<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">
+          <!-- 头部渐变区 -->
+          <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="action-buttons">
+          <button class="share-btn" open-type="share">
+            <uni-icons type="redo" size="18" color="#fff" style="margin-right: 8rpx;" />
+            <text>分享我的今日好运</text>
+          </button>
+          
+          <button class="reward-btn" @tap="onGetReward">
+            <view class="btn-content">
+              <view class="main-row">
+                <uni-icons type="gift" size="18" color="#fff" style="margin-right: 8rpx;" />
+                <text>领取今日好运奖励</text>
+              </view>
+              <text class="sub-text">已解锁免费头像模板等奖励</text>
+            </view>
+          </button>
+        </view>
+
+        <!-- 关闭按钮 -->
+        <view class="close-btn" @tap="close">
+          <uni-icons type="closeempty" size="24" color="#fff" />
+        </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 onGetReward = () => {
+  uni.showToast({ title: '奖励已领取', icon: 'success' });
+  // 这里可以跳转到任务中心或直接发放奖励
+};
+
+defineExpose({ open, close });
+</script>
+
+<style lang="scss" scoped>
+.lucky-popup-container {
+  /* 动画容器 */
+  .animation-container {
+    width: 600rpx;
+    height: 800rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    perspective: 1000px;
+  }
+
+  .card-flip-wrapper {
+    width: 400rpx;
+    height: 560rpx;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
+    
+    &.flipped {
+      transform: rotateY(180deg);
+    }
+  }
+
+  .card-front, .card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 32rpx;
+    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%;
+    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;
+      }
+    }
+  }
+  
+  .action-buttons {
+    width: 100%;
+    margin-bottom: 40rpx;
+    
+    .share-btn {
+      background: rgba(255, 255, 255, 0.2);
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+      color: #fff;
+      font-size: 30rpx;
+      font-weight: 600;
+      height: 96rpx;
+      border-radius: 48rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24rpx;
+      backdrop-filter: blur(10rpx);
+      
+      &::after { border: none; }
+    }
+    
+    .reward-btn {
+      background: rgba(255, 255, 255, 0.2);
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+      height: 120rpx;
+      border-radius: 60rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(10rpx);
+      padding: 0;
+      
+      &::after { border: none; }
+      
+      .btn-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        
+        .main-row {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4rpx;
+          
+          text {
+            color: #fff;
+            font-size: 30rpx;
+            font-weight: 600;
+          }
+        }
+        
+        .sub-text {
+          font-size: 20rpx;
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+  
+  .close-btn {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    border: 2rpx solid rgba(255, 255, 255, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+@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>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5b2957b..3a45e77 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -201,7 +201,9 @@
     <view class="bottom-spacer"></view>
 
     <!-- 登录弹窗 -->
-    <LoginPopup ref="loginPopupRef" />
+    <LoginPopup />
+    <!-- 运势抽奖弹窗 -->
+    <LuckyPopup ref="luckyPopupRef" />
   </view>
 </template>
 
@@ -213,12 +215,15 @@ import { useUserStore } from "@/stores/user";
 import { getRecommendList } from "@/api/system";
 
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
+import LuckyPopup from "@/components/LuckyPopup/LuckyPopup.vue";
 
 const userStore = useUserStore();
 const statusBarHeight = ref(getStatusBarHeight());
 const loginPopupRef = ref(null);
-
+const luckyPopupRef = ref(null);
 const userInfo = computed(() => userStore?.userInfo || {});
+const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
+
 const greetingText = computed(() => {
   const hour = new Date().getHours();
   if (hour < 6) return "凌晨好";
@@ -232,7 +237,7 @@ const greetingText = computed(() => {
 
 const handleLogin = () => {
   if (!userInfo.value.nickName) {
-    loginPopupRef.value?.open();
+    uni.$emit("show-login-popup");
   }
 };
 const luckyScore = ref(98);
@@ -316,7 +321,11 @@ const onWalletTap = () => {
 };
 
 const onOpenLucky = () => {
-  uni.navigateTo({ url: "/pages/fortune/index" });
+  if (!isLoggedIn.value) {
+    uni.$emit("show-login-popup");
+    return;
+  }
+  luckyPopupRef.value?.open();
 };
 
 const navTo = (url) => {