修改bug

components/question/FillItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<uni-popup background-color="#fff" ref="fillRef">
 		<view class="popup-content">
-			<input v-model.trim="result"  style="width: 100%" @blur="onBlur" type="text" class="input-box" />
+			<input v-model.trim="result" placeholder="请输入答案" style="width: 100%" @blur="onBlur" type="text" class="input-box" />
 		</view>
 	</uni-popup>
 </template>

components/question/tiankong.vue

@@ -1,20 +1,12 @@
 <template>
-	<div class="fill-in-the-blank">
+	<view class="fill-in-the-blank">
 		<!-- 显示填空后的文本 -->
-		<view class="formatted-text" v-html="formattedText" :question="question" :change:question="TK.watchQuestionChange"></view>
-		<!-- 提供与占位符数量相匹配的输入框 -->
-		<template v-for="(placeholder, index) in placeholders" :key="index">
-			<FillItem :value="question.reply[index]" :ref="`popup${index}Ref`" :index="index" @blur="onBlur"></FillItem>
-		</template>
-	</div>
+		<view class="formatted-text" v-html="formattedText" :question="question" :myflag="myflag" :change:myflag="TK.updateFlag" :change:question="TK.watchQuestionChange"></view>
+	</view>
 </template>
 
 <script>
-	import FillItem from "./FillItem.vue";
 	export default {
-		components: {
-			FillItem
-		},
 		props: {
 			placeholders: { // 占位符
 				type: Array,
@@ -28,6 +20,11 @@
 				default: false
 			}
 		},
+		data() {
+			return {
+				myflag: 0
+			}
+		},
 		computed: {
 			// 计算属性，用于生成填空后的文本
 			formattedText() {
@@ -54,6 +51,7 @@
 
 					}
 				});
+				this.myflag++;
 				return result;
 			},
 		},
@@ -71,31 +69,46 @@
 					result
 				} = data;
 
-				this.question.reply[index] = result;
 				this.setResult(data);
 			},
 			showPopup(str) {
-				this.$refs[str][0].showPopup();
+				uni.$emit('tiankongItemShow', {index: str, value: this.question.reply[str],question: this.question})
 			}
 		},
+		created() {
+				uni.$on('tiankongItemBlur', (data) => {
+					if (data.question.stId === this.question.stId) {
+						this.setResult({index: data.index,result: data.value});
+					}
+				})
+		}
 	}
 </script>
 
 <script module="TK" lang="renderjs">
 	export default {
+		data() {
+			return {myQ: null}
+		},
 		methods: {
+			updateFlag() {
+				this.initListener(this.myQ)
+			},
 			updateFn(e) {
-				const str = `popup${e.target.dataset.index}Ref`;
-				this.$ownerInstance.callMethod('showPopup',str)
+				this.$ownerInstance.callMethod('showPopup',+e.target.dataset.index);
 			},
 
 			watchQuestionChange(newValue, oldValue, ownerInstance, instance) {
 				if (newValue) {
+					this.myQ = newValue;
 					this.initListener(newValue)
 				}
 			},
 
 			initListener(question) {
+				if (!question) {
+					return;
+				}
 				question.result.forEach((item, index) => {
 					const dom = document.getElementById(`t_${question.stId}_${index}`)
 					dom && dom.addEventListener('focus', (e) => this.updateFn(e))

pages/unitTest/index.vue

@@ -5,7 +5,6 @@
 			<text class="nav-bar-title">单元测试</text>
 			<view class="nav-bar-other"><text class="key-note">{{count}}</text>/<text>{{total}}</text></view>
 		</view>
-		
 		<view class="shiti-frame-box">
 			<w-swiper :list="list" :current="current" class="ezy-exam-swiper" @change="onSwiperChange">
 				<template v-slot:default="{item}">
@@ -30,6 +29,8 @@
 		<chengji ref="chengjiRef" :list="list"  @back="handleBack"></chengji>
 		<!-- 分数弹窗 -->
 		<uniPointsVue ref="uniPointsRef" @checkAnswer="checkAnswer" @goStudy="goStudyContinue" :isLastZhang="!!haveFlag"></uniPointsVue>
+		<!-- 填空题选项 -->
+		<FillItem :value="tiankongValue" :ref="`popupRef`" :index="index" @blur="onBlur"></FillItem>
 	</view>
 
 </template>
@@ -46,13 +47,14 @@
 		catchError,
 	} from "@/utils/common.js"
 	import {
-		useExam
+		useExam,useTiankongItem
 	} from './useUnit';
 	import {
 		ref,
 	} from "vue";
   import cacheManager from "@/utils/cacheManager";
-
+  import FillItem from "@/components/question/FillItem.vue";
+  
 	const {
 		count,
 		total,
@@ -74,7 +76,8 @@
 
 	const uniPointsRef = ref(null);
 	const chengjiRef = ref(null);
-
+	const popupRef = ref(null);
+	const {index,tiankongValue,onBlur} = useTiankongItem(popupRef)
 	// 查看答案
 	function checkAnswer() {
 		chengjiRef.value.showPopup();

pages/unitTest/useUnit.js

@@ -8,15 +8,18 @@ import {
 	computed,
 	toRefs,
 	onMounted,
-	watch
+	watch,
+	nextTick
 } from "vue";
 import {
 	catchError,
 	toast
 } from "@/utils/common.js"
 import * as httpUnit from "@/api/unitTest.js"
-import cacheManager, {useUnitTestTishi} from "@/utils/cacheManager.js"
-	
+import cacheManager, {
+	useUnitTestTishi
+} from "@/utils/cacheManager.js"
+
 
 function useJifen() {
 	const data = reactive({
@@ -25,12 +28,16 @@ function useJifen() {
 		jifen: 0, // 积分
 	})
 
-	function updateJifen({rightAnswer,wrongAnswer,jifen}) {
+	function updateJifen({
+		rightAnswer,
+		wrongAnswer,
+		jifen
+	}) {
 		data.rightAnswer = rightAnswer;
 		data.wrongAnswer = wrongAnswer;
 		data.jifen = jifen;
 	}
-	
+
 	return {
 		...toRefs(data),
 		updateJifen
@@ -40,10 +47,19 @@ function useJifen() {
 export function useExam() {
 	// 缓存
 
-	const {	showTishi, handleCloseTishi, handleShowTishi} = useTishiLeftRight()
-	const {rightAnswer,wrongAnswer,jifen, updateJifen} = useJifen();
+	const {
+		showTishi,
+		handleCloseTishi,
+		handleShowTishi
+	} = useTishiLeftRight()
+	const {
+		rightAnswer,
+		wrongAnswer,
+		jifen,
+		updateJifen
+	} = useJifen();
+
 
-	
 	const data = reactive({
 		count: 0, // 已答题数
 		total: 0, // 总题数
@@ -63,29 +79,35 @@ export function useExam() {
 		}
 		const cacheZhangInfo = cacheManager.get('zhangInfo');
 		let currentObject = cacheZhangInfo.jieList.find(item => item.number == options.jieNumber);
-		const { cardId,zhangId,nianji } = cacheManager.get('auth');
-		
+		const {
+			cardId,
+			zhangId,
+			nianji
+		} = cacheManager.get('auth');
+
 		data.jieId = currentObject.jieId; // 需要路由参数 节Id
-		data.zhangId = zhangId;// 需要路由参数 章Id
+		data.zhangId = zhangId; // 需要路由参数 章Id
 		data.nianji = nianji; // 需要年纪Id 来执行返回页面
 		data.xueke = cardId; // 需要年纪Id 来执行返回页面
 		data.haveFlag = cacheZhangInfo.haveFlag
-		
+
 		// 初始化页面数据
 		initPage();
 	})
-	
+
 	watch(() => data.list, (val) => {
 		const list = data.list.filter(item => {
 			if (item.type == 3) {
 				// 填空题 所有试题答完
 				return !item.reply.some(citem => citem.trim() == '');
 			} else {
-				return item.reply!==null
+				return item.reply !== null
 			}
 		});
 		data.count = list.length;
-	},{deep: true})
+	}, {
+		deep: true
+	})
 
 
 	// 初始化页面数据
@@ -106,8 +128,8 @@ export function useExam() {
 			item.reply = null;
 			if (item.type == 3) {
 				item.result = JSON.parse(item.result);
-				item.placeholders = item.result.map((item,cindex) => `[bank${cindex}]`)
-				item.reply =  item.result.map(() => '');
+				item.placeholders = item.result.map((item, cindex) => `[bank${cindex}]`)
+				item.reply = item.result.map(() => '');
 			}
 		})
 	}
@@ -118,7 +140,7 @@ export function useExam() {
 		formatListToUse(cList)
 		data.list = cList;
 		data.total = cList.length;
-		
+
 		handleShowTishi();
 	}
 
@@ -126,22 +148,25 @@ export function useExam() {
 	async function handleSubmit(dom) {
 		const result = [];
 		data.list.forEach(item => {
-			result.push({reply: item.reply ? JSON.stringify(item.reply):'',stId: item.stId})
+			result.push({
+				reply: item.reply ? JSON.stringify(item.reply) : '',
+				stId: item.stId
+			})
 		})
-		
-		const [error, cdata] =await catchError(httpUnit.getExamSubmit({
+
+		const [error, cdata] = await catchError(httpUnit.getExamSubmit({
 			jieId: data.jieId,
 			shitiList: result
 		}));
 
 		if (error) {
 			toast("单元测试数据提交异常");
-			return ;
+			return;
 		}
 		dom.showPopup({
-			right:cdata.dui,
-			wrong:cdata.cuo,
-			jifen:cdata.jifen
+			right: cdata.dui,
+			wrong: cdata.cuo,
+			jifen: cdata.jifen
 		});
 	}
 
@@ -163,7 +188,10 @@ export function useExam() {
 
 // 提示信息显示隐藏
 function useTishiLeftRight() {
-	const { updateTishi, getTishi} = useUnitTestTishi();
+	const {
+		updateTishi,
+		getTishi
+	} = useUnitTestTishi();
 	const showTishi = ref(false);
 	// 大鹅关闭追加缓存 --- 单独针对当前手机的缓存提示
 	function handleCloseTishi() {
@@ -175,10 +203,46 @@ function useTishiLeftRight() {
 		const isNotShow = Boolean(getTishi());
 		showTishi.value = !isNotShow;
 	}
-	
+
 	return {
 		showTishi,
 		handleCloseTishi,
 		handleShowTishi
 	}
+}
+
+export function useTiankongItem(popupRef) {
+
+
+	const index = ref(null);
+	const tiankongValue = ref(null);
+	const question = ref(null);
+
+	function refreshFn(data) {
+		index.value = +data.index;
+		tiankongValue.value = data.value;
+		question.value = data.question;
+	}
+
+	function onBlur(dd) {
+		tiankongValue.value = dd.result;
+		uni.$emit('tiankongItemBlur', {
+			index: dd.index,
+			value: dd.result,
+			question: question.value
+		})
+		nextTick(() => {
+			tiankongValue.value = "";
+		})
+	}
+	uni.$on('tiankongItemShow', (data) => {
+		refreshFn(data);
+		popupRef.value.showPopup();
+	})
+
+	return {
+		index,
+		tiankongValue,
+		onBlur
+	}
 }