JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_开发按住说话按钮

2026-03-05 14:17:59 +08:00
parent c1e7d0de47 5ff520d3b8
commit 344b07bbf5
11 changed files with 313 additions and 236 deletions
@@ -24,7 +24,7 @@
 			<view class="picture-cont" v-if="isShow && !isReply">
 				<!-- 下方的图片展示框 -->
 				<view class="imgs-div" v-if="!isImg">
-					<image-preview class="upload-img" v-for="item in fileList" :src="item" mode=""></image-preview>
+					<image-preview class="upload-img" v-for="item in fileList" :imgId="item" mode=""></image-preview>
 				</view>
 				<view class="picture" v-if="isImg">
 					<picture-upload :limit="4" v-model="fileList"></picture-upload>
@@ -70,11 +70,14 @@
 			<view class="tool-icon tool-icon-img" @click="upload()" v-if="!isReply">
 				<image class="img" :src="commentInput3" mode="aspectFit"></image>
 			</view>
-			<view class="tool-icon tool-icon-emoji" @click="showKeyborad">
+			<!-- <view class="tool-icon tool-icon-emoji" v-if="!isFocus" @click="showKeyborad">
 				<image class="img" :src="commentInput2" mode="aspectFit"></image>
+			</view> -->
+			<view class="tool-icon tool-icon-emoji" @click="showEmojiNow">
+				<image class="img" :src="commentInput1" mode="aspectFit"></image>
 			</view>
 			<view class="fl1"></view>
-			<view class="tool-send"  @click="submit">发送</view>
+			<view :class="['tool-send', value.length === 0?'is-disabled':'']"  @click="submit">发送</view>
 		</view>
 		<!-- 下方主要表情输入框 -->
 		<view class="bottom-main-input-div">
@@ -113,7 +116,7 @@
 	import commentInput2 from '@/static/images/courseDetail/comment-input-2.png'
 	import commentInput3 from '@/static/images/courseDetail/comment-input-3.png'
 	import commentInput4 from '@/static/images/courseDetail/comment-input-4.png'
-	import { reactive, ref, watch, nextTick, computed } from 'vue';
+	import { reactive, ref, watch, nextTick, computed, onBeforeUnmount } from 'vue';
 	import { emojiList } from '@/emoji';
 	import { publishCrsEvaluation, queryTraMemeInfoList } from '@/api/courseDetail.js'
 	import common from '@/common/common.js';
@@ -144,7 +147,6 @@
 		// '/src/static/images/test/e7dd89a71493fcc6281700a4864e24cb.jpg'
 	])
 	const isShow = ref(false);
-	const popHeight = ref('0px')
 	const value = ref('');
 	const click_input = () => {
 		if(!isShow.value) isShow.value = true
@@ -161,9 +163,14 @@
 		isFocus.value = true
 		cursorLength.value = resStart.value || value.value.length
 	}
+	const showEmoji = ref(false)
+	const showEmojiNow = () => {
+		showEmoji.value = !showEmoji.value
+	}
+	const popHeight = ref('0px')
 	const focus = (event) => {
-		popHeight.value = 'calc(270px + 120rpx)'
 		isShow.value = true
+		isFocus.value = true
 		console.log('focusevent');
 		if(!isReply.value){
 			getMemList()
@@ -263,15 +270,14 @@
 		})
 	}
 	const setMemValue = (item) => {
-		console.log(item)
 		if(!isImg.value || fileList.value.length == 0){
-			fileList.value = [item.ossAddr]
+			fileList.value = [item.ossKey]
 			isImg.value = false
 			return
 		}
 		common.show('','是否清空当前图片并重新添加？').then((res) => {
 			if (res) {
-				fileList.value = [item.ossAddr]
+				fileList.value = [item.ossKey]
 				isImg.value = false
 			}
 		});
@@ -314,9 +320,6 @@
 					value.value = ''
 					fileList.value = []
 					emit('submitOver')
-					if (from.value === 'study') {
-					} else {
-					}
 				}, 500);
 			}, delayTime);
 		}).catch(err=>{
@@ -335,6 +338,24 @@
 			isImg.value = true
 		}
 	})
+	const keyboardHeight = ref(0)
+	const maxKeyboardHeight = ref(0)
+	uni.onKeyboardHeightChange((res)=>{
+		maxKeyboardHeight.value = res.height > keyboardHeight.value?res.height : keyboardHeight.value
+		keyboardHeight.value = res.height
+	})
+	onBeforeUnmount(()=>{
+		
+	})
+	watch(()=> showEmoji.value,(val)=>{
+		popHeight.value = val ? `${maxKeyboardHeight.value}px` : (keyboardHeight.value+'px')
+	})
+	watch(()=> keyboardHeight.value,(val)=>{
+		console.log(val,showEmoji.value)
+		console.log(maxKeyboardHeight.value)
+		popHeight.value = showEmoji.value ? `${maxKeyboardHeight.value}px` : keyboardHeight.value+'px'
+		console.log(popHeight.value)
+	})
 	defineExpose({hideAll, resetVal})
 </script>

@@ -455,6 +476,10 @@
 			font-size: 30rpx;
 			color: #fff;
 			margin-right: 20rpx;
+			&.is-disabled{
+				background-color: #ccc;
+				// pointer-events: none;
+			}
 		}
 	}
 	.main-div {
@@ -8,7 +8,6 @@
 	background-color: #fff;
 	box-shadow: 0 4rpx 14rpx rgba(100, 100, 100, 0.3);
 	padding: 0 10rpx;
-
 	display: flex;
 	align-items: center;
 	border: 2rpx solid rgba(0, 0, 0, 0);
@@ -47,39 +46,4 @@
 			height: 50rpx;
 		}
 	}
-	// .touch-btn {
-	// 	height: 92rpx;
-	// 	box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);
-	// 	text-align: center;
-	// 	line-height: 92rpx;
-	// 	color: #000;
-	// 	font-weight: 400;
-	// 	position: relative;
-
-	// 	.input-box {
-	// 		width: 100%;
-	// 		height: 92rpx;
-	// 		line-height: 92rpx;
-	// 		text-align: left;
-	// 		box-sizing: border-box;
-	// 		padding: 0 40rpx 0 40rpx;
-	// 	}
-	// }
-
-	// .talk-btn-box {
-	// 	position: absolute;
-	// 	height: 100%;
-	// 	width: 120rpx;
-	// 	right: 0;
-	// 	top: 0;
-
-	// 	.talk-btn-icon {
-	// 		width: 40rpx;
-	// 		height: 40rpx;
-	// 		position: absolute;
-	// 		right: 60rpx;
-	// 		top: 50%;
-	// 		margin-top: -20rpx;
-	// 	}
-	// }
 }
@@ -206,13 +206,25 @@
 	&.success > .send-btn > .send-btn-text {
 		display: block !important;
 	}
-	&.failed .send-btn,&.networkError .send-btn {
-		pointer-events: none;
-		cursor: not-allowed;
-		background-color: rgb(80, 80, 80);
-		color: rgb(106, 106, 106);
-		.send-btn-text {
-			display: block !important;
+	&.failed,&.networkError {
+		// 发送按钮置灰
+		.send-btn {
+			pointer-events: none;
+			cursor: not-allowed;
+			background-color: rgb(80, 80, 80);
+			color: rgb(106, 106, 106);
+			.send-btn-text {
+				display: block !important;
+			}
+		}
+		// 发送原语音按钮置灰
+		.trans-btn{
+			pointer-events: none;
+			cursor: not-allowed;
+			.btn-text{
+				color: rgb(106, 106, 106);
+			}
+			
 		}
 	}
 }
@@ -26,7 +26,6 @@ export const horizontalSplitX = safeArea.right / 2;
 * @returns {Promise<UniApp.SocketTask>} 成功时返回WS实例，失败时reject错误信息
 */
 export const initWebSocket = (wsUrl : string) : Promise<UniApp.SocketTask> => {
-	console.log('wsUrl', wsUrl);
 	return new Promise((resolve, reject) => {
 		// 1. 创建WS连接
 		const ws = uni.connectSocket({
@@ -41,7 +41,7 @@
 								class="textarea"
 								ref="inputRef"
 								v-model="textAreaText"
-								:maxlength="255"
+								:maxlength="props.maxlength"
 								@click.stop
 								customStyle="background: #ffffff00; padding-bottom: 50rpx; color: #fff; caret-color: #fff"
 								text-style="color: #fff"
@@ -74,6 +74,7 @@
 								:src="isOutStatus == '03' ? TouchBtnImages.translateActiveBtn : TouchBtnImages.translateBtn"
 								mode="heightFix"
 							></image>
+							<!-- 当仅语音的时候，取消按钮图案 -->
 							<image
 								class="btn-box-3"
 								:src="isOutStatus == '02' ? TouchBtnImages.closeActiveBtn : TouchBtnImages.closeBtn"
@@ -83,7 +84,7 @@
 						</view>
 						<!-- 下方按钮 -->
 						<view class="circle-bg-box">
-							<view class="tips-box">松开发送</view>
+							<view class="tips-box">{{ workMode === 'text-only' ? '松开转文字' : '松开发送' }}</view>
 						</view>
 					</view>
 					<!-- 第二形态 -->
@@ -93,11 +94,11 @@
 							<text class="btn-text">取消</text>
 						</view>
 						<!-- 中间发送原语音 -->
-						<view class="transVoiceIng trans-btn" @click="testFun()">
+						<view class="transVoiceIng trans-btn" @click="originalSend()">
 							<text class="btn-text">发送原语音</text>
 						</view>
 						<!-- 右侧发送按钮（椭圆） -->
-						<view class="send-btn" @click="send_msg()">
+						<view class="send-btn" @click="sendMsg()">
 							<view class="send-btn-text">发送</view>
 							<CommonLoading class="send-btn-loading" color="#444" />
 						</view>
@@ -110,7 +111,7 @@

 <script setup lang="ts">
 	import * as TouchBtnImages from './touch-btn.images'; // 导出图片
-	import { StatusType, VoiceToTextSubStatus, ErrorCode,WorkModeType } from './touch-btn.types';
+	import { StatusType, VoiceToTextSubStatus, ErrorCode, WorkModeType } from './touch-btn.types';
 	import type { TouchBtnEmits } from './touch-btn.types';
 	import { wsUrl, bottomAreaTopBoundary, horizontalSplitX, initWebSocket, showErrorTip, vibrateLight } from './touch-btn';
 	import { ref, computed, onMounted, nextTick, watch, reactive } from 'vue';
@@ -127,15 +128,15 @@
 	const voice_to_text_status = ref<VoiceToTextSubStatus>('init');
 	const popupRef = ref(null);
 	const props = defineProps({
-    isDisabled: {
-      default: false,
-      type: Boolean
-    },
-    // 禁用时候点击反馈的文本
-    disabledText: {
-      default: '请稍后再试！',
-      type: String
-    },
+		isDisabled: {
+			default: false,
+			type: Boolean
+		},
+		// 禁用时候点击反馈的文本
+		disabledText: {
+			default: '请稍后再试！',
+			type: String
+		},
 		isLoading: {
 			default: false,
 			type: Boolean
@@ -144,12 +145,12 @@
 			default: '发送回答中，请稍后再试！',
 			type: String
 		},
-    // 设置为true则不能发送消息
+		// 设置为true则不能发送消息
 		canAnswer: {
 			default: false,
 			type: Boolean
 		},
-    // 不能发送消息的提示
+		// 不能发送消息的提示
 		canAnswerText: {
 			default: '当前状态不能发送内容！',
 			type: String
@@ -158,11 +159,11 @@
 			type: Number,
 			default: 500
 		},
-		adjustPosition:{
-			default: true,
+		adjustPosition: {
+			default: false,
 			type: Boolean
 		},
-		answerMethod:{
+		answerMethod: {
 			type: String,
 			default: '01',
 			validator: (value: string) => {
@@ -173,12 +174,12 @@
 	});
 	// 兼容以前的按钮参数
 	const workMode = computed<WorkModeType>(() => {
-	  const modeMap = {
-	    '01': 'both',
-	    '02': 'text-only',
-	    '03': 'voice-only'
-	  };
-	  return modeMap[props.answerMethod] || 'both';
+		const modeMap = {
+			'01': 'both',
+			'02': 'text-only',
+			'03': 'voice-only'
+		};
+		return modeMap[props.answerMethod] || 'both';
 	});
 	const textAreaText = computed({
 		get() {
@@ -202,6 +203,7 @@
 	const allText = ref('');
 	const tempText = ref('');
 	const inputText = ref('');
+	const ossKey = ref('');
 	// 记录 按下移动位置
 	const touchPos = reactive({ x: 0, y: 0 });
 	// 是否录音中
@@ -210,7 +212,7 @@
 	// 键盘还是语音
 	const isInputVisible = ref(true); // true=显示录音按钮，false=显示输入框
 	const recordStartTime = ref(0); // 录音开始时间戳
-	const pressTimer = ref<number | null>(null);
+	let pressTimer = null;
 	// 计算属性：判断是否仅语音/仅文字模式（简化模板逻辑）
 	const isVoiceOnlyMode = computed(() => workMode.value === 'voice-only');
 	const isTextOnlyMode = computed(() => workMode.value === 'text-only');
@@ -239,7 +241,8 @@
 	// 开启语音
 	const startRecord = async (obj: { touches: any[] }) => {
 		if (props.isDisabled) return;
-		if (props.canAnswer) return common.msg(props.canAnswerText)
+		if (pressTimer || isRecording.value) return;
+		if (props.canAnswer) return common.msg(props.canAnswerText);
 		try {
 			const state = await permissionApi.judgeIosPermission('record');
 			if (state === 'not determined') {
@@ -253,13 +256,19 @@
 		}
 		// 标记录音开始
 		isRecording.value = true;
-		status.value = 'voice_recording';
+		status.value = 'default';
 		voice_to_text_status.value = '';
 		tempText.value = '';
 		allText.value = '';
-		console.log('都清空了');
+		ossKey.value = '';
+		console.log('开启语音');
 		initWebSocket(wsUrl)
 			.then((socketTask) => {
+				if (!isRecording.value) {
+					ws.value = null;
+					wsStatus.value = false;
+					return;
+				}
 				ws.value = socketTask;
 				wsStatus.value = true;
 				console.log('WS连接成功');
@@ -280,26 +289,24 @@
 								// 如果不等于init说明已经超时，被超时函数处理完了，这里即使返回也不做处理
 								if (status.value === 'voice_to_text' && voice_to_text_status.value !== 'init') return;
 								if (status.value === 'send_over') return;
+								status.value = 'send_over'; // 设置成发送完成
 								if (voiceTimer) clearTimeout(voiceTimer);
 								// 设置识别结果
-								if (controlBody?.txt === '') {
-									//说明没有识别到文字
-									voice_to_text_status.value = 'failed';
-								} else {
-									voice_to_text_status.value = 'success';
-								}
-								// status.value = 'send_over'; // 设置成发送完成
+								voice_to_text_status.value = controlBody?.txt === '' ? 'failed' : 'success';
 								// 取值出来
-								const ossKey = controlBody?.ossKey || '';
-								let text = '';
+								ossKey.value = controlBody?.ossKey || '';
 								if (typeof controlBody?.txt === 'string') {
-									text = controlBody.txt.trim();
+									allText.value = controlBody.txt.trim();
 								}
 								const _isOutStatus =
 									workMode.value === 'text-only' && isOutStatus.value === '01' ? '03' : isOutStatus.value;
 								// 只有模式为01的时候才发送出去
 								if (_isOutStatus === '01') {
-									emit('submitVoice', { ossKey, text, recordId: recordId.value });
+									emit('submitVoice', {
+										ossKey: ossKey.value,
+										text: allText.value,
+										recordId: recordId.value
+									});
 								}
 							}
 						}
@@ -312,7 +319,12 @@
 				stopRecord('networkError');
 				console.log('网络出现问题');
 			});
-		pressTimer.value = setTimeout(() => {
+		pressTimer = setTimeout(() => {
+			if(!isRecording.value) {
+				console.log('定时器被取消还是进入了');
+				return
+			}
+			status.value = 'voice_recording';
 			vibrateLight(); // 触感震动
 			// 重设按下位置
 			const changedTouche = obj.touches[0];
@@ -325,7 +337,6 @@
 			startAudioRecord({
 				onFrame: (pcmData: any) => {
 					if (wsStatus.value && ws.value) {
-						console.log('pcmData', pcmData.length);
 						ws.value.send({ data: ProtocolCodec.pack(MessageType.AUDIO_DATA, pcmData) });
 					}
 				},
@@ -343,20 +354,45 @@
 					}
 				}
 			});
-		}, 120);
+		}, 100);
 	};

 	// 结束录音
 	const closePopup = () => {
+		isRecording.value = false;
 		popupRef.value.close();
 	};
+	// 结束ws
+	const closeWS = () => {
+		if (ws.value) {
+			ws.value.close({
+				code: 1000,
+				reason: '挂断',
+				complete: () => {
+					console.log('挂断Ws');
+					wsStatus.value = false;
+				}
+			});
+		}
+	};

 	const stopRecord = async (errrStatus = '') => {
-		clearTimeout(pressTimer.value);
+		console.log('松手stopRecord', pressTimer, isRecording.value, status.value);
+		if (pressTimer) {
+			clearTimeout(pressTimer);
+			console.log('取消一个存在的定时器');
+			pressTimer = null;
+		}
 		if (!isRecording.value) return; // 未处于录音状态
-		const _isOutStatus = workMode.value === 'text-only' && isOutStatus.value === '01' ? '03' : isOutStatus.value;
-		console.log('_isOutStatus', _isOutStatus);
+		if (status.value !== 'voice_recording') {
+			closeWS();
+			closePopup();
+			return;
+		}
+
 		// 拖动到转文字按钮上抬手或者仅文字模式的发送也强行算他转文字
+		const _isOutStatus = workMode.value === 'text-only' && isOutStatus.value === '01' ? '03' : isOutStatus.value;
+
 		if (_isOutStatus === '03') {
 			status.value = 'voice_to_text'; //主状态设置为转文字
 			voice_to_text_status.value = 'init';
@@ -365,52 +401,48 @@
 				voiceTimer = null;
 				if (voice_to_text_status.value !== 'init') return;
 				voice_to_text_status.value = 'networkError';
+				status.value = 'send_over'; // 设置成发送完成
 				emit('submitVoice', { ossKey: '', text: '', recordId: recordId.value });
 			}, 5000);
 		} else if (_isOutStatus === '01') {
 			status.value = 'voice_send_ing'; //主状态设置为语音发送中
 		}
-		if (['01', '03'].includes(_isOutStatus)) {
-			// 向后端发送抬手动作
-			ws.value &&
-				ws.value.send({
-					data: ProtocolCodec.pack(MessageType.CONTROL_CMD, { type: ControlCode.FRONT_TO_SERVER_OVER })
-				});
-		}
+
 		const recordDurationMs = Date.now() - recordStartTime.value;
-		if (_isOutStatus !== '02') {
-			// 取消的时候，不校验最低时间
-			// 核心：计算录音总时长（毫秒转秒，保留1位小数）
-			if (recordDurationMs < 600) {
-				await new Promise<void>((resolve) => {
-					setTimeout(() => {
-						resolve();
-					}, 600 - recordDurationMs);
-				});
-			}
+		// 核心：计算录音总时长（毫秒转秒，保留1位小数）
+		if (recordDurationMs < 540) {
+			await new Promise<void>((resolve) => {
+				setTimeout(() => {
+					resolve();
+				}, 540 - recordDurationMs);
+			});
 		}
-		isRecording.value = false;
+		
+		// 取消的时候自己主动关闭websocket,其他的时候需要等待后端的消息关闭
 		if (_isOutStatus === '02' || errrStatus === 'networkError') {
-			// 取消的时候自己主动关闭websocket,其他的时候需要等待后端的消息关闭
-			ws.value &&
-				ws.value.close({
-					code: 1000,
-					reason: '挂断',
-					complete: () => {
-						console.log('挂断Ws');
-						wsStatus.value = false;
-					}
-				});
+			closeWS();
+		}
+		// 向后端发送抬手动作
+		if (['01', '03'].includes(_isOutStatus) && ws.value) {
+			console.log('向后端发送抬手动作');
+			ws.value.send({
+				data: ProtocolCodec.pack(MessageType.CONTROL_CMD, { type: ControlCode.FRONT_TO_SERVER_OVER })
+			});
 		}
 		stopAudioRecord(); // 关掉录音
+		isRecording.value = false;
 		if (_isOutStatus !== '03' || errrStatus === 'networkError') {
 			// 转文字时候不关遮罩层,网络错误必须关遮罩层
-			popupRef.value.close();
+			closePopup();
 			// 关掉弹窗后的提示
 			if (errrStatus === 'networkError') {
-				return showErrorTip(ErrorCode.NetworkError);
-			} else if (_isOutStatus !== '02' && recordDurationMs <= 1200) {
-				// 取消的时候，不校验最低时间
+				status.value = 'send_over'; // 设置成发送完成
+				if (_isOutStatus !== '03') {
+					emit('submitVoice', { ossKey: '', text: '', recordId: recordId.value });
+				}
+				// return showErrorTip(ErrorCode.NetworkError);
+			} else if (_isOutStatus === '01' && recordDurationMs <= 1000) {
+				status.value = 'send_over'; // 设置成发送完成
 				return showErrorTip(ErrorCode.ShortRecord);
 			}
 		}
@@ -447,8 +479,8 @@
 	const changeBtn = (_isInputVisible = true) => {
 		if (props.isDisabled) return;
 		// 只要不是仅录音，就可以切换到录音按钮
-		if(workMode.value === 'text-only') {
-			isInputVisible.value = false
+		if (workMode.value === 'text-only') {
+			isInputVisible.value = false;
 		}
 		// 否则为true
 		isInputVisible.value = _isInputVisible;
@@ -460,18 +492,20 @@
 		// 当是输入框且输入框的内容不为空时候，是发送文本，否则就是切换
 		if (!isInputVisible.value && inputText.value !== '') {
 			console.log('send_msg');
-			send_msg();
+			sendMsg();
 		} else {
 			isInputVisible.value = !isInputVisible.value;
 		}
 	};
 	// 禁用时点击给的提示
 	const disabled_click = () => {
-		console.log('禁用时点击给的提示');
-		if (props.isDisabled) common.msg(props.disabledText);
+		if (props.isDisabled) {
+			console.log('禁用时点击给的提示', props.disabledText);
+			common.msg(props.disabledText);
+		}
 	};
-
-	const send_msg = () => {
+	// 发送文字
+	const sendMsg = () => {
 		if (!isInputVisible.value) {
 			emit('submitAnswer', inputText.value, changeBtn);
 		} else {
@@ -479,7 +513,12 @@
 			closePopup();
 		}
 	};
-
+	// 发送原语音
+	const originalSend = () => {
+		console.log('发送原语音', { ossKey: ossKey.value, text: allText.value, recordId: recordId.value });
+		emit('submitVoice', { ossKey: ossKey.value, text: allText.value, recordId: recordId.value });
+		closePopup();
+	};
 	setupKeyboardHeightListener((height: number) => {
 		const _height = Math.max(height - 100, 0);
 		pageBoxMarginBottom.value = `${_height}px`;