uniProject/pages/chaojidanci/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-page-body 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 {
		getDanciChanpinWordInfo
	} from "@/api/chaojidanci.js"
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		getUserIdentity,
	} from "@/utils/common.js"
	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 = /<([^>]+)>/g;
		console.log('pageInfo.value.name', pageInfo.value.name);
		return text.replace(regex, (match) => {
			return `<span style="color: #3a7fe9;">${match.replace(/[<>]/g, "")}</span>`;
		});
	}
	const handleBack = () => {
		uni.redirectTo({
				url: `/pages/chaojidanci/newEnglish/index?danyuanId=${data.value.danyuanId}&wordId=${data.value.wordId}`
		});
	}
	const getInfo = (data) => {
		let req = {
			danyuanId: data.danyuanId,
			wordId: data.wordId
		}
		getDanciChanpinWordInfo(req).then(res => {
			console.log('res', res);
			pageInfo.value = res.data
		})
	}
</script>

<style>
</style>