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

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