uni-points.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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" 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 popupRef = ref(null)
  22. const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】
  23. const emits = defineEmits(['checkAnswer', 'goStudy']);
  24. const data = reactive({
  25. right: 0,
  26. wrong: 0,
  27. jifen: 0
  28. })
  29. // 切换成绩
  30. function showPopup({
  31. right,
  32. wrong,
  33. jifen
  34. }) {
  35. data.right = right;
  36. data.wrong = wrong;
  37. data.jifen = jifen;
  38. popupRef.value.open()
  39. }
  40. function closePopup() {
  41. popupRef.value.close()
  42. }
  43. // 查看答案
  44. function checkAnswer() {
  45. emits('checkAnswer');
  46. closePopup();
  47. }
  48. // 继续学习
  49. function goStudyContinue() {
  50. emits('goStudy');
  51. closePopup();
  52. }
  53. defineExpose({
  54. showPopup
  55. })
  56. </script>
  57. <style>
  58. </style>