uniProject/pages/newEnglish/components/xuePage.vue

<!-- 单词区 && 音标区：最多14位，超过换行  词根助记区：宽度不限，可以滚动-->
<!-- 单音节最长：swimming 多音节最长：transportation -->
<template>
	<view class="words-xue-box">
		<selectTypesVue activeSelect="1"></selectTypesVue>
		<view class="words-xue-body">
			<!-- 单词区 -->
			<view class="word-circle-box">
				<text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
			</view>
			<view class="word-block-box">
				<text v-for="(item,index) in activeWord.chaifen" :key="index">{{item}}</text>
			</view>
			<!-- 音标区 -->
			<view class="yb-play-box xue-yb-play-box">
				<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
				<!-- 音频播放 -->
				<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
			</view>
			<!-- 注释区 -->
			<view class="pin-words-explain-box xue-words-explain-box">
				<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
			</view>
			<!-- 详解触发 -->
			<view @click="goXiangjie" class="details-btn">详解 ></view>
			<!-- 音标拆分区 -->
			<view v-show="data.isPindu" class="word-block-box yb-block-box">
				<!-- pindu -->
				<audioThreeVue v-for="(item,index) in activeWord.pindu" :key="index" :YItem="item"
					@play-audio="handlePlay"></audioThreeVue>
			</view>
			<view  v-show="!data.isPindu" class="yj-block-box">
				<!-- yinjie -->
				<audioFourVue v-for="(item,index) in activeWord.yinjie" :key="index" :YItem="item"
					@play-audio="handlePlay"></audioFourVue>
			</view>

			<!-- 音标按钮 -->
			<view class="xue-change-btn-box">
				<view class="change-btn" :class="{active: data.isPindu}" @click="handlePindu"><text>自然拼读</text></view>
				<view class="change-btn" :class="{active: !data.isPindu}" @click="handleYinjie"><text>音节拆分</text></view>
			</view>
			<!-- 词根+实用口语 -->
			<view v-if="activeWord.cigenzhuji.length" class="details-content-box xue-details-content-box">
				<text class="details-title">词根助记</text>
				<scroll-view class="cg-item-list" scroll-x @touchmove.stop>
					<view class="cg-item-box" v-for="(item,index) in activeWord.cigenzhuji" :key="index">
						<view class="cg-item">
							<view
								:class="{isEven: index% 2 !== 0 && index!==activeWord.cigenzhuji.length-1,isOdd: index% 2 === 0 && index!==activeWord.cigenzhuji.length-1}">
								{{item.en}}</view>
							<view>{{item.zn}}</view>
						</view>
						<view class="cg-symbol" v-if="index<activeWord.cigenzhuji.length-2">+</view>
						<view class="cg-symbol" v-if="index == activeWord.cigenzhuji.length - 2">=</view>
					</view>
				</scroll-view>
			</view>

			<!-- 实用语句 -->
			<view class="details-content-box xue-details-content-box">
				<text class="details-title">实用口语</text>
				<view v-for="(item,index) in activeWord.kouyu" :key="index" class="syky-content">
					<view class="details-en-content">
						<rich-text :nodes="highlightWord(item.en)"></rich-text>
					</view>
					<view class="details-cn-content">{{item.zn}}</view>
				</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','goXiangjie'])
	const userCode = getUserIdentity();
	const {
		cacheAudio,
		clearAudioCache
	} = useAudioCache();


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

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


	const highlightWord = (text) => {
		if (!text || !props.activeWord.name) {
			return text
		}
		const word = props.activeWord.name;
		const regex = new RegExp(word, 'gi');
		return text.replace(regex, (match) => {
			return `<span style="color: #3a7fe9;">${match}</span>`;
		});
	}

	async function handlePlay(opt) {
		emits('play-audio', opt)
	}

	function handlePindu() {
		data.isPindu = true
	}

	function handleYinjie() {
		data.isPindu = false
	}

	function goXiangjie() {

		if (userCode !== 'Visitor') {
			uni.redirectTo({
				url: '/pages/newEnglish/components/xiangjie?jieId=' + props.pageData.jieId + '&wordId=' + props
					.pageData.activeId
			})
		} else {
			emits('goXiangjie')
		}


	}
</script>

<style>
</style>