update 选 拼

pages/newEnglish/components/beiPage.vue

@@ -3,23 +3,66 @@
 		<!-- 单词区 -->
 		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
 		<!-- 显示区 -->
-		<selectTypesVue activeSelect="2"></selectTypesVue>
+		<selectTypesVue activeSelect="5"></selectTypesVue>
 		<!-- 输入区 -->
-		<view></view>
+		<view>{{data.answer}}</view>
 		<!-- 解释区 -->
 		<view>
 			{{activeWord.jianyi.join(';')}}
 		</view>
 		<!-- 音标区 -->
 		<view></view>
+		<!-- 清理区 -->
+		<view @click="handleReset('all')">
+			reset
+		</view>
 		<!-- 浮层输入区 -->
-		<view></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
@@ -27,9 +70,9 @@
 	import {
 		getUserIdentity,
 	} from "@/utils/common.js"
-	
+
 	const userCode = getUserIdentity();
-	
+
 	const props = defineProps({
 		activeWord: { // 单词数据
 			type: Object,
@@ -45,9 +88,6 @@
 	})
 
 	// 选择单词
-	function handleSelect(word) {
-		data.answer+=word;
-	}
 
 	function checkIsRight() {
 		if (data.answer == props.activeWord.value) {
@@ -65,9 +105,21 @@
 			return;
 		}
 	}
+
+	function handleReset(code) {
+		if (code == 'all') {
+			// 全部清空
+			data.answer = '';
+		} else {
+			// 单个清空
+			data.answer = data.answer ? data.answer.slice(0, -1):''
+		}
+
+	}
 	
-	function handleReset() {
-		data.answer = '';
+	function handleSelect(word) {
+		console.log('xxxx',word)
+		data.answer+=word;
 	}
 </script>
 

pages/newEnglish/components/mainCard.vue

@@ -18,21 +18,21 @@
 		</swiper-item>
 		<swiper-item>
 			<view class="swiper-item uni-bg-blue">
-        <selectPage :active-word="activeWord" :active-words="activeWords"></selectPage>
+				<selectPageVue :active-word="activeWord" :active-words="activeWords"></selectPageVue>
 			</view>
 		</swiper-item>
 		<swiper-item>
 			<view class="swiper-item uni-bg-blue">
-				背
-				<hr />{{activeWord}}
+				<beiPageVue :active-word="activeWord" :active-words="activeWords"></beiPageVue>
 			</view>
 		</swiper-item>
 	</swiper>
 </template>
 
 <script setup>
-import pinPageVue from './pinPage.vue';
-import selectPage from './selectPage.vue';
+	import pinPageVue from './pinPage.vue';
+	import selectPageVue from './selectPage.vue';
+	import beiPageVue from './beiPage.vue';
 	import learnContent from './learnContent.vue';
 	const props = defineProps({
 		activeWord: {
@@ -44,5 +44,5 @@ import selectPage from './selectPage.vue';
 	})
 </script>
 
-<style>
+<style lang="scss" scoped>
 </style>

pages/newEnglish/components/selectPage.vue

@@ -3,7 +3,7 @@
 		<!-- 单词区 -->
 		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
 		<!-- 显示区 -->
-		<selectTypesVue activeSelect="2"></selectTypesVue>
+		<selectTypesVue activeSelect="4"></selectTypesVue>
 		<!-- 拼读区 -->
 		<view>
 			{{data.name}}