uniProject/pages/newEnglish/components/pinPage.vue

<template>
	<div>
		<!-- 单词区 -->
		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
		<!-- 显示区 -->
		<selectTypesVue activeSelect="2"></selectTypesVue>
		<!-- 拼读区 -->
		<view>
			<view v-for="item in data.list">
				<view></view>
			</view>
		</view>
		<!-- 解释区 -->
		<view>
			{{activeWord.jianyi.join(';')}}
		</view>
		<!-- 音标区 -->
		<view></view>
		<!-- 图片区 -->
		<view></view>
		<!-- 选择区 -->
		<view></view>
	</div>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import {
		reactive,
		computed
	} from 'vue';
	const props = defineProps({
		activeWord: {
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})

	const data = reactive({
		list: [],
		selectList: [],
		result: false, // 正确性
	})

	setTimeout(() => {
		console.log('activeWord', props.activeWord)
	})

	// 初始化 单词列表
	function initList() {
		data.selectList.forEach((item, index) => {
			data.list[index] = ''
		})
	}

	function handleSelect(word) {
		if (data.list.find(item => item == word)) {
			data.list[data.list.findIndex(item => item == word)] = '';
		}
		// 覆盖状态
		let status = false;
		data.list.forEach((item, index) => {
			// 无值 无修改
			if (!item && !status) {
				// 第一项空值覆盖
				data.list[index] = word;
				// 以有控制覆盖
				status = true;
			}
		})
		// 校验正确性
		checkIsRight();
	}

	function checkIsRight() {
		if (data.list.join('') === data.selectList.join('')) {
			// 正确
			data.result = true;
			noticeBackDb();
		} else {
			data.result = false;
		}
	}

	function noticeBackDb() {

	}
</script>

<style>
</style>