feat:增加项目详情

src/views/projectdetails/projectDetails.vue

@@ -1,23 +1,24 @@
 <template>
   <div class="projectdetails">
+    <ReturnHead text="项目详情"></ReturnHead>
     <div class="main">
       <div class="up">
-        <div class="notice">
+        <!-- <div class="notice">
           <span class="text"
             >请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
           >
           <span class="close"></span>
-        </div>
+        </div> -->
         <div class="content">
-          <div class="title">中级产品经理</div>
+          <div class="title">{{ data.name }}</div>
           <div class="text2">
-            课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介
+            {{ data.remark }}
           </div>
         </div>
       </div>
       <div class="down">
         <div class="project_title">项目内容</div>
-        <div class="project_first">
+        <!-- <div class="project_first">
           <div class="course1_first">
             <div class="text8">序：管理者如何持续找到发力点</div>
             <div class="course1_right">
@@ -48,33 +49,87 @@
               </div>
             </div>
           </div>
-        </div>
-        <div class="project_second">
-          <div class="course1_first">
-            <div class="text8">第一讲：业务起航的支点 - 你的风格</div>
-            <div class="course1_right">
-              <div class="circular"></div>
-              <div class="text9">进行中</div>
-              <div class="btn1"></div>
-            </div>
-          </div>
-          <div class="secondcontent">
-            <div class="question">
-              <div class="issue">
-                趣味课前小测 - MBTI测试：你适合做哪个方向？
+        </div> -->
+
+        <div
+          class="project_second"
+          v-for="(item, key) in data?.stageProcessList"
+          :key="key"
+        >
+          <div
+            v-if="item.stageId == '0' && item.taskProcessList.length == 0"
+          ></div>
+          <div
+            v-else
+            style="
+              width: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            "
+          >
+            <div class="course1_first">
+              <div class="text8">{{ item.stageName }}</div>
+              <div class="course1_right">
+                <div class="circular"></div>
+                <div class="text9">进行中</div>
+                <div class="btn1"></div>
               </div>
-              <div class="tag1">选修</div>
-              <div class="tag2">测评</div>
             </div>
-            <div class="question">
-              <div class="issue">社交产品如何做好模块化处理？</div>
-              <div class="tag3">必修</div>
-              <div class="tag2">作业</div>
+            <div class="secondcontent">
+              <div
+                class="question"
+                v-for="(el, index) in item.taskProcessList"
+                :key="index"
+              >
+                <div>
+                  <div class="issue">
+                    {{ el.name }}
+                  </div>
+                  <div class="coursetag">
+                    <div
+                      class="tag1"
+                      style="margin-right: 11px; margin-top: 16px"
+                      v-if="el.flag"
+                    >
+                      必修
+                    </div>
+                    <div
+                      class="tag2"
+                      style="margin-right: 11px; margin-top: 16px"
+                      v-if="!el.flag"
+                    >
+                      选修
+                    </div>
+                    <div
+                      class="tag3"
+                      style="margin-right: 11px; margin-top: 16px"
+                    >
+                      {{ types.typeName[el.type] || "" }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="goclass"
+                  :style="{
+                    background: `${types.path[el.type] ? '#2478ff' : '#999'}`,
+                  }"
+                  @click="toFinish(el)"
+                >
+                  {{
+                    el.status === 1
+                      ? "已完成"
+                      : types.path[el.type]
+                      ? types.toName[el.type]
+                      : "未开放"
+                  }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="last">
+      <!-- <div class="last">
         <div class="project_title">数据排行</div>
         <div class="ranking">
           <div class="rankingbox">
@@ -90,12 +145,289 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
-<script></script>
+<script setup>
+import { computed, reactive, ref } from "vue";
+import { ElLoading } from "element-plus";
+
+import { useRequest, request } from "@/api/request";
+import { PROJECT_PROCESS, STUDY_RECORD } from "@/api/api";
+import { useRoute, useRouter } from "vue-router";
+import store from "@/store";
+import { ElMessage } from "element-plus";
+import ReturnHead from "@/components/ReturnHead.vue";
+import { PROJECT } from "@/api/CONST";
+
+const {
+  query: { courseId, projectId },
+} = useRoute();
+const router = useRouter();
+
+const { data } = useRequest(PROJECT_PROCESS, {
+  projectId: projectId || courseId,
+});
+
+console.log("datadata", data);
+
+const userInfo = computed(() => store.state.userInfo);
+const activeName = ref("first");
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+const path = { 1: "path" };
+const types = ref({
+  typeName: {
+    1: "在线",
+    2: "面授",
+    3: "案例",
+    4: "作业",
+    5: "考试",
+    6: "直播",
+    7: "外链",
+    8: "讨论",
+    9: "活动",
+    10: "测评",
+    11: "评估",
+    12: "投票",
+    13: "项目",
+  },
+  toName: {
+    1: "去上课",
+    2: "去上课",
+    3: "去阅读",
+    4: "去完成",
+    5: "去完成",
+    6: "去观看",
+    7: "去查看",
+    8: "去讨论",
+    9: "去签到",
+    10: "去完成",
+    11: "去完成",
+    12: "去投票",
+    13: "去完成",
+  },
+  path: {
+    1: import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
+    2: ({ courseId }) =>
+      window.open(
+        `${location.protocol}//${location.host}${
+          import.meta.env.VITE_BASE_API
+        }/stu/project/redirectDetail?courseId=${courseId}`,
+        "_top"
+      ),
+    3: import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
+    4: "/homeworkpage",
+    5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
+    6: "/livebroadcast",
+    7: ({ targetId }) => window.open(targetId, "_top"),
+    8: "/discusspage",
+    9: "/moreactive",
+    10: ({ evaType, targetId }) =>
+      window.open(
+        evaType == 0
+          ? import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
+          : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
+              targetId +
+              `&quizTaskKid=${projectId}&channelCode=project`,
+        "_top"
+      ), //测评
+    11: "/surveydetail",
+    12: "/ballotpage",
+    13: "/projectdetails",
+  },
+});
+
+const dialogVisible = ref(false);
+const dialogVisibleTip = ref("该任务无法学习，请联系管理员进行替换！");
+
+// 判断当前任务已结束及时间意义上的结束 提示用户
+function judgeTaskIsEnd(type, endTimes, status) {
+  // type 任务类型 endTime 结束时间 status 任务状态 (状态  0 未完成 1 已完成 2 未开始 3 已结束)
+  console.log(type, endTimes, status);
+  let isEnd = false;
+  let nowTime = new Date().getTime();
+  let endTime = new Date().getTime(endTimes);
+  switch (type) {
+    case 1:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 3:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 5:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 7:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 10:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+  }
+  return isEnd;
+}
+
+function toFinish(d, sName, chapterOrStageId) {
+  console.log("dddddd", d, sName, chapterOrStageId);
+
+  if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
+    ElMessage.error("当前任务已结束");
+    return;
+  }
+  if (d.type == 2) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前面授课已结束";
+      dialogVisible.value = true;
+
+      //return
+    }
+  }
+  // 作业过期判断
+  if (d.type == 4) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前作业已结束";
+      dialogVisible.value = true;
+
+      //return
+    }
+  }
+  // 直播结束时间
+  if (d.type == 6) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前直播已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+  // 考试 停用
+  if (d.type == 5) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+  // 评估 停用
+  if (d.type == 11) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+  // 其他活动 结束时间
+  if (d.type == 9) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前活动已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+  // 在线课 停用 -- 暂时没有在线课停用标记
+  if (d.type == 1) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+  // 面授课 停用
+  if (d.type == 2) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+
+  if (!types.value.path[d.type]) {
+    ElMessage.error("暂时未开放");
+    return;
+  }
+  if (d.type == 3 || d.type == 7) {
+    d.status !== 1 &&
+      request(STUDY_RECORD, {
+        studentId: data.value.userInfoBo.userId,
+        targetId: data.value.routerId,
+        logo: PROJECT,
+        stageOrChapterId: chapterOrStageId,
+        taskId: d.projectTaskId,
+      });
+  }
+
+  if (typeof types.value.path[d.type] === "string") {
+    types.value.path[d.type] &&
+      types.value.path[d.type].startsWith("http") &&
+      window.open(types.value.path[d.type] + d.targetId, "_top");
+    types.value.path[d.type] &&
+      types.value.path[d.type].startsWith("/") &&
+      router.push({
+        path: types.value.path[d.type],
+        query: {
+          id: d.projectTaskId,
+          type: PROJECT,
+          infoId: data.value.projectId,
+          courseId: d.courseId,
+          pName: data.value.name,
+          sName,
+          chapterOrStageId,
+        },
+      });
+  } else if (typeof types.value.path[d.type] === "function") {
+    types.value.path[d.type](d);
+  }
+}
+function whiteTypes(type) {
+  return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
+}
+// 查询当前阶段所有任务是否都完成
+const queryAllStatus = (data) => {
+  // status === 1 已完成
+  console.log(data);
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].status !== 1) {
+      return false;
+    }
+  }
+  return true;
+};
+</script>
 
 <style lang="scss">
 .projectdetails {
@@ -448,6 +780,12 @@
             position: relative;
             height: 72px;
             border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
             .issue {
               width: 100%;
               display: flex;
@@ -455,45 +793,64 @@
               line-height: 30.29px;
               color: rgba(110, 123, 132, 1);
             }
-            .tag1 {
-              position: absolute;
-              left: 0;
-              bottom: 14.5px;
+            .coursetag {
               display: flex;
-              justify-content: center;
-              align-items: center;
-              font-size: 13px;
-              color: rgba(203, 128, 231, 1);
-              border: 0.5px solid rgba(203, 128, 231, 1);
-              line-height: 19.2px;
-              //padding: 0 10px;
+              flex-wrap: wrap;
             }
-            .tag2 {
-              position: absolute;
-              left: 92px;
-              bottom: 14.5px;
+            .goclass {
+              width: 63px;
+              height: 23px;
+              background: #2478ff;
+              box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+              border-radius: 4px;
+              font-size: 14px;
+              font-weight: 800;
+              color: #ffffff;
               display: flex;
-              justify-content: center;
               align-items: center;
-              font-size: 13px;
-              color: rgba(136, 157, 238, 1);
-              border: 0.5px solid rgba(136, 157, 238, 1);
-              line-height: 19.2px;
-              //padding: 0 10px;
-            }
-            .tag3 {
-              position: absolute;
-              left: 0;
-              bottom: 14.5px;
-              display: flex;
               justify-content: center;
-              align-items: center;
-              font-size: 13px;
-              color: rgba(104, 206, 234, 1);
-              border: 0.5px solid rgba(104, 206, 234, 1);
-              line-height: 19.2px;
-              //padding: 0 10px;
+              // margin-right: 37px;
+              cursor: pointer;
             }
+            // .tag1 {
+            //   position: absolute;
+            //   left: 0;
+            //   bottom: 14.5px;
+            //   display: flex;
+            //   justify-content: center;
+            //   align-items: center;
+            //   font-size: 13px;
+            //   color: rgba(203, 128, 231, 1);
+            //   border: 0.5px solid rgba(203, 128, 231, 1);
+            //   line-height: 19.2px;
+            //   //padding: 0 10px;
+            // }
+            // .tag2 {
+            //   position: absolute;
+            //   left: 92px;
+            //   bottom: 14.5px;
+            //   display: flex;
+            //   justify-content: center;
+            //   align-items: center;
+            //   font-size: 13px;
+            //   color: rgba(136, 157, 238, 1);
+            //   border: 0.5px solid rgba(136, 157, 238, 1);
+            //   line-height: 19.2px;
+            //   //padding: 0 10px;
+            // }
+            // .tag3 {
+            //   position: absolute;
+            //   left: 0;
+            //   bottom: 14.5px;
+            //   display: flex;
+            //   justify-content: center;
+            //   align-items: center;
+            //   font-size: 13px;
+            //   color: rgba(104, 206, 234, 1);
+            //   border: 0.5px solid rgba(104, 206, 234, 1);
+            //   line-height: 19.2px;
+            //   //padding: 0 10px;
+            // }
           }
         }
       }