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

import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'

import classes from './index.module.less'
import hold from './images/hold.png'
import start from './images/start.png'
import lineStart from './images/lineStart.png'
import pan from './images/pan.png'
import player from './images/player.png'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'albumItem',
  props: {
    detail: {
      type: Object,
      default: {
        albumCoverUrl: '',
        albumDesc: '',
        albumFavoriteCount: 0,
        albumName: '',
        albumStatus: 0,
        albumTag: '',
        auditVersion: 0,
        createBy: 0,
        createTime: '',
        delFlag: null,
        hotFlag: null,
        id: 0,
        musicSheetCount: 0,
        musicTagNames: '',
        sortNumber: 0,
        topFlag: null,
        updateBy: 34,
        updateTime: '',
        favorite: 0
      } as any
    }
  },
  setup(props) {
    const state = reactive({
      detail: props.detail as any
    })
    watch(
      () => props.detail,
      detail => {
        state.detail = detail
      }
    )
    const router = useRouter()
    const gotoAlbum = () => {
      router.push({ path: '/albumDetail', query: { id: state.detail.id } })
    }
    return () => (
      <>
        <div
          class={classes.itemWrap}
          onClick={() => {
            gotoAlbum()
          }}
        >
          {state.detail.paymentType === 'CHARGE' && (
            <span class={classes.albumType}>付费</span>
          )}
          <img
            class={classes.startImage}
            src={state.detail.favorite ? lineStart : start}
            alt=""
          />
          <div class={classes.hold}>
            <div class={classes.masker}>
              <img src={player} alt="" />
            </div>
            <img
              src={
                state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold
              }
              alt=""
            />
          </div>

          <h2>{state.detail.albumName}</h2>
          <div class={classes.itemBottom}>
            <div class={classes.itemBottomL}>
              {/* <img src={pan} alt="" /> */}
              <span>{state.detail.musicSheetCount}首</span>
            </div>
            <div class={classes.itemBottomR}>
              {/* <img src={start} alt="" /> */}
              <span>{state.detail.albumFavoriteCount}收藏</span>
            </div>
          </div>
        </div>
      </>
    )
  }
})