提交

src/api/worldCup.js

@@ -0,0 +1,9 @@
+import ajax from "@/utils/request.js";
+
+export function getMatch(data) {
+  return ajax({
+    url: "race/list",
+    method: "get",
+    data,
+  });
+}

src/config/index.js

@@ -0,0 +1,5 @@
+export default {
+  base: {
+    ajax: "https://topic.smcic.net/operate/world-cup/",
+  },
+};

src/utils/request.js

@@ -0,0 +1,71 @@
+import config from "../config/index.js";
+import { Toast } from "vant";
+import "vant/lib/toast/style/index";
+
+function getdata(data) {
+  let text = "";
+  for (const key in data) {
+    text += key + "=" + data[key] + "&";
+  }
+  text ? (text = "?" + text) : "";
+  text = text.replace(/&$/, "");
+  return text;
+}
+
+export default function (ori) {
+  let baseurl = config.base[ori.urlType || "ajax"];
+  let url = baseurl + ori.url;
+  Toast.loading({
+    message: '加载中...',
+    forbidClick: true,
+    duration: 0
+  });
+  return new Promise((resolve, reject) => {
+    var xhttp;
+    if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+    else if (window.ActiveXObject)
+      xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+    let method = ori.method.toUpperCase();
+    if (method === "GET") url += getdata(ori.data || {});
+    xhttp.open(method, url, true);
+    xhttp.setRequestHeader(
+      "Content-type",
+      ori.header
+        ? ori.header.contentType || "application/json"
+        : "application/json"
+    );
+    method === "GET" ? xhttp.send() : xhttp.send(JSON.stringify(ori.data));
+    xhttp.onreadystatechange = function () {
+      if (this.readyState != 4) return;
+      Toast.clear()
+      if (this.status === 404) {
+        Toast("请求失败 " + this.status);
+        reject(this.status);
+        return;
+      }
+      if (this.status != 200) {
+        let t = JSON.parse(this.responseText || "{}");
+        Toast(t.message || "请求失败 " + this.status);
+        reject(t.message);
+        return;
+      }
+    //   console.log(this.responseText)
+      let data = {};
+      try {
+        data =
+          this.responseText !== "null"
+            ? JSON.parse(this.responseText || "{}")
+            : {};
+      } catch (err) {
+        Toast("请求失败");
+        console.error(err);
+        reject(err);
+      }
+      if (data.code === 0) resolve(data.data);
+      else {
+        Toast(data.message || "请求失败");
+        reject(data);
+      }
+    };
+  });
+}

src/view/WorldCup/components/g6Gup.vue → src/view/WorldCup/components/match.vue

@@ -49,74 +49,11 @@
           @click="() => selectFlag(i, item[5])"
         ></text>
       </svg>
-      <!-- <div class="row">
-        <div class="col" v-for="i in 8" :key="i">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col" v-for="i in 4" :key="i">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col" v-for="i in 2" :key="i">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col" v-for="i in 2" :key="i">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col" v-for="i in 4" :key="i">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col" v-for="i in 8" :key="i">
-          <img
-            :style="'width:' + fontSize + 'px'"
-            :src="require('../../../assets/img/china.png')"
-          />
-          <p>中国</p>
-        </div>
-      </div> -->
     </div>
   </div>
 </template>
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, inject } from "vue";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -124,30 +61,28 @@ import { ref, reactive } from "vue";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const availWidth =
-  window.$originData.orginParames.availWidth > 1440
-    ? 1440
-    : window.$originData.orginParames.availWidth;
-const fontSize = ref(availWidth / 10);
+const fontSize = inject("fontSize"); // 接收父级传参
+const availWidth = inject("availWidth");
+const maxcol = inject("maxcol");
+const team = inject("team");
 const width = ref(availWidth - 4);
 const flag = reactive([]);
 const line = reactive([]);
-const maxcol = [8, 4, 2, 1, 1, 1, 2, 4, 8];
 const rowHeight = fontSize.value / 1.5 + 30;
 const height = ref(rowHeight * maxcol.length + 25);
 let textSize = 12;
 let id = "";
+console.log(team);
 for (let row = 0; row < maxcol.length; row++) {
   let imgUrl = {
     isDefault: true,
     selectId: undefined,
     file: undefined,
+    ed: false,
   };
   let text = "？";
   if (row === 0 || row === maxcol.length - 1) {
     imgUrl.isDefault = false;
-    imgUrl.file = require("../../../assets/img/china.png");
-    text = "中国" + row;
   } else if (row == 4) {
     imgUrl.file = require("../../../assets/img/default_big.png");
   } else {
@@ -164,6 +99,14 @@ for (let row = 0; row < maxcol.length; row++) {
     const x = colWidth * col + colWidth / 2;
     const textY = y + fSize / 1.5 + textSize;
     id = [row, col].join("-");
+    const teamItem = team[row][col] || {};
+    if (teamItem.team) text = teamItem.team;
+    if (teamItem.teamlogo) {
+      imgUrl.file = teamItem.teamlogo;
+      imgUrl.isDefault = false;
+      imgUrl.ed = !(row !== 3 || row !== 5);
+    } else if (!imgUrl.file)
+      imgUrl.file = require("../../../assets/img/china.png");
     // 前两位 坐标， 第三位行数， 第四位 列数， 第五位 文本配置；
     flag.push([
       x - fSize / 2,
@@ -171,7 +114,7 @@ for (let row = 0; row < maxcol.length; row++) {
       row,
       col,
       {
-        text: text + col,
+        text: text,
         x: colWidth * col + colWidth / 2 - (text.length * textSize) / 2,
         y: textY + 1,
         fontSize: textSize,
@@ -228,7 +171,7 @@ function line3(x, textY, col, colWidth) {
 
 function selectFlag(index) {
   const select = flag[index];
-  if (select[2] == 4 || select[6].isDefault) return;
+  if (select[2] == 4 || select[6].isDefault || select[6].ed) return;
   //   更新选中划线
   const linkID = [
     select[2],

src/view/WorldCup/index.vue

@@ -38,15 +38,17 @@
         <ranking />
         <chat />
       </div>
-      <g6Gup />
+      <match v-if="team.length" />
     </div>
   </div>
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref, provide, reactive } from "vue";
 import chat from "./components/chat.vue";
 import ranking from "./components/ranking.vue";
-import g6Gup from "./components/g6Gup.vue";
+import match from "./components/match.vue";
+
+import { getMatch } from "@/api/worldCup.js";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -59,6 +61,79 @@ const availWidth =
     ? 1440
     : window.$originData.orginParames.availWidth;
 const fontSize = ref(availWidth / 10);
+const maxcol = [8, 4, 2, 1, 1, 1, 2, 4, 8];
+let team = reactive([]);
+
+provide("fontSize", fontSize); // 配置全域参数
+provide("availWidth", availWidth); // 配置全域参数
+provide("maxcol", maxcol); // 配置全域参数
+provide("team", team); // 配置全域参数
+
+/**
+ * getMatch  获得赛事日程；
+ */
+Promise.all([getMatch()]).then(li => {
+  formmateMatch(li[0] || []);
+});
+
+function formmateMatch(matchList) {
+  for (let i = 0; i < matchList.length; i++) {
+    const v = matchList[i];
+    if (v.rounds === "1/8决赛") setRow(0, v); // 16进8
+    else if (v.rounds === "1/4决赛") setRow(1, v); // 8进4
+    else if (v.rounds === "半决赛") setRow(2, v); // 4进2
+    else if (v.rounds === "决赛") {
+      // 2进1
+      team[3] = [{
+        team: v.home,
+        teamlogo: v.homeLogo,
+        isHome: true,
+      }];
+      team[5] = [{
+        team: v.away,
+        teamlogo: v.awayLogo,
+        isHome: true,
+      }];
+      team[Math.ceil((maxcol.length - 1) / 2)] = [
+        {
+          team: v.winner || "",
+          teamlogo:
+            v.winner === v.home
+              ? v.homeLogo
+              : v.winner === v.away
+              ? v.awayLogo
+              : "",
+          isHome: true,
+        },
+      ];
+    }
+  }
+}
+
+function setRow(index, v) {
+  const max = maxcol[index];
+  if (team[index] && team[index].length == max) {
+    // 放到图像下部
+    setTeam(maxcol.length - index - 1, v);
+  } else {
+    // 放到图像上部
+    setTeam(index, v);
+  }
+}
+
+function setTeam(teamIndex, item) {
+  if (!team[teamIndex]) team[teamIndex] = [];
+  team[teamIndex].push({
+    team: item.home || "",
+    teamlogo: item.homeLogo || "",
+    isHome: true,
+  });
+  team[teamIndex].push({
+    team: item.away || "",
+    teamlogo: item.awayLogo || "",
+    isHome: false,
+  });
+}
 </script>
 <style lang="scss">
 .WorldCup {