修改zip 和rar为可下载

src/components/base/PreviewFiles.vue

 <script setup lang="ts">
 const props = defineProps({
-  url: {
-    type: String,
+  item: {
+    type: Object,
     require: true
   }
 })
 
 let isShowType = ref(1)
 // 判断用什么标签展示内容
-if (props.url?.indexOf('.pdf') !== -1 || props.url?.indexOf('.txt') !== -1) {
+if (props.item?.url?.indexOf('.pdf') !== -1 || props.item?.url?.indexOf('.txt') !== -1) {
   isShowType.value = 2
-} else if (props.url?.indexOf('.mp4') !== -1) {
+} else if (props.item?.url?.indexOf('.mp4') !== -1) {
   isShowType.value = 3
-} else if (props.url?.indexOf('.mp3') !== -1) {
+} else if (props.item?.url?.indexOf('.mp3') !== -1) {
   isShowType.value = 4
 } else if (
-  props.url?.indexOf('.png') !== -1 ||
-  props.url?.indexOf('.jpg') !== -1 ||
-  props.url?.indexOf('.jpeg') !== -1
+  props.item?.url?.indexOf('.png') !== -1 ||
+  props.item?.url?.indexOf('.jpg') !== -1 ||
+  props.item?.url?.indexOf('.jpeg') !== -1
 ) {
   isShowType.value = 5
-} else if (props.url?.indexOf('.rar') !== -1 || props.url?.indexOf('.zip') !== -1) {
+} else if (props.item?.url?.indexOf('.rar') !== -1 || props.item?.url?.indexOf('.zip') !== -1) {
   isShowType.value = 6
 }
 </script>
@@ -28,25 +28,33 @@ if (props.url?.indexOf('.pdf') !== -1 || props.url?.indexOf('.txt') !== -1) {
 <template>
   <el-card>
     <div class="max-w-h">
-      <iframe v-if="isShowType === 1" :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.url}`"></iframe>
-      <embed :src="props.url" v-else-if="isShowType === 2" />
+      <iframe
+        v-if="isShowType === 1"
+        :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.item?.url}`"
+      ></iframe>
+      <embed :src="props.item?.url" v-else-if="isShowType === 2" />
       <video v-else-if="isShowType === 3" controls id="video">
-        <source :src="props.url" />
+        <source :src="props.item?.url" />
       </video>
-      <audio v-else-if="isShowType === 4" :src="props.url" controls></audio>
-      <img v-else-if="isShowType === 5" :src="props.url" />
+      <audio v-else-if="isShowType === 4" :src="props.item?.url" controls></audio>
+      <img v-else-if="isShowType === 5" :src="props.item?.url" />
       <div v-else-if="isShowType === 6" class="zip_con">
-        <img
-          v-if="props.url?.indexOf('.rar') !== -1"
-          src="https://webapp-pub.ezijing.com/center_resource/rar.png"
-          class="img_zip"
-        />
-        <img
-          v-else-if="props.url?.indexOf('.zip') !== -1"
-          src="https://webapp-pub.ezijing.com/center_resource/zip.png"
-          class="img_zip"
-        />
-        <div class="zip_tips">* 该文件格式暂不支持预览</div>
+        <a :href="props.item?.url" style="color: #aa1941">
+          <img
+            v-if="props.item?.url?.indexOf('.rar') !== -1"
+            src="https://webapp-pub.ezijing.com/center_resource/rar.png"
+            class="img_zip"
+          />
+
+          <img
+            v-else-if="props.item?.url?.indexOf('.zip') !== -1"
+            src="https://webapp-pub.ezijing.com/center_resource/zip.png"
+            class="img_zip"
+          />
+          {{ props.item?.name }}
+        </a>
+
+        <div class="zip_tips">* 该文件格式暂不支持预览,可点击上方文件名下载</div>
       </div>
     </div>
   </el-card>

src/modules/course/my/views/ViewDetails.vue

@@ -260,8 +260,9 @@ const handleExamDetail = (row: any) => {
               <el-empty description="暂无数据" v-if="!resourceData.lessonPlan.length" />
             </el-tab-pane>
             <el-tab-pane label="资料" name="3">
+              {{ resourceData.data }}
               <PreviewFiles
-                :url="item.url"
+                :item="item"
                 v-for="item in resourceData.data"
                 :key="item.id"
                 style="margin-top: 10px"