colexiu-project/src/components/musicLIstItem/index.tsx

import { defineComponent,reactive } from 'vue'
import icon from '../videoDetailItem/images/icon.png'
import classes from './index.module.less'
import detaile from './images/detaile.png'
import music from './images/music.png'
import arrow from './images/arrow.png'

type Props = {
  addName: String
  addUserAvatar: String
  musicSheetName: String
  subjectNames: String
  composer: String
  chargeType: String
}
const chargeTypes = {
  CHARGE: '点播',
  FREE: '免费',
  VIP: 'VIP'
}

export default defineComponent({
  name: 'musicLIstItem',
  props: {
    item: {
      type: Object as () => Props,
      default: () => ({})
    }
  },
  setup(props: any) {
    const item = props.item
    return () => (

      <div>
        <div class={classes.itemWrap}>
          <div class={classes.left}>
            <div class={classes.imgWrap}>
              <img src={music} alt="" />
            </div>
            <div class={classes.textWrap}>
              <p>
                {item.musicSheetName}
                <span>作曲: {item.composer}</span>
              </p>
              <div class={classes.authorInfo}>
                <img
                  class={classes.icon}
                  src={item.addUserAvatar || icon}
                  alt=""
                />
                <span class={classes.authorName}>{item.addName}</span>
                <div class={classes.tagList}>
                  <div class={classes.tag}>{item.subjectNames}</div>
                  {/* <div class={classes.tag}>圆号</div> */}
                </div>
              </div>
            </div>
          </div>
          <div class={classes.right}>
            <div
              class={[
                classes.touchButton,
                classes[item.chargeType.toLocaleLowerCase()]
              ]}
            >
              {chargeTypes[item.chargeType]}
            </div>
            <img class={classes.arrow} src={arrow} alt="" />
          </div>
        </div>
       </div>
    )
  }
})