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

import { PropType, defineComponent } from 'vue';
import styles from './index.module.less';
import { NButton, NCard, NImage } 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 TheNoticeBar from '../TheNoticeBar';

type itemType = {
  id: string | number;
  type: 'IMG' | 'VIDEO' | 'AUDIO' | 'SONG';
  url: 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
    },
    item: {
      type: Object as PropType<itemType>,
      default: () => ({})
    }
  },
  /**
   * @type {string} click 点击事件
   * @type {string} collect 收藏
   * @type {string} add 添加
   */
  emits: ['click', 'collect', 'add'],
  setup(props, { emit }) {
    const formatType = (type: string) => {
      let typeImg = iconImage;
      switch (type) {
        case 'IMG':
          typeImg = iconImage;
          break;
        case 'VIDEO':
          typeImg = iconVideo;
          break;
        case 'AUDIO':
          typeImg = iconAudio;
          break;
        case 'SONG':
          typeImg = iconMusic;
          break;
      }
      return typeImg;
    };

    return () => (
      <div
        onClick={() => emit('click', props.item)}
        class={[styles['card-section']]}>
        <NCard
          class={[
            styles['card-section'],
            props.isActive ? styles.isActive : ''
          ]}>
          {{
            cover: () =>
              ['IMG', 'VIDEO', 'SONG', 'AUDIO'].includes(props.item.type) && (
                <NImage
                  class={[styles.cover, styles.image]}
                  lazy
                  previewDisabled
                  objectFit="cover"
                  src={props.item.url}
                />
              ),
            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 text={props.item.title} />
                  </span>
                </div>
                {/* 收藏 */}
                {props.isShowCollect && (
                  <i
                    onClick={(e: MouseEvent) => {
                      e.stopPropagation();
                      e.preventDefault();
                      // 判断是否可以收藏
                      if (props.isCollect) {
                        console.log('Collect');
                        emit('collect');
                      }
                    }}
                    class={[
                      styles.iconCollect,
                      props.isCollect ? styles.isCollect : '',
                      props.item.isCollect ? styles.isActive : ''
                    ]}></i>
                )}

                {/* 精选 */}
                {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>
    );
  }
});