|  | @@ -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 && (
 |