selectPage.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view>
  3. <!-- 单词区 -->
  4. <selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
  5. <!-- 显示区 -->
  6. <selectTypesVue activeSelect="2"></selectTypesVue>
  7. <!-- 拼读区 -->
  8. <view>
  9. <view v-for="item in data.list">
  10. <view></view>
  11. </view>
  12. </view>
  13. <!-- 图片区 -->
  14. <view></view>
  15. <!-- 选择区 -->
  16. <view>
  17. <view>{{data.qa}}</view>
  18. <view>{{data.qb}}</view>
  19. <view>{{data.qc}}</view>
  20. <view>{{data.qd}}</view>
  21. </view>
  22. </view>
  23. </template>
  24. <script setup>
  25. import selectWordsVue from './selectWords.vue';
  26. import selectTypesVue from './selectTypes.vue';
  27. import {
  28. reactive,
  29. computed
  30. } from 'vue';
  31. const props = defineProps({
  32. activeWord: { // 单词数据
  33. type: Object,
  34. },
  35. activeWords: {
  36. type: Array
  37. },
  38. })
  39. const data = reactive({
  40. list: [],
  41. qa: null,
  42. qb: null,
  43. qc: null,
  44. qd: null,
  45. answer: null, // 已选项
  46. result: false, // 正确性
  47. })
  48. function handleSelect(d1) {
  49. data.answer = d1;
  50. }
  51. function checkIsRight() {
  52. if (data.answer == props.activeWord.value) {
  53. // 正确
  54. data.result = true;
  55. noticeBackDb()
  56. } else {
  57. data.result = false;
  58. }
  59. }
  60. function noticeBackDb() {
  61. }
  62. </script>
  63. <style>
  64. </style>