uni-points.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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">{{data.jifen}}</view>
  8. </view>
  9. <view class="score-btn-box">
  10. <view @click="checkAnswer" class="ckst-btn"></view>
  11. <view @click="goStudyContinue" v-if="showContinue" class="jxxx-btn"></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. showContinue: {
  23. type: Boolean,
  24. default: true
  25. }
  26. })
  27. const popupRef = ref(null)
  28. const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】
  29. const emits = defineEmits(['checkAnswer', 'goStudy']);
  30. const data = reactive({
  31. right: 0,
  32. wrong: 0,
  33. jifen: 0
  34. })
  35. // 切换成绩
  36. function showPopup({
  37. right,
  38. wrong,
  39. jifen
  40. }) {
  41. data.right = right;
  42. data.wrong = wrong;
  43. data.jifen = jifen;
  44. popupRef.value.open()
  45. }
  46. function closePopup() {
  47. popupRef.value.close()
  48. }
  49. // 查看答案
  50. function checkAnswer() {
  51. emits('checkAnswer');
  52. closePopup();
  53. }
  54. // 继续学习
  55. function goStudyContinue() {
  56. emits('goStudy');
  57. closePopup();
  58. }
  59. defineExpose({
  60. showPopup
  61. })
  62. </script>
  63. <style>
  64. </style>