提交

src/views/growth/growthPath.vue

@@ -45,6 +45,9 @@
         <img class="icon" src="@/assets/image/growth/qiehuan.png" />
         <template #dropdown>
           <el-dropdown-menu>
+            <el-dropdown-item @click="tabClick(null, '4')"
+              >全部</el-dropdown-item
+            >
             <el-dropdown-item @click="tabClick(null, '0')"
               >未开始</el-dropdown-item
             >
@@ -85,7 +88,26 @@
                   "
                 >
                   <div>
-                    <div class="item-name">{{ item.taskName }}</div>
+                    <div class="item-name">
+                      <div
+                        style="
+                          display: inline-block;
+                          border-radius: 50%;
+                          line-height: 16px;
+                          text-align: center;
+                          margin-right: 6px;
+                          width: 16px;
+                          height: 16px;
+                          font-size: 12px;
+                          font-weight: 700;
+                          background-color: #fff;
+                          color: #0077ec;
+                        "
+                      >
+                        {{ stageProcessList.length - index }}
+                      </div>
+                      <div style="display: inline">{{ item.taskName }}</div>
+                    </div>
                     <div class="triangle"></div>
                   </div>
                   <div class="f-a-c">
@@ -134,7 +156,26 @@
                   </div>
                   <div>
                     <div>
-                      <div class="item-name">{{ item.taskName }}</div>
+                      <div class="item-name">
+                        <div
+                          style="
+                            display: inline-block;
+                            border-radius: 50%;
+                            line-height: 16px;
+                            text-align: center;
+                            margin-right: 6px;
+                            width: 16px;
+                            height: 16px;
+                            font-size: 12px;
+                            font-weight: 700;
+                            background-color: #fff;
+                            color: #0077ec;
+                          "
+                        >
+                          {{ stageProcessList.length - index }}
+                        </div>
+                        <div style="display: inline">{{ item.taskName }}</div>
+                      </div>
                       <div class="triangle"></div>
                     </div>
                     <div class="f-a-c" style="justify-content: flex-end">
@@ -253,7 +294,7 @@ import dayjs from "dayjs";
 import { useStore } from "vuex";
 import { changeTime } from "@/api/method";
 const {
-  query: { courseId, routerId, type, infoId, chapterOrStageId, id },
+  query: { routerId, type },
 } = useRoute();
 const router = useRouter();
 const { commit, dispatch, state } = useStore();
@@ -272,6 +313,9 @@ const tabClick = (type, status) => {
   if (status) {
     queryParams.completionStatus = status;
   }
+  if (status == 4) {
+    queryParams.completionStatus = "";
+  }
   getList();
 };
 
@@ -290,6 +334,9 @@ onMounted(() => {
   updateWindowWidth(); // 初始化宽度
   window.addEventListener("resize", updateWindowWidth);
   dispatch("getGrowthInfo", { routerId, type });
+  if (type) {
+    queryParams.type = type;
+  }
   getList();
 });
 // 储存屏幕宽
@@ -309,7 +356,7 @@ const getList = () => {
     ...queryParams,
   }).then((res) => {
     if (growthInfo.value.template == 1) {
-      stageProcessList.value = res.data;
+      stageProcessList.value = res.data.reverse();
     } else {
       let newData = res.data.slice(0, 15).reverse();
       // 默认第一个在第一点位
@@ -486,12 +533,27 @@ const stateData = computed(() => {
         bgColor: "rgba(242, 144, 61, 0.2)",
         progressColor: "#F2903D",
       };
+    } else if (item.completionStatus === "3") {
+      return {
+        text: "已结束",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
     }
   };
 });
 async function toFinish(d) {
+  if (!d.canLearn) {
+    ElMessage.warning(`学习任务暂未开始`);
+    return;
+  }
+  if (d.completionStatus == 3) {
+    ElMessage.warning(`学习任务已结束无法学习`);
+    return;
+  }
   if (d.completionStatus == 10) {
-    ElMessage.warning("当前未解锁");
+    ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
     return;
   }
   //更新学员当前任务
@@ -748,6 +810,7 @@ const toPath = () => {
     path: "/growthDetails",
     query: {
       routerId,
+      type: queryParams.type,
     },
   });
 };
@@ -770,7 +833,9 @@ const toPath = () => {
   :deep(input::placeholder) {
     color: #ffffff;
   }
-
+  :deep(.el-progress-bar__outer) {
+    background-color: #aeb3b8;
+  }
   .container {
     position: absolute;
     background-color: #ffffff;
@@ -927,6 +992,11 @@ const toPath = () => {
     align-items: center;
     height: 44px;
     .nav-title {
+      width: 300px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-weight: 500;
       font-size: 18px;
       color: #ffffff;