From 2260e340bf3ee643d233fbe4f30a5f327e9664e2 Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Thu, 15 Dec 2022 14:01:34 +0800
Subject: [PATCH] init

---
 src/views/faceteach/FaceTeach.vue |   8 +-
 src/views/roadmap/PathDetails.vue | 335 +++++++-----------------------
 2 files changed, 81 insertions(+), 262 deletions(-)

diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue
index bda05e2..76c0c87 100644
--- a/src/views/faceteach/FaceTeach.vue
+++ b/src/views/faceteach/FaceTeach.vue
@@ -57,7 +57,7 @@
           <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="课程附件" name="first">
               <div
-                  v-for="(el, index) in data.planDto?.attach.split(',')"
+                  v-for="(el, index) in JSON.parse(data.planDto?.attach)"
                   :key="index"
                   v-if="data.planDto"
                   class="enclosure"
@@ -65,21 +65,21 @@
               >
                 <div class="enclosureL">
                   <FileTypeImg
-                      v-model="data.planDto.attach.split(',')[index]"
+                      v-model="el.name"
                       :style="{
                       width: '22px',
                       height: '26px',
                       marginLeft: '10px',
                     }"
                   ></FileTypeImg>
-                  <div style="margin-left: 20px">{{ el }}</div>
+                  <div style="margin-left: 20px">{{ el.name }}</div>
                 </div>
                 <div class="download">
                   <img
                       style="width: 16px; height: 15px"
                       src="../../assets/image/download.png"
                   />
-                  <div style="margin-left: 5px" @click="download(el)">下载</div>
+                  <div style="margin-left: 5px" @click="download(el.response.data)">下载</div>
                 </div>
               </div>
             </el-tab-pane>
diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue
index 9caa4fa..68e2482 100644
--- a/src/views/roadmap/PathDetails.vue
+++ b/src/views/roadmap/PathDetails.vue
@@ -15,38 +15,38 @@
           <div class="title">
             <div class="titleL">{{ i.chapterName }}</div>
             <div class="titleR" :style="{ display: 'flex' }">
-              <img src="../../assets/image/pathdetails/circle.png" />
+              <img src="../../assets/image/pathdetails/circle.png"/>
               <div class="titleRT">进行中</div>
             </div>
             <div
-              class="titleR"
-              :style="{ display: i.status === 2 ? 'flex' : 'none' }"
+                class="titleR"
+                :style="{ display: i.status === 2 ? 'flex' : 'none' }"
             >
-              <img src="../../assets/image/pathdetails/circle2.png" />
+              <img src="../../assets/image/pathdetails/circle2.png"/>
               <div class="titleRT" style="color: rgba(102, 102, 102, 1)">
                 未开始
               </div>
             </div>
           </div>
           <div
-            class="course"
-            v-for="(value, index) in i.taskProcessList"
-            :key="index"
+              class="course"
+              v-for="(value, index) in i.taskProcessList"
+              :key="index"
           >
             <div>
               <div class="coursename">{{ value.name }}</div>
               <div class="coursetag">
                 <div
-                  class="tag1"
-                  style="margin-right: 11px; margin-top: 16px"
-                  v-if="value.flag"
+                    class="tag1"
+                    style="margin-right: 11px; margin-top: 16px"
+                    v-if="value.flag"
                 >
                   必修
                 </div>
                 <div
-                  class="tag2"
-                  style="margin-right: 11px; margin-top: 16px"
-                  v-if="!value.flag"
+                    class="tag2"
+                    style="margin-right: 11px; margin-top: 16px"
+                    v-if="!value.flag"
                 >
                   选修
                 </div>
@@ -64,17 +64,17 @@
                 <!--                                </div>-->
               </div>
               <div
-                class="progressBox"
-                :style="{ display: value.status === 1 ? 'block' : 'none' }"
+                  class="progressBox"
+                  :style="{ display: value.status === 1 ? 'block' : 'none' }"
               >
                 <div>当前进度</div>
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                      :percentage="value.currentRatio"
-                      :show-text="false"
-                      :stroke-width="8"
-                      :color="
+                        :percentage="value.currentRatio"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="
                         {
                           0: 'rgba(238, 112, 108, 1)',
                           1: 'rgba(255, 151, 38, 1)',
@@ -87,13 +87,13 @@
                     />
                   </div>
                   <div
-                    style="
+                      style="
                       font-size: 14px;
                       font-weight: 500;
                       color: #277aff;
                       margin-left: 10px;
                     "
-                    :style="{
+                      :style="{
                       color: {
                         0: 'rgba(238, 112, 108, 1)',
                         1: 'rgba(255, 151, 38, 1)',
@@ -110,18 +110,18 @@
               </div>
             </div>
             <div
-              class="goclass"
-              :style="{
+                class="goclass"
+                :style="{
                 background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
               }"
-              @click="toFinish(value)"
+                @click="toFinish(value,i.name)"
             >
               {{
                 value.status === 1
-                  ? "已完成"
-                  : types.path[value.type]
-                  ? types.toName[value.type]
-                  : "未开放"
+                    ? "已完成"
+                    : types.path[value.type]
+                        ? types.toName[value.type]
+                        : "未开放"
               }}
             </div>
             <!--            <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
@@ -151,29 +151,29 @@
               <div class="notice">
                 请各位选课的同学提前阅读本课程的
                 “教学大纲与计划”“课程考核要求”与“学习要求”
-                ，并按给定的中学化学教学主题分好小组 <br />
-                每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br />
+                ，并按给定的中学化学教学主题分好小组 <br/>
+                每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br/>
                 请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
-                绩；<br />
+                绩；<br/>
               </div>
             </el-tab-pane>
             <el-tab-pane label="共享文档" name="second">
               <div style="padding: 19px 30px 17px 28px">
                 <div
-                  v-for="(value, index) in sharedoc"
-                  :key="index"
-                  style="
+                    v-for="(value, index) in sharedoc"
+                    :key="index"
+                    style="
                     display: flex;
                     align-items: center;
                     margin-bottom: 15px;
                   "
                 >
-                  <img :src="value.img" style="width: 22px; height: 26px" />
+                  <img :src="value.img" style="width: 22px; height: 26px"/>
                   <div class="sharedocname">{{ value.name }}</div>
                   <div class="download">
                     <img
-                      src="../../assets/image/download.png"
-                      style="width: 16px; height: 15px"
+                        src="../../assets/image/download.png"
+                        style="width: 16px; height: 15px"
                     />
                     <div style="margin-left: 7px">下载</div>
                   </div>
@@ -188,25 +188,25 @@
           <div class="info">
             <div class="title">
               <img
-                style="width: 21px; height: 20px"
-                src="../../assets/image/pathdetails/info.png"
+                  style="width: 21px; height: 20px"
+                  src="../../assets/image/pathdetails/info.png"
               />
               <div class="text" style="margin-left: 7px">个人信息</div>
               <div class="box"></div>
             </div>
             <!--            todo #路径详情 个人信息缺少img和介绍-->
             <div
-              class="teacheritem"
-              :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
+                class="teacheritem"
+                :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
             >
-              <img class="peopleimg" :src="userAvatar" />
+              <img class="peopleimg" :src="userAvatar"/>
               <div style="margin-left: 17px">
                 <div class="teacherName">
                   <div style="margin-right: 5px">
                     {{ data.userInfoBo?.userName }}
                   </div>
                   <div v-for="(item, key) in data.userInfoBo?.medal" :key="key">
-                    <img class="teacherMedal" :src="item" />
+                    <img class="teacherMedal" :src="item"/>
                   </div>
                 </div>
                 <div class="introduce">{{ data.userInfoBo?.introduce }}</div>
@@ -216,8 +216,8 @@
           <div class="info" style="padding-top: 20px">
             <div class="title">
               <img
-                style="width: 18px; height: 17px"
-                src="../../assets/image/pathdetails/study.png"
+                  style="width: 18px; height: 17px"
+                  src="../../assets/image/pathdetails/study.png"
               />
               <div class="text" style="margin-left: 9px">学习进度</div>
               <div class="box"></div>
@@ -232,14 +232,14 @@
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                      :percentage="
+                        :percentage="
                         parseInt(
                           (data.currentChapterCnt / data.totalChapterCnt) * 100
                         )
                       "
-                      :show-text="false"
-                      :stroke-width="8"
-                      :color="
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="
                         {
                           0: 'rgba(238, 112, 108, 1)',
                           1: 'rgba(255, 151, 38, 1)',
@@ -256,8 +256,8 @@
                     />
                   </div>
                   <div
-                    style="font-size: 14px; font-weight: 500; margin-left: 10px"
-                    :style="{
+                      style="font-size: 14px; font-weight: 500; margin-left: 10px"
+                      :style="{
                       color: {
                         0: 'rgba(238, 112, 108, 1)',
                         1: 'rgba(255, 151, 38, 1)',
@@ -272,7 +272,7 @@
                   >
                     {{
                       parseInt(
-                        (data.currentChapterCnt / data.totalChapterCnt) * 100
+                          (data.currentChapterCnt / data.totalChapterCnt) * 100
                       )
                     }}%
                   </div>
@@ -285,12 +285,12 @@
                 <div class="progress">
                   <div style="width: 291px">
                     <el-progress
-                      :percentage="
+                        :percentage="
                         parseInt((data.currentReqCnt / data.totalReqCnt) * 100)
                       "
-                      :show-text="false"
-                      :stroke-width="8"
-                      :color="
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="
                         {
                           0: 'rgba(238, 112, 108, 1)',
                           1: 'rgba(255, 151, 38, 1)',
@@ -303,13 +303,13 @@
                     />
                   </div>
                   <div
-                    style="
+                      style="
                       font-size: 14px;
                       font-weight: 500;
                       color: #277aff;
                       margin-left: 10px;
                     "
-                    :style="{
+                      :style="{
                       color: {
                         0: 'rgba(238, 112, 108, 1)',
                         1: 'rgba(255, 151, 38, 1)',
@@ -337,7 +337,7 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import {computed, reactive, ref, watch} from "vue";
 import word from "@/assets/image/file/word.png";
 import ppt from "@/assets/image/file/ppt.png";
 import pdf from "@/assets/image/file/pdf.png";
@@ -347,208 +347,27 @@ import medal1 from "@/assets/image/medal/medal1.png";
 import medal2 from "@/assets/image/medal/medal2.png";
 import medal3 from "@/assets/image/medal/medal3.png";
 import img from "@/assets/image/uploadimg.png";
-import { boeRequest, useRequest, request } from "@/api/request";
-import { ROUTER_PROCESS, LINK_DETAILS } from "@/api/api";
-import { useRoute, useRouter } from "vue-router";
-import { ElMessage } from "element-plus";
-import { useUserInfo } from "@/api/utils";
+import {boeRequest, useRequest, request} from "@/api/request";
+import {ROUTER_PROCESS, LINK_DETAILS} from "@/api/api";
+import {useRoute, useRouter} from "vue-router";
+import {ElMessage} from "element-plus";
+import {useUserInfo} from "@/api/utils";
 
 const {
-  query: { routerId },
+  query: {routerId},
 } = useRoute();
 const router = useRouter();
-const { data } = useRequest(ROUTER_PROCESS, { routerId });
-const { avatar: userAvatar } = useUserInfo(
-  computed(() => data.value?.userInfoBo?.userId)
+const {data} = useRequest(ROUTER_PROCESS, {routerId});
+const {avatar: userAvatar} = useUserInfo(
+    computed(() => data.value?.userInfoBo?.userId)
 );
 
-const state = reactive({
-  course: [
-    {
-      state: 1, //1：进行中 2：未开始
-      title: "序：产品经理从初级到中级",
-      courseItem: [
-        {
-          id: 1,
-          name: "人工智能启蒙就讲解（上）",
-          tag: [
-            {
-              classify: 1, //1：必修  2：选修  3：在线、测评等  4：标签
-              name: "必修",
-            },
-            {
-              classify: 3,
-              name: "在线",
-            },
-            {
-              classify: 4,
-              name: "#通用力",
-            },
-            {
-              classify: 4,
-              name: "#前沿趋势",
-            },
-          ],
-          progress: 90,
-        },
-        {
-          id: 1,
-          name: "人工智能启蒙就讲解（下）",
-          tag: [
-            {
-              classify: 2,
-              name: "选修",
-            },
-            {
-              classify: 3,
-              name: "测评",
-            },
-            {
-              classify: 4,
-              name: "#通用力",
-            },
-            {
-              classify: 4,
-              name: "#前沿趋势",
-            },
-          ],
-          progress: 0,
-        },
-      ],
-    },
-    {
-      state: 2, //1：进行中 2：未开始
-      title: "第一讲：中级产品经理的思考逻辑",
-      courseItem: [
-        {
-          id: 1,
-          name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
-          tag: [
-            {
-              classify: 1, //1：必修  2：选修  3：在线、测评等  4：标签
-              name: "必修",
-            },
-            {
-              classify: 3,
-              name: "测评",
-            },
-          ],
-          progress: 48,
-        },
-        {
-          id: 1,
-          name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
-          tag: [
-            {
-              classify: 2,
-              name: "选修",
-            },
-            {
-              classify: 3,
-              name: "外部链接",
-            },
-          ],
-          progress: 0,
-        },
-      ],
-    },
-    {
-      state: 2, //1：进行中 2：未开始
-      title: "第二讲：模块化产品展示",
-      courseItem: [
-        {
-          id: 1,
-          name: "模块化产品展示相关案例与展示：如何自由组合你的思考？",
-          tag: [
-            {
-              classify: 1, //1：必修  2：选修  3：在线、测评等  4：标签
-              name: "必修",
-            },
-            {
-              classify: 3,
-              name: "测评",
-            },
-          ],
-          progress: 48,
-        },
-        {
-          id: 1,
-          name: "社交产品如何做好模块化处理？",
-          tag: [
-            {
-              classify: 2,
-              name: "选修",
-            },
-            {
-              classify: 3,
-              name: "作业",
-            },
-          ],
-          progress: 0,
-        },
-        {
-          id: 1,
-          name: "微信与Telegram哪个平台的功能模块化做的最好？",
-          tag: [
-            {
-              classify: 2,
-              name: "选修",
-            },
-            {
-              classify: 3,
-              name: "辩论",
-            },
-          ],
-          progress: 0,
-        },
-      ],
-    },
-  ],
-  sharedoc: [
-    {
-      id: 1,
-      name: "项目参考文档.doc",
-      img: word,
-    },
-    {
-      id: 2,
-      name: "人工智能启蒙讲解讲义.pptx",
-      img: ppt,
-    },
-    {
-      id: 3,
-      name: "中级产品经理必备工具.pdf",
-      img: pdf,
-    },
-    {
-      id: 4,
-      name: "Python学习入门讲义.zip",
-      img: zip,
-    },
-    {
-      id: 5,
-      name: "Axure RP10更新内容.md",
-      img: md,
-    },
-  ],
-  teacher: [
-    {
-      id: 1,
-      name: "王星天（显示事业）",
-      introduce: "教师是学生的镜子,学生是老师的影子。",
-      peopleimg: img,
-      medal: [medal1, medal2, medal3],
-    },
-  ],
-});
 const activeName = ref("first");
-const totalprogress = ref(30);
-const compulsoryprogress = ref(10);
 
 const handleClick = (tab, event) => {
   console.log(tab, event);
 };
-const path = { 1: "path" };
+const path = {1: "path"};
 
 const types = ref({
   typeName: {
@@ -601,7 +420,7 @@ const types = ref({
   },
 });
 
-function toFinish(d) {
+function toFinish(d, sName) {
   console.log("ddd", d);
   if (!types.value.path[d.type]) {
     ElMessage.error("暂时未开放");
@@ -615,16 +434,16 @@ function toFinish(d) {
       url = types.value.path[d.type][0] + d.targetId;
     }
     import.meta.env.DEV
-      ? (window.location.href = url)
-      : (window.parent.location.href = url);
+        ? (window.location.href = url)
+        : (window.parent.location.href = url);
     return;
   }
   if (types.value.path[d.type] && types.value.path[d.type].startsWith("http")) {
     //配置文件
     const url = types.value.path[d.type] + d.targetId;
     import.meta.env.DEV
-      ? (window.location.href = url)
-      : (window.parent.location.href = url);
+        ? (window.location.href = url)
+        : (window.parent.location.href = url);
     return;
   }
   if (d.type === 7) {
@@ -634,15 +453,15 @@ function toFinish(d) {
       if (res.code === 200) {
         const url = res.data.linkAddress;
         import.meta.env.DEV
-          ? (window.location.href = url)
-          : (window.parent.location.href = url);
+            ? (window.location.href = url)
+            : (window.parent.location.href = url);
       }
     });
     return;
   }
   router.push({
     path: types.value.path[d.type],
-    query: { id: d.routerTaskId, type: 1, courseId: d.courseId },
+    query: {id: d.routerTaskId, type: 1, courseId: d.courseId, pName: data.name, sName},
   });
 }
 </script>