feat:判断任务是否有学员

src/components/PathDetailImage.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="pathDetail pathDetailback" v-if="data?.list">
+  <div
+    :class="
+      imgAttrindex === 1
+        ? 'pathDetail pathDetailback'
+        : imgAttrindex === 2
+        ? 'pathDetail path3'
+        : 'pathDetail path2'
+    "
+    v-if="data?.list"
+  >
     <div
       v-for="(item, i) in data?.list"
       :key="i"
@@ -11,17 +20,75 @@
     >
       <div
         @click="toDetail(i)"
-        :class="current === i ? 'nameClass currentBack' : 'nameClass nameBack'"
+        :class="
+          imgAttrindex === 1
+            ? current === i
+              ? 'nameClass currentBack'
+              : 'nameClass nameBack'
+            : imgAttrindex === 2
+            ? current === i
+              ? 'nameClass pathselect3'
+              : 'nameClass pathnoselect3'
+            : current === i
+            ? 'nameClass pathselect2'
+            : 'nameClass pathnoselect2'
+        "
         :title="item.name"
         :style="{
           backgroundSize: '100%',
-          width: `${current === i ? 100 : 100}px`,
-          height: `${current === i ? 75 : 75}px`,
+          width: `${
+            imgAttrindex === 1
+              ? current === i
+                ? 100
+                : 100
+              : imgAttrindex === 2
+              ? current === i
+                ? 100
+                : 100
+              : current === i
+              ? 100
+              : 100
+          }px`,
+          height: `${
+            imgAttrindex === 1
+              ? current === i
+                ? 75
+                : 75
+              : imgAttrindex === 2
+              ? current === i
+                ? 100
+                : 100
+              : current === i
+              ? 75
+              : 75
+          }px`,
           lineHeight: '50px',
-          color: '#FFF',
+          color:
+            imgAttrindex === 1
+              ? '#FFF'
+              : imgAttrindex === 2
+              ? '#FFF'
+              : imgAttrindex === 3 && current === i
+              ? '#FFF'
+              : '#000',
         }"
       >
-        {{ item.name }}
+        <div
+          :style="{
+            'margin-left':
+              imgAttrindex === 1 ? '0px' : imgAttrindex === 2 ? '13px' : '17px',
+            'margin-top':
+              imgAttrindex === 1
+                ? '0px'
+                : imgAttrindex === 2
+                ? '5px'
+                : imgAttrindex === 3 && current === i
+                ? '0px'
+                : '-5px',
+          }"
+        >
+          {{ item.name }}
+        </div>
       </div>
     </div>
   </div>
@@ -59,12 +126,45 @@ const imageAttrs = {
       { left: 297, top: -63 },
     ],
   },
+  路径图2: {
+    width: 1437,
+    height: 594,
+    positions: [
+      { left: -26, top: 379 },
+      { left: 91, top: 319 },
+      { left: 28, top: 218 },
+      { left: 114, top: 153 },
+      { left: 40, top: 46 },
+      { left: 184, top: -28 },
+    ],
+  },
+  路径图3: {
+    width: 1437,
+    height: 594,
+    positions: [
+      { left: -21, top: 398 },
+      { left: 145, top: 324 },
+      { left: 44, top: 252 },
+      { left: 144, top: 165 },
+      { left: 53, top: 63 },
+      { left: 180, top: -15 },
+    ],
+  },
 };
 
 const imgAttr = computed(
   () =>
     imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] || {}
 );
+const imgAttrindex = computed(() =>
+  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);
+
 // 使用
 const loading = ref(false); // loading
 const openLoading = () => {
@@ -78,32 +178,40 @@ openLoading();
 const closeLoading = () => {
   loading.value.close();
 };
-// const data = ref([
-//   {
-//     name: "关卡一",
-//   },
-//   {
-//     name: "关卡二",
-//   },
-//   {
-//     name: "关卡三",
-//   },
-//   {
-//     name: "关卡四",
-//   },
-//   {
-//     name: "关卡五",
-//   },
-//   {
-//     name: "关卡六",
-//   },
-// ]);
+// const data = ref({
+//   list: [
+//     {
+//       name: "关卡一",
+//     },
+//     {
+//       name: "关卡二",
+//     },
+//     {
+//       name: "关卡三",
+//     },
+//     {
+//       name: "关卡四",
+//     },
+//     {
+//       name: "关卡五",
+//     },
+//     {
+//       name: "关卡六",
+//     },
+//   ],
+// });
 // closeLoading();
 const { data } = useRequest(
   ROUTERTASK_LIST,
   { routerId: props.routerId },
-  () => {
+  (e) => {
     closeLoading();
+    console.log("获取路径图", e);
+    if (e.code === 6) {
+      router.push({
+        path: "/notpath",
+      });
+    }
   }
 );
 console.log("data", data);
@@ -152,6 +260,12 @@ function toIndex() {
 .pathDetailback {
   background-image: url("../assets/image/pathDetails/pathDetailBack.png");
 }
+.path2 {
+  background-image: url("../assets/image/pathDetails/path2.png");
+}
+.path3 {
+  background-image: url("../assets/image/pathDetails/path3.png");
+}
 .pathDetail {
   width: 410px;
   height: 500px;
@@ -181,5 +295,19 @@ function toIndex() {
   .currentBack {
     background-image: url("../assets/image/pathDetails/pathDetailImgSelect.png");
   }
+
+  .pathselect2 {
+    background-image: url("../assets/image/pathDetails/pathselect2.png");
+  }
+  .pathnoselect2 {
+    background-image: url("../assets/image/pathDetails/pathnoselect2.png");
+  }
+
+  .pathselect3 {
+    background-image: url("../assets/image/pathDetails/pathselect3.png");
+  }
+  .pathnoselect3 {
+    background-image: url("../assets/image/pathDetails/pathnoselect3.png");
+  }
 }
 </style>