h5-colexiu/src/views/music/component/song/index.tsx

import { CellGroup, Cell, Icon, Image, Popup, Tag, Toast } from 'vant'
import { computed, defineComponent, PropType, ref } from 'vue'
import styles from './index.module.less'
import IconPlay from '@/common/images/icon-play.png'
import { useRouter } from 'vue-router'
import { state } from '@/state'
export const getAssetsHomeFile = (fileName: string) => {
  const path = `../images/${fileName}`
  const modules = import.meta.globEager('../images/*')
  return modules[path].default
}
export default defineComponent({
  name: 'TheSong',
  props: {
    list: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    // showMore: {
    //   type: Boolean,
    //   default: true
    // },
    showPlay: {
      type: Boolean,
      default: true
    },
    musicNameClass: {
      type: String as PropType<unknown>
    },
    authorClass: {
      type: String as PropType<unknown>
    }
  },
  emits: ['detail'],
  setup(props, { emit }) {
    const isMore = ref<boolean>(false)
    const moreData = ref<any>({})
    const router = useRouter()
    const colors: any = {
      FREE: {
        color: '#01B84F',
        text: '免费'
      },
      VIP: {
        color: '#CD863E',
        text: '会员'
      },
      CHARGE: {
        color: '#3591CE',
        text: '点播'
      }
    }

    const list = computed(() => {
      return props.list.map(n => {
        if (typeof n.paymentType === 'string')
          n.paymentType = n.paymentType.split(',')
        return { ...n }
      })
    })

    return () => {
      return (
        <div class={styles.theSong}>
          {list.value.map((n: any) => (
            <div class={styles.item} onClick={() => emit('detail', n)}>
              <div class={styles.content}>
                <div class={styles.top}>
                  {n.exquisiteFlag === 1 && (
                    <Image
                      class={styles.exquisiteFlag}
                      src={getAssetsHomeFile('icon_exquisite.png')}
                    />
                  )}

                  {n.albumNums > 0 && (
                    <Image
                      class={styles.songAlbum}
                      src={getAssetsHomeFile('icon_album_active.png')}
                    />
                  )}

                  <span
                    class={[styles.title, props.musicNameClass, 'van-ellipsis']}
                  >
                    {n.musicSheetName}
                  </span>
                  <span
                    class={[styles.singer, props.authorClass, 'van-ellipsis']}
                  >
                    -{n.composer}
                  </span>
                </div>
                <div class={styles.user}>
                  {n.favorite === 1 && (
                    <Image
                      src={getAssetsHomeFile('collection_active.png')}
                      class={styles.collection}
                    />
                  )}
                  <span class={[styles.name]}>
                    {!n.composer
                      ? `上传者：${n.addName}`
                      : `作曲：${n.composer}`}
                  </span>
                  <div class={styles.tags}>
                    {n.musicSheetType === 'CONCERT' ? (
                      <span>合奏</span>
                    ) : (
                      n?.subjectNames &&
                      n?.subjectNames
                        .split(',')
                        .map((name: any) => <span>{name}</span>)
                    )}
                  </div>
                </div>
              </div>
              <div class={styles.play}>
                {props.showPlay && <Icon name={IconPlay} size={28} />}

                {/* {props.showMore && (
                  <span class={styles.moreSection}>
                    <Icon
                      name={IconMore}
                      size={18}
                      onClick={(e: MouseEvent) => {
                        e.stopPropagation()
                        isMore.value = true
                        moreData.value = n
                      }}
                    />
                  </span>
                )} */}
              </div>
            </div>
          ))}
        </div>
      )
    }
  }
})