feat:增加文件仓库数据

src/api/api.js

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-13 11:42:48
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-29 18:02:48
+ * @LastEditTime: 2023-01-31 17:32:26
  * @FilePath: /stu_h5/src/api/api.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/components/ReturnHead.vue

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-16 17:26:39
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-16 18:21:05
+ * @LastEditTime: 2023-01-31 17:19:27
  * @FilePath: /stu_h5/src/components/ReturnHead.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -23,6 +23,14 @@
       />
       <div style="margin-left: 5px; color: #2478ff">发布</div>
     </div>
+    <div class="publish" v-else-if="showfile" @click="publishClick">
+      <img
+        style="width: 21px; height: 18px; margin-left: 25px; cursor: pointer"
+        src="../assets/image/file/file.png"
+        @click="goFileStorage"
+      />
+    </div>
+
     <div class="publish" v-else></div>
   </div>
 </template>
@@ -40,6 +48,14 @@ export default {
       type: Function,
       default: null,
     },
+    showfile: {
+      type: Boolean,
+      default: false,
+    },
+    courseId: {
+      type: Number,
+      default: null,
+    },
   },
   setup(props, ctx) {
     const router = useRouter();
@@ -49,9 +65,19 @@ export default {
     const publishClick = () => {
       props.publishWork && props.publishWork();
     };
+    const goFileStorage = () => {
+      console.log("props.courseId", props.courseId);
+      router.push({
+        path: "/fileStorag",
+        query: {
+          courseId: props.courseId,
+        },
+      });
+    };
     return {
       returnclick,
       publishClick,
+      goFileStorage,
     };
   },
 };

src/views/filestorag/fileStorag.vue

@@ -1,18 +1,68 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-01-13 11:42:48
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-01-31 17:56:36
+ * @FilePath: /stu_h5/src/views/filestorag/fileStorag.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div class="filestorag">
+    <ReturnHead text="文件"></ReturnHead>
     <div class="notice">
       <div class="noticebox">
-                <div class="main">
+        <div class="main" v-if="fileList">
-                    <div class="filebox"
+          <div class="filebox" v-for="(item, index) in fileList" :key="index">
-                        v-for="(t,index) in t_items"
+            <img
-                        :key="index">
+              v-if="
-                        <div class="fileimg"
+                item.name.indexOf('jpg') !== -1 ||
-                        :style="{ 
+                item.name.indexOf('jpeg') !== -1 ||
-                            backgroundImage:
+                item.name.indexOf('png') !== -1
-                            'url('+ t.imgUrl +')'
+              "
-                            }"
+              style="width: 20px; height: 22px; margin-right: 20px"
-                        ></div>
+              src="@/assets/image/file/pngpic.png"
-                        <div class="filename">{{t.text}}</div>
+            />
+            <div v-else>
+              <img
+                v-if="item.name.indexOf('doc') !== -1"
+                style="width: 20px; height: 22px; margin-right: 20px"
+                src="@/assets/image/file/word.png"
+              />
+              <div v-else>
+                <img
+                  v-if="item.name.indexOf('xls') !== -1"
+                  style="width: 20px; height: 22px; margin-right: 20px"
+                  src="@/assets/image/file/excel.png"
+                />
+                <div v-else>
+                  <img
+                    v-if="item.name.indexOf('ppt') !== -1"
+                    style="width: 20px; height: 22px; margin-right: 20px"
+                    src="@/assets/image/file/ppt.png"
+                  />
+                  <div v-else>
+                    <img
+                      v-if="item.name.indexOf('pdf') !== -1"
+                      style="width: 20px; height: 22px; margin-right: 20px"
+                      src="@/assets/image/file/pdf.png"
+                    />
+                    <div v-else>
+                      <img
+                        v-if="item.name.indexOf('zip') !== -1"
+                        style="width: 20px; height: 22px; margin-right: 20px"
+                        src="@/assets/image/file/zip.png"
+                      />
+                      <img
+                        v-else
+                        style="width: 20px; height: 22px; margin-right: 20px"
+                        src="@/assets/image/file/word.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span class="filename" :title="item.name">{{ item.name }}</span>
           </div>
         </div>
       </div>
@@ -20,74 +70,61 @@
   </div>
 </template>
 
-<script>
+<script setup>
-    import { reactive, toRefs } from "vue";
+import { reactive, toRefs, computed } from "vue";
-    import Images from "../../assets/image/index";
+import Images from "../../assets/image/index";
-export default {
+import ReturnHead from "@/components/ReturnHead.vue";
-    name: "FileStorag",
+import { useRoute, useRouter } from "vue-router";
-    setup() {
+import { ROUTER_DETAILS } from "@/api/api";
-        const state = reactive({
+import { useRequest } from "@/api/request";
-            t_items: [
+const {
-                {
+  query: { courseId },
-                    id: 1,
+} = useRoute();
-                    text: "示例文档.zip",
+console.log("courseId", courseId);
-                    imgUrl:Images.zipImg,
+//获取共享文档
-                },
+const { data } = useRequest(ROUTER_DETAILS, { routerId: courseId });
-                {
+// state.t_items = data.value.routerInfo.attach;
-                    id: 2,
+console.log("data", data, data.value.routerInfo);
-                    text: "示例文档.md",
+const fileList = computed(() => data.value?.routerInfo?.attach);
-                    imgUrl:Images.mdImg,
-                },
-                {
-                    id: 3,
-                    text: "示例文档.rar",
-                    imgUrl:Images.rarImg,
-                },
-                {
-                    id: 4,
-                    text: "示例文档.word",
-                    imgUrl:Images.wordImg,
-                },
-            ],
-        });
-
-        return {
-            ...toRefs(state),
-            Images,
-        };
-    }
-};
 </script>
 <style lang="scss" scoped>
-    .filestorag{
+.filestorag {
   width: 100%;
-        background-color: #F2F5F7;
+  background-color: #f2f5f7;
   font-size: 13px;
-        color: #677D86;
+  color: #677d86;
-        .notice{
+  .notice {
     width: 100%;
     background-color: #ffffff;
     margin-top: 10px;
-            .noticebox{
+    .noticebox {
       width: 90%;
       margin: 0 auto;
-                .main{
+      .main {
         width: 100%;
-                    .filebox{
+        .filebox {
           display: flex;
           margin-left: 16.5px;
           padding: 21.5px 0;
           align-items: center;
-                        border-bottom: 1px solid #EDF3FF;
+          border-bottom: 1px solid #edf3ff;
-                        .fileimg{
+          .fileimg {
             width: 19.5px;
             height: 22px;
             background-size: 100% 100%;
             margin-right: 19px;
           }
         }
+        .filename {
+          width: calc(100% - 50px);
+          font-size: 13px;
+          display: block;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
   }
+}
 </style>

src/views/pathmap/LevelList.vue

@@ -2,13 +2,17 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-19 14:59:34
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-19 18:59:50
+ * @LastEditTime: 2023-01-31 17:17:37
  * @FilePath: /stu_h5/src/views/pathmap/LevelList.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="levelList">
-    <ReturnHead text="展开路径图"></ReturnHead>
+    <ReturnHead
+      text="展开路径图"
+      :showfile="true"
+      :courseId="routerId"
+    ></ReturnHead>
     <!-- 学习路径介绍 -->
     <div class="pathdetail">
       <div class="pathName">产品经理学习路径图</div>

src/views/projectdetails/ProjectPath.vue

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-19 11:28:11
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-29 17:58:47
+ * @LastEditTime: 2023-01-31 18:01:11
  * @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -181,7 +181,7 @@ const handleClick = (tab, event) => {
 const goDetails = () => {
   // router.push({
   //   path: "/levelList",
-  //   query: { routerId: 274 },
+  //   query: { routerId: 2 },
   // });
   router.push({
     path: "/projectdetails",

src/views/projectdetails/projectDetails.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="projectdetails">
-    <ReturnHead text="项目详情"></ReturnHead>
+    <ReturnHead
+      text="项目详情"
+      :showfile="true"
+      :courseId="projectId || courseId"
+    ></ReturnHead>
     <div class="main">
       <div class="up">
         <!-- <div class="notice">