531 lines
12 KiB
Vue
531 lines
12 KiB
Vue
<template>
|
|
<view class="talk-btns">
|
|
<view class="touch-btn" @click="disabled_click">
|
|
<!-- @touchend="stopRecord(false)" -->
|
|
<uv-button
|
|
class="touch-btn"
|
|
@touchstart="startRecord"
|
|
@touchmove="handleMove"
|
|
@touchend="loosenButton"
|
|
v-if="!keyboardIsShow"
|
|
:customStyle="{ height: '92rpx' }"
|
|
>
|
|
按住说话
|
|
</uv-button>
|
|
<uv-input
|
|
v-if="keyboardIsShow"
|
|
class="input-box"
|
|
ref="inputRef"
|
|
v-model="inputText"
|
|
:maxlength="props.textValueLength"
|
|
:adjustPosition="true"
|
|
placeholderStyle="color:#999999;font-size:26rpx"
|
|
placeholder="请输入文字"
|
|
:disabled="props.isDisabled"
|
|
></uv-input>
|
|
</view>
|
|
|
|
<view class="talk-btn-box">
|
|
<image
|
|
class="talk-btn-icon"
|
|
v-show="!keyboardIsShow"
|
|
src="@/static/images/course/jianpan.png"
|
|
mode=""
|
|
@click="changeBtn"
|
|
></image>
|
|
<image
|
|
class="talk-btn-icon"
|
|
v-show="keyboardIsShow && !inputText"
|
|
src="@/static/images/course/record.png"
|
|
mode=""
|
|
@click="changeBtn"
|
|
></image>
|
|
<image
|
|
class="talk-btn-icon"
|
|
v-show="keyboardIsShow && !!inputText"
|
|
src="@/static/images/course/send.png"
|
|
mode=""
|
|
@click.stop="showKeyboard"
|
|
></image>
|
|
</view>
|
|
<uni-popup ref="popupRef" class="popup">
|
|
<view class="overlay-box">
|
|
<view class="circle-bg-box">
|
|
<view class="tips-box">松开发送</view>
|
|
</view>
|
|
<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="talk-dialog" :class="{ 'is-out': isOutStatus === '02', 'is-translate': isOutStatus === '03' }">
|
|
<image src="@/static/images/course/voice-white.gif" mode="" class="gif-box"></image>
|
|
<uv-textarea
|
|
ref="inputRef"
|
|
v-model="allText"
|
|
: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 class="text-div" v-if="isOutStatus === '03'">
|
|
{{ allText }}{{ tempText }}
|
|
</view> -->
|
|
</view>
|
|
<view class="fl1"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 导出图片
|
|
import { cancelBtn, cancelActiveBtn, translateBtn, translateActiveBtn } from './touch-btn.images';
|
|
import { StatusType } from './touch-btn.types';
|
|
import { wsUrl, bottomAreaTopBoundary, horizontalSplitX } 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 { getPhoneEnvBool, getToken } from '@/common/common.js';
|
|
import { startAudioRecord, stopAudioRecord,preRequestRecordPermission } from '@/uni_modules/ty-recording';
|
|
import { ProtocolCodec, MessageType, ControlCommand, ControlCode } from '@/pages/sparring/js/ProtocolCodec';
|
|
import permissionApi from '@/common/permission';
|
|
|
|
|
|
const emit = defineEmits(['submit']);
|
|
const ws = ref(null);
|
|
const status = ref<StatusType>('voice');
|
|
const props = defineProps({
|
|
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 touchPos = reactive({ x: 0, y: 0 });
|
|
|
|
// 计算是否超出按下盒子位置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 allText = ref('');
|
|
const tempText = ref('');
|
|
|
|
// 键盘还是语音
|
|
const keyboardIsShow = ref(false);
|
|
const popupRef = ref(null);
|
|
const inputText = ref('');
|
|
let startTime = 0;
|
|
// 开启语音
|
|
const startRecord = async (obj) => {
|
|
try {
|
|
const state = await permissionApi.judgeIosPermission('record');
|
|
if(state === 'not determined') {
|
|
preRequestRecordPermission(() => {})
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.error('麦克风权限申请失败：', e);
|
|
return;
|
|
}
|
|
const changedTouche = obj.touches[0];
|
|
touchPos.x = changedTouche.clientX;
|
|
touchPos.y = changedTouche.clientY;
|
|
popupRef.value.open();
|
|
startAudioRecord({
|
|
onFrame: (pcmData: any) => {
|
|
console.log('pcmData', pcmData);
|
|
// console.log('pcmData', 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);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// ws.value = uni.connectSocket({
|
|
// url: wsUrl + '?summary=' + getToken(),
|
|
// fail: () => {},
|
|
// success: () => {}
|
|
// });
|
|
// ws.value.onOpen((res) => {
|
|
// console.log('ws已连接');
|
|
// popupRef.value.open();
|
|
|
|
// });
|
|
// ws.value.onError((err) => {
|
|
// console.log('err', err);
|
|
// });
|
|
// ws.value.onClose((err) => {
|
|
// console.log('onClose', err);
|
|
// });
|
|
// ws.value.onMessage((res) => {
|
|
// try {
|
|
// const { msgType, body } = ProtocolCodec.unpack(res.data);
|
|
// console.log('来消息了', msgType, body);
|
|
// if (msgType === MessageType.TEXT_MESSAGE) {
|
|
// tempText.value = '';
|
|
// allText.value = allText.value + body;
|
|
// } else if (msgType === MessageType.TIP_MESSAGE) {
|
|
// // tempText.value = body;
|
|
// }
|
|
// } catch (e) {
|
|
// console.log('后端发来的信息有问题');
|
|
// }
|
|
// });
|
|
};
|
|
// 关掉遮罩层
|
|
const closePopup = () => {
|
|
nextTick(() => {
|
|
allText.value = '';
|
|
tempText.value = '';
|
|
popupRef.value.close();
|
|
});
|
|
|
|
ws.value &&
|
|
ws.value.close({
|
|
code: 1000,
|
|
reason: '挂断',
|
|
success: () => {
|
|
console.log('挂断success');
|
|
},
|
|
fail: () => {
|
|
console.log('挂断fail');
|
|
},
|
|
complete: () => {
|
|
console.log('挂断complete');
|
|
}
|
|
});
|
|
};
|
|
// 松开按钮
|
|
const loosenButton = () => {
|
|
// 判断一下位置，03的时候是转文字不能关闭
|
|
if (isOutStatus.value === '03') {
|
|
// 03转文字
|
|
console.log('已发送', '03转文字');
|
|
ws.value.send({
|
|
data: ProtocolCodec.pack(MessageType.CONTROL_CMD, { type: ControlCode.FRNOT_TO_SERVER_OVER })
|
|
});
|
|
} else {
|
|
closePopup();
|
|
}
|
|
stopRecord();
|
|
};
|
|
// 结束录音
|
|
const stopRecord = (status = false) => {
|
|
console.log('结束录音stopRecord', status);
|
|
// 判断一下位置
|
|
if (isOutStatus.value === '01') {
|
|
// 01发送
|
|
} else if (isOutStatus.value === '02') {
|
|
// 02取消
|
|
} else if (isOutStatus.value === '03') {
|
|
// 03转文字
|
|
}
|
|
|
|
stopAudioRecord();
|
|
};
|
|
|
|
onMounted(async () => {});
|
|
onHide(() => {
|
|
// closePopup();
|
|
console.log('onHide');
|
|
});
|
|
|
|
const activeNum = ref(1);
|
|
|
|
const clearinputText = (text = '') => {
|
|
const old_text = inputText.value;
|
|
inputText.value = text;
|
|
return old_text;
|
|
};
|
|
|
|
// 发送文本
|
|
const showKeyboard = () => {
|
|
if (keyboardIsShow.value) {
|
|
const inputTextTram = inputText.value.trim();
|
|
if (inputTextTram) {
|
|
emit('submit', 'text', inputTextTram);
|
|
} else {
|
|
common.msg('不能发送空白消息！');
|
|
}
|
|
} else {
|
|
keyboardIsShow.value = !keyboardIsShow.value;
|
|
}
|
|
};
|
|
// 切换键盘语音
|
|
const changeBtn = () => {
|
|
if (props.isDisabled) return;
|
|
keyboardIsShow.value = !keyboardIsShow.value;
|
|
inputText.value = '';
|
|
};
|
|
// 禁用时点击给的提示
|
|
const disabled_click = () => {
|
|
console.log('禁用时点击给的提示');
|
|
if (props.isDisabled) common.msg(props.disabledText);
|
|
};
|
|
|
|
// 外面调用放弃这次
|
|
const give_up = () => {
|
|
console.log('调用结束语音回答');
|
|
stopRecord(false);
|
|
};
|
|
defineExpose({ clearinputText, give_up });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.talk-btns {
|
|
height: 150rpx;
|
|
background-color: #fff;
|
|
padding: 25rpx 30rpx 0;
|
|
position: relative;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.overlay-box {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
|
|
.circle-bg-box {
|
|
height: 234rpx;
|
|
background: url(@/static/images/course/talking.png) no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
|
|
.icon-box {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -17rpx;
|
|
margin-top: -24rpx;
|
|
width: 34rpx;
|
|
height: 48rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips-box {
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
color: #c0c0c0;
|
|
text-align: center;
|
|
margin: 36rpx 0 12rpx 0;
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
line-height: 46px;
|
|
}
|
|
|
|
.btns-box {
|
|
height: 240rpx;
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
z-index: 1200;
|
|
justify-content: space-around;
|
|
position: relative;
|
|
.btn-box {
|
|
position: absolute;
|
|
height: 164rpx;
|
|
transform: scale(1.2);
|
|
bottom: -10rpx;
|
|
}
|
|
.btn-box-1 {
|
|
left: -40rpx;
|
|
}
|
|
.btn-box-2 {
|
|
right: -40rpx;
|
|
}
|
|
}
|
|
|
|
.talk-dialog {
|
|
width: 506rpx;
|
|
min-height: 234rpx;
|
|
margin: 0 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>
|