From 889c2cb7817823f1f5d5e2aaaf4e040d20788baf Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Tue, 13 Dec 2022 02:12:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/faceteach/FaceTeach.vue |  10 +-
 src/views/roadmap/PathDetails.vue | 478 ++++++++++++++++--------------
 2 files changed, 260 insertions(+), 228 deletions(-)

diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue
index 6c91f63..9f6b2e8 100644
--- a/src/views/faceteach/FaceTeach.vue
+++ b/src/views/faceteach/FaceTeach.vue
@@ -11,7 +11,7 @@
     <!-- 基本信息 -->
     <div class="bascinfo">
       <div style="margin-left: 46px">
-        <div class="title">【其他活动】{{ data.planDto?.name }}</div>
+        <div class="title">【面授课】{{ data.planDto?.name }}</div>
         <div class="time" style="margin-top: 26px">
           <img width="15px" height="17px" src="../../assets/image/time.png"/>
           <div style="margin-left: 8px">{{ data.offcourseDto?.publishTime }}</div>
@@ -59,7 +59,8 @@
                   :style="{borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
               >
                 <div class="enclosureL">
-                  <FileTypeImg v-model="data.planDto.attach.split(',')[index]" :style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg>
+                  <FileTypeImg v-model="data.planDto.attach.split(',')[index]"
+                               :style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg>
                   <div style="margin-left: 20px">{{ el }}</div>
                 </div>
                 <div class="download">
@@ -131,11 +132,12 @@ import {reactive, toRefs, watch} from "vue";
 import FileTypeImg from "@/components/FileTypeImg.vue";
 import {request, useRequest} from "@/api/request";
 import {STU_OFFCOURSE_DETAIL} from "@/api/api";
-import {useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 
 const router = useRouter()
+const {query: {id, type}} = useRoute()
 
-const {data} = useRequest(STU_OFFCOURSE_DETAIL, {courseId: 178})
+const {data} = useRequest(STU_OFFCOURSE_DETAIL, {taskId: id, type})
 const state = reactive({
   activeName: "first",
   enclosure: ''
diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue
index 3752177..ea3c0e7 100644
--- a/src/views/roadmap/PathDetails.vue
+++ b/src/views/roadmap/PathDetails.vue
@@ -41,20 +41,7 @@
               <div class="coursetag">
                 <div class="tag1" style="margin-right: 11px; margin-top: 16px">必修</div>
                 <div class="tag3" style="margin-right: 11px; margin-top: 16px">{{
-                    {
-                      1: '在线',
-                      2: '面授',
-                      3: '案例',
-                      4: '作业',
-                      5: '考试',
-                      6: '直播',
-                      7: '外链',
-                      8: '讨论',
-                      9: '活动',
-                      10: '测评',
-                      11: '评估',
-                      12: '投票'
-                    }[value.type] || ''
+                    types.typeName[value.type] || ''
                   }}
                 </div>
 
@@ -114,12 +101,15 @@
                 </div>
               </div>
             </div>
+            <div class="goclass" @click="toFinish(value)">
+              {{
+                types.toName[value.type] || ''
+              }}
+            </div>
             <div :style="{ display: value.status === 1 ? 'block' : 'none' }">
               <div
                   class="goclass"
-                  :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }"
-              >
-                去上课
+                  :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课
               </div>
               <img
                   style="width: 76px; height: 76px; margin-right: 61px"
@@ -188,25 +178,18 @@
             </div>
             <!--            todo #路径详情 个人信息缺少img和介绍-->
             <div
-                v-for="(el, index) in [data.userInfoBo]"
-                :key="el.userId"
                 class="teacheritem"
-                :style="{
-                'border-bottom':
-                  index === teacher.length - 1
-                    ? null
-                    : '1px solid rgba(56, 125, 247, 0.2)',
-              }"
+                :style="{'border-bottom': '1px solid rgba(56, 125, 247, 0.2)'}"
             >
-              <img class="peopleimg" :src="el.peopleimg"/>
+              <img class="peopleimg" :src="data.userInfoBo?.peopleimg"/>
               <div style="margin-left: 17px">
                 <div class="teacherName">
-                  <div style="margin-right: 5px">{{ el.userName }}</div>
-                  <div v-for="(item, key) in el.medal" :key="key">
+                  <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"/>
                   </div>
                 </div>
-                <div class="introduce">{{ el.introduce }}</div>
+                <div class="introduce">{{ data.userInfoBo?.introduce }}</div>
               </div>
             </div>
           </div>
@@ -320,8 +303,8 @@
   </div>
 </template>
 
-<script>
-import {reactive, toRefs} from "vue";
+<script setup>
+import {reactive, ref} 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'
@@ -333,209 +316,256 @@ import medal3 from '@/assets/image/medal/medal3.png'
 import img from '@/assets/image/uploadimg.png'
 import {useRequest} from "@/api/request";
 import {ROUTER_PROCESS} from "@/api/api";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 
-export default {
-  name: "PathDetails",
-  setup() {
-    const {query:{routerId}} = useRoute()
-    const {data} = useRequest(ROUTER_PROCESS, {routerId})
-    const state = reactive({
-      activeName: "first",
-      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: [
+
+const {query: {routerId}} = useRoute()
+const router = useRouter()
+const {data} = useRequest(ROUTER_PROCESS, {routerId})
+const state = reactive({
+  course: [
+    {
+      state: 1, //1：进行中 2：未开始
+      title: "序：产品经理从初级到中级",
+      courseItem: [
         {
           id: 1,
-          name: "项目参考文档.doc",
-          img: word,
+          name: "人工智能启蒙就讲解（上）",
+          tag: [
+            {
+              classify: 1, //1：必修  2：选修  3：在线、测评等  4：标签
+              name: "必修",
+            },
+            {
+              classify: 3,
+              name: "在线",
+            },
+            {
+              classify: 4,
+              name: "#通用力",
+            },
+            {
+              classify: 4,
+              name: "#前沿趋势",
+            },
+          ],
+          progress: 90,
         },
-        {
-          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,
+          name: "人工智能启蒙就讲解（下）",
+          tag: [
+            {
+              classify: 2,
+              name: "选修",
+            },
+            {
+              classify: 3,
+              name: "测评",
+            },
+            {
+              classify: 4,
+              name: "#通用力",
+            },
+            {
+              classify: 4,
+              name: "#前沿趋势",
+            },
           ],
+          progress: 0,
         },
       ],
-      totalprogress: 30, //总进度
-      compulsoryprogress: 10, //必修进度
-    });
-    const handleClick = (tab, event) => {
-      console.log(tab, event);
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-      data,
-    };
-  },
+    },
+    {
+      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 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: '去上课',
+    2: '/faceteach',
+    3: '案例',
+    4: '去完成',
+    5: '去完成',
+    6: '去签到',
+    7: '外链',
+    8: '去讨论',
+    9: '去完成',
+    10: '去完成',
+    11: '去完成',
+    12: '去投票',
+    13: '去完成'
+  }
+})
+
+function toFinish(d) {
+  router.push({path: types.value.path[d.type], query: {id: d.routerTaskId, type: 1}})
+}
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->