432 lines
12 KiB
Vue
432 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<view class="talk-btns" :class="{action:isRecording, inputMode:!isInputVisible}">
|
|
<view class="touch-btn" @click="disabled_click">
|
|
<button v-if="!isTextOnlyMode && isInputVisible" class="voice-btn" @touchstart="startRecord" @touchend="stopRecord()" @touchmove="handleMove"
|
|
@touchcancel="stopRecord()" :plain="true">
|
|
<text class="voice-text">{{ isRecording ? '松开发送' : '按住说话' }}</text>
|
|
</button>
|
|
<input v-if="!isVoiceOnlyMode && !isInputVisible" class="input-box" ref="inputRef" v-model="inputText"
|
|
:maxlength="props.textValueLength" :adjustPosition="true"
|
|
placeholderStyle="color:#999999;font-size:26rpx" placeholder="请输入文字"
|
|
:disabled="props.isDisabled"></input>
|
|
</view>
|
|
<view class="talk-right-icon-div" v-if="!isTextOnlyMode && !isVoiceOnlyMode">
|
|
<image class="talk-right-icon" :src="talkRightIcon" mode="widthFix" @click="changeBtn"></image>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popupRef" class="popup">
|
|
<view class="overlay-box">
|
|
<view class="fl1"></view>
|
|
<view class="talk-dialog"
|
|
:class="{ 'is-out': isOutStatus === '02', 'is-translate': isOutStatus === '03' }">
|
|
<image :src="voiceWhiteBtn" mode="" class="gif-box"></image>
|
|
<uv-textarea ref="inputRef" v-model="textAreaText" :maxlength="255" @click.stop
|
|
customStyle="background: #ffffff00; padding-bottom: 50rpx; color: #fff; caret-color: #fff"
|
|
text-style="color: #fff" border="none" placeholderStyle="color:#999999;font-size:26rpx;"
|
|
placeholder=""></uv-textarea>
|
|
</view>
|
|
<view class="page-1"
|
|
:class="[
|
|
status === 'voice_to_text' ? `${voice_to_text_status}` : ''
|
|
]">
|
|
<!-- 第一形态两侧按钮 -->
|
|
<view class="btns-box">
|
|
<!-- 左侧取消按钮 -->
|
|
<image class="btn-box btn-box-1" :src="isOutStatus == '02' ? cancelActiveBtn : cancelBtn" mode="heightFix" @click="closePopup()"></image>
|
|
<!-- 右侧转文字按钮 -->
|
|
<image class="btn-box btn-box-2" :src="isOutStatus == '03' ? translateActiveBtn : translateBtn" mode="heightFix"></image>
|
|
</view>
|
|
<!-- 下方按钮 -->
|
|
<view class="circle-bg-box">
|
|
<view class="tips-box">松开发送</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- <view class="page-2">
|
|
<view class="cancel-btn transVoiceIng" @click="closeModel()"></view>
|
|
<view class="trans-btn transVoiceIng" @click="sendVoice()" v-show="props.answerMethod !== '02'"></view>
|
|
<view class="send-btn" @click="sendText()">发送</view>
|
|
</view> -->
|
|
|
|
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 导出图片
|
|
import { cancelBtn, cancelActiveBtn, translateBtn, translateActiveBtn, voiceWhiteBtn, icKeyboardSvg, icMicSvg,icSendSvg } from './touch-btn.images';
|
|
import { StatusType,VoiceToTextSubStatus } from './touch-btn.types';
|
|
import { wsUrl, bottomAreaTopBoundary, horizontalSplitX, initWebSocket } from './touch-btn';
|
|
import { ref, computed, onMounted, nextTick, watch, reactive } from 'vue';
|
|
import common from '@/common/common';
|
|
import { onHide, onLaunch } from '@dcloudio/uni-app';
|
|
import { startAudioRecord, stopAudioRecord, preRequestRecordPermission } from '@/uni_modules/ty-recording';
|
|
import { ProtocolCodec, MessageType, ControlCommand, ControlCode } from '@/common/protocolCodec';
|
|
import permissionApi from '@/common/permission';
|
|
const emit = defineEmits(['submit']);
|
|
const ws = ref(null);
|
|
const wsStatus = ref(false);
|
|
const status = ref<StatusType>('default');
|
|
const voice_to_text_status = ref<VoiceToTextSubStatus>('init');
|
|
const popupRef = ref(null);
|
|
const props = defineProps({
|
|
// mode控制功能模式
|
|
mode: {
|
|
type: String,
|
|
default: 'both',
|
|
validator: (value : string) => {
|
|
return ['voice-only', 'text-only', 'both'].includes(value);
|
|
}
|
|
},
|
|
isDisabled: {
|
|
default: false,
|
|
type: Boolean
|
|
},
|
|
isLoading: {
|
|
default: false,
|
|
type: Boolean
|
|
},
|
|
loadingText: {
|
|
default: '发送回答中，请稍后再试！',
|
|
type: String
|
|
},
|
|
disabledText: {
|
|
default: '请稍后再试！',
|
|
type: String
|
|
},
|
|
canAnswer: {
|
|
default: true,
|
|
type: Boolean
|
|
},
|
|
canAnswerText: {
|
|
default: '当前状态不能发送内容！',
|
|
type: String
|
|
},
|
|
textValueLength: {
|
|
type: Number,
|
|
default: 500
|
|
},
|
|
minRecordDuration: {
|
|
// 最小录音间隔
|
|
type: Number,
|
|
default: 1000
|
|
}
|
|
});
|
|
const textAreaText = computed({
|
|
get() {
|
|
return allText.value + tempText.value;
|
|
},
|
|
set(newValue) {
|
|
allText.value = newValue;
|
|
}
|
|
});
|
|
const allText = ref('');
|
|
const tempText = ref('');
|
|
const inputText = ref('');
|
|
// 记录 按下移动位置
|
|
const touchPos = reactive({ x: 0, y: 0 });
|
|
// 是否录音中
|
|
const isRecording = ref(false);
|
|
// 键盘还是语音
|
|
const isInputVisible = ref(props.mode !== 'text-only'); // true=显示录音按钮，false=显示输入框
|
|
const recordStartTime = ref(0); // 录音开始时间戳
|
|
const pressTimer = ref<number | null>(null);
|
|
// 计算属性：判断是否仅语音/仅文字模式（简化模板逻辑）
|
|
const isVoiceOnlyMode = computed(() => props.mode === 'voice-only');
|
|
const isTextOnlyMode = computed(() => props.mode === 'text-only');
|
|
const talkRightIcon = computed(() => {
|
|
if(isInputVisible.value) return icKeyboardSvg();
|
|
if(inputText.value) return icSendSvg();
|
|
return icMicSvg();
|
|
});
|
|
// 计算是否超出按下盒子位置01代表下方盒子，02代表左上03代表右上
|
|
const isOutStatus = computed(() => {
|
|
const { y: touchY, x: touchX } = touchPos;
|
|
if (touchY >= bottomAreaTopBoundary) return '01';
|
|
return touchX < horizontalSplitX ? '02' : '03';
|
|
});
|
|
// 监听按下移动
|
|
const handleMove = (obj) => {
|
|
const { pageX, pageY } = obj.changedTouches[0];
|
|
touchPos.x = pageX;
|
|
touchPos.y = pageY;
|
|
};
|
|
|
|
// 开启语音
|
|
const startRecord = async (obj : { touches : any[]; }) => {
|
|
try {
|
|
const state = await permissionApi.judgeIosPermission('record');
|
|
if (state === 'not determined') { // 苹果专用
|
|
preRequestRecordPermission(() => { })
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.error('麦克风权限申请失败：', e);
|
|
return;
|
|
}
|
|
// 标记录音开始
|
|
isRecording.value = true;
|
|
status.value = 'voice_recording'
|
|
tempText.value = '';
|
|
allText.value = '';
|
|
initWebSocket(wsUrl).then(socketTask => {
|
|
ws.value = socketTask
|
|
wsStatus.value = true;
|
|
console.log('WS连接成功');
|
|
ws.value.onMessage((res: { data: Uint8Array | ArrayBuffer; }) => {
|
|
try {
|
|
const { msgType, body } = ProtocolCodec.unpack(res.data);
|
|
if (msgType === MessageType.TEXT_MESSAGE) {
|
|
tempText.value = '';
|
|
allText.value = allText.value + body;
|
|
} else if (msgType === MessageType.TIP_MESSAGE) {
|
|
// tempText.value = body;A
|
|
}
|
|
} catch (e) {
|
|
console.log('后端发来的信息有问题');
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
console.log('网络出现问题');
|
|
})
|
|
pressTimer.value = setTimeout(() => {
|
|
uni.vibrateShort({
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
});
|
|
// 重设按下位置
|
|
const changedTouche = obj.touches[0];
|
|
touchPos.x = changedTouche.clientX;
|
|
touchPos.y = changedTouche.clientY;
|
|
// 记录开始时间戳（毫秒）
|
|
recordStartTime.value = Date.now();
|
|
// 弹出录音界面
|
|
popupRef.value.open();
|
|
startAudioRecord({
|
|
onFrame: (pcmData : any) => {
|
|
if(wsStatus.value) {
|
|
console.log('已连接', pcmData.length);
|
|
ws.value.send({
|
|
data: ProtocolCodec.pack(MessageType.AUDIO_DATA, pcmData)
|
|
});
|
|
}
|
|
},
|
|
onStart: (res : any) => {
|
|
console.log('启动', res);
|
|
},
|
|
onStop: () => {
|
|
console.log('关闭');
|
|
},
|
|
onError: ({ errCode, errMsg }) => {
|
|
console.log('onError', errMsg);
|
|
if (errCode === 9010001) {
|
|
console.log(errMsg);
|
|
}
|
|
}
|
|
});
|
|
}, 140)
|
|
};
|
|
|
|
// 结束录音
|
|
const closePopup = () => {
|
|
popupRef.value.close();
|
|
}
|
|
const stopRecord = async () => {
|
|
clearTimeout(pressTimer.value);
|
|
if (!isRecording.value) return; // 未处于录音状态
|
|
if(isOutStatus.value === '03') { // 转换文字状态
|
|
console.log('已发送', '03转文字');
|
|
switchFromVoiceToText()
|
|
|
|
}
|
|
const recordDurationMs = Date.now() - recordStartTime.value;
|
|
if(isOutStatus.value !== '02') { // 取消的时候，不校验最低时间
|
|
// 核心：计算录音总时长（毫秒转秒，保留1位小数）
|
|
if (recordDurationMs < 600) {
|
|
await new Promise<void>((resolve) => {
|
|
setTimeout(() => {
|
|
resolve()
|
|
}, 600-recordDurationMs)
|
|
})
|
|
}
|
|
}
|
|
isRecording.value = false;
|
|
if(isOutStatus.value === '02' && ws.value) { // 取消的时候自己主动关闭websocket,其他的时候需要等待后端的消息关闭
|
|
ws.value.close({
|
|
code: 1000,
|
|
reason: '挂断',
|
|
complete: () => {
|
|
console.log('挂断Ws');
|
|
wsStatus.value = false;
|
|
}
|
|
});
|
|
}
|
|
stopAudioRecord(); // 关掉录音
|
|
if(isOutStatus.value !== '03') { // 转文字时候不关遮罩层
|
|
popupRef.value.close();
|
|
if(isOutStatus.value !== '02') { // 取消的时候，不校验最低时间
|
|
if(recordDurationMs <= 1200) {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '说话时间太短，没有听清！',
|
|
icon: 'none'
|
|
});
|
|
}, 200)
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
// 从录音状态切换成转文字状态
|
|
const switchFromVoiceToText = () => {
|
|
status.value = 'voice_to_text'
|
|
ws.value && ws.value.send({data: ProtocolCodec.pack(MessageType.CONTROL_CMD, { type: ControlCode.FRNOT_TO_SERVER_OVER, ossID:'', text:'' })});
|
|
voice_to_text_status.value = 'init'
|
|
// 执行动画
|
|
11
|
|
}
|
|
|
|
// 发送文本
|
|
const showKeyboard = () => {
|
|
if (isInputVisible.value) {
|
|
const inputTextTram = inputText.value.trim();
|
|
if (inputTextTram) {
|
|
emit('submit', 'text', inputTextTram);
|
|
} else {
|
|
common.msg('不能发送空白消息！');
|
|
}
|
|
} else {
|
|
isInputVisible.value = !isInputVisible.value;
|
|
}
|
|
};
|
|
// 切换键盘语音
|
|
const changeBtn = () => {
|
|
if (props.isDisabled) return;
|
|
isInputVisible.value = !isInputVisible.value;
|
|
inputText.value = '';
|
|
};
|
|
// 禁用时点击给的提示
|
|
const disabled_click = () => {
|
|
console.log('禁用时点击给的提示');
|
|
if (props.isDisabled) common.msg(props.disabledText);
|
|
};
|
|
|
|
// 外面调用放弃这次
|
|
const give_up = () => {
|
|
console.log('调用结束语音回答');
|
|
stopRecord();
|
|
};
|
|
|
|
// 外部调用，清理输入框数据
|
|
const clearinputText = (text = '') => {
|
|
const old_text = inputText.value;
|
|
inputText.value = text;
|
|
return old_text;
|
|
};
|
|
defineExpose({ clearinputText, give_up });
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./style/index.scss";
|
|
@import "./style/popup.scss";
|
|
|
|
|
|
.talk-dialog {
|
|
width: 506rpx;
|
|
min-height: 234rpx;
|
|
margin: 0 auto 160rpx auto;
|
|
background-color: #06f;
|
|
border-radius: 32rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: width 0.3s ease;
|
|
|
|
.text-div {
|
|
overflow-y: scroll;
|
|
max-height: 434rpx;
|
|
padding: 20rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
&.is-translate {
|
|
width: 706rpx;
|
|
|
|
.gif-box {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.is-out {
|
|
background-color: #ff3e49;
|
|
|
|
&::after {
|
|
background-color: #ff3e49;
|
|
}
|
|
}
|
|
|
|
.gif-box {
|
|
position: absolute;
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
background-color: #06f;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
bottom: -22rpx;
|
|
left: 50%;
|
|
margin-left: -22rpx;
|
|
}
|
|
}
|
|
|
|
.white-bg-box {
|
|
height: 365rpx;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
padding: 58rpx 36rpx;
|
|
|
|
.box-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 46rpx;
|
|
margin-bottom: 46rpx;
|
|
}
|
|
|
|
.box-btns {
|
|
height: 46rpx;
|
|
line-height: 46rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #999;
|
|
|
|
.is-active {
|
|
color: #06f;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
::v-deep .uv-input__content__field-wrapper__field {
|
|
padding-right: 60rpx;
|
|
}
|
|
</style> |