h5-colexiu/src/views/music/album/item.tsx

import { Image } from 'vant'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import Footer from './footer'
import styles from './item.module.less'

export default defineComponent({
  name: 'AlbumItem',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  setup({ data }) {
    const router = useRouter()
    return () => (
      <div
        class={styles.album}
        onClick={() => router.push('/music-album-detail/' + data.id)}
      >
        <Image class={styles.img} src={data.albumCoverUrl} />
        {data.paymentType && (
          <span class={styles.albumType}>
            {data.paymentType === 'FREE' && '免费'}
            {data.paymentType === 'CHARGE' && '付费'}
          </span>
        )}

        <div class={styles.content}>
          <h4 class="van-ellipsis">{data.albumName}</h4>
          <p class="van-multi-ellipsis--l3">{data.albumDesc}</p>
          <Footer
            musicSheetCount={data.musicSheetCount}
            albumFavoriteCount={data.albumFavoriteCount}
          />
        </div>
      </div>
    )
  }
})