classroom-app/src/views/courseware-play/component/points.tsx

import { PropType, defineComponent, reactive, watch } from 'vue';
import styles from './point.module.less';
import iconMulv from '../image/icon-mulv.svg';
import iconZhibo from '../image/icon-load.gif';
import iconImage from '../image/icon-image.svg';
import iconImageActive from '../image/icon-image-active.svg';
import iconVideo from '../image/icon-video.svg';
import iconVideoActive from '../image/icon-video-active.svg';
import iconSong from '../image/icon-song.svg';
import iconSongActive from '../image/icon-song-active.svg';

import { Icon } from 'vant';
export default defineComponent({
  name: 'points',
  props: {
    data: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const types: { [_: string]: string } = {
      SONG: '乐谱',
      VIDEO: '视频',
      IMG: '图片',
      AUDIO: '音频'
    };

    // 获取对应图片
    const getImage = (item: any) => {
      if (item.type === 'VIDEO') {
        return props.itemActive == item.id ? iconVideoActive : iconVideo;
      } else if (['IMAGE', 'IMG'].includes(item.type)) {
        return props.itemActive == item.id ? iconImageActive : iconImage;
      } else if (item.type === 'SONG') {
        return props.itemActive == item.id ? iconSongActive : iconSong;
      } else {
        return props.itemActive == item.id ? iconVideoActive : iconVideo;
      }
    };
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHead}>
          <img src={iconMulv} />
          第一单元 我愿住在童话里
        </div>
        <div class={styles.content}>
          {props.data.map((item, index: number) => {
            return (
              <div
                class={[
                  styles.item,
                  props.itemActive == item.id ? styles.itemActive : ''
                ]}
                onClick={() => {
                  emit('handleSelect', {
                    itemActive: item.id
                  });
                }}>
                <div class={styles.cover}>
                  {item.type === 'VIDEO' && (
                    <img src="https://daya.ks3-cn-beijing.ksyuncs.com/1687681877690iShot2023-06-25_16.31.11.png" />
                  )}
                  {item.type === 'IMG' && <img src={item.content} />}
                  {item.type === 'AUDIO' && <img src={item.content} />}
                  {item.type === 'SONG' && (
                    <img src="https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687673062603-1.png" />
                  )}
                </div>
                <div class={styles.title}>
                  <div class={styles.tag}>{types[item.type]}</div>
                  <div>{item.name}</div>
                  <Icon name={iconZhibo} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
});