调整

pages/newEnglish/components/beiPage.vue

@@ -1,26 +1,27 @@
 <!-- 单词区 && 音标区：最多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>
+	<!-- 显示区 -->
+	<!--		<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>
-				<!-- 浮层输入区 -->
-				<view class="words-keyboard-box">
-					<view class="keyboard-row">
+				<!-- 播放和待播 -->
+				<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>
@@ -30,9 +31,22 @@
 						<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">
+				</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>
@@ -42,8 +56,21 @@
 						<btnTxtVue @text-select="handleSelect('p')">p</btnTxtVue>
 						<btnTxtVue @text-select="handleSelect('q')">q</btnTxtVue>
 						<btnTxtVue @text-select="handleSelect('r')">r</btnTxtVue>
-					</view>
-					<view class="keyboard-row">
+					</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>
@@ -53,16 +80,27 @@
 						<btnTxtVue @text-select="handleSelect('y')">y</btnTxtVue>
 						<btnTxtVue @text-select="handleSelect('z')">z</btnTxtVue>
 						<btnTxtVue @text-select="handleReset" class="del-btn"></btnTxtVue>
-					</view>
-					<view class="bei-confirm-btn-box">
-						<!-- active -->
-						<view class="big-btn">大写</view>
-						<view class="bei-confirm-btn" @click="checkIsRight">确定</view>
-					</view>
-					
+					</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>
+					</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>
@@ -74,7 +112,8 @@
 		reactive,
 		computed,
 		onUnmounted,
-		nextTick
+		nextTick,
+		ref
 	} from 'vue';
 	import {
 		getUserIdentity,
@@ -92,6 +131,8 @@
 
 	const userCode = getUserIdentity();
 
+	const isDaxie = ref(false)
+
 	const emits = defineEmits(['play-audio'])
 
 	const props = defineProps({
@@ -113,6 +154,9 @@
 		code: null
 	})
 
+	function handleChangeDaxie() {
+		isDaxie.value = true
+	}
 
 	function handlePlay(opt) {
 		emits('play-audio', opt)
@@ -121,7 +165,7 @@
 	// 选择单词
 
 	function checkIsRight() {
-    let ans1 = props.activeWord.name.toLowerCase();
+		let ans1 = props.activeWord.name;
 		if (data.answer == ans1) {
 			data.result = true;
 			resultAudioPlayerD.play('right', 'bei')
@@ -147,30 +191,30 @@
 			jieId: props.pageData.jieId,
 			wordId: props.activeWord.id
 		}).then((res) => {
-      const {
-        wanchengFlag
-      } = res.data;
-      if (wanchengFlag == 1) {
-        // 更新当前岛小节完成状态
-        cacheManager.updateUnitStatus('zhangInfo', props.pageData.jieId)
-      }
-    })
+			const {
+				wanchengFlag
+			} = res.data;
+			if (wanchengFlag == 1) {
+				// 更新当前岛小节完成状态
+				cacheManager.updateUnitStatus('zhangInfo', props.pageData.jieId)
+			}
+		})
 	}
 
-/*	function noticeBackDb() {
-      当前功能已废弃，后台接口保留，前台代码注释
-		// 通知后台已学完当前单词
-		if (userCode == 'Visitor') {
-			// 游客不更新后台
-			return;
-		}
-		httpApi.getWordZhangwo({
-			type: 3,
-			wordId: props.activeWord.id
-		}).then(res => {
+	/*	function noticeBackDb() {
+	      当前功能已废弃，后台接口保留，前台代码注释
+			// 通知后台已学完当前单词
+			if (userCode == 'Visitor') {
+				// 游客不更新后台
+				return;
+			}
+			httpApi.getWordZhangwo({
+				type: 3,
+				wordId: props.activeWord.id
+			}).then(res => {
 
-		})
-	}*/
+			})
+		}*/
 
 	function handleReset(code) {
 		if (code == 'all') {
@@ -190,6 +234,7 @@
 
 	function handleSelect(word) {
 		data.answer += word;
+		isDaxie.value = false;
 	}
 </script>