uni-points.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
  3. mask-background-color="rgba(255, 255, 255, 0.6);">
  4. <view class="exam-score-dialog">
  5. <view class="score-content-box">
  6. <view>答对:<text class="text-red">{{data.right}}</text>题 答错:<text class="text-red">{{data.wrong}}</text>题</view>
  7. <view class="text-score" v-if="!studyFlag">{{data.jifen}}</view>
  8. </view>
  9. <view class="score-btn-box">
  10. <view @click="checkAnswer" class="ckst-btn"></view>
  11. <view @click="goStudyContinue" class="jxxx-btn" v-if="isLastZhang"></view>
  12. </view>
  13. </view>
  14. </uni-popup>
  15. </template>
  16. <script setup>
  17. import {
  18. ref,
  19. reactive
  20. } from "vue"
  21. const props = defineProps({
  22. isLastZhang: {
  23. type: Boolean,
  24. default: true
  25. },
  26. // 当前是否已答过试题 0未答,1已答
  27. studyFlag: {
  28. type: Number,
  29. default: 0
  30. }
  31. })
  32. const popupRef = ref(null)
  33. const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】
  34. const emits = defineEmits(['checkAnswer', 'goStudy']);
  35. const data = reactive({
  36. right: 0,
  37. wrong: 0,
  38. jifen: 0
  39. })
  40. // 切换成绩
  41. function showPopup({
  42. right,
  43. wrong,
  44. jifen
  45. }) {
  46. data.right = right;
  47. data.wrong = wrong;
  48. data.jifen = jifen;
  49. popupRef.value.open()
  50. }
  51. function closePopup() {
  52. popupRef.value.close()
  53. }
  54. // 查看答案
  55. function checkAnswer() {
  56. emits('checkAnswer');
  57. closePopup();
  58. }
  59. // 继续学习
  60. function goStudyContinue() {
  61. emits('goStudy');
  62. closePopup();
  63. }
  64. defineExpose({
  65. showPopup
  66. })
  67. </script>
  68. <style>
  69. </style>