Merge branch 'dongwu-master'

2025-12-09 19:06:47 +08:00 · 2023-04-17 15:12:37 +08:00
parent 288aa975c4 1af82608ab
commit 448b2114e9
2 changed files with 75 additions and 106 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,7 @@ import {GET_USER_INFO} from "@/api/ThirdApi";

 import {USER_INFO} from "@/api/api";

-console.log("版本3.0.0------------");
+console.log("版本3.0.1------------");
 const store = useStore();

 onMounted(() => {
--- a/src/components/PathDetailImage.vue
+++ b/src/components/PathDetailImage.vue
@@ -10,26 +10,27 @@
    v-if="data?.list"
  >
    <div
-      v-for="(item, i) in data?.list"
+      v-for="(item, i) in showList"
      :key="i"
      class="cha"
      :style="{
-        top: `${imgAttr?.positions[i]?.top - (current === i ? 1 : 0)}px`,
-        left: `${imgAttr?.positions[i]?.left - (current === i ? 11 : 0)}px`,
+        top: `${imgAttr?.positions[i]?.top - (currentIndex === i ? 1 : 0)}px`,
+        left: `${imgAttr?.positions[i]?.left - (currentIndex === i ? 11 : 0)}px`,
      }"
    >
      <div
        @click="toDetail(item, i)"
+        v-if="item.name"
        :class="
          imgAttrindex === 1
-            ? current === i
+            ? currentIndex === i
              ? 'nameClass currentBack'
              : 'nameClass nameBack'
            : imgAttrindex === 2
-            ? current === i
+            ? currentIndex === i
              ? 'nameClass pathselect3'
              : 'nameClass pathnoselect3'
-            : current === i
+            : currentIndex === i
            ? 'nameClass pathselect2'
            : 'nameClass pathnoselect2'
        "
@@ -38,27 +39,27 @@
          backgroundSize: '100%',
          width: `${
            imgAttrindex === 1
-              ? current === i
+              ? currentIndex === i
                ? 100
                : 100
              : imgAttrindex === 2
-              ? current === i
+              ? currentIndex === i
                ? 100
                : 100
-              : current === i
+              : currentIndex === i
              ? 100
              : 100
          }px`,
          height: `${
            imgAttrindex === 1
-              ? current === i
+              ? currentIndex === i
                ? 75
                : 75
              : imgAttrindex === 2
-              ? current === i
+              ? currentIndex === i
                ? 100
                : 100
-              : current === i
+              : currentIndex === i
              ? 75
              : 75
          }px`,
@@ -68,7 +69,7 @@
              ? '#FFF'
              : imgAttrindex === 2
              ? '#FFF'
-              : imgAttrindex === 3 && current === i
+              : imgAttrindex === 3 && currentIndex === i
              ? '#FFF'
              : '#000',
        }"
@@ -82,7 +83,7 @@
                ? '0px'
                : imgAttrindex === 2
                ? '5px'
-                : imgAttrindex === 3 && current === i
+                : imgAttrindex === 3 && currentIndex === i
                ? '0px'
                : '-5px',
          }"
@@ -94,13 +95,11 @@
  </div>
 </template>
 <script setup>
-import { computed, defineProps, ref, watch } from "vue";
+import {computed, defineProps, ref, watch} from "vue";
 import { useRouter } from "vue-router/dist/vue-router";
 import { ElLoading, ElMessage } from "element-plus";
 import { ROUTERTASK_LIST, checkStudentExist } from "@/api/api";
-import { usePage, useRequest } from "@/api/request";
-const listheight = document.body.clientHeight - 300 + "px";
-console.log("listheight", listheight);
+import { useRequest } from "@/api/request";
 const props = defineProps({
  value: String,
  img: String,
@@ -115,7 +114,35 @@ const props = defineProps({
 });
 const router = useRouter();
 const visiable = ref(true);
-
+const { data } = useRequest(
+  ROUTERTASK_LIST,
+  { routerId: props.routerId },
+  (e) => {
+    useRequest(
+      checkStudentExist,
+      {
+        targetId: props.routerId,
+        type: 2,
+      },
+      (res) => {
+        console.log("判断任务是否删除", res);
+        if (res.code === 7) {
+          router.push({
+            path: "/loseefficacy",
+          });
+        } else {
+          closeLoading();
+          console.log("获取路径图", e);
+          if (res.code === 6) {
+            router.push({
+              path: "/notpath",
+            });
+          }
+        }
+      }
+    );
+  }
+);
 // const back = ref("require('@/assets/images/pathdetails/pathDetailBack.png')");
 const imageAttrs = {
  路径图背景: {
@@ -156,44 +183,37 @@ const imageAttrs = {
  },
 };

-const imgAttr = computed(() => {
-  if (props.img) {
-    return (
-      imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] ||
-      {}
-    );
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find((e) => props.img?.includes(e))] || {});
+const imgAttrindex = computed(() => props.img?.includes("路径图背景")? 1 : props.img?.includes("路径图2")? 2 : 3);
+const current = computed(() => data.value?.list.findIndex(e => e.id === data.value?.currentChapterId));
+//当关卡太多时只显示 当前关卡中间8个
+const currentIndex = computed(() => {
+  if (data.value?.list?.length <= 6) {
+    return current.value;
  }
+  return current.value < 3 ? current.value : data.value?.list.length - current.value <= 3 ? (6 - (data.value?.list.length - current.value)) : 3;
 });
-const imgAttrindex = computed(
-  () => {
-    // console.log("props.img.includes1", props.img);
-    // console.log("props.img", props.img.includes("路径图背景"));
-    if (
-      props.img &&
-      Object.keys(imageAttrs).find((e) => props.img.includes(e)) ===
-        "路径图背景"
-    ) {
-      return 1;
-    } else if (
-      props.img &&
-      Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
-    ) {
-      return 2;
-    } else if (
-      props.img &&
-      Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图3"
-    ) {
-      return 3;
-    }
+const startIndex = computed(() => {
+  if (data.value?.list?.length <= 6) {
+    return 0;
  }
-  // Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图背景"
-  //   ? 1
-  //   : Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
-  //   ? 2
-  //   : 3
-);
-console.log("imgAttrindex", imgAttrindex);
-
+  return current.value < 3 ? 0 : data.value?.list.length - current.value <= 3 ? data.value?.list.length - 6 : current.value - 3;
+});
+const showList = computed(() => data.value?.list?.length <= 6 ? calulatePosition(data.value?.list) : data.value?.list?.slice(startIndex.value, startIndex.value + 6));
+watch(showList,()=>console.log(showList.value))
+//list 当list长度小于8时 返回一个长度为8的数组 并将list中的数据均匀放到数组中
+const calulatePosition = (list) => {
+  let arr = new Array(6).fill({});
+  let tr = Math.floor(6 / list.length) - 1;
+  list.forEach((e, i) => {
+    if (i === list.length - 1 && (i * tr + i) !== 5 && i !== 0) {
+      arr[5] = e;
+    } else {
+      arr[i * tr + i] = e;
+    }
+  });
+  return arr;
+};
 // 使用
 const loading = ref(false); // loading
 const openLoading = () => {
@@ -231,55 +251,7 @@ const closeLoading = () => {
 // });
 // closeLoading();

-const { data } = useRequest(
-  ROUTERTASK_LIST,
-  { routerId: props.routerId },
-  (e) => {
-    useRequest(
-      checkStudentExist,
-      {
-        targetId: props.routerId,
-        type: 2,
-      },
-      (res) => {
-        console.log("判断任务是否删除", res);
-        if (res.code === 7) {
-          router.push({
-            path: "/loseefficacy",
-          });
-        } else {
-          closeLoading();
-          console.log("获取路径图", e);
-          if (res.code === 6) {
-            router.push({
-              path: "/notpath",
-            });
-          }
-        }
-      }
-    );
-  }
-);
 console.log("data", data, props.routerInfo);
-let current = ref(null);
-watch(data, () => {
-  if (data && data.value && data.value.list) {
-    data.value.list.reverse();
-    current.value = data.value.list.findIndex(
-      (e) => e.id === data.value.currentChapterId
-    );
-    console.log("props.routerInfo", props.routerInfo);
-  }
-
-  closeLoading();
-});
-// watch(props.routerInfo, () => {
-//   console.log("props.routerInfo", props.routerInfo);
-// });
-// const current = computed(() => {
-//   data.value.list.findIndex((e) => e.id === data.value.currentChapterId);
-// });
-console.log("current", current);

 function show() {
  visiable.value = true;
@@ -324,9 +296,6 @@ function toDetail(item, i) {
      isStudy = true;
    }
  }
-  // if (current.value !== i) {
-  //   return;
-  // }
  router.push({
    path: "/pathmappage",
    query: {