|
@@ -1,6 +1,6 @@
|
|
|
import { PropType, Transition, defineComponent, ref } from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
-import { NButton, NCard, NImage, NModal } from 'naive-ui';
|
|
|
+import { NButton, NCard, NImage, NModal, NSpin, useMessage } from 'naive-ui';
|
|
|
import iconImage from '@common/images/icon-image.png';
|
|
|
import iconVideo from '@common/images/icon-video.png';
|
|
|
import iconAudio from '@common/images/icon-audio.png';
|
|
@@ -8,10 +8,12 @@ import iconMusic from '@common/images/icon-music.png';
|
|
|
import iconPPT from '@common/images/icon-ppt.png';
|
|
|
import iconCollectDefault from '@common/images/icon-collect-default.png';
|
|
|
import iconCollectActive from '@common/images/icon-collect-active.png';
|
|
|
+import iconDownload from '@common/images/icon-download.png';
|
|
|
import TheNoticeBar from '../TheNoticeBar';
|
|
|
import AudioPlayer from './audio-player';
|
|
|
import VideoPlayer from './video-player';
|
|
|
import { PageEnum } from '/src/enums/pageEnum';
|
|
|
+import { api_musicSheetDetail } from '/src/api/user';
|
|
|
|
|
|
type itemType = {
|
|
|
id: string | number;
|
|
@@ -75,6 +77,11 @@ export default defineComponent({
|
|
|
offShelf: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
+ },
|
|
|
+ /** 是否可以下载 */
|
|
|
+ isDownload: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
@@ -85,7 +92,9 @@ export default defineComponent({
|
|
|
*/
|
|
|
emits: ['click', 'collect', 'add', 'offShelf'],
|
|
|
setup(props, { emit }) {
|
|
|
+ const message = useMessage();
|
|
|
const isAnimation = ref(false);
|
|
|
+ const downloadStatus = ref(false);
|
|
|
const formatType = (type: string) => {
|
|
|
let typeImg = iconImage;
|
|
|
switch (type) {
|
|
@@ -108,6 +117,71 @@ export default defineComponent({
|
|
|
return typeImg;
|
|
|
};
|
|
|
|
|
|
+ const downloadFile = (filename: string, fileUrl: string) => {
|
|
|
+ // 发起Fetch请求
|
|
|
+ fetch(fileUrl)
|
|
|
+ .then(response => response.blob())
|
|
|
+ .then(blob => {
|
|
|
+ // 创建一个Blob URL
|
|
|
+ const blobUrl = URL.createObjectURL(blob);
|
|
|
+
|
|
|
+ // 创建一个链接元素
|
|
|
+ const link = document.createElement('a');
|
|
|
+
|
|
|
+ // 设置链接的href属性为Blob URL
|
|
|
+ link.href = blobUrl;
|
|
|
+
|
|
|
+ // 设置下载时文件的名称
|
|
|
+ link.download = filename;
|
|
|
+
|
|
|
+ // 将链接元素添加到文档中
|
|
|
+ document.body.appendChild(link);
|
|
|
+
|
|
|
+ // 模拟点击链接以触发文件下载
|
|
|
+ link.click();
|
|
|
+
|
|
|
+ // 移除链接元素
|
|
|
+ document.body.removeChild(link);
|
|
|
+
|
|
|
+ // 释放Blob URL
|
|
|
+ URL.revokeObjectURL(blobUrl);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ downloadStatus.value = false;
|
|
|
+ }, 100);
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('文件下载失败', error);
|
|
|
+ message.error('下载失败');
|
|
|
+ });
|
|
|
+
|
|
|
+ downloadStatus.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const onDownload = async (e: MouseEvent) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ e.preventDefault();
|
|
|
+ const item = props.item;
|
|
|
+ if (!item.content) {
|
|
|
+ message.error('下载失败');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (downloadStatus.value) return false;
|
|
|
+ downloadStatus.value = true;
|
|
|
+ if (item.type === 'MUSIC') {
|
|
|
+ const { data } = await api_musicSheetDetail(item.content);
|
|
|
+ console.log(data, '1212');
|
|
|
+ // setTimeout(() => {
|
|
|
+ // downloadStatus.value = false;
|
|
|
+ // }, 1000);
|
|
|
+ } else {
|
|
|
+ // const link = document.createElement('a');
|
|
|
+ const suffix: any = item.content?.split('.');
|
|
|
+ const fileName = item.title + '.' + suffix[suffix?.length - 1];
|
|
|
+ downloadFile(fileName, item.content);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
return () => (
|
|
|
<div
|
|
|
onClick={() => emit('click', props.item)}
|
|
@@ -217,40 +291,55 @@ export default defineComponent({
|
|
|
</span>
|
|
|
</div>
|
|
|
{/* 收藏 */}
|
|
|
- {props.isShowCollect && (
|
|
|
- <div
|
|
|
- class={[styles.iconCollect, styles.iconDiv]}
|
|
|
- onClick={(e: MouseEvent) => {
|
|
|
- e.stopPropagation();
|
|
|
- e.preventDefault();
|
|
|
- // 判断是否可以收藏
|
|
|
- if (props.isCollect) {
|
|
|
- emit('collect', props.item);
|
|
|
- }
|
|
|
- }}>
|
|
|
- <Transition name="favitor" mode="out-in">
|
|
|
- {props.item.isCollect ? (
|
|
|
- <img
|
|
|
- src={iconCollectActive}
|
|
|
- key="1"
|
|
|
- class={[
|
|
|
- styles.iconCollect,
|
|
|
- props.isCollect ? styles.isCollect : ''
|
|
|
- ]}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <img
|
|
|
- src={iconCollectDefault}
|
|
|
- key="2"
|
|
|
- class={[
|
|
|
- styles.iconCollect,
|
|
|
- props.isCollect ? styles.isCollect : ''
|
|
|
- ]}
|
|
|
- />
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
- )}
|
|
|
+ <div class={styles.btnGroup}>
|
|
|
+ {props.isDownload && (
|
|
|
+ <NSpin
|
|
|
+ show={downloadStatus.value}
|
|
|
+ class={styles.btnItem}
|
|
|
+ size={'small'}>
|
|
|
+ <img
|
|
|
+ src={iconDownload}
|
|
|
+ key="3"
|
|
|
+ class={[styles.iconCollect]}
|
|
|
+ onClick={onDownload}
|
|
|
+ />
|
|
|
+ </NSpin>
|
|
|
+ )}
|
|
|
+ {props.isShowCollect && (
|
|
|
+ <div
|
|
|
+ class={[styles.iconCollect, styles.btnItem]}
|
|
|
+ onClick={(e: MouseEvent) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ e.preventDefault();
|
|
|
+ // 判断是否可以收藏
|
|
|
+ if (props.isCollect) {
|
|
|
+ emit('collect', props.item);
|
|
|
+ }
|
|
|
+ }}>
|
|
|
+ <Transition name="favitor" mode="out-in">
|
|
|
+ {props.item.isCollect ? (
|
|
|
+ <img
|
|
|
+ src={iconCollectActive}
|
|
|
+ key="1"
|
|
|
+ class={[
|
|
|
+ styles.iconCollect,
|
|
|
+ props.isCollect ? styles.isCollect : ''
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ src={iconCollectDefault}
|
|
|
+ key="2"
|
|
|
+ class={[
|
|
|
+ styles.iconCollect,
|
|
|
+ props.isCollect ? styles.isCollect : ''
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
|
|
|
{/* 精选 */}
|
|
|
{props.item.isSelected && (
|