Ver código fonte

Merge branch '2025鹅状元dev' of https://gogs.mtavip.com/wangguoyu/uniProject into 2025鹅状元dev

tanxue 1 mês atrás
pai
commit
2c17a62e0c

+ 18 - 12
pages/newEnglish/components/mainCard.vue

@@ -1,6 +1,6 @@
 <template>
-  <selectTypesVue :activeSelect="currentIndex"></selectTypesVue>
-	<swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
+	<selectTypesVue :activeSelect="currentIndex" @change="onChange"></selectTypesVue>
+	<swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false" :current="+currentIndex-1"
 		@change="handleSwiperChange" :disable-touch="isPlaying">
 		<swiper-item>
 			<view class="swiper-item uni-bg-red">
@@ -40,7 +40,7 @@
 		</view>
 	</uni-popup>
 
-  <audioRightWrongVue></audioRightWrongVue>
+	<audioRightWrongVue></audioRightWrongVue>
 </template>
 
 <script setup>
@@ -49,13 +49,13 @@
 	import beiPageVue from './beiPage.vue';
 	import readContent from './readContent.vue';
 	import xuePage from './xuePage.vue';
-  import audioRightWrongVue from "../components/audioRightWrong.vue";
-  import selectTypesVue from './selectTypes.vue';
-	import {
-		ref,
-		onMounted,
-		onUnmounted
-	} from 'vue';
+	import audioRightWrongVue from "../components/audioRightWrong.vue";
+	import selectTypesVue from './selectTypes.vue';
+  import {
+    ref,
+    onMounted,
+    onUnmounted, nextTick
+  } from 'vue';
 	const props = defineProps({
 		activeWord: {
 			type: Object,
@@ -72,7 +72,8 @@
 	const popupImage = ref('')
 	const statusAudio = uni.createInnerAudioContext()
 	const emits = defineEmits(['play-audio', 'goXiangjie', 'swiper-change'])
-  const currentIndex = ref(1)
+	const currentIndex = ref(0)
+  const mySwiperRef = ref(null);
 
 
 	const luyinSuccess = (imagePath, text, audioPath) => {
@@ -94,7 +95,12 @@
 
 	function handleSwiperChange(e) {
 		emits('swiper-change', e.detail.current)
-    currentIndex.value = e.detail.current+1;
+		currentIndex.value = e.detail.current + 1;
+	}
+
+	function onChange(code) {
+    console.log('code',code)
+    currentIndex.value = (code + 1)
 	}
 
 	function handlePlayAudio({

+ 12 - 6
pages/newEnglish/components/selectTypes.vue

@@ -1,24 +1,30 @@
 <template>
 	<view class="select-types-box">
-		<view class="types-item" :class="{active: activeSelect == 1}">学</view>
+		<view class="types-item" :class="{active: activeSelect == 1}" @click="handleClick(0)">学</view>
 		<icon class="jt-item" :class="{active: activeSelect == 1}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 2}">拼</view>
+		<view class="types-item" :class="{active: activeSelect == 2}" @click="handleClick(1)">拼</view>
 		<icon class="jt-item" :class="{active: activeSelect == 2}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 3}">读</view>
+		<view class="types-item" :class="{active: activeSelect == 3}" @click="handleClick(2)">读</view>
 		<icon class="jt-item" :class="{active: activeSelect == 3}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 4}">选</view>
+		<view class="types-item" :class="{active: activeSelect == 4}" @click="handleClick(3)">选</view>
 		<icon class="jt-item" :class="{active: activeSelect == 4}"></icon>
-		<view class="types-item" :class="{active: activeSelect == 5}">背</view>
+		<view class="types-item" :class="{active: activeSelect == 5}" @click="handleClick(4)">背</view>
 	</view>
 </template>
 
 <script setup>
 	defineProps({
 		activeSelect: {
-			type: String,
+			type: [String,Number],
 			required: true
 		}
 	})
+	
+	const emits = defineEmits(['change'])
+	
+	function handleClick(code) {
+		emits('change',code)
+	}
 </script>
 
 <style lang="scss" scoped>

+ 1 - 1
pages/newEnglish/components/useAudio.js

@@ -16,7 +16,7 @@ audioContext = uni.createInnerAudioContext(); // 单例模式[3](@ref)
 audioContext.onEnded(() => {
 	// console.log('触发播放结束')
 	// 播放结束
-	uni.$emit('danci-audio-ended')
+	uni.$emit('danci-audio-ended', code)
 })
 audioContext.onPlay(() => {
 	// 播放

+ 76 - 0
pages/newEnglish/components/useYinbiao.js

@@ -0,0 +1,76 @@
+import {ref} from "vue"
+import {
+    audioPlayer,
+    useAudioCache,
+} from "./useAudio.js";
+
+export function useYinBiaoAutoPlay () {
+    const AudioP = new audioPlayer();
+    const {
+        cacheAudio,
+    } = useAudioCache();
+
+    const current = ref(0);
+    const list = ref([]);
+    let code = null;
+    const isAutoPlaying = ref(false);
+
+    async function handlePlay() {
+        isAutoPlaying.value = true;
+        code = new Date().getTime();
+        const activeYin = {
+            url: list.value[current.value].yinpin,
+            code
+        }
+        const cachedPath = await cacheAudio(activeYin.url);
+        if (cachedPath && cachedPath.includes('.mp3')) {
+            AudioP.play(cachedPath, code);
+        } else {
+            uni.showToast({
+                title: '音频加载失败',
+                icon: 'none'
+            });
+            isAutoPlaying.value = false;
+        }
+    }
+
+    function initListen() {
+        uni.$on('danci-audio-ended', (mCode) => {
+
+            if (code !== mCode) {
+                isAutoPlaying.value = false;
+                return;
+            }
+
+            if (current.value<list.value.length-1) {
+                current.value = current.value+1;
+                // 继续播放第二音频
+                handlePlay();
+            } else {
+                // 播放结束
+                isAutoPlaying.value = false;
+            }
+        })
+    }
+
+    function removeListen() {
+
+        uni.$off('danci-audio-ended')
+    }
+
+
+    function playYinbiaoAuto(clist) {
+        current.value = 0
+        list.value = clist;
+        // 执行首次播放
+        handlePlay();
+    }
+
+    // 初始化首次监听
+    initListen();
+    return {
+        playYinbiaoAuto,
+        isAutoPlaying,
+        removeListen
+    }
+}

+ 14 - 0
pages/newEnglish/components/xuePage.vue

@@ -88,6 +88,7 @@
 	import {
 		reactive,
 		computed,
+    onUnmounted
 	} from 'vue';
 	import {
 		getUserIdentity,
@@ -97,7 +98,9 @@
 		audioPlayer,
 		useAudioCache
 	} from './useAudio.js';
+  import {useYinBiaoAutoPlay} from "./useYinbiao.js"
 
+  const { playYinbiaoAuto,isAutoPlaying,removeListen } = useYinBiaoAutoPlay();
 	const emits = defineEmits(['play-audio', 'goXiangjie'])
 	const userCode = getUserIdentity();
 	const {
@@ -105,6 +108,9 @@
 		clearAudioCache
 	} = useAudioCache();
 
+  onUnmounted(() => {
+    removeListen();
+  })
 
 	const data = reactive({
 		isPlaying: false,
@@ -140,11 +146,19 @@
 	}
 
 	function handlePindu() {
+    // 自动播放中不允许切换
+    if (isAutoPlaying.value) return
+    if (data.isPindu) return
 		data.isPindu = true
+    playYinbiaoAuto(props.activeWord.pindu)
 	}
 
 	function handleYinjie() {
+    // 自动播放中不允许切换
+    if (isAutoPlaying.value) return
+    if (!data.isPindu) return
 		data.isPindu = false
+    playYinbiaoAuto(props.activeWord.yinjie)
 	}
 
 	function goXiangjie() {