You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
3.5 KiB
164 lines
3.5 KiB
<template>
|
|
<view class="mt32 question__view" :class="[props.mode]">
|
|
<view class="size-28 mb20 question">
|
|
{{ `${props.index + 1}、${props.data.question}` }}
|
|
</view>
|
|
<template v-if="props.mode === 'edit'">
|
|
<template v-if="props.data.options?.length">
|
|
<view class="size-28 option"
|
|
v-for="(option, oIdx) in props.data.options"
|
|
:key="`${props.index}-option-${oIdx}`"
|
|
:class="[value === option.value ? 'is-selected' : '']"
|
|
@click="onClick(option.value)"
|
|
>
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="textarea">
|
|
<textarea
|
|
v-model="value"
|
|
placeholder="请输入您的答案，不得低于700个字"
|
|
:rows="10"
|
|
></textarea>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="props.data.options?.length">
|
|
<view class="size-28 option"
|
|
v-for="(option, oIdx) in props.data.options"
|
|
:key="`${props.index}-option-${oIdx}`"
|
|
:class="[
|
|
props.data.answer === option.value ? 'is-correct' : '',
|
|
props.data.value === option.value ? 'is-error' : '',
|
|
]"
|
|
@click="onClick(option.value)"
|
|
>
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
|
|
|
|
<view class="icon icon-correct">
|
|
<up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon>
|
|
</view>
|
|
<view class="icon icon-error">
|
|
<up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="textarea">
|
|
<view>{{ props.data.value }}</view>
|
|
<view class="highlight">{{ props.data.reason }}</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
modelValue: {
|
|
type: String | Number,
|
|
default: null,
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'edit', // edit | display
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const value = computed({
|
|
set(val) {
|
|
emit('update:modelValue', val)
|
|
},
|
|
get() {
|
|
return props.modelValue
|
|
}
|
|
})
|
|
|
|
const onClick = (val) => {
|
|
value.value = val
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.question {
|
|
color: #000000;
|
|
}
|
|
|
|
.option {
|
|
background-color: #F3F3F3;
|
|
color: #707070;
|
|
line-height: 37rpx;
|
|
padding: 23rpx;
|
|
border-radius: 28rpx;
|
|
|
|
position: relative;
|
|
|
|
& + & {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
right: 45rpx;
|
|
bottom: 23rpx;
|
|
display: none;
|
|
|
|
}
|
|
}
|
|
|
|
.textarea {
|
|
background-color: #F3F3F3;
|
|
padding: 23rpx;
|
|
border-radius: 16rpx;
|
|
|
|
.highlight {
|
|
color: #FF2A2A;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.question__view.edit {
|
|
.option.is-selected {
|
|
background-color: rgba($color: #FFBF60, $alpha: 0.22);
|
|
color: #FFBF60;
|
|
}
|
|
}
|
|
|
|
.question__view.display {
|
|
.option {
|
|
&.is-correct {
|
|
background-color: rgba($color: #05C160, $alpha: 0.08);
|
|
color: #05C160;
|
|
|
|
.icon-correct {
|
|
display: block;
|
|
}
|
|
}
|
|
&.is-error {
|
|
background-color: rgba($color: #FFEBCE, $alpha: 0.36);
|
|
color: #FF2A2A;
|
|
|
|
.icon-error {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|