mschool/src/views/lesson-list/detail-modal/index.tsx

import { PropType, defineComponent, reactive, watch } from 'vue';
import styles from './index.module.less';
import { Cell, Col, Icon, Image, Row } from 'vant';
import iconStudent from '@/common/images/icon-student-default.png';
import iconMember from '../images/icon-member.png';
import img1 from './images/1.png';
import img2 from './images/2.png';
import img3 from './images/3.png';
import MEmpty from '@/components/m-empty';

export default defineComponent({
  name: 'detail-modal',
  props: {
    type: {
      type: String as PropType<'proctice' | 'evaluating'>,
      default: 'proctice'
    },
    title: {
      type: String,
      default: '学员练习详情'
    },
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const forms = reactive({
      detail: props.detail
    });

    watch(
      () => props.detail,
      () => {
        forms.detail = props.detail;
      }
    );
    return () => (
      <div class={styles.details}>
        <div class={styles.content}>
          <div class={styles.title}>{props.title}</div>

          <Cell center class={styles.userCell}>
            {{
              icon: () => (
                <div class={styles.iconGroup}>
                  <Image
                    src={forms.detail.avatar || iconStudent}
                    class={styles.iconStudent}
                    fit="cover"
                  />
                  {forms.detail.memberFlag && (
                    <Icon name={iconMember} class={styles.iconMember} />
                  )}
                </div>
              ),
              title: () => (
                <div class={styles.userInfo}>
                  <p class={styles.name}>{forms.detail.username}</p>
                  <span>{forms.detail.subjectName}</span>
                </div>
              ),
              value: () =>
                props.type === 'proctice' ? (
                  <div
                    class={[
                      styles.after,
                      forms.detail.finishFlag ? styles.success : styles.error
                    ]}>
                    {forms.detail.finishFlag ? '完成' : '未完成'}
                  </div>
                ) : (
                  <div
                    class={[
                      styles.after,
                      forms.detail.trainingScore >= 60
                        ? styles.success
                        : styles.error
                    ]}>
                    {forms.detail.trainingScore || '--'}分
                  </div>
                )
            }}
          </Cell>

          <div class={styles.tables}>
            {props.type === 'proctice' ? (
              <>
                <Row class={styles.thead}>
                  <Col span={12} class={styles.col1}>
                    练习曲目
                  </Col>
                  <Col span={6} class={styles.col2}>
                    练习速度
                  </Col>
                  <Col span={6} class={styles.col3}>
                    次数/总计
                  </Col>
                </Row>
                <div class={styles.tContainer}>
                  {forms.detail.list.map((item: any) => (
                    <Row class={[styles.tbody, 'van-hairline--top']}>
                      <Col span={12} class={styles.col1}>
                        {item.musicScoreName}
                      </Col>
                      <Col span={6} class={styles.col2}>
                        <span class={styles.success}>{item.trainingSpeed}</span>
                        速度
                      </Col>
                      <Col span={6} class={styles.col3}>
                        <span
                          class={
                            item.trainingTimes < item.times
                              ? styles.error
                              : styles.success
                          }>
                          {item.trainingTimes}
                        </span>
                        /{item.times}次
                      </Col>
                    </Row>
                  ))}
                  {forms.detail.list.length <= 0 && (
                    <MEmpty
                      description="暂无练习"
                      style={{ paddingBottom: 0 }}
                    />
                  )}
                </div>
              </>
            ) : (
              <>
                <Row class={styles.thead}>
                  <Col span={12} class={styles.col1}>
                    评测曲目
                  </Col>
                  <Col span={6} class={styles.col2}>
                    难度
                  </Col>
                  <Col span={6} class={styles.col3}>
                    得分/达标
                  </Col>
                </Row>
                <div class={styles.tContainer}>
                  {forms.detail.list.map((item: any) => (
                    <Row class={[styles.tbody, 'van-hairline--top']}>
                      <Col span={12} class={styles.col1}>
                        {item.musicScoreName}
                      </Col>
                      <Col span={6} class={styles.col2}>
                        {item.heardLevel === 'BEGINNER' && (
                          <img src={img1} class={styles.img} />
                        )}
                        {item.heardLevel === 'ADVANCED' && (
                          <img src={img2} class={styles.img} />
                        )}
                        {item.heardLevel === 'PERFORMER' && (
                          <img src={img3} class={styles.img} />
                        )}
                      </Col>
                      <Col span={6} class={styles.col3}>
                        <span
                          class={
                            item.actualAvgScore < item.standardScore
                              ? styles.error
                              : styles.error
                          }>
                          {item.actualAvgScore || '--'}
                        </span>
                        /{item.standardScore}分
                      </Col>
                    </Row>
                  ))}

                  {forms.detail.list.length <= 0 && (
                    <MEmpty
                      description="暂无评测"
                      style={{ paddingBottom: 0 }}
                    />
                  )}
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    );
  }
});