pet-front/otherPages/authentication/components/questionCard.vue

<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>