index.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { Grid, GridItem } from 'vant'
  2. import { defineComponent, PropType } from 'vue'
  3. import styles from './index.module.less'
  4. export default defineComponent({
  5. name: 'answer-list',
  6. props: {
  7. value: {
  8. type: Array,
  9. default: () => []
  10. },
  11. index: {
  12. type: Number,
  13. default: 0
  14. },
  15. lookType: {
  16. type: String as PropType<'ANSWER' | 'RESULT' | 'CLICK' | 'PRACTICE'>,
  17. default: 'ANSWER'
  18. },
  19. statusList: {
  20. type: Array,
  21. default: () => [
  22. {
  23. text: '已答',
  24. color: '#FF8057'
  25. },
  26. {
  27. text: '未答',
  28. color: '#EAEAEA'
  29. }
  30. ]
  31. },
  32. // 结果
  33. answerResult: {
  34. type: Array,
  35. default: () => []
  36. }
  37. },
  38. emits: ['select'],
  39. setup(props, { emit }) {
  40. console.log(props.lookType, 'lookType')
  41. /**
  42. * @description 检查用户是否答对
  43. * @returns Boolean
  44. */
  45. const formatUserResult = (id: string) => {
  46. let result = false
  47. props.answerResult.forEach((item: any) => {
  48. if (item.questionId === id) {
  49. result = item.rightFlag
  50. }
  51. })
  52. return result
  53. }
  54. return () => (
  55. <div class={styles.anserList}>
  56. {props.statusList.length > 0 && (
  57. <div class={styles.status}>
  58. {props.statusList.map((item: any) => (
  59. <span>
  60. <i style={{ backgroundColor: item.color }}></i>
  61. {item.text}
  62. </span>
  63. ))}
  64. </div>
  65. )}
  66. <div
  67. style={{
  68. maxHeight: '40vh',
  69. minHeight: '20vh',
  70. overflowX: 'auto'
  71. }}
  72. >
  73. <Grid class={styles.aList} columnNum={6} border={false}>
  74. {props.value.map((item: any, index: number) => (
  75. <GridItem onClick={() => emit('select', index)}>
  76. {/* 判断是否答题了 */}
  77. <span
  78. class={[
  79. props.lookType === 'ANSWER' &&
  80. item.userAnswer &&
  81. item.userAnswer.length > 0 &&
  82. styles.answered,
  83. props.lookType === 'RESULT' &&
  84. (formatUserResult(item.id) ? styles.yes : styles.no),
  85. props.lookType === 'CLICK' && index === props.index && styles.answered,
  86. props.lookType !== 'CLICK' && item.showAnalysis
  87. ? item.analysis.userResult
  88. ? styles.yes
  89. : styles.no
  90. : ''
  91. ]}
  92. >
  93. {index + 1}
  94. </span>
  95. </GridItem>
  96. ))}
  97. </Grid>
  98. </div>
  99. </div>
  100. )
  101. }
  102. })