猫妈狗爸伴宠师小程序前端代码
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.

184 lines
4.0 KiB

  1. <template>
  2. <view class="mt32 question__view" :class="[props.mode]">
  3. <view class="size-28 mb20 question">
  4. {{ props.data.title }}
  5. <!-- {{ `${props.index + 1}${props.data.title}` }} -->
  6. </view>
  7. <template v-if="props.mode === 'edit'">
  8. <template v-if="props.data.options?.length">
  9. <view class="size-28 option"
  10. v-for="(option, oIdx) in props.data.options"
  11. :key="`${props.index}-option-${oIdx}`"
  12. :class="[value === option.id ? 'is-selected' : '']"
  13. @click="onChange(option.id)"
  14. >
  15. {{ option.title }}
  16. <!-- {{ `${String.fromCharCode(65 + oIdx)}${option.label}` }} -->
  17. </view>
  18. </template>
  19. <template v-else>
  20. <view class="textarea">
  21. <textarea
  22. v-model="value"
  23. placeholder="请输入您的答案,不得低于700个字"
  24. :rows="10"
  25. @blur="onChange($event.detail.value)"
  26. ></textarea>
  27. </view>
  28. </template>
  29. </template>
  30. <template v-else>
  31. <template v-if="props.data.options?.length">
  32. <view class="size-28 option"
  33. v-for="(option, oIdx) in props.data.options"
  34. :key="`${props.index}-option-${oIdx}`"
  35. :class="[
  36. props.data.answer === option.id ? 'is-correct' : '',
  37. props.data.value === option.id && props.data.answer !== option.id ? 'is-error' : '',
  38. ]"
  39. >
  40. {{ option.title }}
  41. <!-- {{ `${String.fromCharCode(65 + oIdx)}${option.label}` }} -->
  42. <view class="icon icon-correct">
  43. <up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon>
  44. </view>
  45. <view class="icon icon-error">
  46. <up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon>
  47. </view>
  48. </view>
  49. </template>
  50. <template v-else>
  51. <view class="textarea">
  52. <view>{{ props.data.value }}</view>
  53. <view class="highlight">{{ props.data.answer }}</view>
  54. </view>
  55. </template>
  56. </template>
  57. </view>
  58. </template>
  59. <script setup>
  60. import { computed, watch } from 'vue'
  61. import { addBaseAnswer, addTrainAnswer } from '@/api/examination'
  62. const props = defineProps({
  63. index: {
  64. type: Number,
  65. default: null,
  66. },
  67. data: {
  68. type: Object,
  69. default() {
  70. return {}
  71. }
  72. },
  73. modelValue: {
  74. type: String | Number,
  75. default: null,
  76. },
  77. mode: {
  78. type: String,
  79. default: 'edit', // edit | display
  80. },
  81. type: {
  82. type: String,
  83. default: null, // '基本' | '培训'
  84. }
  85. })
  86. const emit = defineEmits(['update:modelValue'])
  87. const value = computed({
  88. set(val) {
  89. emit('update:modelValue', val)
  90. },
  91. get() {
  92. return props.modelValue
  93. }
  94. })
  95. const onChange = (val) => {
  96. value.value = val
  97. console.log('--onChange', val)
  98. const data = {
  99. questionId: props.data.id,
  100. }
  101. if (props.type === '基本') {
  102. data.answerId = val
  103. addBaseAnswer(data)
  104. } else if (props.type === '培训') {
  105. data.answer = val
  106. addTrainAnswer(data)
  107. }
  108. }
  109. </script>
  110. <style lang="scss" scoped>
  111. .question {
  112. color: #000000;
  113. }
  114. .option {
  115. background-color: #F3F3F3;
  116. color: #707070;
  117. line-height: 37rpx;
  118. padding: 23rpx;
  119. border-radius: 28rpx;
  120. position: relative;
  121. & + & {
  122. margin-top: 20rpx;
  123. }
  124. .icon {
  125. position: absolute;
  126. right: 45rpx;
  127. bottom: 23rpx;
  128. display: none;
  129. }
  130. }
  131. .textarea {
  132. background-color: #F3F3F3;
  133. padding: 23rpx;
  134. border-radius: 16rpx;
  135. .highlight {
  136. color: #FF2A2A;
  137. font-size: 28rpx;
  138. }
  139. }
  140. .question__view.edit {
  141. .option.is-selected {
  142. background-color: rgba($color: #FFBF60, $alpha: 0.22);
  143. color: #FFBF60;
  144. }
  145. }
  146. .question__view.display {
  147. .option {
  148. &.is-correct {
  149. background-color: rgba($color: #05C160, $alpha: 0.08);
  150. color: #05C160;
  151. .icon-correct {
  152. display: block;
  153. }
  154. }
  155. &.is-error {
  156. background-color: rgba($color: #FFEBCE, $alpha: 0.36);
  157. color: #FF2A2A;
  158. .icon-error {
  159. display: block;
  160. }
  161. }
  162. }
  163. }
  164. </style>