activity/src/view/WorldCup/components/match.vue

<template>
  <div class="svgCup" ref="svgCup">
    <img
      class="cupTitle"
      :style="'width:' + fontSize * 4.6 + 'px'"
      :src="require('../../../assets/img/2022worldCup.png')"
    />
    <div class="guessing" :style="'height: ' + height + 'px'">
      <svg
        class="svg"
        :width="width"
        :height="height"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
      >
        <polyline
          v-for="(item, i) in line"
          :key="i"
          :points="item.points"
          :id="'line' + item.id"
          :style="
            'fill: none; stroke: ' +
            item.color +
            '; stroke-width: ' +
            item.width
          "
        />
        <image
          v-for="(item, i) in flag"
          :key="i"
          :xlink:href="item[6].file"
          :x="item[0]"
          :y="item[1]"
          :id="'image' + item[5]"
          :width="item[2] != 4 ? fontSize : fontSize + 35"
          :height="item[2] != 4 ? fontSize / 1.4 : (fontSize + 35) / 1.4"
          @click="() => selectFlag(i, item[5])"
        />
        <text
          v-for="(item, i) in flag"
          :key="i"
          :x="item[4].x"
          :y="item[4].y"
          :id="'text' + item[5]"
          :width="fontSize"
          v-text="item[4].text || ''"
          :fill="item[4].color"
          :font-size="item[4].fontSize"
          @click="() => selectFlag(i, item[5])"
        ></text>
      </svg>
    </div>
    <br />
    <div style="padding: 0 10vw" v-if="!isWin">
      <van-button
        round
        type="primary"
        block
        @click="upData"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        >完成预测</van-button
      >
    </div>
  </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";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
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 rowHeight = fontSize.value / 1.5 + 30;
const height = ref(rowHeight * maxcol.length + 25);
let textSize = 12;
let id = "";
const isWin = ref(team[0][0] ? team[0][0].isWinner : false);
for (let row = 0; row < maxcol.length; row++) {
  let text = "?";
  let file = undefined;
  if (row == 4) {
    file = require("../../../assets/img/default_big.png");
  } else {
    file = require("../../../assets/img/default.png");
  }
  const len = maxcol[row];
  let fSize = fontSize.value;
  let y = row * rowHeight + 10; // 行高
  row > 4 && (y += 25);
  if (row == 4) fSize += 35;
  const colWidth = (width.value - 10) / len; // 列宽
  for (let col = 0; col < len; col++) {
    const teamItem = team[row][col] || {};
    let imgUrl = {
      file,
      isWinner: teamItem.isWinner,
      selectId: teamItem.selectId,
      pSelectId: teamItem.pSelectId,
      isForeast: teamItem.isForeast,
      isED: teamItem.isED,
      ed: false,
    };
    const x = colWidth * col + colWidth / 2;
    const textY = y + fSize / 1.5 + textSize;
    id = [row, col].join("-");
    if (teamItem.team) text = teamItem.team;
    if (teamItem.teamlogo) {
      imgUrl.file = teamItem.teamlogo;
    } else if (!imgUrl.file)
      imgUrl.file = require("../../../assets/img/china.png");
    // 前两位 坐标， 第三位行数， 第四位 列数， 第五位 文本配置；
    flag.push([
      x - fSize / 2,
      y,
      row,
      col,
      {
        text: text,
        x: colWidth * col + colWidth / 2 - (text.length * textSize) / 2 + 4,
        y: textY + 1,
        fontSize: textSize,
        color: "#ffffff",
      },
      id,
      imgUrl,
    ]);
    let points = [];
    if (row < 3) points = line1(x, textY, col % 2 === 0, colWidth);
    if (row > 2 && row < 5) points = line2(x, textY);
    if (row > 5) points = line3(x, y - 8, col % 2 === 0, colWidth);
    line.push({
      points,
      width: 1,
      color: "#b8dd8a80",
      id,
    });
  }
}

function line1(x, textY, col, colWidth) {
  // 线条 上半部分
  let points = [[x, textY + 5].join(","), [x, textY + 10].join(",")];
  let nextX = x;
  if (col) {
    nextX += colWidth / 2;
  } else {
    nextX -= colWidth / 2;
  }
  points.push([nextX, textY + 10].join(","));
  points.push([nextX, textY + 15].join(","));
  return points;
}

function line2(x, textY) {
  // 线条 中间部分
  return [[x, textY + 5].join(","), [x, textY + 15].join(",")];
}

function line3(x, textY, col, colWidth) {
  // 线条 下半部分
  let points = [[x, textY + 5].join(","), [x, textY].join(",")];
  let nextX = x;
  if (col) {
    nextX += colWidth / 2;
  } else {
    nextX -= colWidth / 2;
  }
  points.push([nextX, textY].join(","));
  points.push([nextX, textY - 5].join(","));
  return points;
}

function selectFlag(index) {
  const select = flag[index];
  if (select[2] == 4 || select[4].text === '?' || select[6].isED || select[6].isForeast) return;
  const linkSelect = flag[select[3] % 2 === 0 ? index + 1 : index - 1] || undefined;
  const startRow = select[2]; // 行数
  const startCol = select[3]; // 点击列数
  const isDown = startRow < 4 ? 1 : -1; // 递增系数
  let Row = startRow + isDown;
  let Col = startCol % 2 === 0 ? startCol / 2 : (startCol - 1) / 2;
  let coordinate = [];
  for (let i = Row; isDown > 0 ? i <= 4 : i >= 4; i += isDown) {
    let indexNum = Col;
    for (let o = 0; o < i; o++) {
      indexNum += maxcol[o];
    }
    const startText = flag[indexNum][4].text || "";
    coordinate.push({
      x: Col,
      y: i,
      indexNum,
    });
    Col = Col % 2 === 0 ? Col / 2 : (Col - 1) / 2;
    if (startText === "?") break;
  }
  let len = coordinate.length;
  if (len < 2) {
    // 只有下一行
    flag[coordinate[0].indexNum][4].text = select[4].text;
    flag[coordinate[0].indexNum][6].file = select[6].file;
    return;
  }
  // 多行已经选择
  if(flag[coordinate[len - 1].indexNum][4].text == '?') len--;
  for (let i = 0; i < len; i++) {
    if (
      !linkSelect ||
      flag[coordinate[i].indexNum][4].text !== linkSelect[4].text
    )
      continue;
    flag[coordinate[i].indexNum][4].text = select[4].text;
    flag[coordinate[i].indexNum][6].file = select[6].file;
  }
}

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;
    let raceId = v[6].pSelectId != -1 ? v[6].pSelectId : 15;
    objFlag.push({
      raceId,
      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: 25px;
  padding-bottom: 55px;
  .cupTitle {
    display: block;
    margin: 0 auto;
  }
  .guessing {
    margin: 0 5px;
    min-height: 100px;
    border-radius: 12px;
    background-color: rgba($color: #b8dd8a, $alpha: 0.5);
    color: #fff;
    padding: 0;
    position: relative;
    .svg {
      position: absolute;
      z-index: 0;
    }
    .row {
      display: flex;
      .col {
        flex: 1;
        font-size: 10px;
        text-align: center;
        padding: 5px 0;
      }
    }
  }
}
</style>