Files
log-lottery/src/views/Home/components/PrizeList/usePrizeList.ts
LOG1997 bd5eac7d70 96 UI optimization (#136)
* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96

卸载路由时清除requestAnimationFrame

* feat:  文件存储使用Blob格式

* style: 💄 修改部分类型any为具体类型

* feat:  界面设置中模块使用瀑布流布局 #96

* fix: 🐛 md文档更换文件夹解决控制台警告

* style: 💄 switch按钮改回使用daisyui组件

* refactor: ♻️ 所有人员列表提取tableColumn

* style: 💄 奖项列表中的图片类型修复

* fix(globalConfig): 修复当前音乐项类型缺失问题

* feat:  single person not done

* feat:  可添加单人 #96

* build(.gitignore): 添加 auto-imports.d.ts 到忽略文件

* fix: 🐛 上传、下载excel文件时修复路径错误

打包成应用和网页端的baseUrl不一样,使用环境变量来表示

* fix: 🐛 导入人员列表时处理有值为空的情况

* style: 💄 改变toaster的组件

* fix: 🐛 上传文件、解析数据与存储/读取数据的处理

、

* fix(Config): 更新备案信息链接样式

将备案信息的段落标签替换为可点击的链接标签,使用户能够直接跳转到工信部备案查询页面。同时添加了悬停效果样式,提升用户体验。

* feat:  首页奖项列表样式修改 not done #96

* chore(deps): ✏️ 更新依赖版本

* chore: ✏️ gsap list demo

* build: 🏗️ docker构建优化

* chore: ✏️ gsap scroll demo

* style: 💄 gsap demno

* feat:  demo smooth scroll gsap scrolltrigger

* feat(Demo): 添加更多颜色选项并注释GSAP动画

* refactor(PrizeList): 重构奖品列表组件结构

* feat(PrizeList): 重构奖品列表组件并添加滚动动画

* feat:  增加定时抽取功能 #96

* feat:  添加定时抽取功能的说明

* feat:  优化gsap #96

项数不多时不触发gsap

* style: 💄 文本修改

* feat:  优化

* feat:  优化奖项列表

* fix(Home): 修复奖品列表滚动检测逻辑

* fix(home): 修复抽奖停止逻辑避免重复执行;调整卡片垂直居中位置计算

* feat:  播放中奖音频 #96
2025-12-28 00:04:20 +08:00

99 lines
2.9 KiB
TypeScript

import type { IPrizeConfig } from '@/types/storeType'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import i18n from '@/locales/i18n'
import useStore from '@/store'
export function usePrizeList(temporaryPrizeRef: any) {
const prizeConfig = useStore().prizeConfig
const globalConfig = useStore().globalConfig
const system = useStore().system
const {
getPrizeConfig: localPrizeList,
getCurrentPrize: currentPrize,
getTemporaryPrize: temporaryPrize,
} = storeToRefs(prizeConfig)
const {
getIsShowPrizeList: isShowPrizeList,
getImageList: localImageList,
}
= storeToRefs(globalConfig)
const { getIsMobile: isMobile } = storeToRefs(system)
const selectedPrize = ref<IPrizeConfig | null>()
const prizeShow = ref(structuredClone(isShowPrizeList.value))
function addTemporaryPrize() {
temporaryPrizeRef.value.showDialog()
}
function deleteTemporaryPrize() {
temporaryPrize.value.isShow = false
prizeConfig.setTemporaryPrize(temporaryPrize.value)
}
function submitTemporaryPrize() {
if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
// eslint-disable-next-line no-alert
alert(i18n.global.t('error.completeInformation'))
return
}
temporaryPrize.value.isShow = true
temporaryPrize.value.id = new Date().getTime().toString()
prizeConfig.setCurrentPrize(temporaryPrize.value)
}
function selectPrize(item: IPrizeConfig) {
selectedPrize.value = item
selectedPrize.value.isUsedCount = 0
selectedPrize.value.isUsed = false
if (selectedPrize.value.separateCount.countList.length > 1) {
return
}
selectedPrize.value.separateCount = {
enable: true,
countList: [
{
id: '0',
count: item.count,
isUsedCount: 0,
},
],
}
}
function submitData(value: any) {
selectedPrize.value!.separateCount.countList = value
selectedPrize.value = null
}
function changePersonCount() {
temporaryPrize.value.separateCount.countList = []
}
function setCurrentPrize() {
for (let i = 0; i < localPrizeList.value.length; i++) {
if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
prizeConfig.setCurrentPrize(localPrizeList.value[i])
return
}
}
}
onMounted(() => {
setCurrentPrize()
})
return {
temporaryPrize,
changePersonCount,
selectPrize,
currentPrize,
localImageList,
addTemporaryPrize,
submitTemporaryPrize,
submitData,
deleteTemporaryPrize,
prizeShow,
localPrizeList,
isMobile,
}
}