uniProject/pages/newEnglish/components/xiangjie.vue

<template>
	<view class="word-view-page words-details-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">单词详解</text>
		</view>
		<view class="ezy-tab-border words-details-body">
			<view class="ezy-border-body ">
				<view class="details-word">{{pageInfo.name}}</view>
				<view class="details-content-box">
					<text class="details-title">通用释义</text>
					<view class="tysy-content" v-for="(item,index) in pageInfo.xiangyi" :key="index">{{item}}</view>
				</view>
				<view class="details-content-box">
					<text class="details-title">实用口语</text>
					<view  v-for="(item,index) in pageInfo.kouyu" :key="index" class="syky-content">
						<view class="details-en-content">
							
							<rich-text :nodes="highlightWord(item.en)"></rich-text>
						<!-- 	<text>{{item.en}}</text> -->
							<!-- 变色  word-color-->
							<!-- <text class="word-color">{{item.en}}</text>
							<text>{{item.en}}</text> -->
						</view>
						<view class="details-cn-content">{{item.zn}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		getWordInfo
	} from "@/api/word.js"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const goXiangjie = () => {

	}
	const pageInfo = ref({
		kouyu: [],
		xiangyi: [],
		name: ''
	})
	const data = ref(null)


	onLoad((options) => {
		getInfo(options)
		data.value = options
	})
	const highlightWord = (text) => {
		if (!text || !pageInfo.value.name){return text} 
		const word = pageInfo.value.name;
		const regex = new RegExp(word, 'gi');
		console.log('pageInfo.value.name',pageInfo.value.name);
		return text.replace(regex, (match) => {
			return `<span style="color: #3a7fe9;">${match}</span>`;
		});
	}
	const handleBack = () => {
		uni.redirectTo({
			url: `/pages/newEnglish/index?jieId=${data.value.jieId}&wordId=${data.value.wordId}`
		});
	}
	const getInfo = (data) => {
		let req = {
			jieId: data.jieId,
			wordId: data.wordId
		}
		getWordInfo(req).then(res => {
			console.log('res', res);
			pageInfo.value = res.data
		})
	}
</script>

<style>
</style>