mainCard.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <selectTypesVue :activeSelect="currentIndex"></selectTypesVue>
  3. <swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
  4. @change="handleSwiperChange" :disable-touch="isPlaying">
  5. <swiper-item>
  6. <view class="swiper-item uni-bg-red">
  7. <xuePage :active-word="activeWord" :active-words="activeWords" @goXiangjie="goXiangjie"
  8. @play-audio="handlePlayAudio" :pageData="pageData"></xuePage>
  9. </view>
  10. </swiper-item>
  11. <swiper-item>
  12. <view class="swiper-item uni-bg-red">
  13. <pinPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
  14. </pinPageVue>
  15. </view>
  16. </swiper-item>
  17. <swiper-item>
  18. <view class="swiper-item uni-bg-blue">
  19. <readContent :active-word="activeWord" :pageData="pageData" @play-audio="handlePlayAudio"
  20. @luyinSuccess="luyinSuccess" :active-words="activeWords"></readContent>
  21. </view>
  22. </swiper-item>
  23. <swiper-item>
  24. <view class="swiper-item uni-bg-blue">
  25. <selectPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
  26. </selectPageVue>
  27. </view>
  28. </swiper-item>
  29. <swiper-item>
  30. <view class="swiper-item uni-bg-blue">
  31. <beiPageVue :active-word="activeWord" :pageData="pageData" :active-words="activeWords"
  32. @play-audio="handlePlayAudio"></beiPageVue>
  33. </view>
  34. </swiper-item>
  35. </swiper>
  36. <uni-popup ref="statusPopup" :animation="false" :is-mask-click="false"
  37. mask-background-color="rgba(51, 137, 217, 0.65);">
  38. <view class="ezy-image-dialog luyin">
  39. </view>
  40. </uni-popup>
  41. <audioRightWrongVue></audioRightWrongVue>
  42. </template>
  43. <script setup>
  44. import pinPageVue from './pinPage.vue';
  45. import selectPageVue from './selectPage.vue';
  46. import beiPageVue from './beiPage.vue';
  47. import readContent from './readContent.vue';
  48. import xuePage from './xuePage.vue';
  49. import audioRightWrongVue from "../components/audioRightWrong.vue";
  50. import selectTypesVue from './selectTypes.vue';
  51. import {
  52. ref,
  53. onMounted,
  54. onUnmounted
  55. } from 'vue';
  56. const props = defineProps({
  57. activeWord: {
  58. type: Object,
  59. },
  60. pageData: {
  61. type: Object,
  62. },
  63. activeWords: {
  64. type: Array
  65. },
  66. isPlaying: Boolean // 新增 isPlaying prop
  67. })
  68. const statusPopup = ref(null)
  69. const popupImage = ref('')
  70. const statusAudio = uni.createInnerAudioContext()
  71. const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])
  72. const currentIndex = ref(1)
  73. const luyinSuccess = (imagePath, text, audioPath) => {
  74. console.log('111111');
  75. showStatusPopup('', '录音成功!', '/static/mp3/newYingyu/right-tip.mp3')
  76. }
  77. const showStatusPopup = (imagePath, text, audioPath) => {
  78. console.log('audioPath', audioPath);
  79. // 播放音效
  80. statusAudio.stop()
  81. statusAudio.src = audioPath
  82. statusAudio.play()
  83. // 显示弹窗
  84. statusPopup.value.open()
  85. }
  86. function handleSwiperChange(e) {
  87. emits('swiper-change', e.detail.current)
  88. currentIndex.value = e.detail.current+1;
  89. }
  90. function handlePlayAudio({
  91. url,
  92. code
  93. }) {
  94. emits('play-audio', {
  95. url,
  96. code
  97. })
  98. }
  99. function goXiangjie() {
  100. emits('goXiangjie')
  101. }
  102. onMounted(() => {
  103. statusAudio.autoplay = false
  104. statusAudio.onEnded(() => {
  105. statusPopup.value.close()
  106. })
  107. })
  108. onUnmounted(() => {
  109. statusAudio.destroy()
  110. })
  111. </script>
  112. <style lang="scss" scoped>
  113. </style>