uniProject/pages/chaojidanci/newEnglish/components/beiPage.vue

<!-- 单词区 && 音标区：最多15位，超过隐藏-->
<!-- 单音节最长：swimming 多音节最长：transportation -->
<template>
	<!-- 显示区 -->
	<!--		<selectTypesVue activeSelect="5"></selectTypesVue>-->
	<view class="ezy-border-body">
		<view class="words-bei-box">
			<!-- 输入区 -->
			<input class="words-answer-box" placeholder="请输入答案" v-model.trim="data.answer" readonly
				:class="{'words-answer-right-box': data.result&&data.result!=null, 'words-answer-error-box': !data.result&&data.result!=null}" />
			<!-- 清空按钮 -->
			<view class="clean-btn" @click="handleReset('all')" v-if="data.answer.length"></view>
			<view class="bei-body-box">
				<!-- 解释区 -->
				<view class="pin-words-explain-box">
					<view class="words-explain-item" v-for="item in activeWord.jianyi" :key="item">{{item}}</view>
				</view>
				<!-- 播放和待播 -->
				<audioOneVue :active-word="activeWord" @play-audio="handlePlay"></audioOneVue>
			</view>
			<!-- 浮层输入区 -->
			<view class="words-keyboard-box">
				<view class="keyboard-row">
					<template v-if="!isDaxie">
						<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>
					</template>
					<template v-else>
						<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>
					</template>

				</view>
				<view class="keyboard-row">
					<template v-if="!isDaxie">
						<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>
					</template>
					<template v-else>
						<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>
					</template>
				</view>
				<view class="keyboard-row">
					<template v-if="!isDaxie">
						<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" class="del-btn"></btnTxtVue>
					</template>
					<template v-else>
						<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" class="del-btn"></btnTxtVue>
					</template>
				</view>
				<view class="bei-confirm-btn-box">
					<!-- active -->
					<view class="big-btn" :class="{active: isDaxie}" @click="handleChangeDaxie">大写</view>
					<view class="bei-confirm-btn" @click="checkIsRight">确定</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import btnTxtVue from './btnTxt.vue';
	import audioOneVue from './audioOne.vue';
	import {
		reactive,
		nextTick,
		ref
	} from 'vue';
	import * as httpApi from "@/api/chaojidanci.js"
	import cacheManager from '@/utils/cacheManager';
	import {
		resultAudioPlayer
	} from "./useAudioRightWrong"

	const resultAudioPlayerD = new resultAudioPlayer();

	const isDaxie = ref(false)

	const emits = defineEmits(['play-audio'])

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

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

	function handleChangeDaxie() {
		isDaxie.value = !isDaxie.value;
	}

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

	// 选择单词

	function checkIsRight() {
		let ans1 = props.activeWord.name;
		if (data.answer == ans1) {
			data.result = true;
			resultAudioPlayerD.play('right', 'bei')
			// noticeBackDb()
		} else {
			data.result = false;
			resultAudioPlayerD.play('wrong', 'bei')
		}
		noticeBackComplete()
	}

	function noticeBackComplete() {
		if (props.pageData.danyuanId == 0) {
			// 已掌握不需要调用接口通知完成
			return;
		}
		httpApi.getWordWancheng({
			danyuanId: props.pageData.danyuanId,
			wordId: props.activeWord.id
		}).then((res) => {
			const {
				wanchengFlag
			} = res.data;
			if (wanchengFlag == 1) {
				// 更新当前岛小节完成状态
				cacheManager.updateUnitStatus('zhangInfo', props.pageData.danyuanId)
			}
		})
	}

	function handleReset(code) {
		if (code == 'all') {
			// 全部清空
			data.answer = '';
		} else {
			// 单个清空
			data.answer = data.answer ? data.answer.slice(0, -1) : '';
		}
		// 重置错误状态
		if (!data.answer.length) {
			nextTick(() => {
				data.result = null;
			})
		}
	}

	function handleSelect(word) {
		data.answer += word;
		isDaxie.value = false;
	}
</script>

<style>
</style>