orchestra-app/src/views/unit-test/model/play-question/index.tsx

import { Tag, Image, Button, Cell, Icon } from 'vant'
import { defineComponent, nextTick, onMounted, PropType, reactive } from 'vue'
import styles from './index.module.less'
import deepClone from '@/helpers/deep-clone'
import iconSong from '../../images/icon-song.png'

// 单选和多选题
export default defineComponent({
  name: 'choice-question',
  props: {
    value: {
      type: [String, Number, Array],
      default: ''
    },
    answers: {
      type: Object,
      default: {}
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const state = reactive({
      list: [] as any
    })

    // const onSelect = (item: any) => {
    //   if (props.type === 'checkbox') {
    //     // 判断是否已选过
    //     const value: any = props.value
    //     if (value.includes(item.index)) {
    //       const index = value.findIndex((v: any) => v === item.index)
    //       value.splice(index, 1)
    //       emit('update:value', [...value])
    //     } else {
    //       emit('update:value', [item.index, ...value])
    //     }
    //   } else {
    //     emit('update:value', item.index)
    //   }
    // }
    return () => (
      <div class={styles.unitSubject}>
        <div class={styles.unitSubjectTitle}>
          4、请点击以下曲目进行评测，评测分数达到80分合格
          <span class={styles.unitScore}>（5分）</span>
          <Tag type="primary">演奏题</Tag>
        </div>
        <div class={styles.unitTitleSection}>
          <Image
            class={styles.unitTitleImg}
            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png"
          />
        </div>

        <div class={[styles.unitAnswers]}>
          <Cell class={styles.playSection} center titleClass={['van-ellipsis', styles.playTitle]}>
            {{
              icon: () => <Image class={styles.img} src={iconSong} />,
              title: () => <>没开机三江源没开机三江源</>,
              value: () => (
                <Button round class={styles.playBtn} type="primary">
                  点击评测
                  <Icon name="play" />
                </Button>
              )
            }}
          </Cell>
          <div class={['van-hairline--top', styles.unitScoreNum]}>
            <div class={styles.score}>89</div>
            <div class={styles.scoreTitle}>评测分数</div>
            <div class={styles.scoreTips}>多次评测取完整评测的最高分数</div>
          </div>
        </div>
      </div>
    )
  }
})