提交

src/api/worldCup.js

@@ -49,3 +49,11 @@ export function votpSave(data) {
   });
 }
 
+export function forecast(data) {
+  return ajax({
+    url: "race/store",
+    method: "post",
+    data,
+  });
+}
+

src/view/WorldCup/components/match.vue

@@ -50,10 +50,14 @@
         ></text>
       </svg>
     </div>
+    <br />
+    <van-button round type="primary" block @click="upData">完成预测</van-button>
   </div>
 </template>
 <script setup>
 import { ref, reactive, inject } from "vue";
+import { Toast } from "vant";
+import { forecast } from "@/api/worldCup.js";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -65,29 +69,26 @@ const fontSize = inject("fontSize"); // 接收父级传参
 const availWidth = inject("availWidth");
 const maxcol = inject("maxcol");
 const team = inject("team");
+const user = inject("user");
 const width = ref(availWidth - 4);
 const flag = reactive([]);
 const line = reactive([]);
+const list = [];
 const rowHeight = fontSize.value / 1.5 + 30;
 const height = ref(rowHeight * maxcol.length + 25);
 let textSize = 12;
 let id = "";
 for (let row = 0; row < maxcol.length; row++) {
-  let imgUrl = {
-    isDefault: true,
-    selectId: undefined,
-    file: undefined,
-    ed: false,
-  };
-  let text = "？";
+  let text = "?";
+  let isDefault = true;
+  let file = undefined;
   if (row === 0 || row === maxcol.length - 1) {
-    imgUrl.isDefault = false;
+    isDefault = false;
   } else if (row == 4) {
-    imgUrl.file = require("../../../assets/img/default_big.png");
+    file = require("../../../assets/img/default_big.png");
   } else {
-    imgUrl.file = require("../../../assets/img/default.png");
+    file = require("../../../assets/img/default.png");
   }
-
   const len = maxcol[row];
   let fSize = fontSize.value;
   let y = row * rowHeight + 10; // 行高
@@ -95,10 +96,22 @@ for (let row = 0; row < maxcol.length; row++) {
   if (row == 4) fSize += 35;
   const colWidth = (width.value - 10) / len; // 列宽
   for (let col = 0; col < len; col++) {
+    let imgUrl = {
+      isDefault,
+      file,
+      isWinner: false,
+      selectId: undefined,
+      pSelectId: undefined,
+      ed: false,
+    };
     const x = colWidth * col + colWidth / 2;
     const textY = y + fSize / 1.5 + textSize;
     id = [row, col].join("-");
     const teamItem = team[row][col] || {};
+    imgUrl.isED = teamItem.isED;
+    imgUrl.isWinner = teamItem.isWinner;
+    imgUrl.selectId = teamItem.selectId;
+    imgUrl.pSelectId = teamItem.pSelectId;
     if (teamItem.team) text = teamItem.team;
     if (teamItem.teamlogo) {
       imgUrl.file = teamItem.teamlogo;
@@ -114,7 +127,7 @@ for (let row = 0; row < maxcol.length; row++) {
       col,
       {
         text: text,
-        x: colWidth * col + colWidth / 2 - (text.length * textSize) / 2,
+        x: colWidth * col + colWidth / 2 - (text.length * textSize) / 2 + 4,
         y: textY + 1,
         fontSize: textSize,
         color: "#ffffff",
@@ -170,23 +183,28 @@ function line3(x, textY, col, colWidth) {
 
 function selectFlag(index) {
   const select = flag[index];
-  if (select[2] == 4 || select[6].isDefault || select[6].ed) return;
+  let linkSelect = [];
+  if (index % 2 === 0) linkSelect = flag[index + 1];
+  else linkSelect = flag[index - 1];
+  if (select[2] == 4 || select[6].isDefault || select[6].ed || select[6].isED)
+    return;
   //   更新选中划线
-  const linkID = [
-    select[2],
-    select[3] % 2 === 0 ? select[3] + 1 : select[3] - 1,
-  ].join("-");
-  for (let i = 0; i < line.length; i++) {
-    const v = line[i];
-    if (v.id != linkID) continue;
-    v.color = "#b8dd8a80";
-    break;
-  }
-  line[index].color = "#FF9030";
+  //   const linkID = [
+  //     select[2],
+  //     select[3] % 2 === 0 ? select[3] + 1 : select[3] - 1,
+  //   ].join("-");
+  //   for (let i = 0; i < line.length; i++) {
+  //     const v = line[i];
+  //     if (v.id != linkID) continue;
+  //     v.color = "#b8dd8a80";
+  //     break;
+  //   }
+  //   line[index].color = "#FF9030";
   // 更新选中球队
   // 4行以上向下选择，4行一下向上选择
   const isDown = select[2] < 4 ? 1 : -1;
   const selectItem = {
+    isWinner: true,
     file: select[6].file,
     isDefault: select[6].isDefault,
     selectId: select[6].selectId ? select[6].selectId : select[5],
@@ -208,7 +226,16 @@ function selectFlag(index) {
     let next = [];
     if (lastCol % 2 === 0) next = [linkRow, lastCol / 2];
     else next = [linkRow, (lastCol - 1) / 2];
-    colList.push(next);
+    let T = 0;
+    for (let i = 0; i < linkRow; i++) {
+      T += maxcol[i];
+    }
+    T += next[1];
+    if (
+      flag[T][4].text == linkSelect[4].text ||
+      flag[T][4].text === select[4].text
+    )
+      colList.push(next);
     linkRow += isDown;
     if (!lastP.length) lastP = next;
     if (next[0] === 4) isNext = false;
@@ -237,16 +264,40 @@ function selectFlag(index) {
         : toStep;
     }
     if (toStep) continue;
-    flag[i][6] = JSON.parse(JSON.stringify(selectItem));
+    flag[i][6] = {
+      ...flag[i][6],
+      ...JSON.parse(JSON.stringify(selectItem)),
+    };
     flag[i][4].text = select[4].text;
-    flag[i][4].x = colWidth * col + colWidth / 2 - (2 * textSize) / 2;
+    flag[i][4].x = colWidth * col + colWidth / 2 - (2 * textSize) / 2 + 4;
+  }
+
+  list.push(JSON.parse(JSON.stringify(select)));
+}
+
+function upData() {
+  const objFlag = [];
+  for (let i = 0; i < flag.length; i++) {
+    const v = flag[i];
+    if (!v[6].pSelectId || !v[4].text || v[4].text == "?") continue;
+    objFlag.push({
+      raceId: v[6].selectId,
+      winner: v[4].text,
+    });
   }
+  if (objFlag.length < 15) return Toast("请选择完整的冠军之路。");
+  forecast({
+    phone: user.phone,
+    preRaceItems: objFlag,
+  }).then(() => {
+    Toast("预测成功！");
+  });
 }
 </script>
 <style lang="scss" scoped>
 .svgCup {
-  padding-top: 55px;
-  padding-bottom: 125px;
+  padding-top: 25px;
+  padding-bottom: 55px;
   .cupTitle {
     display: block;
     margin: 0 auto;

src/view/WorldCup/index.vue

@@ -110,20 +110,29 @@ function formmateMatch(matchList) {
       team[3] = [
         {
           team: v.home,
+          isWinner: v.winner === v.home,
           teamlogo: v.homeLogo,
+          isED: !!v.winner,
           isHome: true,
+          selectId: v.id,
+          pSelectId: v.pid,
         },
       ];
       team[5] = [
         {
           team: v.away,
+          isWinner: v.winner === v.away,
           teamlogo: v.awayLogo,
+          isED: !!v.winner,
           isHome: true,
+          selectId: v.id,
+          pSelectId: v.pid,
         },
       ];
       team[Math.ceil((maxcol.length - 1) / 2)] = [
         {
           team: v.winner || "",
+          isWinner: true,
           teamlogo:
             v.winner === v.home
               ? v.homeLogo
@@ -131,6 +140,9 @@ function formmateMatch(matchList) {
               ? v.awayLogo
               : "",
           isHome: true,
+          isED: !!v.winner,
+          selectId: v.id,
+          pSelectId: v.pid,
         },
       ];
     }
@@ -152,13 +164,21 @@ function setTeam(teamIndex, item) {
   if (!team[teamIndex]) team[teamIndex] = [];
   team[teamIndex].push({
     team: item.home || "",
+    isWinner: item.winner === item.home,
     teamlogo: item.homeLogo || "",
+    isED: !!item.winner,
     isHome: true,
+    selectId: item.id,
+    pSelectId: item.pid,
   });
   team[teamIndex].push({
     team: item.away || "",
+    isWinner: item.winner === item.away,
     teamlogo: item.awayLogo || "",
+    isED: !!item.winner,
     isHome: false,
+    selectId: item.id,
+    pSelectId: item.pid,
   });
 }