Skip to content

C
corporate-culture-qd
Commit 619458b6 by lijiabin
Options

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

parent 4e2c6e3b
Showing with 159 additions and 133 deletions
src/components/common/ActivityCards/index.vue 0 → 100644
<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()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment