uniProject/pages/newEnglish/components/beiPage.vue

<template>
	<view>
		<!-- 单词区 -->
		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
		<!-- 显示区 -->
		<selectTypesVue activeSelect="5"></selectTypesVue>
		<!-- 输入区 -->
		<view>{{data.answer}}</view>
		<!-- 解释区 -->
		<view>
			{{activeWord.jianyi.join(';')}}
		</view>
		<!-- 音标区 -->
		<view></view>
		<!-- 清理区 -->
		<view @click="handleReset('all')">
			reset
		</view>
		<!-- 浮层输入区 -->
		<view>
			<view>
				<btnTxtVue @text-select="handleSelect('a')">a</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('b')">b</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('c')">c</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('d')">d</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('e')">e</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('f')">f</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('g')">g</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('h')">h</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('i')">i</btnTxtVue>
	
			</view>
			<view>
				<btnTxtVue @text-select="handleSelect('j')">j</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('k')">k</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('l')">l</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('m')">m</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('n')">n</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('o')">o</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('p')">p</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('q')">q</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('r')">r</btnTxtVue>
			</view>
			<view>
				<btnTxtVue @text-select="handleSelect('s')">s</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('t')">t</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('u')">u</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('v')">v</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('w')">w</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('x')">x</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('y')">y</btnTxtVue>
				<btnTxtVue @text-select="handleSelect('z')">z</btnTxtVue>
				<btnTxtVue @text-select="handleReset">x</btnTxtVue>
			</view>
			
			
			<view>确定</view>
		</view>
	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import btnTxtVue from './btnTxt.vue';
	import {
		reactive,
		computed
	} from 'vue';
	import {
		getUserIdentity,
	} from "@/utils/common.js"

	const userCode = getUserIdentity();

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

	const data = reactive({
		answer: '',
		result: false, // 正确性
	})

	// 选择单词

	function checkIsRight() {
		if (data.answer == props.activeWord.value) {
			data.result = true;
			noticeBackDb()
		} else {
			data.result = false;
		}
	}

	function noticeBackDb() {
		// 通知后台已学完当前单词
		if (userCode == 'Visitor') {
			// 游客不更新后台
			return;
		}
	}

	function handleReset(code) {
		if (code == 'all') {
			// 全部清空
			data.answer = '';
		} else {
			// 单个清空
			data.answer = data.answer ? data.answer.slice(0, -1):''
		}

	}
	
	function handleSelect(word) {
		console.log('xxxx',word)
		data.answer+=word;
	}
</script>

<style>
</style>