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

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

import classes from './index.module.less'
import detaile from './images/detaile.png'
import player from '@/components/albumItem/images/player.png'
import icon from './images/icon.png'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'albumItem',
  emits: ['getDetail'],
  props: {
    detail: {
      type: Object,
      default: {
        auditStatus: '',
        endTime: '',
        lessonSubject: '',
        order: '',
        orderNo: '',
        page: 0,
        rows: 0,
        search: '',
        sort: '',
        startTime: '',
        userId: 0,
        videoLessonGroupId: 0
      }
    },
    isFull: {
      type: Boolean,
      default: false
    }
  },
  setup(props, conent) {
    const state = reactive({
      detail: props.detail,
      isFull: props.isFull
    })
    watch(
      () => props.detail,
      detail => {
        state.detail = detail
      }
    )
    const router = useRouter()
    const gotoVideoDetail = () => {
      if (state.isFull) {
        conent.emit('getDetail', state.detail.id)
      }
      router.push({ path: '/videoDetail', query: { id: state.detail.id } })
    }
    return () => (
      <>
        <div
          class={[classes.itemWrap, state.isFull ? classes.isFull : '']}
          onClick={gotoVideoDetail}
        >
          <div class={classes.detaileWrap}>
            <div class={classes.masker}>
              <img src={player} alt="" />
            </div>
            <p class={classes.detaileStudy}>
              <span class={classes.detaileDot}></span>
              {state.detail.countStudent}人在学
            </p>
            <img
              style={{ objectFit: 'cover' }}
              src={
                state.detail.lessonCoverUrl
                  ? state.detail.lessonCoverUrl
                  : detaile
              }
              alt=""
              class={classes.detaile}
            />
          </div>
          <div class={classes.infoBottom}>
            <div class={classes.infoBottomL}>
              <img src={icon} class={classes.itemHead} alt="" />
              <span class={classes.itemTitle}>{state.detail.username}</span>
            </div>
            <span class={classes.course}>{state.detail.lessonCount}课时</span>
          </div>
          <div class={classes.itemBottom}>
            <div class={classes.itemBottomL}>
              <span class={classes.itemTitle}>
                {state.detail.lessonSubjectName}
              </span>
              {/* <div class={classes.line}></div> */}
            </div>
            <div class={classes.itemBottomR}>了解更多</div>
          </div>
        </div>
      </>
    )
  }
})