fix: fix and new feature
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
@@ -5,6 +5,9 @@ import useStore from '@/store'
|
||||
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
import defaultPrizeImage from '@/assets/images/龙.png'
|
||||
import { IPrizeConfig } from '../../types/storeType';
|
||||
|
||||
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
|
||||
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const globalConfig = useStore().globalConfig
|
||||
@@ -16,6 +19,7 @@ const prizeListRef = ref()
|
||||
const prizeListContainerRef = ref()
|
||||
|
||||
const temporaryPrizeRef = ref()
|
||||
const selectedPrize = ref<IPrizeConfig | null>()
|
||||
// 获取prizeListRef高度
|
||||
const getPrizeListHeight = () => {
|
||||
let height = 200;
|
||||
@@ -45,8 +49,44 @@ const submitTemporaryPrize = () => {
|
||||
temporaryPrize.value.id=new Date().getTime().toString()
|
||||
prizeConfig.setCurrentPrize(temporaryPrize.value)
|
||||
}
|
||||
const 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,
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const submitData = (value: any) => {
|
||||
selectedPrize.value!.separateCount.countList = value;
|
||||
selectedPrize.value = null
|
||||
}
|
||||
const changePersonCount=()=>{
|
||||
temporaryPrize.value.separateCount.countList=[]
|
||||
}
|
||||
const 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(() => {
|
||||
prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'
|
||||
setCurrentPrize()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -75,7 +115,7 @@ onMounted(() => {
|
||||
<div class="label">
|
||||
<span class="label-text">获奖人数</span>
|
||||
</div>
|
||||
<input type="number" v-model="temporaryPrize.count" placeholder="获奖人数"
|
||||
<input type="number" v-model="temporaryPrize.count" @change="changePersonCount" placeholder="获奖人数"
|
||||
class="max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
@@ -85,14 +125,26 @@ onMounted(() => {
|
||||
<input disabled type="number" v-model="temporaryPrize.isUsedCount" placeholder="获奖人数"
|
||||
class="max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">已抽取</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="temporaryPrize.isUsed"
|
||||
@change="temporaryPrize.isUsed ? (() => { temporaryPrize.isUsed = false; temporaryPrize.isUsedCount = 0 })() : (() => { temporaryPrize.isUsed = true; temporaryPrize.isUsedCount = temporaryPrize.count })()"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
|
||||
<div class="label">
|
||||
<span class="label-text">单次抽取个数</span>
|
||||
</div>
|
||||
<div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
|
||||
<ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
|
||||
v-if="temporaryPrize.separateCount.countList.length">
|
||||
<li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
|
||||
v-for="se in temporaryPrize.separateCount.countList" :key="se.id">
|
||||
<div class="flex items-center justify-center w-full h-full tooltip"
|
||||
:data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
|
||||
<div class="absolute left-0 z-50 h-full bg-blue-300/80"
|
||||
:style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
|
||||
<span>{{ se.count }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-else class="btn btn-secondary btn-xs">设置</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">图片</span>
|
||||
@@ -115,7 +167,8 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
|
||||
@submitData="submitData" />
|
||||
<div ref="prizeListContainerRef">
|
||||
<div class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''" v-if="temporaryPrize.isShow">
|
||||
<div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
|
||||
@@ -195,10 +248,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
||||
<transition name="prize-operate" :appear="true">
|
||||
|
||||
@@ -68,16 +68,18 @@ function initTableData() {
|
||||
return
|
||||
}
|
||||
const totalCount = rowCount.value * 7
|
||||
tableData.value = JSON.parse(JSON.stringify(allPersonList.value))
|
||||
const tableDataLength = tableData.value.length
|
||||
if (tableDataLength < totalCount) {
|
||||
const repeatCount = Math.ceil(totalCount / tableDataLength)
|
||||
const orginPersonData = JSON.parse(JSON.stringify(allPersonList.value))
|
||||
const orginPersonLength = orginPersonData.length
|
||||
if (orginPersonLength < totalCount) {
|
||||
const repeatCount = Math.ceil(totalCount / orginPersonLength)
|
||||
// 复制数据
|
||||
for (let i = 0; i < repeatCount; i++) {
|
||||
tableData.value = tableData.value.concat(JSON.parse(JSON.stringify(tableData.value)))
|
||||
tableData.value = tableData.value.concat(JSON.parse(JSON.stringify(orginPersonData)))
|
||||
}
|
||||
}
|
||||
|
||||
else{
|
||||
tableData.value=orginPersonData.slice(0, totalCount)
|
||||
}
|
||||
tableData.value = filterData(tableData.value.slice(0, totalCount), rowCount.value)
|
||||
}
|
||||
const init = () => {
|
||||
@@ -354,9 +356,11 @@ const enterLottery = async () => {
|
||||
randomBallData()
|
||||
}
|
||||
if (patternList.value.length) {
|
||||
patternList.value.forEach((item: number) => {
|
||||
objects.value[item - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
|
||||
})
|
||||
for(let i=0;i<patternList.value.length;i++){
|
||||
if(i<rowCount.value*7){
|
||||
objects.value[patternList.value[i]-1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
|
||||
}
|
||||
}
|
||||
}
|
||||
canOperate.value = false
|
||||
await transform(targets.sphere, 1000)
|
||||
@@ -391,27 +395,15 @@ const startLottery = () => {
|
||||
|
||||
return;
|
||||
}
|
||||
currentStatus.value = 2
|
||||
rollBall(10, 3000)
|
||||
}
|
||||
|
||||
const stopLottery = async () => {
|
||||
if (!canOperate.value) {
|
||||
return
|
||||
}
|
||||
clearInterval(intervalTimer.value)
|
||||
intervalTimer.value = null
|
||||
canOperate.value = false
|
||||
rollBall(0, 1)
|
||||
luckyCount.value = 10
|
||||
// 自定义抽奖个数
|
||||
|
||||
|
||||
let leftover = currentPrize.value.count - currentPrize.value.isUsedCount
|
||||
const customCount=currentPrize.value.separateCount
|
||||
if(customCount&&customCount.enable&&customCount.countList.length>0){
|
||||
for(let i=0;i<customCount.countList.length;i++){
|
||||
if(customCount.countList[i].isUsedCount<customCount.countList[i].count){
|
||||
leftover=customCount.countList[i].count-customCount.countList[i].isUsedCount
|
||||
const customCount = currentPrize.value.separateCount
|
||||
if (customCount && customCount.enable && customCount.countList.length > 0) {
|
||||
for (let i = 0; i < customCount.countList.length; i++) {
|
||||
if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
|
||||
leftover = customCount.countList[i].count - customCount.countList[i].isUsedCount
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -424,6 +416,25 @@ const stopLottery = async () => {
|
||||
personPool.value.splice(randomIndex, 1)
|
||||
}
|
||||
}
|
||||
toast.open({
|
||||
message: `现在抽取${currentPrize.value.name} ${leftover}人`,
|
||||
type:'default',
|
||||
position: 'top-right',
|
||||
duration: 8000
|
||||
})
|
||||
currentStatus.value = 2
|
||||
rollBall(10, 3000)
|
||||
}
|
||||
|
||||
const stopLottery = async () => {
|
||||
if (!canOperate.value) {
|
||||
return
|
||||
}
|
||||
clearInterval(intervalTimer.value)
|
||||
intervalTimer.value = null
|
||||
canOperate.value = false
|
||||
rollBall(0, 1)
|
||||
|
||||
const windowSize = { width: window.innerWidth, height: window.innerHeight }
|
||||
luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
|
||||
let cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
|
||||
@@ -465,11 +476,11 @@ const continueLottery = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
const customCount=currentPrize.value.separateCount
|
||||
if(customCount&&customCount.enable&&customCount.countList.length>0){
|
||||
for(let i=0;i<customCount.countList.length;i++){
|
||||
if(customCount.countList[i].isUsedCount<customCount.countList[i].count){
|
||||
customCount.countList[i].isUsedCount+= luckyCount.value
|
||||
const customCount = currentPrize.value.separateCount
|
||||
if (customCount && customCount.enable && customCount.countList.length > 0) {
|
||||
for (let i = 0; i < customCount.countList.length; i++) {
|
||||
if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
|
||||
customCount.countList[i].isUsedCount += luckyCount.value
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -576,7 +587,7 @@ const listenKeyboard = () => {
|
||||
if (e.keyCode === 27 && currentStatus.value === 3) {
|
||||
quitLottery()
|
||||
}
|
||||
if(e.keyCode!==32){
|
||||
if (e.keyCode !== 32) {
|
||||
return
|
||||
}
|
||||
switch (currentStatus.value) {
|
||||
|
||||
Reference in New Issue
Block a user