h5-colexiu/src/student/home/components/TheSong/index.tsx

import { Icon, NoticeBar, Tag, Image } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import IconPlay from '@/common/images/icon-play.png'
import IconFine from '@/views/music/component/images/icon_exquisite.png'
import IconAlbum from '@/views/music/component/images/icon_album_active.png'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'TheSong',
  props: {
    list: {
      type: Array as PropType<any[]>,
      default: () => []
    }
  },
  emits: ['detail'],
  setup(props, { emit }) {
    const router = useRouter()
    const colors: any = {
      FREE: {
        color: '#01B84F',
        text: '免费'
      },
      VIP: {
        color: '#CD863E',
        text: '会员'
      },
      CHARGE: {
        color: '#3591CE',
        text: '点播'
      }
    }
    return () => (
      <div class={styles.theSong}>
        {props.list.map((n: any) => (
          <div class={styles.item} onClick={() => emit('detail', n)}>
            <div class={styles.content}>
              <div class={styles.top}>
                {n.exquisiteFlag === 1 && (
                  <Image src={IconFine} class={styles.iconFine} />
                )}

                {n.albumNums > 0 && (
                  <Image src={IconAlbum} class={styles.iconAlbum} />
                )}

                <span class={[styles.title, 'van-ellipsis']}>
                  {n.musicSheetName}
                </span>
                <span class={[styles.singer, 'van-ellipsis']}>
                  -{n.composer}
                </span>
              </div>
              <div class={styles.user}>
                {n.addName ? (
                  <div class={styles.name}>上传者：{n.addName}</div>
                ) : (
                  <div class={styles.name}>作曲：{n.composer}</div>
                )}
                <div class={styles.tags}>
                  {n?.subjectNames.split(',').map((name: any) => (
                    <span>{name}</span>
                  ))}
                </div>
              </div>
            </div>
            <div style={styles.play}>
              <Icon name={IconPlay} size={28} />
            </div>
          </div>
        ))}
      </div>
    )
  }
})