orchestra-app/src/views/mine-orchestra/my-class/index.tsx

import { Cell, Grid, GridItem, Image } from 'vant'
import { defineComponent, toRefs } from 'vue'
import styles from './index.module.less'
import iconTeacher from '@common/images/icon_teacher.png'
import iconMessage from '@common/images/icon-muit-message.png'
import { postMessage } from '@/helpers/native-message'
import { openDefaultWebView } from '../../../state'

export default defineComponent({
  name: 'my-orchestra',
  props: {
    list: {
      type: Object,
      default: () => []
    }
  },
  setup(props) {
    const onMessage = async (item: any) => {
      console.log(item)
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'multi', // single 单人 multi 多人
          id: item.imGroupId
        }
      })
    }
    const openClassDetail = (item: any) => {
      openDefaultWebView(`/classDetail?classId=${item.id}`)
    }
    const { list } = toRefs(props)
    return () => (
      <div class={styles.myClass}>
        {Array.isArray(list.value) &&
          list.value.map((item: any) => (
            <div class={styles.itemDiv} onClick={() => openClassDetail(item)}>
              <Cell center label={item.classGroupId}>
                {{
                  icon: () => (
                    <Image
                      src={item.teacherAvatar || iconTeacher}
                      class={styles.iconImg}
                      fit="cover"
                    />
                  ),
                  title: () => (
                    <div class={styles.content}>
                      <div class={['van-ellipsis', styles.teacherName]}>{item.teacherName}</div>
                      <div class={styles.tag}>{item.classGroupName}</div>
                    </div>
                  ),
                  value: () => (
                    <Image
                      class={styles.messageImg}
                      src={iconMessage}
                      onClick={(e: Event) => {
                        e.stopPropagation()
                        onMessage(item)
                      }}
                    />
                  )
                }}
              </Cell>
              <Grid border={false} columnNum={3} class={styles.grid}>
                <GridItem>
                  <p class={styles.title}>{item.preStudentNum || 0}</p>
                  <p class={styles.name}>学生人数</p>
                </GridItem>
                <GridItem>
                  <p class={[styles.title]}>{item.courseNum || 0}</p>
                  <p class={styles.name}>剩余课时</p>
                </GridItem>
                <GridItem>
                  <p class={styles.title}>{item.courseScheduleNum || 0}</p>
                  <p class={styles.name}>总课时</p>
                </GridItem>
              </Grid>
            </div>
          ))}
      </div>
    )
  }
})