feat: 配置单次抽奖个数

2024-01-24 22:37:09 +08:00
parent b8e934e4ec
commit 6ae32114a6
12 changed files with 413 additions and 88 deletions
--- a/src/views/Config/Person/PersonAll.vue
+++ b/src/views/Config/Person/PersonAll.vue
@@ -159,6 +159,8 @@ onMounted(() => {
        </div>
    </dialog>
    <div class="min-w-1000px">
+        
+        <h2>人员管理</h2>
        <div class="flex gap-3 justify-">
            <button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">全部删除</button>
            <div class="tooltip tooltip-bottom" data-tip="下载文件后，请在excel中填写数据，并保存为xlsx格式">
--- a/src/views/Config/Person/PersonAlready.vue
+++ b/src/views/Config/Person/PersonAlready.vue
@@ -105,6 +105,8 @@ const tableColumnsDetail = [

 <template>
    <div class="overflow-y-auto">
+        
+        <h2>已中奖人员管理</h2>
        <div class="flex items-center justify-start gap-10">
            <!-- <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> -->
            <div>
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -4,6 +4,7 @@ import useStore from '@/store'
 import { IPrizeConfig } from '@/types/storeType'
 import { storeToRefs } from 'pinia'
 import localforage from 'localforage'
+import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'

 const imageDbStore = localforage.createInstance({
    name: 'imgStore'
@@ -15,6 +16,9 @@ const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeT
 const { getImageList: localImageList } = storeToRefs(globalConfig)
 const prizeList = ref(localPrizeList)
 const imgList = ref<any[]>([])
+
+const selectedPrize = ref<IPrizeConfig | null>()
+
 const addPrize = () => {
    const defaultPrizeCOnfig: IPrizeConfig = {
        id: new Date().getTime().toString(),
@@ -22,12 +26,16 @@ const addPrize = () => {
        sort: 0,
        isAll: false,
        count: 1,
-        isUsedCount:0,
+        isUsedCount: 0,
        picture: {
            id: '',
            name: '',
            url: ''
        },
+        separateCount: {
+            enable: false,
+            countList: []
+        },
        desc: '',
        isUsed: false,
        isShow: true,
@@ -35,6 +43,49 @@ const addPrize = () => {
    }
    prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
 }
+
+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 changePrizeStatus=(item:IPrizeConfig)=>{
+    if(item.isUsed==true){
+        item.isUsedCount=0;
+        if(item.separateCount.countList.length){
+            item.separateCount.countList.forEach((countItem:any)=>{
+                countItem.isUsedCount=0;
+            })
+        }
+    }
+    else{
+        item.isUsedCount=item.count;
+        if(item.separateCount.countList.length){
+            item.separateCount.countList.forEach((countItem:any)=>{
+                countItem.isUsedCount=countItem.count;
+            })
+        }
+    }
+    item.isUsed=!item.isUsed
+}
+const clearSelectedPrize = () => {
+    selectedPrize.value = null
+}
 const resetDefault = () => {
    prizeConfig.resetDefault()
 }
@@ -70,9 +121,10 @@ const delAll = async () => {
 onMounted(() => {
    getImageDbStore()
 })
-watch(() => prizeList.value, (val:IPrizeConfig[]) => {
+watch(() => prizeList.value, (val: IPrizeConfig[]) => {
    prizeConfig.setPrizeConfig(val)
 }, { deep: true })
+
 </script>

 <template>
@@ -84,7 +136,14 @@ watch(() => prizeList.value, (val:IPrizeConfig[]) => {
            <button class="btn btn-error btn-sm" @click="delAll">全部删除</button>

        </div>
-        <ul>
+        <div role="alert" class="w-full my-4 alert alert-info">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <span>进行操作可能会重置数据，请谨慎操作</span>
+        </div>
+        <ul class="p-0 m-0">
            <li v-for="item in prizeList" :key="item.id" class="flex gap-10"
                :class="currentPrize.id == item.id ? 'border-1 border-dotted rounded-xl' : null">
                <label class="max-w-xs mb-10 form-control">
@@ -97,38 +156,43 @@ watch(() => prizeList.value, (val:IPrizeConfig[]) => {
                            :class="prizeList.indexOf(item) == prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"></svg-icon>
                    </div>
                </label>
-                <label class="w-full max-w-xs mb-10 form-control">
+                <label class="w-1/2 max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">名称</span>
                    </div>
                    <input type="text" v-model="item.name" placeholder="名称"
                        class="w-full max-w-xs input-sm input input-bordered" />
                </label>
-                <label class="w-full max-w-xs mb-10 form-control">
+                <label class="w-1/2 max-w-xs mb-10 form-control">
                    <div class="label">
-                        <span class="label-text">是否全员参加</span>
+                        <span class="label-text">全员参加</span>
                    </div>
                    <input type="checkbox" :checked="item.isAll" @change="item.isAll = !item.isAll"
                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
                </label>
-                <label class="w-full max-w-xs mb-10 form-control">
+                <label class="w-1/2 max-w-xs mb-10 form-control">
                    <div class="label">
-                        <span class="label-text">获奖人数</span>
+                        <span class="label-text">抽奖人数</span>
                    </div>
                    <input type="number" v-model="item.count" placeholder="获奖人数"
-                        class="w-full max-w-xs input-sm input input-bordered" />
+                        class="w-full max-w-xs p-0 m-0 input-sm input input-bordered" />
+                    <div class="tooltip tooltip-bottom" :data-tip="'已抽取:'+item.isUsedCount + '/' + item.count">
+                        <progress class="w-full progress" :value="item.isUsedCount" :max="item.count"></progress>
+                    </div>
                </label>
-                <label class="w-full max-w-xs mb-10 form-control">
+                <!-- <label class="w-1/2 max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">已获奖人数</span>
                    </div>
-                    <input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数" class="w-full max-w-xs input-sm input input-bordered" />
-                </label>
-                <label class="w-full max-w-xs mb-10 form-control">
+                    <input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数"
+                        class="w-full max-w-xs input-sm input input-bordered" />
+                </label> -->
+                <label class="w-1/2 max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">已抽取</span>
                    </div>
-                    <input type="checkbox" :checked="item.isUsed"  @change="item.isUsed?(()=>{item.isUsed=false;item.isUsedCount=0})():(()=>{item.isUsed=true;item.isUsedCount=item.count})()"
+                    <input type="checkbox" :checked="item.isUsed"
+                        @change="changePrizeStatus(item)"
                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
                </label>
                <label class="w-full max-w-xs mb-10 form-control">
@@ -136,28 +200,31 @@ watch(() => prizeList.value, (val:IPrizeConfig[]) => {
                        <span class="label-text">图片</span>
                    </div>
                    <select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
-                      
-                        
-                        <option v-if="item.picture.id" :value="{id:'',name:'',url:''}"><span>❌</span></option>
+                        <option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span></option>
                        <option disabled selected>选择一张图片</option>
                        <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
                        </option>
                    </select>
                </label>
-                <!-- <label class="w-full max-w-xs mb-10 form-control">
+                <label class="w-full max-w-xs mb-10 form-control">
                    <div class="label">
-                        <span class="label-text">展示在主界面</span>
+                        <span class="label-text">单次抽取个数</span>
                    </div>
-                    <input type="checkbox" :checked="item.isShow" @change="item.isShow = !item.isShow"
-                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
-                </label> -->
-                <!-- <label class="w-full max-w-xs mb-10 form-control">
-                    <div class="label">
-                        <span class="label-text">抽取次数</span>
+                    <div class="flex justify-start w-full h-full" @click="selectPrize(item)">
+                        <ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
+                            v-if="item.separateCount.countList.length">
+                            <li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
+                                v-for="se in item.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>
-                    <input type="text" v-model="item.frequency" placeholder="抽取次数"
-                        class="w-full max-w-xs input-sm input input-bordered" />
-                </label> -->
+                </label>
                <label class="w-full max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">操作</span>
@@ -168,6 +235,9 @@ watch(() => prizeList.value, (val:IPrizeConfig[]) => {
                </label>
            </li>
        </ul>
-</div></template>
+        <EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
+            @clearData="clearSelectedPrize" />
+    </div>
+</template>

 <style lang='scss' scoped></style>
--- a/src/views/Config/Readme/index.vue
+++ b/src/views/Config/Readme/index.vue
@@ -17,7 +17,7 @@ onMounted(() => {
 </script>

 <template>
-<div class="mb-10 ml-3">
+<div class="w-3/4 mb-10 ml-3">
    <div class="markdown-body" v-dompurify-html="readmeHtml"></div>
 </div>
 </template>
--- a/src/views/Demo/index.vue
+++ b/src/views/Demo/index.vue
@@ -1,12 +1,24 @@
 <script setup lang='ts'>
+import NumberSeparate from '@/components/NumberSeparate/index.vue'
+import {ref} from 'vue'

-import StarsBackground from '../../components/StarsBackground/index.vue'
+const total=ref(12)
+const sep=ref([
+    {id:'0',num:3,isUsed:false},
+    {id:'1',num:4,isUsed:false},
+    {id:'2',num:2,isUsed:false},
+    {id:'3',num:3,isUsed:false},
+])

+const printPoo=()=>{
+    console.log(sep.value)
+}
 </script>

 <template>
 <div>
-    <StarsBackground></StarsBackground>
+    <NumberSeparate :totalNumber="total" :separatedNumber="sep"></NumberSeparate>
+    <button class="btn btn-error" @click="printPoo">打印</button>
 </div>
 </template>

--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -403,21 +403,20 @@ const stopLottery = async () => {
    intervalTimer.value = null
    canOperate.value = false
    rollBall(0, 1)
-    // 抽奖池是否为全体人员
-    // 每次最多抽十个
    luckyCount.value = 10
-    const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
-    leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount
-    if (personPool.value.length < leftover) {
-        toast.open({
-            message: '抽奖人数不够',
-            type: 'warning',
-            position: 'top-right',
-            duration: 10000
-        })
-
-        return;
+    // 自定义抽奖个数
+    
+    let leftover = currentPrize.value.count - currentPrize.value.isUsedCount
+    const customCount=currentPrize.value.separateCount
+    if(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;
+            }
+        }
    }
+    leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount
    for (let i = 0; i < luckyCount.value; i++) {
        if (personPool.value.length > 0) {
            const randomIndex = Math.round(Math.random() * (personPool.value.length - 1))
@@ -465,6 +464,16 @@ const continueLottery = async () => {
    if (!canOperate.value) {
        return
    }
+
+    const customCount=currentPrize.value.separateCount
+    if(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;
+            }
+        }
+    }
    currentPrize.value.isUsedCount += luckyCount.value
    luckyCount.value = 0
    if (currentPrize.value.isUsedCount >= currentPrize.value.count) {