fix: 优化抽中卡片时的排版

一行中的卡片数量为偶数时，卡片未居中

src/hooks/useElement.ts

@@ -52,31 +52,22 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
     return element
 }
 
-// export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{
+/**
-//     const centerPosition={
+ * @description 设置抽中卡片的位置
-//         x:0,
+ * 最少一个，最大十个
-//         y:windowSize.height/2-cardSize.height/2
+ */
-//     }
+// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
-//   const index =cardIndex%5
+export const useElementPosition = (element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
-//     if(index==0){
-//         element.position.x=centerPosition.x
-//         element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60)
-//     }
-//     else{
-//         element.position.x=index%2===0?Math.ceil(index/2)*(cardSize.width+100):-Math.ceil(index/2)*(cardSize.width+100)
-//         element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60)
-//     }
-
-//     return element
-// }
-
-export const useElementPosition = (element: any, count: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
     let xTable = 0
     let yTable = 0
     const centerPosition = {
         x: 0,
         y: windowSize.height / 2 - cardSize.height / 2
     }
+    // 有一行为偶数的特殊数量
+    const specialPosition = [2, 4, 7, 9]
+    // 不包含特殊值的 和 分两行中第一行为奇数值的
+    if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
         const index = cardIndex % 5
         if (index == 0) {
             xTable = centerPosition.x
@@ -86,6 +77,17 @@ export const useElementPosition = (element: any, count: number, cardSize: { widt
             xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
             yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
         }
-
+    }
+    else {
+        const index = cardIndex % 5
+        if (index == 0) {
+            xTable = centerPosition.x + (cardSize.width + 100) / 2
+            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+        }
+        else {
+            xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
+            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+        }
+    }
     return { xTable, yTable }
 }

src/views/Home/index.vue

@@ -452,8 +452,9 @@ const stopLottery = async () => {
     luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
         let cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
         luckyCardList.value.push(cardIndex)
+        const totalLuckyCount=luckyTargets.value.length
         let item = objects.value[cardIndex]
-        const { xTable, yTable } = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
+        const { xTable, yTable } = useElementPosition(item, rowCount.value,totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
         new TWEEN.Tween(item.position)
             .to({
                 x: xTable,