feat(for): for

src/views/Config/Prize/PrizeConfig.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import { ref, onMounted,watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import useStore from '@/store'
-import {storeToRefs } from 'pinia'
+import { storeToRefs } from 'pinia'
 import localforage from 'localforage'
 import { IPrizeConfig } from '@/types/prizeConfig';
 
@@ -10,9 +10,9 @@ const imageDbStore = localforage.createInstance({
 })
 const prizeConfig = useStore().prizeConfig
 const globalConfig = useStore().globalConfig
-const { getPrizeConfig:localPrizeList} = storeToRefs(prizeConfig)
+const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
 
-const { getImageList:localImageList} = storeToRefs(globalConfig)
+const { getImageList: localImageList } = storeToRefs(globalConfig)
 const prizeList = ref(localPrizeList)
 const imgList = ref<any[]>([])
 const addPrize = () => {
@@ -22,10 +22,11 @@ const addPrize = () => {
         sort: 0,
         isAll: true,
         count: 1,
+        isUsedCount:0,
         picture: {
-            id:'',
-            name:'',
-            url:''
+            id: '',
+            name: '',
+            url: ''
         },
         desc: '',
         isUsed: false,
@@ -34,7 +35,7 @@ const addPrize = () => {
     }
     prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
 }
-const resetDefault=()=>{
+const resetDefault = () => {
     prizeConfig.resetDefault()
 }
 
@@ -50,60 +51,65 @@ const getImageDbStore = async () => {
     }
 }
 
-const sort = (item:any,isUp:number) => {
-    const itemIndex=prizeList.value.indexOf(item)
-    if(isUp==1){
-        prizeList.value.splice(itemIndex,1)
-        prizeList.value.splice(itemIndex-1,0,item)
-    }else{
-        prizeList.value.splice(itemIndex,1)
-        prizeList.value.splice(itemIndex+1,0,item)
+const sort = (item: any, isUp: number) => {
+    const itemIndex = prizeList.value.indexOf(item)
+    if (isUp == 1) {
+        prizeList.value.splice(itemIndex, 1)
+        prizeList.value.splice(itemIndex - 1, 0, item)
+    } else {
+        prizeList.value.splice(itemIndex, 1)
+        prizeList.value.splice(itemIndex + 1, 0, item)
     }
 }
-const delItem=(item:IPrizeConfig)=>{
+const delItem = (item: IPrizeConfig) => {
     prizeConfig.deletePrizeConfig(item.id)
     // 更新奖项列表
 }
-const delAll=async ()=>{
-  await prizeConfig.deleteAllPrizeConfig()
+const delAll = async () => {
+    await prizeConfig.deleteAllPrizeConfig()
 }
 onMounted(() => {
     getImageDbStore()
 })
-watch(()=>prizeList,()=>{
+watch(() => prizeList, () => {
     prizeConfig.setPrizeConfig(prizeList.value)
-},{deep:true})
+}, { deep: true })
 </script>
 
 <template>
     <div>
         <h2>奖项配置</h2>
         <div class="flex w-full gap-3">
-        <button class="btn btn-info btn-sm" @click="addPrize">添加</button>
-        <button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
-        <button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
-        
-    </div>
+            <button class="btn btn-info btn-sm" @click="addPrize">添加</button>
+            <button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
+            <button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
+
+        </div>
         <ul>
-            <li v-for="item in prizeList" :key="item.id" class="flex gap-10">
+            <li v-for="item in prizeList" :key="item.id" class="flex gap-10"
+                :class="currentPrize.id == item.id ? 'border-1 border-solid rounded-xl' : null">
                 <label class="max-w-xs mb-10 form-control">
                     <!-- 向上向下 -->
                     <div class="flex flex-col items-center gap-2 pt-5">
-                        <svg-icon class="cursor-pointer hover:text-blue-400" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
-                        <svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
+                        <svg-icon class="cursor-pointer hover:text-blue-400"
+                            :class="prizeList.indexOf(item) == 0 ? 'opacity-0 cursor-default' : ''" name="up"
+                            @click="sort(item, 1)"></svg-icon>
+                        <svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item, 0)"
+                            :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">
                     <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" />
+                    <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">
                     <div class="label">
                         <span class="label-text">是否全员参加</span>
                     </div>
-                    <input type="checkbox" :checked="item.isAll" @change="item.isAll =!item.isAll"
+                    <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">
@@ -113,39 +119,46 @@ watch(()=>prizeList,()=>{
                     <input type="number" v-model="item.count" placeholder="获奖人数"
                         class="w-full max-w-xs input-sm input input-bordered" />
                 </label>
+                <label class="w-full 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">
                     <div class="label">
                         <span class="label-text">图片</span>
                     </div>
-                    <select class="w-full max-w-xs select select-warning select-sm"  v-model="item.picture">
+                    <select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
                         <option disabled selected>选择一张图片</option>
-                        <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}</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">
                     <div class="label">
                         <span class="label-text">展示在主界面</span>
                     </div>
-                    <input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
+                    <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>
-                    <input type="text" v-model="item.frequency" placeholder="抽取次数" class="w-full max-w-xs input-sm input input-bordered" />
+                    <input type="text" v-model="item.frequency" placeholder="抽取次数"
+                        class="w-full max-w-xs input-sm input input-bordered" />
                 </label>
                 <label class="w-full max-w-xs mb-10 form-control">
                     <div class="label">
                         <span class="label-text">操作</span>
                     </div>
                     <div class="flex gap-2">
-                    <button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
-                </div>
+                        <button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
+                    </div>
                 </label>
             </li>
         </ul>
-    </div>
-</template>
+</div></template>
 
 <style lang='scss' scoped></style>