JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_feat: 语音转文本
This commit is contained in:
+1
-1
@@ -8,7 +8,7 @@ ENV = 'development'
|
||||
|
||||
|
||||
|
||||
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
|
||||
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
|
||||
|
||||
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
|
||||
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
|
||||
# VITE_APP_BASE_H5_API_Url_TRAEXAM = 'http://25.64.32.154:9604'
|
||||
# VITE_APP_BASE_H5_API_Url_TRAPRACTICE = 'http://25.64.32.156:9603'
|
||||
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
|
||||
VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
|
||||
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.158:9601'
|
||||
# VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.32.154:9602'
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
import showDialog from '@/common/dialogMessage'
|
||||
import common from '@/common/common'
|
||||
// #endif
|
||||
function msg(title, duration = 1000) {
|
||||
function msg(title, duration = 1500) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
duration: duration,
|
||||
|
||||
@@ -705,19 +705,30 @@
|
||||
// }
|
||||
};
|
||||
const setVoiceTime = (sum) => {
|
||||
sum += 1;
|
||||
if (talkVoiceObj.value.duration) {
|
||||
voiceTime.value = (Math.ceil(talkVoiceObj.value.duration) || 0) + 's';
|
||||
} else {
|
||||
if (sum === 100) {
|
||||
voiceTime.value = (unref(dataInfo).voiceTime || 0) + 's';
|
||||
return;
|
||||
plus.io.getAudioInfo({
|
||||
filePath: unref(dataInfo).talkingVoice,
|
||||
success:(res)=>{
|
||||
voiceTime.value = (Math.floor(res.duration) || 1) + 's'
|
||||
},
|
||||
fail:(res)=>{
|
||||
voiceTime.value = (unref(dataInfo).voiceTime || 1) + 's'
|
||||
}
|
||||
setTimeout(() => {
|
||||
setVoiceTime(sum);
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
})
|
||||
}
|
||||
// const setVoiceTime = (sum) => {
|
||||
// sum += 1;
|
||||
// if (talkVoiceObj.value.duration) {
|
||||
// voiceTime.value = (Math.ceil(talkVoiceObj.value.duration) || 0) + 's';
|
||||
// } else {
|
||||
// if (sum === 100) {
|
||||
// voiceTime.value = (unref(dataInfo).voiceTime || 0) + 's';
|
||||
// return;
|
||||
// }
|
||||
// setTimeout(() => {
|
||||
// setVoiceTime(sum);
|
||||
// }, 300);
|
||||
// }
|
||||
// };
|
||||
const playQnsVoice = (readType = 'qns', item) => {
|
||||
if (type.value === 2) {
|
||||
// 文本转语音
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="talk-btns" ref="talkBtnRef">
|
||||
<view class="touch-btn" @touchstart="getRecordPermission" @touchend="hideOverlayTalking" @touchmove="handleMove" @touchcancel="hideOverlayTalking"
|
||||
v-if="!keyboardIsShow">
|
||||
<view class="touch-btn" @touchstart="getRecordPermission" @touchend="hideOverlayTalking" @touchmove="handleMove"
|
||||
@touchcancel="hideOverlayTalking" v-if="!keyboardIsShow">
|
||||
按住说话
|
||||
</view>
|
||||
<view class="touch-btn" v-if="keyboardIsShow">
|
||||
@@ -9,6 +9,7 @@
|
||||
:adjustPosition="adjustPosition" placeholderStyle="color:#999999;font-size:26rpx"
|
||||
placeholder="请输入文字"></uv-input>
|
||||
</view>
|
||||
<!-- @click="showTalkingModel = true" -->
|
||||
<view class="talk-btn-box" v-show="!onlyVoice">
|
||||
<image class="talk-btn-icon" v-show="!keyboardIsShow" src="/src/static/images/course/jianpan.png" mode=""
|
||||
@click="changeBtn"></image>
|
||||
@@ -17,25 +18,52 @@
|
||||
<image class="talk-btn-icon" v-show="keyboardIsShow && !!answerValue" src="/src/static/images/course/send.png"
|
||||
mode="" @click.stop="showKeyboard"></image>
|
||||
</view>
|
||||
<uni-popup ref="talkModelRef" type="bottom" @click="showTalkingModel = false"
|
||||
mask-background-color="rgba(0,0,0,0.9)">
|
||||
<!-- @click="showTalkingModel = false" -->
|
||||
<!-- <uv-popup ref="talkModelRef" mode="bottom" overlay-style="#000000" overlay-opacity="0.9"
|
||||
mask-background-color="rgba(0,0,0,0.9)" bg-color="none" z-index="10007"
|
||||
@change="({show}) => {showTalkingModel = show}"> -->
|
||||
<uni-popup ref="talkModelRef" type="bottom" :mask-click="false" :safe-area="true"
|
||||
@mask-click="()=>{ console.log(1111)}" mask-background-color="rgba(0,0,0,0.9)">
|
||||
<view class="overlay-box">
|
||||
<view class="circle-bg-box">
|
||||
<view class="icon-box">
|
||||
<image src="/src/static/images/course/talk-icon.png" mode=""></image>
|
||||
<view class="circle-bg-box no-bg" v-if="transVoiceIng">
|
||||
</view>
|
||||
<view class="circle-bg-box" v-else>
|
||||
<view class="tips-box">
|
||||
<!-- <image src="/src/static/images/course/talk-icon.png" mode=""></image> -->
|
||||
<!-- <view class="tips-box"></view> -->
|
||||
松开发送
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips-box">松开发送</view>
|
||||
<view class="btns-box">
|
||||
<view :class="['close-btn', isOut ? 'is-out' : '']">
|
||||
取消
|
||||
<image class="btn-box" v-if="!isOut" src="/src/static/images/course/close.png" mode=""></image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/close-active.png" mode=""></image>
|
||||
<view class="btns-box" v-if="transVoiceIng">
|
||||
<view class="cancel-btn transVoiceIng" @click="closeModel()"></view>
|
||||
<view class="trans-btn transVoiceIng" @click="sendVoice()"></view>
|
||||
<view class="send-btn" @click="sendText()">发送</view>
|
||||
</view>
|
||||
<view class="btns-box" v-else>
|
||||
<view :class="['close-btn', isOutLeft ? 'is-out' : '']">
|
||||
<image class="btn-box" v-if="!isOutLeft" src="/src/static/images/course/cancel.png" mode="heightFix">
|
||||
</image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/cancel-active.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view :class="['close-btn trans-btn', isOutRight ? 'is-out' : '']">
|
||||
<image class="btn-box" v-if="!isOutRight" src="/src/static/images/course/translate.png" mode="heightFix">
|
||||
</image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/translate-active.png" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['talk-dialog', isOut ? 'is-out' : '']">
|
||||
<view :class="['talk-dialog', isOut ? 'is-out' : '']" v-show="!isOutRight">
|
||||
<image src="@/static/images/course/voice-white.gif" mode="" class="gif-box"></image>
|
||||
</view>
|
||||
<view :class="['talk-dialog talk-textarea' ]" v-show="isOutRight" @click.stop>
|
||||
<view class="trans-loading-box" v-show="transLoading">
|
||||
<CommonLoading color="#fff" class="loading-box" />
|
||||
</view>
|
||||
<uv-textarea class="voice-input-box" ref="inputRef" v-model="answerValue" :maxlength="props.textValueLength"
|
||||
v-show="!transLoading" @click.stop customStyle="background: #ffffff00; padding-bottom: 50rpx;"
|
||||
height="250rpx" text-style="color: #fff"
|
||||
placeholderStyle="color:#999999;font-size:26rpx;border-color: #ffffff00 !important;"
|
||||
placeholder=""></uv-textarea>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
@@ -65,6 +93,9 @@
|
||||
onHide,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
commonUploadVoiceFile
|
||||
} from '@/api/common.js';
|
||||
|
||||
|
||||
const storageStore = useStorageStore();
|
||||
@@ -107,6 +138,10 @@
|
||||
default: 'mp3', // 生成语音文件类型
|
||||
type: String
|
||||
},
|
||||
answerMethod: {
|
||||
default: '01', //01 不限制 02 文字 03 语音
|
||||
type: String
|
||||
},
|
||||
});
|
||||
const {
|
||||
isDisabled,
|
||||
@@ -124,7 +159,15 @@
|
||||
|
||||
watch(
|
||||
() => showTalkingModel.value,
|
||||
(val) => (val ? talkModelRef.value.open() : talkModelRef.value.close())
|
||||
(val) => {
|
||||
if (val) {
|
||||
talkModelRef.value.open()
|
||||
} else {
|
||||
talkModelRef.value.close()
|
||||
transVoiceIng.value = false
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
watch(
|
||||
() => props.isLoading,
|
||||
@@ -161,16 +204,18 @@
|
||||
|
||||
const answerValue = ref('');
|
||||
const talkBtnRef = ref();
|
||||
const transVoiceIng = ref(false)
|
||||
// 录音
|
||||
const audioPath = ref('');
|
||||
const audioObj = uni.createInnerAudioContext();
|
||||
const isGettingPermission = ref(false)
|
||||
const isStartNum = ref(0);
|
||||
const isStopNum = ref(0);
|
||||
//#ifdef APP-PLUS
|
||||
// app端
|
||||
const recordObjCom = ref({});
|
||||
const IsAndEnv = getPhoneEnvBool('AND');
|
||||
const isStartNum = ref(0);
|
||||
const isStopNum = ref(0);
|
||||
const transLoading = ref(false)
|
||||
const initRecord = () => {
|
||||
recordObjCom.value = uni.getRecorderManager();
|
||||
unref(recordObjCom)?.onStop((res, duration) => {
|
||||
@@ -180,27 +225,51 @@
|
||||
return
|
||||
}
|
||||
audioPath.value = res.tempFilePath;
|
||||
console.log(isOut.value, isOutLeft.value, isOutRight.value)
|
||||
if (!isOut.value) {
|
||||
if (startFlag.value !== 2) {
|
||||
// setTimeout(() => {
|
||||
// showTalkingModel.value = false
|
||||
// nextTick(() => {
|
||||
// // showTalkingModel.value = false
|
||||
// common.msg('说话时间太短,没有听清!')
|
||||
// })
|
||||
// },100)
|
||||
closeModel(() => {
|
||||
nextTick(() => {
|
||||
// showTalkingModel.value = false
|
||||
common.msg('说话时间太短,没有听清!');
|
||||
});
|
||||
});
|
||||
} else {
|
||||
closeModel();
|
||||
if (props.answerMethod === '02') {
|
||||
common.msg('当前回答限制为仅文本回答!')
|
||||
return
|
||||
}
|
||||
emit('uploadVoice', audioPath.value, recordTime.value);
|
||||
}
|
||||
} else {
|
||||
} else if (isOutLeft.value) {
|
||||
console.log('取消')
|
||||
closeModel();
|
||||
} else if (isOutRight.value) {
|
||||
console.log('转文本')
|
||||
transLoading.value = true
|
||||
commonUploadVoiceFile(audioPath.value, '/traapp/voice/voiceChart', {}).then(res => {
|
||||
console.log(res)
|
||||
transLoading.value = false
|
||||
if (!!(res.body.chatBody || '').trim()) {
|
||||
answerValue.value = res.body.chatBody
|
||||
} else {
|
||||
closeModel()
|
||||
uni.showToast({
|
||||
title: '未识别到文字',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
transLoading.value = false
|
||||
closeModel()
|
||||
uni.showToast({
|
||||
title: '系统异常,请联系管理员',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
unref(recordObjCom).onStart(() => {
|
||||
@@ -227,6 +296,8 @@
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const setRecordTime = () => {
|
||||
setTimeout(() => {
|
||||
if (isRecording.value) {
|
||||
@@ -251,16 +322,24 @@
|
||||
try {
|
||||
if (unref(recordObjCom).stop) {
|
||||
unref(recordObjCom).stop();
|
||||
if (!transVoiceIng.value) {
|
||||
console.log('1234')
|
||||
setTimeout(() => {
|
||||
closeModel()
|
||||
}, 300)
|
||||
}
|
||||
} else {
|
||||
closeModel();
|
||||
}
|
||||
} catch {
|
||||
console.log('catch')
|
||||
closeModel();
|
||||
}
|
||||
// setTimeout(() => {
|
||||
// canStart.value = true
|
||||
// }, 1000)
|
||||
};
|
||||
// #endif
|
||||
const closeModel = (cb = () => {}) => {
|
||||
isStopNum.value = isStartNum.value;
|
||||
setTimeout(() => {
|
||||
@@ -271,7 +350,21 @@
|
||||
isTalking.value = false;
|
||||
}, 800);
|
||||
};
|
||||
// #endif
|
||||
|
||||
const sendText = () => {
|
||||
keyboardIsShow.value = true
|
||||
showKeyboard(closeModel)
|
||||
}
|
||||
|
||||
const sendVoice = () => {
|
||||
closeModel();
|
||||
if (props.answerMethod === '02') {
|
||||
common.msg('当前回答限制为仅文本回答!')
|
||||
return
|
||||
}
|
||||
emit('uploadVoice', audioPath.value, recordTime.value);
|
||||
}
|
||||
|
||||
//#ifndef APP-PLUS
|
||||
const recordObjCom = ref({});
|
||||
const initRecord = () => {};
|
||||
@@ -293,6 +386,15 @@
|
||||
let moveVal = windowInfo.screenHeight - touchY.value > _btnHeight;
|
||||
return moveVal;
|
||||
});
|
||||
const isOutLeft = computed(() => {
|
||||
let _left = windowInfo.screenWidth / 2 > touchX.value
|
||||
return _left && isOut.value;
|
||||
});
|
||||
const isOutRight = computed(() => {
|
||||
let _right = windowInfo.screenWidth / 2 < touchX.value
|
||||
return _right && isOut.value;
|
||||
// return true
|
||||
});
|
||||
const outScreen = computed(() => {
|
||||
windowInfo.screenHeight - touchY.value <= 0;
|
||||
});
|
||||
@@ -327,7 +429,7 @@
|
||||
}
|
||||
// #endif
|
||||
//#ifdef H5
|
||||
showOverlayTalking(obj);
|
||||
showOverlayTalking(obj);
|
||||
// #endif
|
||||
};
|
||||
const getPermission = async () => {
|
||||
@@ -381,6 +483,7 @@
|
||||
const isMoving = ref(false);
|
||||
const isTalking = ref(false);
|
||||
const showOverlayTalking = (obj) => {
|
||||
console.log(obj)
|
||||
if (showTalkingModel.value) return;
|
||||
if (isGettingPermission.value) {
|
||||
//#ifdef APP-PLUS
|
||||
@@ -422,7 +525,7 @@
|
||||
startRecord();
|
||||
// #endif
|
||||
//#ifdef H5
|
||||
showTalkingModel.value = true
|
||||
showTalkingModel.value = true
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
if (_recnum === recNum.value) {
|
||||
@@ -442,10 +545,20 @@
|
||||
isMoving.value = false;
|
||||
if (!showTalkingModel.value) return;
|
||||
//#ifdef APP-PLUS
|
||||
transVoiceIng.value = isOutRight.value
|
||||
stopRecord();
|
||||
// #endif
|
||||
|
||||
|
||||
//#ifdef H5
|
||||
showTalkingModel.value = false
|
||||
if (isOutRight.value) {
|
||||
console.log('H5转文本')
|
||||
transVoiceIng.value = true
|
||||
emit('transVoice', audioPath.value);
|
||||
} else {
|
||||
transVoiceIng.value = false
|
||||
showTalkingModel.value = false
|
||||
}
|
||||
// #endif
|
||||
};
|
||||
|
||||
@@ -459,19 +572,20 @@
|
||||
}
|
||||
};
|
||||
// 发送文本
|
||||
const showKeyboard = () => {
|
||||
const showKeyboard = (cb = () => {}) => {
|
||||
if (props.answerMethod === '03') {
|
||||
common.msg('当前回答限制为仅语音回答!')
|
||||
return
|
||||
}
|
||||
if (isLoadingState.value) {
|
||||
uni.showToast({
|
||||
title: props.loadingText,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
common.msg(props.loadingText);
|
||||
return;
|
||||
}
|
||||
if (!isDisabled.value) {
|
||||
if (keyboardIsShow.value) {
|
||||
if (answerValue.value.trim()) {
|
||||
emit('submitAnswer', answerValue.value, changeBtn);
|
||||
cb && cb()
|
||||
} else {
|
||||
// keyboardIsShow.value = !keyboardIsShow.value
|
||||
common.msg('不能发送空白消息!');
|
||||
@@ -480,11 +594,7 @@
|
||||
keyboardIsShow.value = !keyboardIsShow.value;
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无问题需要回答!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
common.msg('暂无问题需要回答!');
|
||||
}
|
||||
};
|
||||
const changeBtn = () => {
|
||||
@@ -549,9 +659,10 @@
|
||||
// justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
// pointer-events: none;
|
||||
max-height: 100vh;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0;
|
||||
|
||||
.circle-bg-box {
|
||||
height: 234rpx;
|
||||
@@ -560,63 +671,102 @@
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
.icon-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -17rpx;
|
||||
margin-top: -24rpx;
|
||||
width: 34rpx;
|
||||
height: 48rpx;
|
||||
pointer-events: none;
|
||||
&.no-bg {
|
||||
background: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tips-box {
|
||||
padding-top: 67rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 33rpx;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-box {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #c0c0c0;
|
||||
text-align: center;
|
||||
margin: 12rpx 0 24rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btns-box {
|
||||
height: 270rpx;
|
||||
height: 240rpx;
|
||||
// padding: 0 120rpx;
|
||||
width: 154rpx;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
margin: 0 auto -20rpx;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 116rpx;
|
||||
pointer-events: none;
|
||||
padding-top: 40rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 12000;
|
||||
justify-content: space-around;
|
||||
|
||||
.transVoiceIng {
|
||||
width: 154rpx;
|
||||
height: 154rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 12010;
|
||||
|
||||
&.cancel-btn {
|
||||
background: url(@/static/images/course/cancel-btn.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.trans-btn {
|
||||
background: url(@/static/images/course/trans-btn.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
position: relative;
|
||||
width: 262rpx;
|
||||
height: 154rpx;
|
||||
line-height: 154rpx;
|
||||
overflow: hidden;
|
||||
background-color: #d8d8d8;
|
||||
border-radius: 77rpx;
|
||||
font-size: 33rpx;
|
||||
z-index: 12010;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
padding-top: 40rpx;
|
||||
line-height: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
|
||||
&.is-out {
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
pointer-events: none;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:not(.trans-btn) {
|
||||
.btn-box {
|
||||
right: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.trans-btn {
|
||||
.btn-box {
|
||||
left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.translate-btn {
|
||||
@@ -628,12 +778,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
max-height: 152rpx;
|
||||
pointer-events: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.talk-dialog {
|
||||
@@ -643,7 +787,33 @@
|
||||
background-color: #06f;
|
||||
border-radius: 32rpx;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
&.talk-textarea {
|
||||
width: 700rpx;
|
||||
background-color: #06f;
|
||||
|
||||
&::after {
|
||||
left: 80%;
|
||||
}
|
||||
|
||||
.trans-loading-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.loading-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uv-border {
|
||||
border-color: #ffffff00 !important;
|
||||
}
|
||||
|
||||
|
||||
&.is-out {
|
||||
background-color: #ff3e49;
|
||||
@@ -676,164 +846,18 @@
|
||||
margin-left: -22rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.voice-input-box {
|
||||
width: 700rpx;
|
||||
height: 234rpx;
|
||||
position: relative;
|
||||
z-index: 1200;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uv-input__content__field-wrapper__field {
|
||||
padding-right: 60rpx;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
// .talk-btns {
|
||||
// height: 150rpx;
|
||||
// background-color: #fff;
|
||||
// padding: 25rpx 30rpx 0;
|
||||
// position: relative;
|
||||
// z-index: v-bind(btnZindex);
|
||||
|
||||
|
||||
|
||||
// .overlay-box {
|
||||
// display: flex;
|
||||
// flex-direction: column-reverse;
|
||||
// // justify-content: flex-end;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
|
||||
// .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: 12rpx 0 24rpx;
|
||||
// }
|
||||
|
||||
// .btns-box {
|
||||
// height: 270rpx;
|
||||
// // padding: 0 120rpx;
|
||||
// width: 154rpx;
|
||||
// margin: 0 auto 100rpx;
|
||||
// overflow: hidden;
|
||||
// font-size: 28rpx;
|
||||
// text-align: center;
|
||||
// line-height: 116rpx;
|
||||
|
||||
// .close-btn {
|
||||
// float: left;
|
||||
// height: 100%;
|
||||
// width: 154rpx;
|
||||
// overflow: hidden;
|
||||
// color: #999;
|
||||
|
||||
// &.is-out {
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .translate-btn {
|
||||
// float: right;
|
||||
// height: 100%;
|
||||
// width: 154rpx;
|
||||
// overflow: hidden;
|
||||
// color: #999;
|
||||
// }
|
||||
|
||||
// .btn-box {
|
||||
// width: 100%;
|
||||
// height: 154rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .talk-dialog {
|
||||
// width: 506rpx;
|
||||
// height: 234rpx;
|
||||
// margin: 0 auto;
|
||||
// background-color: #06f;
|
||||
// border-radius: 32rpx;
|
||||
// position: relative;
|
||||
|
||||
// &.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>
|
||||
+58
-70
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<view class="talk-btns" ref="talkBtnRef">
|
||||
<view class="touch-btn"
|
||||
@touchstart="getRecordPermission"
|
||||
@touchend="hideOverlayTalking"
|
||||
@touchmove="handleMove"
|
||||
@touchcancel="hideOverlayTalking"
|
||||
<view class="touch-btn" @touchstart="getRecordPermission" @touchend="hideOverlayTalking" @touchmove="handleMove" @touchcancel="hideOverlayTalking"
|
||||
v-if="!keyboardIsShow">
|
||||
按住说话
|
||||
</view>
|
||||
@@ -13,7 +9,7 @@
|
||||
:adjustPosition="adjustPosition" placeholderStyle="color:#999999;font-size:26rpx"
|
||||
placeholder="请输入文字"></uv-input>
|
||||
</view>
|
||||
<view class="talk-btn-box" v-show="!onlyVoice" @click="showTalkingModel = true">
|
||||
<view class="talk-btn-box" v-show="!onlyVoice">
|
||||
<image class="talk-btn-icon" v-show="!keyboardIsShow" src="/src/static/images/course/jianpan.png" mode=""
|
||||
@click="changeBtn"></image>
|
||||
<image class="talk-btn-icon" v-show="keyboardIsShow && !answerValue" src="/src/static/images/course/record.png"
|
||||
@@ -25,28 +21,21 @@
|
||||
mask-background-color="rgba(0,0,0,0.9)">
|
||||
<view class="overlay-box">
|
||||
<view class="circle-bg-box">
|
||||
<view class="tips-box">
|
||||
<!-- <image src="/src/static/images/course/talk-icon.png" mode=""></image> -->
|
||||
<!-- <view class="tips-box"></view> -->
|
||||
松开发送{{isOutLeft}}{{isOutRight}}
|
||||
<view class="icon-box">
|
||||
<image src="/src/static/images/course/talk-icon.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips-box">松开发送</view>
|
||||
<view class="btns-box">
|
||||
<view :class="['close-btn', isOutLeft ? 'is-out' : '']">
|
||||
<image class="btn-box" v-if="!isOutLeft" src="/src/static/images/course/cancel.png" mode="heightFix"></image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/cancel-active.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view :class="['close-btn trans-btn', isOutRight ? 'is-out' : '']">
|
||||
<image class="btn-box" v-if="!isOutRight" src="/src/static/images/course/translate.png" mode="heightFix"></image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/translate-active.png" mode="heightFix"></image>
|
||||
<view :class="['close-btn', isOut ? 'is-out' : '']">
|
||||
取消
|
||||
<image class="btn-box" v-if="!isOut" src="/src/static/images/course/close.png" mode=""></image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/close-active.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['talk-dialog', isOut ? 'is-out' : '']" v-show="!isOutRight">
|
||||
<view :class="['talk-dialog', isOut ? 'is-out' : '']">
|
||||
<image src="@/static/images/course/voice-white.gif" mode="" class="gif-box"></image>
|
||||
</view>
|
||||
<view :class="['talk-dialog', isOut ? 'is-out' : '']" v-show="isOutRight">
|
||||
展示文本
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
@@ -193,8 +182,16 @@
|
||||
audioPath.value = res.tempFilePath;
|
||||
if (!isOut.value) {
|
||||
if (startFlag.value !== 2) {
|
||||
// setTimeout(() => {
|
||||
// showTalkingModel.value = false
|
||||
// nextTick(() => {
|
||||
// // showTalkingModel.value = false
|
||||
// common.msg('说话时间太短,没有听清!')
|
||||
// })
|
||||
// },100)
|
||||
closeModel(() => {
|
||||
nextTick(() => {
|
||||
// showTalkingModel.value = false
|
||||
common.msg('说话时间太短,没有听清!');
|
||||
});
|
||||
});
|
||||
@@ -202,11 +199,7 @@
|
||||
closeModel();
|
||||
emit('uploadVoice', audioPath.value, recordTime.value);
|
||||
}
|
||||
} else if (!isOutLeft.value) {
|
||||
console.log('取消')
|
||||
closeModel();
|
||||
} else if (!isOutRight.value) {
|
||||
console.log('转文本')
|
||||
} else {
|
||||
closeModel();
|
||||
}
|
||||
});
|
||||
@@ -258,9 +251,6 @@
|
||||
try {
|
||||
if (unref(recordObjCom).stop) {
|
||||
unref(recordObjCom).stop();
|
||||
setTimeout(() => {
|
||||
closeModel()
|
||||
}, 300)
|
||||
} else {
|
||||
closeModel();
|
||||
}
|
||||
@@ -303,14 +293,6 @@
|
||||
let moveVal = windowInfo.screenHeight - touchY.value > _btnHeight;
|
||||
return moveVal;
|
||||
});
|
||||
const isOutLeft = computed(() => {
|
||||
let _left = windowInfo.screenWidth/ 2 > touchX.value
|
||||
return _left && isOut.value;
|
||||
});
|
||||
const isOutRight = computed(() => {
|
||||
let _right = windowInfo.screenWidth / 2 < touchX.value
|
||||
return _right && isOut.value;
|
||||
});
|
||||
const outScreen = computed(() => {
|
||||
windowInfo.screenHeight - touchY.value <= 0;
|
||||
});
|
||||
@@ -399,7 +381,6 @@
|
||||
const isMoving = ref(false);
|
||||
const isTalking = ref(false);
|
||||
const showOverlayTalking = (obj) => {
|
||||
console.log(obj)
|
||||
if (showTalkingModel.value) return;
|
||||
if (isGettingPermission.value) {
|
||||
//#ifdef APP-PLUS
|
||||
@@ -469,7 +450,6 @@
|
||||
};
|
||||
|
||||
const handleMove = (obj) => {
|
||||
console.log(obj)
|
||||
if (isMoving.value) {
|
||||
touchX.value = obj.changedTouches[0].pageX;
|
||||
touchY.value = obj.changedTouches[0].pageY;
|
||||
@@ -580,61 +560,63 @@
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
.tips-box {
|
||||
padding-top: 67rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 33rpx;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
.icon-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -17rpx;
|
||||
margin-top: -24rpx;
|
||||
width: 34rpx;
|
||||
height: 48rpx;
|
||||
pointer-events: none;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-box {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #c0c0c0;
|
||||
text-align: center;
|
||||
margin: 12rpx 0 24rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btns-box {
|
||||
height: 240rpx;
|
||||
height: 270rpx;
|
||||
// padding: 0 120rpx;
|
||||
width: 100%;
|
||||
margin: 0 auto -20rpx;
|
||||
width: 154rpx;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 116rpx;
|
||||
pointer-events: none;
|
||||
padding-top: 40rpx;
|
||||
display: flex;
|
||||
|
||||
.close-btn {
|
||||
padding-top: 40rpx;
|
||||
line-height: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: #999;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
&.is-out {
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
pointer-events: none;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
&:not(.trans-btn){
|
||||
.btn-box {
|
||||
right: 40rpx;
|
||||
}
|
||||
}
|
||||
&.trans-btn{
|
||||
.btn-box {
|
||||
left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.translate-btn {
|
||||
@@ -646,6 +628,12 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
max-height: 152rpx;
|
||||
pointer-events: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.talk-dialog {
|
||||
@@ -83,6 +83,7 @@
|
||||
:canAnswer="testAnswer"
|
||||
:adjustPosition="true"
|
||||
:canAnswerText="canAnswerText"
|
||||
:answerMethod="answerMethod"
|
||||
:isDisabled="(lastTalkingInfo.type || 0) !== 4 || ['SN', 'MU', 'JD'].includes(lastTalkingInfo.qnsTyp)" />
|
||||
</view>
|
||||
<uv-overlay :show="showSeekModel" opacity=".6" @click="showSeekModel = false">
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
import { ref, unref, onMounted, watch, nextTick, computed, onActivated } from 'vue';
|
||||
import common from '@/common/common';
|
||||
import { setupKeyboardHeightListener } from '@/common/common';
|
||||
import TouchBtn from '@/pages/course/components/touchBtn0.vue';
|
||||
import TouchBtn from '@/pages/course/components/touchBtn.vue';
|
||||
import TalkingItem from './components/talking-item.vue';
|
||||
import PreviewVue from './components/preview.vue';
|
||||
import { useSocketStore } from '@/store/socket.js';
|
||||
@@ -824,13 +824,20 @@
|
||||
const keyboardHeight = ref('0px');
|
||||
const setHeight = (res) => {
|
||||
keyboardHeight.value = (res.height || 0) + 'px';
|
||||
setTimeout(()=>{
|
||||
console.log(totalBotHeight.value)
|
||||
},1000)
|
||||
};
|
||||
const keyBoardIsHide = computed(() => {
|
||||
return parseInt(keyboardHeight.value) == 0;
|
||||
});
|
||||
const bottomHeight = ref('0px');
|
||||
const totalBotHeight = computed(() => {
|
||||
return keyBoardIsHide.value ? 0 + 'px' : parseInt(keyboardHeight.value) - parseInt(bottomHeight.value) + 'px';
|
||||
let isIos
|
||||
// #ifdef APP-PLUS
|
||||
isIos = (plus.os.name == "iOS")
|
||||
// #endif
|
||||
return isIos || keyBoardIsHide.value ? 0 + 'px' : parseInt(keyboardHeight.value) + parseInt(bottomHeight.value) + 'px';
|
||||
});
|
||||
const changeAppHeightBottom = (height) => {
|
||||
//#ifdef APP-PLUS
|
||||
@@ -838,6 +845,8 @@
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
// 计算安全区域底部高度
|
||||
bottomHeight.value = systemInfo.screenHeight - systemInfo.safeArea.bottom + 'px';
|
||||
console.log(systemInfo)
|
||||
console.log(systemInfo.screenHeight , systemInfo.safeArea.bottom )
|
||||
// #endif
|
||||
};
|
||||
|
||||
@@ -907,7 +916,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: v-bind(pageTopPadding);
|
||||
padding-top: var(--status-bar-height);
|
||||
// padding-bottom: v-bind(bottomHeight);
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Reference in New Issue
Block a user