fix: fix and new feature

src/components/NumberSeparate/EditSeparateDialog.vue

@@ -2,7 +2,6 @@
 import { ref, watch, onMounted, toRefs } from 'vue'
 import { Separate } from '@/types/storeType'
 
-
 const props = defineProps({
     totalNumber: {
         type: Number,
@@ -14,7 +13,7 @@ const props = defineProps({
     }
 })
 
-const emits = defineEmits(['clearData'])
+const emits = defineEmits(['submitData'])
 
 const separatedNumberRef = ref()
 const { separatedNumber, totalNumber } = toRefs(props)
@@ -34,16 +33,16 @@ const editScale = (item: number) => {
     }
 }
 const clearData = () => {
-    emits('clearData',separatedNumber.value)
+    emits('submitData', separatedNumber.value)
     separatedNumberRef.value.close()
 }
 watch(scaleList, (val: number[]) => {
-    separatedNumber.value = []
+    separatedNumber.value.length=0
     for (let i = 1; i < scaleList.value.length; i++) {
-        separatedNumber.value[i-1] = {
+        separatedNumber.value[i - 1] = {
             id: i.toString(),
             count: val[i] - val[i - 1],
-            isUsedCount:0,
+            isUsedCount: 0,
         }
     }
 }, { deep: true })
@@ -53,6 +52,7 @@ watch(totalNumber, (val) => {
         return
     }
     separatedNumberRef.value.showModal()
+    // scaleList.value = [0, val]
     scaleList.value = new Array(separatedNumber.value.length + 1).fill(totalNumber.value)
     for (let i = separatedNumber.value.length - 1; i >= 0; i--) {
         scaleList.value[i] = scaleList.value[i + 1] - separatedNumber.value[i].count
@@ -79,7 +79,7 @@ onMounted(() => {
             <div class="flex justify-between px-3 text-center separated-number">
                 <div v-for="item in props.totalNumber" :key="item"
                     class="relative flex flex-col items-center cursor-pointer">
-                    <div class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" data-tip="左键切割右键取消"
+                    <div class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" data-tip="左键切割"
                         @click.left="editScale(item)">
                         <span> {{ item }}</span>
                     </div>

src/store/data.ts

@@ -67,7 +67,7 @@ export const defaultPrizeList = <IPrizeConfig[]>[
         name: '三等奖',
         sort: 1,
         isAll: false,
-        count: 12,
+        count: 3,
         isUsedCount: 0,
         picture: {
             id: '2',
@@ -88,7 +88,7 @@ export const defaultPrizeList = <IPrizeConfig[]>[
         name: '二等奖',
         sort: 2,
         isAll: false,
-        count: 1,
+        count: 2,
         isUsedCount: 0,
         picture: {
             id: '1',
@@ -168,6 +168,48 @@ export const defaultPrizeList = <IPrizeConfig[]>[
         frequency: 1,
     }
 ]
+export const defaultCurrentPrize = <IPrizeConfig>{
+    id: '001',
+    name: '三等奖',
+    sort: 1,
+    isAll: false,
+    count: 12,
+    isUsedCount: 0,
+    picture: {
+        id: '2',
+        name: '三等奖',
+        url: 'https://24years.top/resource/image/image3.png'
+    },
+    separateCount: {
+        enable: true,
+        countList: []
+    },
+    desc: '三等奖',
+    isShow: true,
+    isUsed: false,
+    frequency: 1,
+}
+export const defaultTemporaryPrize = <IPrizeConfig>{
+    id: '',
+    name: '',
+    sort: 0,
+    isAll: false,
+    count: 1,
+    isUsedCount: 0,
+    picture: {
+        id: '-1',
+        name: '',
+        url: ''
+    },
+    separateCount: {
+        enable: true,
+        countList: []
+    },
+    desc: '',
+    isShow: false,
+    isUsed: false,
+    frequency: 1,
+}
 
 export const defaultImageList = [
     {

src/store/globalConfig.ts

@@ -10,7 +10,7 @@ export const useGlobalConfig = defineStore('global', {
                 isSHowPrizeList: true,
                 topTitle: '大明内阁六部御前奏对',
                 theme: {
-                    name: 'dark',
+                    name: 'dracula',
                     detail: { primary: '#0f5fd3' },
                     cardColor: '#ff79c6',
                     cardWidth: 140,
@@ -215,7 +215,7 @@ export const useGlobalConfig = defineStore('global', {
                 isSHowPrizeList: true,
                 topTitle: '大明内阁六部御前奏对',
                 theme: {
-                    name: 'dark',
+                    name: 'dracula',
                     detail: { primary: '#0f5fd3' },
                     cardColor: '#ff79c6',
                     cardWidth: 140,

src/store/prizeConfig.ts

@@ -1,32 +1,12 @@
 import { defineStore } from 'pinia';
 import { IPrizeConfig } from '@/types/storeType';
-import { defaultPrizeList } from './data';
+import { defaultPrizeList, defaultCurrentPrize } from './data';
 export const usePrizeConfig = defineStore('prize', {
     state() {
         return {
             prizeConfig: {
                 prizeList: defaultPrizeList,
-                currentPrize: {
+                currentPrize: defaultCurrentPrize,
-                    id: '001',
-                    name: '三等奖',
-                    sort: 1,
-                    isAll: false,
-                    count: 12,
-                    isUsedCount: 0,
-                    picture: {
-                        id: '2',
-                        name: '三等奖',
-                        url: 'https://24years.top/resource/image/image3.png'
-                    },
-                    separateCount: {
-                        enable: true,
-                        countList: []
-                    },
-                    desc: '三等奖',
-                    isShow: true,
-                    isUsed: false,
-                    frequency: 1,
-                } as IPrizeConfig,
                 temporaryPrize: {
                     id: '',
                     name: '',
@@ -144,6 +124,10 @@ export const usePrizeConfig = defineStore('prize', {
                     name: '',
                     url: ''
                 },
+                separateCount: {
+                    enable: true,
+                    countList: []
+                },
                 desc: '',
                 isShow: false,
                 isUsed: false,
@@ -154,28 +138,28 @@ export const usePrizeConfig = defineStore('prize', {
         resetDefault() {
             this.prizeConfig = {
                 prizeList: defaultPrizeList,
-                currentPrize: {
+                currentPrize: defaultCurrentPrize,
-                    id: '001',
+                temporaryPrize: {
-                    name: '三等奖',
+                    id: '',
-                    sort: 1,
+                    name: '',
+                    sort: 0,
                     isAll: false,
-                    count: 12,
+                    count: 1,
                     isUsedCount: 0,
                     picture: {
-                        id: '2',
+                        id: '-1',
-                        name: '三等奖',
+                        name: '',
-                        url: 'https://24years.top/resource/image/image3.png'
+                        url: ''
                     },
                     separateCount: {
                         enable: true,
                         countList: []
                     },
-                    desc: '三等奖',
+                    desc: '',
-                    isShow: true,
+                    isShow: false,
                     isUsed: false,
                     frequency: 1,
-                } as IPrizeConfig,
+                } as IPrizeConfig
-                temporaryPrize: {} as IPrizeConfig
             }
         }
     },

src/utils/index.ts

@@ -11,7 +11,6 @@ export const filterData = (tableData: any[], localRowCount: number, startIndex =
         tableData[i].y = j;
         tableData[i].id = i;
         // 是否中奖
-        tableData[i].isWin = false
     }
 
     return tableData
@@ -20,11 +19,13 @@ export const filterData = (tableData: any[], localRowCount: number, startIndex =
 export const addOtherInfo = (personList: any[]) => {
     const len = personList.length;
     for (let i = 0; i < len; i++) {
+        personList[i].id = i
         personList[i].createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
         personList[i].updateTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
         personList[i].prizeName = [] as string[];
         personList[i].prizeTime = [] as string[];
         personList[i].prizeId = [];
+        personList[i].isWin = false
     }
 
     return personList

src/views/Config/Global/FaceConfig.vue

@@ -1,7 +1,6 @@
 <script setup lang='ts'>
 import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
-import { filterData } from '@/utils'
 import { storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change';
 import zod from 'zod';
@@ -69,10 +68,8 @@ const resetPersonLayout = () => {
             return
         }
         const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
-        const newList = filterData(allPersonList, rowCountValue.value)
+        const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
-
+        const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
-        const newAlreadyPersonList = newList.slice(0, alreadyLen)
-        const newNotPersonList = newList.slice(alreadyLen, notLen + alreadyLen)
         personConfig.deleteAllPerson()
         personConfig.addNotPersonList(newNotPersonList)
         personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
@@ -238,11 +235,6 @@ onMounted(() => {
                 </div>
                 <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
                     class="w-full max-w-xs input input-bordered" />
-                <div class="help">
-                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                        {{ formErr.rowCount }}
-                    </span>
-                </div>
             </div>
             <div>
                 <div class="label">
@@ -250,11 +242,6 @@ onMounted(() => {
                 </div>
                 <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
                     class="w-full max-w-xs input input-bordered" />
-                <div class="help">
-                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                        {{ formErr.rowCount }}
-                    </span>
-                </div>
             </div>
         </label>
         <label class="w-full max-w-xs mb-10 form-control">

src/views/Config/Person/PersonAll.vue

@@ -6,27 +6,23 @@ import { IPersonConfig } from '@/types/storeType';
 import { storeToRefs } from 'pinia'
 import * as XLSX from 'xlsx'
 import { readFileBinary } from '@/utils/file'
-import { filterData, addOtherInfo } from '@/utils'
+import { addOtherInfo } from '@/utils'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 
 const personConfig = useStore().personConfig
-const globalConfig = useStore().globalConfig
 const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
-const { getRowCount: rowCount } = storeToRefs(globalConfig)
 const limitType = '.xlsx,.xls'
-const excelData = ref<any[]>([])
 // const personList = ref<any[]>([])
 
-const resetDataDialog=ref()
+const resetDataDialog = ref()
-const delAllDataDialog=ref()
+const delAllDataDialog = ref()
 
 const handleFileChange = async (e: Event) => {
     let dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
     let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
     let workSheet = workBook.Sheets[workBook.SheetNames[0]]
-    excelData.value = XLSX.utils.sheet_to_json(workSheet)
+    const excelData = XLSX.utils.sheet_to_json(workSheet)
-    const uploadData = filterData(excelData.value, rowCount.value)
+    const allData = addOtherInfo(excelData);
-    const allData = addOtherInfo(uploadData);
     personConfig.resetPerson()
     personConfig.addNotPersonList(allData)
 }
@@ -47,8 +43,8 @@ const exportData = () => {
             data[i].isWin = '否'
         }
         // 格式化数组为
-        data[i].prizeTime=data[i].prizeTime.join(',')
+        data[i].prizeTime = data[i].prizeTime.join(',')
-        data[i].prizeName=data[i].prizeName.join(',')
+        data[i].prizeName = data[i].prizeName.join(',')
     }
     let dataString = JSON.stringify(data)
     dataString = dataString

src/views/Config/Prize/PrizeConfig.vue

@@ -64,27 +64,43 @@ const selectPrize = (item: IPrizeConfig) => {
     }
 }
 
-const changePrizeStatus=(item:IPrizeConfig)=>{
+const changePrizeStatus = (item: IPrizeConfig) => {
-    if(item.isUsed==true){
+    // if (item.isUsed == true) {
-        item.isUsedCount=0;
+    //     item.isUsedCount = 0;
-        if(item.separateCount&&item.separateCount.countList.length){
+    //     if (item.separateCount && item.separateCount.countList.length) {
-            item.separateCount.countList.forEach((countItem:any)=>{
+    //         item.separateCount.countList.forEach((countItem: any) => {
-                countItem.isUsedCount=0;
+    //             countItem.isUsedCount = 0;
-            })
+    //         })
-        }
+    //     }
-    }
+    // }
-    else{
+    // else {
-        item.isUsedCount=item.count;
+    //     item.isUsedCount = item.count;
-        if(item.separateCount&&item.separateCount.countList.length){
+    //     if (item.separateCount && item.separateCount.countList.length) {
-            item.separateCount.countList.forEach((countItem:any)=>{
+    //         item.separateCount.countList.forEach((countItem: any) => {
-                countItem.isUsedCount=countItem.count;
+    //             countItem.isUsedCount = countItem.count;
-            })
+    //         })
-        }
+    //     }
-    }
+    // }
-    item.isUsed=!item.isUsed
+    item.isUsed?item.isUsedCount=0:item.isUsedCount=item.count;
+    item.separateCount.countList = []
+    item.isUsed = !item.isUsed
 }
-const clearSelectedPrize = (value:any) => {
+
-    selectedPrize.value!.separateCount.countList=value;
+const changePrizePerson = (item: IPrizeConfig) => {
+    let indexPrize = -1;
+    for (let i = 0; i < prizeList.value.length; i++) {
+        if (prizeList.value[i].id == item.id) {
+            indexPrize = i;
+            break;
+        }
+    }
+    if (indexPrize > -1) {
+        prizeList.value[indexPrize].separateCount.countList = []
+        prizeList.value[indexPrize].isUsed?prizeList.value[indexPrize].isUsedCount=prizeList.value[indexPrize].count:prizeList.value[indexPrize].isUsedCount=0
+    }
+}
+const submitData = (value: any) => {
+    selectedPrize.value!.separateCount.countList = value;
     selectedPrize.value = null
 }
 const resetDefault = () => {
@@ -176,9 +192,9 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                     <div class="label">
                         <span class="label-text">抽奖人数</span>
                     </div>
-                    <input type="number" v-model="item.count" placeholder="获奖人数"
+                    <input type="number" v-model="item.count" placeholder="获奖人数" @change="changePrizePerson(item)"
                         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">
+                    <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>
@@ -193,8 +209,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                     <div class="label">
                         <span class="label-text">已抽取</span>
                     </div>
-                    <input type="checkbox" :checked="item.isUsed"
+                    <input type="checkbox" :checked="item.isUsed" @change="changePrizeStatus(item)"
-                        @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">
@@ -217,11 +232,12 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                             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="flex items-center justify-center w-full h-full tooltip"
-                                <div class="absolute left-0 z-50 h-full bg-blue-300/80"
+                                    :data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
-                                    :style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
+                                    <div class="absolute left-0 z-50 h-full bg-blue-300/80"
-                                <span>{{ se.count }}</span>
+                                        :style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
-                            </div>
+                                    <span>{{ se.count }}</span>
+                                </div>
                             </li>
                         </ul>
                         <button v-else class="btn btn-secondary btn-xs">设置</button>
@@ -238,7 +254,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             </li>
         </ul>
         <EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
-            @clearData="clearSelectedPrize" />
+            @submitData="submitData" />
     </div>
 </template>
 

src/views/Home/PrizeList.vue

@@ -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">
+                    <label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
-                        <div class="label">
+                    <div class="label">
-                            <span class="label-text">已抽取</span>
+                        <span class="label-text">单次抽取个数</span>
-                        </div>
+                    </div>
-                        <input type="checkbox" :checked="temporaryPrize.isUsed"
+                    <div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
-                            @change="temporaryPrize.isUsed ? (() => { temporaryPrize.isUsed = false; temporaryPrize.isUsedCount = 0 })() : (() => { temporaryPrize.isUsed = true; temporaryPrize.isUsedCount = temporaryPrize.count })()"
+                        <ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
-                            class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+                            v-if="temporaryPrize.separateCount.countList.length">
-                    </label>
+                            <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">

src/views/Home/index.vue

@@ -68,16 +68,18 @@ function initTableData() {
         return
     }
     const totalCount = rowCount.value * 7
-    tableData.value = JSON.parse(JSON.stringify(allPersonList.value))
+    const orginPersonData = JSON.parse(JSON.stringify(allPersonList.value))
-    const tableDataLength = tableData.value.length
+    const orginPersonLength = orginPersonData.length
-    if (tableDataLength < totalCount) {
+    if (orginPersonLength < totalCount) {
-        const repeatCount = Math.ceil(totalCount / tableDataLength)
+        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) => {
+        for(let i=0;i<patternList.value.length;i++){
-            objects.value[item - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
+            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
+    const customCount = currentPrize.value.separateCount
-    if(customCount&&customCount.enable&&customCount.countList.length>0){
+    if (customCount && customCount.enable && customCount.countList.length > 0) {
-        for(let i=0;i<customCount.countList.length;i++){
+        for (let i = 0; i < customCount.countList.length; i++) {
-            if(customCount.countList[i].isUsedCount<customCount.countList[i].count){
+            if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
-                leftover=customCount.countList[i].count-customCount.countList[i].isUsedCount
+                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
+    const customCount = currentPrize.value.separateCount
-    if(customCount&&customCount.enable&&customCount.countList.length>0){
+    if (customCount && customCount.enable && customCount.countList.length > 0) {
-        for(let i=0;i<customCount.countList.length;i++){
+        for (let i = 0; i < customCount.countList.length; i++) {
-            if(customCount.countList[i].isUsedCount<customCount.countList[i].count){
+            if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
-                customCount.countList[i].isUsedCount+= luckyCount.value
+                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) {