h5-colexiu/src/teacher/piano-room/components/course/index.tsx

import { Button, Cell, CellGroup, Col, Row } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconTimer from '@/common/images/icon_timer2.png'
import dayjs from 'dayjs'
import { courseType } from '@/constant'
import { postMessage } from '@/helpers/native-message'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../../images/${fileName}`
  const modules = import.meta.globEager('../../images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'course',
  props: {
    item: {
      type: Object
    },
    operation: {
      type: Boolean,
      default: true
    },
    // 学员调整
    onStudentAdjust: {
      type: Function,
      default: (item: any) => {}
    },
    // 时间调整
    onTimeAdjust: {
      type: Function,
      default: (item: any) => {}
    },
    // 删除课程
    onCourseDelete: {
      type: Function,
      default: (item: any) => {}
    }
  },
  computed: {
    timer() {
      const item: any = this.item
      return (
        dayjs(item.startTime).format('YYYY/MM/DD HH:mm') +
        ' ~ ' +
        dayjs(item.endTime).format('HH:mm')
      )
    }
  },
  methods: {
    onJoinChat(e: any) {
      e.stopPropagation()
      const item: any = this.item
      // 进入聊天
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'multi', // single 单人 multi 多人
          id: item.imGroupId,
          role: 'TEACHER'
        }
      })
    },
    onDetail() {
      // 详情
      postMessage({
        api: 'openCourseDetail',
        content: {
          type: 'pianoRoom',
          courseId: this.item?.courseId
        }
      })
    }
  },
  render() {
    const item: any = this.item
    return (
      <CellGroup class={styles.course} border={false}>
        <Cell
          center
          class={styles.courseItem}
          onClick={this.onDetail}
          v-slots={{
            title: () => (
              <div class={styles.courseTimer}>
                <img src={iconTimer} />
                <span>{this.timer}</span>
              </div>
            ),
            value: () => (
              <div class={styles.courseNum}>
                <span>{item.studentCount}人</span>
                <img
                  src={getAssetsHomeFile('icon_num.png')}
                  style={{ marginRight: '14px' }}
                />
                {this.operation ? (
                  <img
                    onClick={this.onJoinChat}
                    src={getAssetsHomeFile('icon_message.png')}
                  />
                ) : (
                  <span class={styles.munis}>-{item.consumTime}分钟</span>
                )}
              </div>
            )
          }}
        />
        <Cell>
          <div class={styles.courseInfo} onClick={this.onDetail}>
            <div class={styles.courseImg}>小课</div>
            <div class={styles.courseName}>
              <p class={styles.name}>{item.groupName}</p>
              <p>
                <span class={styles.subject}>{item.subjectName}</span>
              </p>
            </div>
            <Button
              type={item.status !== 'NOT_START' ? 'default' : 'primary'}
              round
              disabled
              size="small"
            >
              {courseType[item.status]}
            </Button>
          </div>
          {this.operation && (
            <Row class={styles.courseOperation}>
              <Col span={8} class="van-hairline--right">
                <span
                  onClick={() => {
                    this.onStudentAdjust(this.item)
                  }}
                >
                  学员调整
                </span>
              </Col>
              <Col span={8} class="van-hairline--right">
                <span
                  onClick={() => {
                    this.onTimeAdjust(this.item)
                  }}
                >
                  时间调整
                </span>
              </Col>
              <Col span={8}>
                <span
                  onClick={() => {
                    this.onCourseDelete(this.item)
                  }}
                >
                  删除课程
                </span>
              </Col>
            </Row>
          )}
        </Cell>
      </CellGroup>
    )
  }
})