|
@@ -1,79 +1,117 @@
|
|
<template>
|
|
<template>
|
|
- <swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
|
|
|
|
- @change="handleSwiperChange" :disable-touch="isPlaying">
|
|
|
|
- <swiper-item>
|
|
|
|
- <view class="swiper-item uni-bg-red">
|
|
|
|
- <xuePage :active-word="activeWord" :active-words="activeWords" @goXiangjie="goXiangjie"
|
|
|
|
- @play-audio="handlePlayAudio" :pageData="pageData"></xuePage>
|
|
|
|
- </view>
|
|
|
|
- </swiper-item>
|
|
|
|
- <swiper-item>
|
|
|
|
- <view class="swiper-item uni-bg-red">
|
|
|
|
- <pinPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
|
|
|
|
- </pinPageVue>
|
|
|
|
- </view>
|
|
|
|
- </swiper-item>
|
|
|
|
- <swiper-item>
|
|
|
|
- <view class="swiper-item uni-bg-blue">
|
|
|
|
- <readContent :active-word="activeWord" :pageData="pageData" @play-audio="handlePlayAudio"
|
|
|
|
- :active-words="activeWords"></readContent>
|
|
|
|
- </view>
|
|
|
|
- </swiper-item>
|
|
|
|
- <swiper-item>
|
|
|
|
- <view class="swiper-item uni-bg-blue">
|
|
|
|
- <selectPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
|
|
|
|
- </selectPageVue>
|
|
|
|
- </view>
|
|
|
|
- </swiper-item>
|
|
|
|
- <swiper-item>
|
|
|
|
- <view class="swiper-item uni-bg-blue">
|
|
|
|
- <beiPageVue :active-word="activeWord" :pageData="pageData" :active-words="activeWords"
|
|
|
|
- @play-audio="handlePlayAudio"></beiPageVue>
|
|
|
|
- </view>
|
|
|
|
- </swiper-item>
|
|
|
|
- </swiper>
|
|
|
|
|
|
+ <swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
|
|
|
|
+ @change="handleSwiperChange" :disable-touch="isPlaying">
|
|
|
|
+ <swiper-item>
|
|
|
|
+ <view class="swiper-item uni-bg-red">
|
|
|
|
+ <xuePage :active-word="activeWord" :active-words="activeWords" @goXiangjie="goXiangjie"
|
|
|
|
+ @play-audio="handlePlayAudio" :pageData="pageData"></xuePage>
|
|
|
|
+ </view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ <swiper-item>
|
|
|
|
+ <view class="swiper-item uni-bg-red">
|
|
|
|
+ <pinPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
|
|
|
|
+ </pinPageVue>
|
|
|
|
+ </view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ <swiper-item>
|
|
|
|
+ <view class="swiper-item uni-bg-blue">
|
|
|
|
+ <readContent :active-word="activeWord" :pageData="pageData" @play-audio="handlePlayAudio"
|
|
|
|
+ @luyinSuccess="luyinSuccess" :active-words="activeWords"></readContent>
|
|
|
|
+ </view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ <swiper-item>
|
|
|
|
+ <view class="swiper-item uni-bg-blue">
|
|
|
|
+ <selectPageVue :active-word="activeWord" :active-words="activeWords" @play-audio="handlePlayAudio">
|
|
|
|
+ </selectPageVue>
|
|
|
|
+ </view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ <swiper-item>
|
|
|
|
+ <view class="swiper-item uni-bg-blue">
|
|
|
|
+ <beiPageVue :active-word="activeWord" :pageData="pageData" :active-words="activeWords"
|
|
|
|
+ @play-audio="handlePlayAudio"></beiPageVue>
|
|
|
|
+ </view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
|
|
+
|
|
|
|
+ <uni-popup ref="statusPopup" :animation="false" :is-mask-click="false"
|
|
|
|
+ mask-background-color="rgba(51, 137, 217, 0.95);">
|
|
|
|
+ <view class="ezy-image-dialog luyin">
|
|
|
|
+ </view>
|
|
|
|
+ </uni-popup>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
- import pinPageVue from './pinPage.vue';
|
|
|
|
- import selectPageVue from './selectPage.vue';
|
|
|
|
- import beiPageVue from './beiPage.vue';
|
|
|
|
- import readContent from './readContent.vue';
|
|
|
|
- import xuePage from './xuePage.vue';
|
|
|
|
- import {
|
|
|
|
- ref
|
|
|
|
- } from 'vue';
|
|
|
|
- const props = defineProps({
|
|
|
|
- activeWord: {
|
|
|
|
- type: Object,
|
|
|
|
- },
|
|
|
|
- pageData: {
|
|
|
|
- type: Object,
|
|
|
|
- },
|
|
|
|
- activeWords: {
|
|
|
|
- type: Array
|
|
|
|
- },
|
|
|
|
- isPlaying: Boolean // 新增 isPlaying prop
|
|
|
|
- })
|
|
|
|
- const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])
|
|
|
|
|
|
+ import pinPageVue from './pinPage.vue';
|
|
|
|
+ import selectPageVue from './selectPage.vue';
|
|
|
|
+ import beiPageVue from './beiPage.vue';
|
|
|
|
+ import readContent from './readContent.vue';
|
|
|
|
+ import xuePage from './xuePage.vue';
|
|
|
|
+ import {
|
|
|
|
+ ref,
|
|
|
|
+ onMounted,
|
|
|
|
+ onUnmounted
|
|
|
|
+ } from 'vue';
|
|
|
|
+ const props = defineProps({
|
|
|
|
+ activeWord: {
|
|
|
|
+ type: Object,
|
|
|
|
+ },
|
|
|
|
+ pageData: {
|
|
|
|
+ type: Object,
|
|
|
|
+ },
|
|
|
|
+ activeWords: {
|
|
|
|
+ type: Array
|
|
|
|
+ },
|
|
|
|
+ isPlaying: Boolean // 新增 isPlaying prop
|
|
|
|
+ })
|
|
|
|
+ const statusPopup = ref(null)
|
|
|
|
+ const popupImage = ref('')
|
|
|
|
+ const statusAudio = uni.createInnerAudioContext()
|
|
|
|
+ const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ const luyinSuccess = (imagePath, text, audioPath) => {
|
|
|
|
+ console.log('111111');
|
|
|
|
+ showStatusPopup('', '录音成功!', '/static/mp3/newYingyu/right-tip.mp3')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const showStatusPopup = (imagePath, text, audioPath) => {
|
|
|
|
+ console.log('audioPath', audioPath);
|
|
|
|
+ // 播放音效
|
|
|
|
+ statusAudio.stop()
|
|
|
|
+ statusAudio.src = audioPath
|
|
|
|
+ statusAudio.play()
|
|
|
|
+
|
|
|
|
+ // 显示弹窗
|
|
|
|
+ statusPopup.value.open()
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
- function handleSwiperChange(e) {
|
|
|
|
- emits('swiper-change', e.detail.current)
|
|
|
|
- }
|
|
|
|
|
|
+ function handleSwiperChange(e) {
|
|
|
|
+ emits('swiper-change', e.detail.current)
|
|
|
|
+ }
|
|
|
|
|
|
- function handlePlayAudio({
|
|
|
|
- url,
|
|
|
|
- code
|
|
|
|
- }) {
|
|
|
|
- emits('play-audio', {
|
|
|
|
- url,
|
|
|
|
- code
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
|
|
+ function handlePlayAudio({
|
|
|
|
+ url,
|
|
|
|
+ code
|
|
|
|
+ }) {
|
|
|
|
+ emits('play-audio', {
|
|
|
|
+ url,
|
|
|
|
+ code
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
|
|
- function goXiangjie() {
|
|
|
|
- emits('goXiangjie')
|
|
|
|
- }
|
|
|
|
|
|
+ function goXiangjie() {
|
|
|
|
+ emits('goXiangjie')
|
|
|
|
+ }
|
|
|
|
+ onMounted(() => {
|
|
|
|
+ statusAudio.autoplay = false
|
|
|
|
+ statusAudio.onEnded(() => {
|
|
|
|
+ statusPopup.value.close()
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ onUnmounted(() => {
|
|
|
|
+ statusAudio.destroy()
|
|
|
|
+ })
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|