uniProject/pages/newEnglish/components/xuePage.vue

<template>
	<view>
		<selectTypesVue activeSelect="1"></selectTypesVue>
		<!-- 单词区 -->
		<view>
			<view v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</view>
		</view>
		<!-- 纯显示 -->
		<view>
			<view v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</view>
		</view>
		<!-- 音标区 -->
		<view>
			<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
			<!-- 音频播放 -->
			<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
		</view>
		<!-- 注释区 -->
		<view>
			<view v-for="item in activeWord.xiangyi" :key="item">{{item}}</view>
		</view>
		<!-- 详解触发 -->
		<view @click="goXiangjie">
			详解>
		</view>
		<!-- 音标拆分区 -->
		<view v-if="data.isPindu">
			<!-- pindu -->
			<audioThreeVue v-for="(item,index) in activeWord.pindu" :key="index" :YItem="item" @play-audio="handlePlay"></audioThreeVue>
		</view>
		<view v-else>
			<!-- yinjie -->
			<audioFourVue v-for="(item,index) in activeWord.yinjie" :key="index" :YItem="item" @play-audio="handlePlay"></audioFourVue>
		</view>

		<!-- 音标按钮 -->
		<view>
			<view :class="{active: data.isPindu}" @click="handlePindu">自然拼读</view>
			<view :class="{active: !data.isPindu}" @click="handleYinjie">音节拆分</view>
		</view>
		<!-- 词根+实用口语 -->
		<view v-if="activeWord.cigenzhuji.length">
			<view v-for="(item,index) in activeWord.cigenzhuji" :key="index"> 
				<view>
					<view>{{item.en}}</view>
					<view>{{item.zn}}</view>
				</view>
				<view v-if="index<activeWord.cigenzhuji.length-2">+</view>
				<view v-if="index == activeWord.cigenzhuji.length - 2">=</view>
			</view>
		</view>
		<!-- 实用语句 -->
		<view>
			<view v-for="(item,index) in activeWord.kouyu" :key="index">
				<view>{{item.en}}</view>
				<view>{{item.zn}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import selectTypesVue from './selectTypes.vue';
	import audioTwoVue from './audioTwo.vue';
	import audioThreeVue from './audioThree.vue';
	import audioFourVue from './audioFour.vue';
	import yinbiaoTxtVue from "./yinbiaoTxt.vue"
	import {
		reactive,
		computed,
	} from 'vue';
	import {
		getUserIdentity,
	} from "@/utils/common.js"
	import * as httpApi from "@/api/word.js"
	import {
		audioPlayer,
		useAudioCache
	} from './useAudio.js';

	const emits = defineEmits(['play-audio'])

	const {
		cacheAudio,
		clearAudioCache
	} = useAudioCache();


	const data = reactive({
		isPlaying:false,
		isPindu:true,
	})

	const userCode = getUserIdentity();

	const props = defineProps({
		activeWord: { // 单词数据
			type: Object,
		},
		activeWords: {
			type: Array
		},
		pageData: {
			type: Object,
		},
	})

	
	async function handlePlay(opt) {
		emits('play-audio', opt)
	}
	
	function handlePindu() {
		data.isPindu = true
	}
	
	function handleYinjie() {
		data.isPindu = false
	}

  function goXiangjie() {
    uni.redirectTo({
      url: '/pages/newEnglish/components/xiangjie?jieId='+props.pageData.jieId+'&wordId='+props.pageData.activeId
    })
  }
</script>

<style>
</style>