Merge pull request #34 from LOG1997/feature-fixbug

fix: 优化抽中卡片时的排版
LOG1997 · Dec 24, 2024 · 2b0d805 · 2b0d805
2 parents 1bfaa13 + 3432960
commit 2b0d805
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git a/src/hooks/useElement.ts b/src/hooks/useElement.ts
@@ -1,14 +1,14 @@
 import { rgba } from '@/utils/color'
 import { IPersonConfig } from '@/types/storeType'
 
-export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky'|'sphere' = 'default') => {
-    if (patternList.includes(index+1)&&mod=='default') {
+export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') => {
+    if (patternList.includes(index + 1) && mod == 'default') {
         element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
     }
-    else if(mod=='sphere'||mod=='default') {
+    else if (mod == 'sphere' || mod == 'default') {
         element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
     }
-    else if(mod=='lucky'){
+    else if (mod == 'lucky') {
         element.style.backgroundColor = rgba(cardColor, 0.8)
     }
     element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
@@ -52,40 +52,42 @@ 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={
-//         x:0,
-//         y:windowSize.height/2-cardSize.height/2
-//     }
-//   const index =cardIndex%5
-//     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) => {
+/**
+ * @description 设置抽中卡片的位置
+ * 最少一个，最大十个
+ */
+// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
+export const useElementPosition = (element: any, count: number, totalCount: 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 index = cardIndex % 5
-    if (index == 0) {
-        xTable = centerPosition.x
-        yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+    // 有一行为偶数的特殊数量
+    const specialPosition = [2, 4, 7, 9]
+    // 不包含特殊值的 和 分两行中第一行为奇数值的
+    if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
+        const index = cardIndex % 5
+        if (index == 0) {
+            xTable = centerPosition.x
+            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+        }
+        else {
+            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 {
-        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)
+        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 }
 }
diff --git a/src/views/Home/index.vue b/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,