classroom-instruments/src/components/card-type/index.tsx

import { PropType, Transition, defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NCard, NImage, NModal } 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';
import iconMusic from '@common/images/icon-music.png';
import iconCollectDefault from '@common/images/icon-collect-default.png';
import iconCollectActive from '@common/images/icon-collect-active.png';
import TheNoticeBar from '../TheNoticeBar';
import AudioPlayer from './audio-player';
import VideoPlayer from './video-player';

type itemType = {
  id: string | number;
  type: 'IMG' | 'VIDEO' | 'SONG' | 'MUSIC';
  coverImg: string;
  content?: string;
  title: string;
  isCollect: boolean;
  isSelected: boolean; // 精选
};

export default defineComponent({
  name: 'card-type',
  props: {
    // 是否是选中状态
    isActive: {
      type: Boolean,
      default: false
    },
    // 是否可以收藏
    isCollect: {
      type: Boolean,
      default: true
    },
    // 是否显示收藏
    isShowCollect: {
      type: Boolean,
      default: true
    },
    // 是否显示添加按钮
    isShowAdd: {
      type: Boolean,
      default: false
    },
    // 鼠标移动上面的时候是否自动播放，或者可以点击
    disabledMouseHover: {
      type: Boolean,
      default: true
    },
    // 是否预览
    isPreview: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object as PropType<itemType>,
      default: () => ({})
    }
  },
  /**
   * @type {string} click 点击事件
   * @type {string} collect 收藏
   * @type {string} add 添加
   */
  emits: ['click', 'collect', 'add'],
  setup(props, { emit }) {
    const isAnimation = ref(false);
    const formatType = (type: string) => {
      let typeImg = iconImage;
      switch (type) {
        case 'IMG':
          typeImg = iconImage;
          break;
        case 'VIDEO':
          typeImg = iconVideo;
          break;
        case 'SONG':
          typeImg = iconAudio;
          break;
        case 'MUSIC':
          typeImg = iconMusic;
          break;
      }
      return typeImg;
    };

    return () => (
      <div
        onClick={() => emit('click', props.item)}
        class={[styles['card-section']]}
        onMouseenter={() => {
          isAnimation.value = true;
        }}
        onMouseleave={() => {
          isAnimation.value = false;
        }}>
        <NCard
          class={[
            styles['card-section'],
            props.isShowAdd ? '' : styles.course,
            props.isActive ? styles.isActive : ''
          ]}>
          {{
            cover: () => (
              <>
                {['IMG', 'MUSIC'].includes(props.item.type) && (
                  <NImage
                    class={[styles.cover, styles.image]}
                    lazy
                    previewDisabled={props.disabledMouseHover}
                    objectFit="cover"
                    src={props.item.coverImg}
                  />
                )}
                {/* 音频 */}
                {props.item.type === 'SONG' && (
                  <AudioPlayer
                    content={props.item.content}
                    previewDisabled={props.disabledMouseHover}
                  />
                )}
                {/* 视频 */}
                {props.item.type === 'VIDEO' && (
                  <VideoPlayer
                    cover={props.item.coverImg}
                    content={props.item.content}
                    previewDisabled={props.disabledMouseHover}
                  />
                )}
              </>
            ),
            footer: () => (
              <div class={styles.footer}>
                <div class={styles.title}>
                  <NImage
                    class={[styles.titleType]}
                    src={formatType(props.item.type)}
                    objectFit="cover"
                  />
                  <span class={styles.titleContent}>
                    <TheNoticeBar
                      isAnimation={isAnimation.value}
                      text={props.item.title}
                    />
                  </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>
                )}

                {/* 精选 */}
                {props.item.isSelected && (
                  <span class={styles.iconSelected}></span>
                )}

                {/* 添加按钮 */}
                {props.isShowAdd && (
                  <NButton
                    type="primary"
                    class={styles.addBtn}
                    onClick={(e: MouseEvent) => {
                      e.stopPropagation();
                      e.preventDefault();
                      emit('add');
                      console.log('add');
                    }}>
                    添加
                  </NButton>
                )}
              </div>
            )
          }}
        </NCard>
      </div>
    );
  }
});