orchestra-app/src/views/exercise-record/modals/detail-item.tsx

import { defineComponent, reactive, ref } from 'vue'
import styles from './detail-item.module.less'
import msgIcon from '@/school/images/msg-icon.png'
import sendmsgIcon from '@/school/images/sendmsg-icon.png'
import phoneIcon from '@/school/images/phone-icon.png'
import { Icon, ActionSheet } from 'vant'
import Image1 from '@/school/images/Image1.png'
import Image2 from '@/school/images/Image2.png'
import Image3 from '@/school/images/Image3.png'
import Image4 from '@/school/images/Image4.png'
import Image5 from '@/school/images/Image5.png'

const scoreInfos: any = {
  1: {
    img: Image1,
    tips: '你的演奏不太好，音准和完整性还需加强，再练一练吧～',
    mome: '敢于尝试'
  },
  2: {
    img: Image2,
    tips: '你的演奏还不熟练，音准和完整性还需加强，加紧训练才能有好成绩哦～',
    mome: '还要加油哦～'
  },
  3: {
    img: Image3,
    tips: '你的演奏还不流畅，音准和节奏还需加强，科学的练习才能更完美哦～',
    mome: '突破自我'
  },
  4: {
    img: Image4,
    tips: '你的演奏还不错，继续加油吧，加强音准，离完美就差一步啦～',
    mome: '崭露头角'
  },
  5: {
    img: Image5,
    tips: '你的演奏非常不错，音准的把握和节奏稍有瑕疵，完整性把握的很好~',
    mome: '你很棒'
  }
}
export default defineComponent({
  props: ['item'],
  name: 'detail-item',

  setup(props) {
    const getLeveByScoreId = (score?: string | number) => {
      if (!score && typeof score !== 'number') {
        return {}
      }
      let leve: any = 1
      if (score > 20 && score <= 40) {
        leve = 2
      } else if (score > 40 && score <= 60) {
        leve = 3
      } else if (score > 60 && score <= 80) {
        leve = 4
      } else if (score > 80) {
        leve = 5
      }
      return leve
    }
    const gotoDetail = () => {
      window.location.href =
        window.location.origin + `/orchestra-music-score/colexiu-report.html?id=${props.item.id}`

      // window.open()
    }
    return () => (
      <>
        <div>
          <div class={styles.itemWrap} onClick={gotoDetail}>
            <div class={styles.itemTop}>
              <div class={styles.itemTopLeft}>
                <p class={styles.itemTopMain}>{props.item.musicSheetName}</p>
                <p class={styles.itemTopSub}>{props.item.createTime}</p>
              </div>
              <div class={styles.itemTopRight}>
                <div class={styles.imgWrap}>
                  <img src={scoreInfos[getLeveByScoreId(props.item.score)].img} alt="" />
                </div>
                <Icon name="arrow" class={styles.imgIcon} />
              </div>
            </div>
            <div class={styles.itemBottom}>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain} style={{ color: '#F67146' }}>
                  {props.item.score} <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}> 综合得分</p>
              </div>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain}>
                  {props.item.intonation}
                  <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}>音准 </p>
              </div>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain}>
                  {props.item.cadence} <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}>节奏 </p>
              </div>
              <div class={styles.itemBottomDot}>
                <p class={styles.dotMain}>
                  {props.item.integrity} <span>分</span>{' '}
                </p>
                <p class={styles.dotSub}>完成度 </p>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})