【需求 25171】feat: 限时竞拍页右侧栏新增每日抽奖和大转盘，抽成 ActivityCards 与首页共用

src/components/common/ActivityCards/index.vue

+<template>
+  <template v-if="!isWareHouse">
+    <!-- 每日抽奖 -->
+    <div
+      v-if="lotteryPrizesDetail"
+      class="lottery-container common-box rounded-lg bg-#FFF7E6"
+    >
+      <div class="flex items-center gap-2 mb-3">
+        <div class="w-1 h-4 bg-gradient-to-b from-amber-400 to-orange-400 rounded-full"></div>
+        <h1 class="text-sm sm:text-base font-bold">每日抽奖</h1>
+      </div>
+
+      <div
+        class="flex items-center gap-3 min-w-0 p-3 rounded-lg bg-white/60 border border-amber-100"
+      >
+        <el-image
+          class="w-18 h-18 rounded-lg flex-shrink-0 shadow-sm"
+          :src="lotteryPrizesDetail.prizesImg"
+          fit="cover"
+          :preview-src-list="[lotteryPrizesDetail.prizesImg]"
+        />
+        <div class="flex flex-col min-w-0 gap-1">
+          <div class="font-semibold text-sm truncate">
+            {{ lotteryPrizesDetail.prizesName }}
+          </div>
+          <div class="text-12px text-gray-500 flex items-center gap-1">
+            <svg-icon name="small_coin" size="14" />
+            <span>{{ lotteryPrizesDetail.registrationFee }} YA币</span>
+          </div>
+          <div class="text-12px text-gray-400">
+            今日{{ lotteryPrizesDetail.number }}人参与
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="lotteryPrizesDetail.winner"
+        class="text-xs text-amber-600 mt-2 px-1 truncate"
+      >
+        昨日中奖：{{ lotteryPrizesDetail.winner }}
+      </div>
+
+      <div class="flex justify-center items-center mt-3">
+        <el-button
+          v-if="!lotteryPrizesDetail.isJoin"
+          class="w-full! border-none! transition-all duration-200 text-xs sm:text-sm bg-[linear-gradient(to_right,#FFD06A_0%,#FFB143_100%)]! text-#333! shadow-[0px_1px_8px_0_rgba(255,173,91,0.25)] hover:-translate-y-0.5 hover:shadow-[0px_4px_10px_0_rgba(255,173,91,0.4)] active:translate-y-0"
+          type="primary"
+          @click="handleLottery"
+        >
+          <svg-icon name="daily_lottery" size="18" class="mr-1" />
+          参与抽奖
+        </el-button>
+        <div
+          v-else
+          class="w-full text-center py-2 rounded-md bg-amber-50 border border-amber-200 border-dashed text-amber-400 text-xs sm:text-sm"
+        >
+          ✓ 今日已参与
+        </div>
+      </div>
+    </div>
+
+    <!-- 大转盘 -->
+    <div
+      v-if="wheelConfig?.isActivityActive"
+      class="lottery-container common-box rounded-lg bg-#F5F0FF"
+    >
+      <div class="flex items-center gap-2 xl:mb-4">
+        <div
+          class="w-1 h-4 bg-gradient-to-b from-violet-500 to-purple-500 rounded-full"
+        ></div>
+        <h1 class="text-sm sm:text-base font-bold">大转盘</h1>
+      </div>
+      <div class="flex justify-center">
+        <LuckyWheelContainer :wheelConfig="wheelConfig" />
+      </div>
+      <div
+        class="flex items-center justify-center text-sm text-gray-500 xl:mt-4 px-1 truncate"
+      >
+        每次抽奖{{ wheelConfig?.costYaCoin }} YA币
+      </div>
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+/**
+ * 每日抽奖 + 大转盘两张活动卡片，首页和限时竞拍页的右侧栏共用。
+ * 数据（抽奖详情、转盘配置）自己加载，参与抽奖后通过 refreshAccount 通知外层刷新账户数据。
+ */
+import { getUserDailyLotteryInfo, userJoinLottery, getWheelConfig } from '@/api'
+import type { DailyLotteryInfo, WheelConfigDto } from '@/api'
+import { useMessageBox } from '@/hooks'
+import { useUserStore, useYaBiStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+import { push } from 'notivue'
+import LuckyWheelContainer from '@/components/common/LuckyWheelContainer/index.vue'
+
+const emit = defineEmits<{ refreshAccount: [] }>()
+
+const { userInfo } = storeToRefs(useUserStore())
+const isWareHouse = userInfo.value.address?.includes('仓库')
+const { confirm } = useMessageBox()
+const yabiStore = useYaBiStore()
+
+const lotteryPrizesDetail = ref<DailyLotteryInfo | null>(null)
+const wheelConfig = ref<WheelConfigDto>(null)
+
+// 获取抽奖配置详情
+const getLotteryPrizesDetail = async () => {
+  const { data } = await getUserDailyLotteryInfo()
+  lotteryPrizesDetail.value = data
+}
+// 参与抽奖
+const handleLottery = async () => {
+  if (!lotteryPrizesDetail.value?.inRegistrationTime)
+    return push.error(`抽奖通道将于${lotteryPrizesDetail.value?.registrationTimeDesc}开启`)
+  // 二次确认
+  await confirm({
+    title: '提示',
+    message: '确定参与每日抽奖吗？',
+    type: 'primary',
+  })
+
+  await userJoinLottery()
+  getLotteryPrizesDetail()
+  yabiStore.fetchYaBiData()
+  emit('refreshAccount')
+  push.success('参与每日抽奖成功！')
+}
+
+const init = async () => {
+  const [r1, r2] = await Promise.allSettled([getUserDailyLotteryInfo(), getWheelConfig()])
+  if (r1.status === 'fulfilled') lotteryPrizesDetail.value = r1.value.data
+  if (r2.status === 'fulfilled') wheelConfig.value = r2.value.data
+}
+
+onMounted(init)
+// keep-alive 页面再次进入时刷新抽奖状态（今日是否已参与、参与人数等）
+onActivated(() => {
+  if (lotteryPrizesDetail.value) getLotteryPrizesDetail()
+})
+</script>
+
+<style scoped>
+.common-box {
+  padding: 15px;
+  border: 1px solid #eaeaef;
+  box-shadow: 0 1px 4px 0 rgba(33, 33, 52, 0.1);
+}
+</style>

src/views/auction/index.vue

@@ -10,6 +10,7 @@ import { useYaBiStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import BackButton from '@/components/common/BackButton/index.vue'
 import { push } from 'notivue'
+import ActivityCards from '@/components/common/ActivityCards/index.vue'
 const yabiStore = useYaBiStore()
 const { yabiData } = storeToRefs(yabiStore)
 
@@ -374,7 +375,7 @@ const onBid = async (item: AuctionItemDto) => {
       <!-- 右侧：信息面板 -->
       <div class="flex-1/4 space-y-6">
         <!-- YA币信息卡片 -->
-        <div class="bg-white/90 rounded-lg p-6 shadow-lg border border-white/60 sticky top-[52px]">
+        <div class="bg-white/90 rounded-lg p-6 shadow-lg border border-white/60">
           <div class="text-center mb-6">
             <div class="text-gray-500 text-sm mb-2">当前YA币</div>
             <div
@@ -427,6 +428,8 @@ const onBid = async (item: AuctionItemDto) => {
             </div>
           </div> -->
         </div>
+        <!-- 每日抽奖 / 大转盘：跟首页右侧栏一致，限时竞拍页也能直接参与 -->
+        <ActivityCards @refresh-account="yabiStore.fetchYaBiData()" />
       </div>
     </div>
     <ExchangeGoodsRecordDialog ref="exchangeGoodsRecordDialogRef" />

src/views/homePage/index.vue

@@ -303,87 +303,7 @@
             </transition>
           </div>
         </div>
-        <template v-if="!isWareHouse">
-          <!-- 每日抽奖 -->
-          <div
-            v-if="lotteryPrizesDetail"
-            class="lottery-container common-box rounded-lg bg-#FFF7E6"
-          >
-            <div class="flex items-center gap-2 mb-3">
-              <div class="w-1 h-4 bg-gradient-to-b from-amber-400 to-orange-400 rounded-full"></div>
-              <h1 class="text-sm sm:text-base font-bold">每日抽奖</h1>
-            </div>
-
-            <div
-              class="flex items-center gap-3 min-w-0 p-3 rounded-lg bg-white/60 border border-amber-100"
-            >
-              <el-image
-                class="w-18 h-18 rounded-lg flex-shrink-0 shadow-sm"
-                :src="lotteryPrizesDetail.prizesImg"
-                fit="cover"
-                :preview-src-list="[lotteryPrizesDetail.prizesImg]"
-              />
-              <div class="flex flex-col min-w-0 gap-1">
-                <div class="font-semibold text-sm truncate">
-                  {{ lotteryPrizesDetail.prizesName }}
-                </div>
-                <div class="text-12px text-gray-500 flex items-center gap-1">
-                  <svg-icon name="small_coin" size="14" />
-                  <span>{{ lotteryPrizesDetail.registrationFee }} YA币</span>
-                </div>
-                <div class="text-12px text-gray-400">
-                  今日{{ lotteryPrizesDetail.number }}人参与
-                </div>
-              </div>
-            </div>
-
-            <div
-              v-if="lotteryPrizesDetail.winner"
-              class="text-xs text-amber-600 mt-2 px-1 truncate"
-            >
-              昨日中奖：{{ lotteryPrizesDetail.winner }}
-            </div>
-
-            <div class="flex justify-center items-center mt-3">
-              <el-button
-                v-if="!lotteryPrizesDetail.isJoin"
-                class="w-full! border-none! transition-all duration-200 text-xs sm:text-sm bg-[linear-gradient(to_right,#FFD06A_0%,#FFB143_100%)]! text-#333! shadow-[0px_1px_8px_0_rgba(255,173,91,0.25)] hover:-translate-y-0.5 hover:shadow-[0px_4px_10px_0_rgba(255,173,91,0.4)] active:translate-y-0"
-                type="primary"
-                @click="handleLottery"
-              >
-                <svg-icon name="daily_lottery" size="18" class="mr-1" />
-                参与抽奖
-              </el-button>
-              <div
-                v-else
-                class="w-full text-center py-2 rounded-md bg-amber-50 border border-amber-200 border-dashed text-amber-400 text-xs sm:text-sm"
-              >
-                ✓ 今日已参与
-              </div>
-            </div>
-          </div>
-
-          <!-- 大转盘 -->
-          <div
-            v-if="wheelConfig?.isActivityActive"
-            class="lottery-container common-box rounded-lg bg-#F5F0FF"
-          >
-            <div class="flex items-center gap-2 xl:mb-4">
-              <div
-                class="w-1 h-4 bg-gradient-to-b from-violet-500 to-purple-500 rounded-full"
-              ></div>
-              <h1 class="text-sm sm:text-base font-bold">大转盘</h1>
-            </div>
-            <div class="flex justify-center">
-              <LuckyWheelContainer :wheelConfig="wheelConfig" />
-            </div>
-            <div
-              class="flex items-center justify-center text-sm text-gray-500 xl:mt-4 px-1 truncate"
-            >
-              每次抽奖{{ wheelConfig?.costYaCoin }} YA币
-            </div>
-          </div>
-        </template>
+        <ActivityCards @refresh-account="refreshUserAccountData" />
       </div>
     </div>
 
@@ -407,9 +327,6 @@ import {
   getCarouselList,
   getUserAccountData,
   getRecordData,
-  getUserDailyLotteryInfo,
-  userJoinLottery,
-  getWheelConfig,
 } from '@/api'
 import { TaskTypeEnum, TaskDateLimitTypeText, ArticleTypeEnum } from '@/constants'
 import type {
@@ -417,24 +334,18 @@ import type {
   TaskItemDto,
   UserAccountDataDto,
   UserRecordDataDto,
-  DailyLotteryInfo,
-  WheelConfigDto,
 } from '@/api'
 import { TABS_REF_KEY, levelListOptions } from '@/constants'
-import { useScrollTop, useMessageBox } from '@/hooks'
+import { useScrollTop } from '@/hooks'
 import { useQuestionStore, useActivityStore, useYaBiStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { push } from 'notivue'
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
-import LuckyWheelContainer from '@/components/common/LuckyWheelContainer/index.vue'
+import ActivityCards from '@/components/common/ActivityCards/index.vue'
 import { RewardButtonEnum } from '@/constants'
 import RewardButton from '@/components/common/RewardButton/index.vue'
-import { useTourStore, useUserStore } from '@/stores'
+import { useTourStore } from '@/stores'
 
-const userStore = useUserStore()
-const { userInfo } = storeToRefs(userStore)
-const isWareHouse = userInfo.value.address?.includes('仓库')
-const { confirm } = useMessageBox()
 const tourStore = useTourStore()
 const { shouldShowAskTabTour } = storeToRefs(tourStore)
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -546,35 +457,6 @@ const onDailySign = async () => {
   open.value = false
 }
 
-const lotteryPrizesDetail = ref<DailyLotteryInfo | null>(null)
-
-// 获取抽奖配置详情
-const getLotteryPrizesDetail = async () => {
-  const { data } = await getUserDailyLotteryInfo()
-  lotteryPrizesDetail.value = data
-}
-// 参与抽奖
-const handleLottery = async () => {
-  if (!lotteryPrizesDetail.value?.inRegistrationTime)
-    return push.error(`抽奖通道将于${lotteryPrizesDetail.value?.registrationTimeDesc}开启`)
-  // 二次确认
-  await confirm({
-    title: '提示',
-    message: '确定参与每日抽奖吗？',
-    type: 'primary',
-  })
-
-  await userJoinLottery()
-  getLotteryPrizesDetail()
-  refreshUserAccountData()
-  push.success('参与每日抽奖成功！')
-}
-
-/**
- * 大转盘
- */
-const wheelConfig = ref<WheelConfigDto>(null)
-
 const handleTask = async (item: TaskItemDto) => {
   if (item.currentCount === item.limitCount) return
   // 先暂时写死
@@ -626,9 +508,7 @@ const initPage = () => {
     getCarouselList(),
     getUserAccountData(),
     getRecordData(),
-    getUserDailyLotteryInfo(),
-    getWheelConfig(),
-  ]).then(([r1, r2, r3, r4, r5]) => {
+  ]).then(([r1, r2, r3]) => {
     if (r1.status === 'fulfilled') {
       carouselList.value = r1.value.data
     }
@@ -639,12 +519,6 @@ const initPage = () => {
     if (r3.status === 'fulfilled') {
       userRecordData.value = r3.value.data
     }
-    if (r4.status === 'fulfilled') {
-      lotteryPrizesDetail.value = r4.value.data
-    }
-    if (r5.status === 'fulfilled') {
-      wheelConfig.value = r5.value.data
-    }
   })
 }
 
@@ -669,7 +543,6 @@ onActivated(async () => {
   questionStore.fetchUserQestionNum()
   refreshTaskData(false)
   refreshUserAccountData()
-  getLotteryPrizesDetail()
 
   if (route.fullPath.includes('#levelContainerRef')) {
     await handleBackTop()