colexiu-project/src/views/user-info/components/item/index.tsx

import { ElImage } from 'element-plus'
import { defineComponent } from 'vue'
import iconTeacher from '@/common/images/icon_teacher.png'

export default defineComponent({
  name: 'item',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  render() {
    const item = this.item
    return (
      <div
        class="border border-[#E0E0E0] box-border rounded-[10px] w-[218px] m-auto overflow-hidden relative transition-all cursor-pointer"
        onClick={() => {
          console.log(item)
          if (item.type === 'video') {
            if (item.shelvesFlag === 0) {
              this.$router.push({
                path: '/userInfo/videoOperation',
                query: {
                  type: 'edit',
                  groupId: item.id
                }
              })
              return
            } else {
              this.$router.push({
                path: '/videoDetail',
                query: {
                  id: item.id
                }
              })
            }
          }
          if (
            item.type === 'live' &&
            (item.status === 'CANCEL' || item.status === 'OUT_SALE')
          ) {
            // 直播课
            this.$router.push({
              path: '/userInfo/liveOperation',
              query: {
                type: 'edit',
                groupId: item.courseGroupId
              }
            })
          }
        }}
      >
        {/* {item.subjectName && (
          <div class="absolute top-2 right-3 bg-black/40 text-white text-sm rounded-sm px-3 h-7 flex items-center justify-center z-10">
            {item.subjectName}
          </div>
        )} */}
        <div class="relative">
          <ElImage
            class="w-full h-[122px] align-middle"
            fit="cover"
            src={item.backgroundPic}
          />
          <div class="text-sm text-[#52FFDC] h-7 leading-7 px-3 flex items-center justify-end absolute left-0 right-0 bottom-0 bg-black/60">
            <i class="w-1 h-1 bg-[#52FFDC] rounded-full mr-1.5 inline-block"></i>
            {item.studentCount}人已购买
          </div>
        </div>

        <div class="text-base px-2.5 pt-2 text-[#666666] leading-none font-semibold whitespace-nowrap overflow-hidden text-ellipsis">
          {item.courseGroupName}
        </div>

        {item.courseStartTime && (
          <p class="text-[#999] text-xs px-2.5 leading-none pt-1.5">
            开课时间：{item.courseStartTime}
          </p>
        )}

        <div class="mx-2.5 pt-1.5 pb-2 flex items-center justify-between">
          <div class="text-xl text-[#F90000] font-semibold leading-none">
            <span class="text-sm leading-7">￥</span>
            {item.coursePrice}
          </div>
          <div class="text-base text-[#FF5F22] leading-none">
            {item.courseNum}课时
          </div>
        </div>
      </div>
    )
  }
})