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

import { ElButton, 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: () => ({})
    },
    onOffCourse: {
      type: Function,
      default: (item: any) => {}
    }
  },
  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 &&
              (item.status === 'UNPASS' || item.status === 'OUT_SALE')
            ) {
              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-between absolute left-0 right-0 bottom-0 bg-black/60">
            <div>
              <div class="text-base text-[#FF5F22] leading-none">
                {item.courseNum}课时
              </div>
            </div>
            <div>
              <i class="w-1 h-1 bg-[#52FFDC] rounded-full mr-1.5 inline-block"></i>
              {item.studentCount}人已学习
            </div>
          </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">
          {item.payType === 'VIP' ? (
            <div class="text-xl text-[#C76E21] font-semibold leading-none">
              会员
            </div>
          ) : (
            <div class="text-xl text-[#F90000] font-semibold leading-none">
              <span class="text-sm leading-7">￥</span>
              {item.coursePrice}
            </div>
          )}
          {item.type === 'video' && item.status === 'PASS' && (
            <div>
              <ElButton
                type="primary"
                round
                onClick={(e: MouseEvent) => {
                  e.stopPropagation()
                  this.onOffCourse(item)
                }}
              >
                下架课程
              </ElButton>
            </div>
          )}
        </div>
      </div>
    )
  }
})