feat(春节活动页面): 抽奖模块中奖用户滚动模块完成
This commit is contained in:
hzj
parent
9000da8cb0
commit
65ddb770b4
@ -5,6 +5,7 @@ export const useSpringFestival = defineStore('springFestival', {
|
||||
// 抽奖模块
|
||||
lotteryRewards: {}, // 抽奖奖池
|
||||
tickets: 0, // 抽奖券数量
|
||||
luckyUsers: [], //中奖用户列表
|
||||
userInfo: {}, // 用户信息
|
||||
userIdentity: {}, // 用户身份
|
||||
currentEarnings: 0, // 当前收益
|
||||
|
||||
@ -14,6 +14,46 @@
|
||||
@click="getDrawRecords"
|
||||
/>
|
||||
|
||||
<!-- 中奖历史轮播 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -22vw;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 11vw;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding-right: 1vw;
|
||||
"
|
||||
>
|
||||
<div style="width: 33%; min-width: 0; overflow: hidden; position: relative">
|
||||
<!-- 滚动容器 -->
|
||||
<div
|
||||
class="scroll-wrapper"
|
||||
ref="scrollWrapper"
|
||||
:style="{ animationDuration: `${duration}s` }"
|
||||
>
|
||||
<!-- 2套内容 -->
|
||||
<div class="scroll-content" v-for="value in 2">
|
||||
<div
|
||||
v-for="(item, index) in luckyUsers"
|
||||
:key="index"
|
||||
style="align-self: stretch; display: flex; align-items: center; gap: 2vw"
|
||||
>
|
||||
<div style="font-size: 1.2em; font-weight: 700; color: #fff; white-space: nowrap">
|
||||
{{ barrageText(item) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 抽奖转盘 -->
|
||||
<div
|
||||
style="
|
||||
@ -587,7 +627,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -634,6 +674,7 @@ const {
|
||||
// 抽奖模块
|
||||
lotteryRewards, // 抽奖奖池
|
||||
tickets, // 抽奖券数量
|
||||
luckyUsers, // 中奖用户列表
|
||||
userInfo, // 用户信息
|
||||
userIdentity, // 用户身份
|
||||
currentEarnings, // 当前收益
|
||||
@ -692,6 +733,42 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const duration = ref(0) // 弹幕滚动时长
|
||||
|
||||
// 显示的文本
|
||||
const barrageText = (item) => {
|
||||
const params = { nickname: item.nickname, prizeName: item.prizeName }
|
||||
return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
|
||||
? t('barrage_won_prize', params)
|
||||
: t('barrage_won_the_prize', params)
|
||||
}
|
||||
|
||||
const scrollWrapper = ref(null) //滚动模块
|
||||
|
||||
watch(luckyUsers, async () => {
|
||||
await nextTick()
|
||||
|
||||
const calculateWidth = () => {
|
||||
const wrapper = scrollWrapper.value
|
||||
if (!wrapper) return
|
||||
|
||||
const contentWidth = wrapper.scrollWidth
|
||||
console.log('luckyUsers 更新后的宽度:', contentWidth)
|
||||
|
||||
if (contentWidth === 0) {
|
||||
console.warn('宽度为 0，稍后重试...')
|
||||
setTimeout(calculateWidth, 100) // 延时重试
|
||||
} else {
|
||||
// 正常处理逻辑
|
||||
const speed = 80
|
||||
duration.value = contentWidth / speed
|
||||
console.log('计算总时长（秒）:', duration.value)
|
||||
}
|
||||
}
|
||||
|
||||
calculateWidth()
|
||||
})
|
||||
|
||||
const isRolling = ref(false) // 是否正在抽奖
|
||||
const activeIndex = ref(0)
|
||||
|
||||
@ -987,45 +1064,11 @@ const getMyLotteryTicketCount = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新页面数据
|
||||
const initData = async () => {
|
||||
await Promise.all([])
|
||||
}
|
||||
|
||||
// 预加载关键图片
|
||||
const preloadCriticalImages = async () => {
|
||||
const criticalImages = []
|
||||
|
||||
await preloadImages(criticalImages)
|
||||
}
|
||||
|
||||
// 完成预加载
|
||||
const completePreloading = async () => {
|
||||
try {
|
||||
// 执行所有初始化操作
|
||||
await Promise.all([initData(), preloadCriticalImages()])
|
||||
} catch (error) {
|
||||
console.error('预加载过程中发生错误:', error)
|
||||
} finally {
|
||||
// 无论成功或失败都结束加载状态
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用工具函数连接APP
|
||||
const connectToAppHandler = async () => {
|
||||
await connectToApp(() => {
|
||||
// 连接成功回调
|
||||
completePreloading() // 完成预加载
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
console.log('route.query.activeAction:', route.query.activeAction)
|
||||
if (route.query.activeAction == 'TaskShow') {
|
||||
drawerShowBt('transfer')
|
||||
}
|
||||
// connectToAppHandler()
|
||||
})
|
||||
|
||||
onUnmounted(() => {})
|
||||
@ -1146,6 +1189,57 @@ onUnmounted(() => {})
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes scroll-left {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll-right {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] .scroll-content {
|
||||
margin-left: 4vw;
|
||||
}
|
||||
|
||||
[dir='rtl'] .scroll-content {
|
||||
margin-left: auto;
|
||||
margin-right: 4vw;
|
||||
}
|
||||
|
||||
[dir='ltr'] .scroll-wrapper {
|
||||
animation-name: scroll-left;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
[dir='rtl'] .scroll-wrapper {
|
||||
animation-name: scroll-right;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.scrollY::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -634,6 +634,7 @@ import {
|
||||
import {
|
||||
ranklist, //获取排行榜
|
||||
activityRewardConfigs, // 获取活动奖励配置列表
|
||||
winnerHistory, //获取历史中奖用户
|
||||
withdrawableAmount, //获取可提现金额
|
||||
} from '@/api/lottery'
|
||||
|
||||
@ -654,6 +655,7 @@ const {
|
||||
// 抽奖模块
|
||||
lotteryRewards, // 抽奖奖池
|
||||
tickets, // 抽奖券数量
|
||||
luckyUsers, // 中奖用户列表
|
||||
userInfo, // 用户信息
|
||||
userIdentity, // 用户身份
|
||||
currentEarnings, // 当前收益
|
||||
@ -931,6 +933,14 @@ const getMyLotteryTicketCount = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
//获取中奖用户列表
|
||||
const getWinners = async () => {
|
||||
const resWinners = await winnerHistory()
|
||||
if (resWinners.status && resWinners.body) {
|
||||
luckyUsers.value = resWinners.body
|
||||
}
|
||||
}
|
||||
|
||||
//获取任务列表
|
||||
const getTaskList = async () => {
|
||||
// const resTaskList = await ActTaskList()
|
||||
@ -1185,6 +1195,8 @@ const initData = async () => {
|
||||
getActivityDetail(), //获取奖池
|
||||
getMyLotteryTicketCount(), //获取抽奖券
|
||||
|
||||
getWinners(), //获取历史中奖用户
|
||||
|
||||
getTaskList(), //获取任务列表
|
||||
|
||||
getUserInfo(), //获取用户信息
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user