123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- import { Grid, GridItem } from 'vant'
- import { defineComponent, PropType } from 'vue'
- import styles from './index.module.less'
- export default defineComponent({
- name: 'answer-list',
- props: {
- value: {
- type: Array,
- default: () => []
- },
- index: {
- type: Number,
- default: 0
- },
- lookType: {
- type: String as PropType<'ANSWER' | 'RESULT' | 'CLICK' | 'PRACTICE'>,
- default: 'ANSWER'
- },
- statusList: {
- type: Array,
- default: () => [
- {
- text: '已答',
- color: '#FF8057'
- },
- {
- text: '未答',
- color: '#EAEAEA'
- }
- ]
- },
- // 结果
- answerResult: {
- type: Array,
- default: () => []
- }
- },
- emits: ['select'],
- setup(props, { emit }) {
- console.log(props.lookType, 'lookType')
- /**
- * @description 检查用户是否答对
- * @returns Boolean
- */
- const formatUserResult = (id: string) => {
- let result = false
- props.answerResult.forEach((item: any) => {
- if (item.questionId === id) {
- result = item.rightFlag
- }
- })
- return result
- }
- return () => (
- <div class={styles.anserList}>
- {props.statusList.length > 0 && (
- <div class={styles.status}>
- {props.statusList.map((item: any) => (
- <span>
- <i style={{ backgroundColor: item.color }}></i>
- {item.text}
- </span>
- ))}
- </div>
- )}
- <div
- style={{
- maxHeight: '40vh',
- minHeight: '20vh',
- overflowX: 'auto'
- }}
- >
- <Grid class={styles.aList} columnNum={6} border={false}>
- {props.value.map((item: any, index: number) => (
- <GridItem onClick={() => emit('select', index)}>
- {/* 判断是否答题了 */}
- <span
- class={[
- props.lookType === 'ANSWER' &&
- item.userAnswer &&
- item.userAnswer.length > 0 &&
- styles.answered,
- props.lookType === 'RESULT' &&
- (formatUserResult(item.id) ? styles.yes : styles.no),
- props.lookType === 'CLICK' && index === props.index && styles.answered,
- props.lookType !== 'CLICK' && item.showAnalysis
- ? item.analysis.userResult
- ? styles.yes
- : styles.no
- : ''
- ]}
- >
- {index + 1}
- </span>
- </GridItem>
- ))}
- </Grid>
- </div>
- </div>
- )
- }
- })
|