Merge branch 'dongwu-master'

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(() => {

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`,
+        top: `${imgAttr?.positions[i]?.top - (currentIndex === i ? 1 : 0)}px`,
-        left: `${imgAttr?.positions[i]?.left - (current === i ? 11 : 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";
+import { useRequest } from "@/api/request";
-const listheight = document.body.clientHeight - 300 + "px";
-console.log("listheight", listheight);
 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(() => {
+const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find((e) => props.img?.includes(e))] || {});
-  if (props.img) {
+const imgAttrindex = computed(() => props.img?.includes("路径图背景")? 1 : props.img?.includes("路径图2")? 2 : 3);
-    return (
+const current = computed(() => data.value?.list.findIndex(e => e.id === data.value?.currentChapterId));
-      imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] ||
+//当关卡太多时只显示 当前关卡中间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(
+const startIndex = computed(() => {
-  () => {
+  if (data.value?.list?.length <= 6) {
-    // console.log("props.img.includes1", props.img);
+    return 0;
-    // 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;
-    }
   }
-  // Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图背景"
+  return current.value < 3 ? 0 : data.value?.list.length - current.value <= 3 ? data.value?.list.length - 6 : current.value - 3;
-  //   ? 1
+});
-  //   : Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
+const showList = computed(() => data.value?.list?.length <= 6 ? calulatePosition(data.value?.list) : data.value?.list?.slice(startIndex.value, startIndex.value + 6));
-  //   ? 2
+watch(showList,()=>console.log(showList.value))
-  //   : 3
+//list 当list长度小于8时 返回一个长度为8的数组 并将list中的数据均匀放到数组中
-);
+const calulatePosition = (list) => {
-console.log("imgAttrindex", imgAttrindex);
+  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: {