更新附件展示

src/views/home/learn/page-learn-content.vue

@@ -43,9 +43,21 @@
           </div>
         </div>
         <div style="margin-top: 0.5rem;">
-          <div>附件</div>
-          <div v-for="(item, index) in contentObj.links" :key="index">
-            <a :href="item">{{ getUrlName(item) }}</a>
+          <!-- <div>附件</div> -->
+          <div
+            v-for="(item, index) in contentObj.links"
+            :key="index"
+            class="linkListItem"
+          >
+            <a :href="item">
+              <div class="linkListItemIocn">
+                <img :src="getLinkIcon(item)" />
+              </div>
+              <div class="linkListItemContent">
+                <div class="linkListItemTitle">{{ getUrlName(item) }}</div>
+                <div class="linkListItemDescribel">这里是描述</div>
+              </div>
+            </a>
           </div>
         </div>
         <div
@@ -177,6 +189,13 @@ export default {
       imgPreview: {
         img: "",
         show: false
+      },
+      linkListTypeIcon: {
+        default: require("@/assets/image/learn/image.png"), // 默认
+        image: require("@/assets/image/learn/image.png"),
+        doc: require("@/assets/image/learn/doc.png"),
+        pdf: require("@/assets/image/learn/pdf.png"),
+        ppt: require("@/assets/image/learn/ppt.png")
       }
     };
   },
@@ -446,12 +465,38 @@ export default {
     },
     getUrlName(url) {
       let strArr = url.split("/");
-      console.log(strArr);
       let fileName = strArr[strArr.length - 1];
-      console.log(fileName);
       fileName = decodeURIComponent(fileName);
       console.log(fileName);
       return fileName;
+    },
+    getLinkIcon(url) {
+      let strArr = url.split("/");
+      let fileName = strArr[strArr.length - 1];
+      fileName = decodeURIComponent(fileName);
+      let typeArr = fileName.split(".");
+      let type = typeArr.length > 1 ? typeArr[typeArr.length - 1] : null;
+      let img = this.linkListTypeIcon.default;
+      switch (type[type.length - 1]) {
+        case "jpg":
+        case "jpeg":
+        case "png":
+          img = this.linkListTypeIcon.image;
+          break;
+        case "doc":
+        case "docx":
+          img = this.linkListTypeIcon.doc;
+          break;
+        case "pdf":
+          img = this.linkListTypeIcon.pdf;
+          break;
+        case "ppt":
+          img = this.linkListTypeIcon.ppt;
+          break;
+        default:
+          break;
+      }
+      return img;
     }
   }
 };
@@ -464,6 +509,7 @@ export default {
   overflow-y: scroll;
   font-size: 0.6rem;
   padding-bottom: 2rem;
+  background-color: #fff;
   .learn-content-rest-time {
     height: 1.5rem;
     display: flex;
@@ -518,6 +564,39 @@ export default {
         width: auto;
         height: auto;
       }
+      .linkListItem {
+        width: 100%;
+        padding: 0.25rem 0.25rem;
+        background-color: #f6f6f6;
+        margin-top: 0.5rem;
+        a {
+          display: flex;
+          .linkListItemIocn {
+            width: 2rem;
+            height: 2rem;
+            margin-right: 0.5rem;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .linkListItemContent {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .linkListItemTitle {
+              color: #262626;
+              font-size: 0.6rem;
+              font-weight: bold;
+            }
+            .linkListItemDescribel {
+              color: #696969;
+              font-size: 0.6rem;
+            }
+          }
+        }
+      }
     }
     .learn-content-body-time-row {
       margin-top: 1rem;