tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_需求样式调整

Browse Source
This commit is contained in:
杨航
2025-12-26 17:57:39 +08:00
parent 0690962735
commit e27bc35354
11 changed files with 867 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/course/components/touchBtn.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<view class="talk-btns" ref="talkBtnRef">
<view class="touch-btn" @touchstart="getRecordPermission" @touchend="hideOverlayTalking" @touchmove="handleMove"
<view class="touch-btn" @touchstart="getRecordPermission" @touchend="hideOverlayTalking" @touchmove="handleMove" @touchcancel="hideOverlayTalking"
v-if="!keyboardIsShow">
按住说话
</view>
src/pages/course/components/touchBtn0.vue
+851
View File
@@ -0,0 +1,851 @@
<template>
<view class="talk-btns" ref="talkBtnRef">
<view class="touch-btn"
@touchstart="getRecordPermission"
@touchend="hideOverlayTalking"
@touchmove="handleMove"
@touchcancel="hideOverlayTalking"
v-if="!keyboardIsShow">
按住说话
</view>
<view class="touch-btn" v-if="keyboardIsShow">
<uv-input class="input-box" ref="inputRef" v-model="answerValue" :maxlength="props.textValueLength"
:adjustPosition="adjustPosition" placeholderStyle="color:#999999;font-size:26rpx"
placeholder="请输入文字"></uv-input>
</view>
<view class="talk-btn-box" v-show="!onlyVoice" @click="showTalkingModel = true">
<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"
mode="" @click="changeBtn"></image>
<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)">
<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>
</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>
</view>
<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', isOut ? 'is-out' : '']" v-show="isOutRight">
展示文本
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {
toRefs,
ref,
computed,
unref,
onMounted,
onUnmounted,
nextTick,
watch,
getCurrentInstance
} from 'vue';
import common from '../../../common/common';
import permission from '@/common/permission.js';
import {
getPhoneEnvBool
} from '@/common/common.js';
import {
useStorageStore
} from '@/store/storage.js';
import {
onHide,
onShow
} from '@dcloudio/uni-app';
const storageStore = useStorageStore();
const proxy = getCurrentInstance();
const emit = defineEmits(['uploadVoice', 'submitAnswer', 'startRecord']);
const props = defineProps({
isDisabled: {
default: true,
type: Boolean
},
isLoading: {
default: false,
type: Boolean
},
loadingText: {
default: '发送回答中，请稍后再试！',
type: String
},
onlyVoice: {
default: false,
type: Boolean
},
canAnswer: {
default: true,
type: Boolean
},
canAnswerText: {
default: '当前状态不能发送内容！',
type: String
},
textValueLength: {
type: Number,
default: 500
},
adjustPosition: {
default: false,
type: Boolean
},
formatType: {
default: 'mp3', // 生成语音文件类型
type: String
},
});
const {
isDisabled,
onlyVoice,
adjustPosition,
formatType
} = toRefs(props);
const isLoadingState = computed(() => props.isLoading);
const showTalkingModel = ref(false);
const keyboardIsShow = ref(false);
const talkModelRef = ref();
storageStore.setTouchBtnZIndex(12);
const btnZindex = computed(() => storageStore.getTouchBtnZIndex);
watch(
() => showTalkingModel.value,
(val) => (val ? talkModelRef.value.open() : talkModelRef.value.close())
);
watch(
() => props.isLoading,
() => {}, {
deep: true,
immediate: true
}
);
watch(
() => props.canAnswer,
() => {}, {
deep: true,
immediate: true
}
);
watch(
() => props.onlyVoice,
() => {}, {
deep: true,
immediate: true
}
);
watch(
() => props.isDisabled,
(val) => {
if (val) {
keyboardIsShow.value = false;
}
}, {
deep: true,
immediate: true
}
);
const answerValue = ref('');
const talkBtnRef = ref();
// 录音
const audioPath = ref('');
const audioObj = uni.createInnerAudioContext();
const isGettingPermission = ref(false)
//#ifdef APP-PLUS
// app端
const recordObjCom = ref({});
const IsAndEnv = getPhoneEnvBool('AND');
const isStartNum = ref(0);
const isStopNum = ref(0);
const initRecord = () => {
recordObjCom.value = uni.getRecorderManager();
unref(recordObjCom)?.onStop((res, duration) => {
isRecording.value = false
if (isGettingPermission.value) {
isGettingPermission.value = false
return
}
audioPath.value = res.tempFilePath;
if (!isOut.value) {
if (startFlag.value !== 2) {
closeModel(() => {
nextTick(() => {
common.msg('说话时间太短，没有听清！');
});
});
} else {
closeModel();
emit('uploadVoice', audioPath.value, recordTime.value);
}
} else if (!isOutLeft.value) {
console.log('取消')
closeModel();
} else if (!isOutRight.value) {
console.log('转文本')
closeModel();
}
});
unref(recordObjCom).onStart(() => {
isRecording.value = true
recordTime.value = 0
setRecordTime()
if (isGettingPermission.value) {
isGettingPermission.value = false
return
}
startFlag.value = 1;
setTimeout(() => {
startFlag.value = 2;
}, 1000);
let _recordPerm = uni.getAppAuthorizeSetting();
let _state = _recordPerm.microphoneAuthorized;
console.log(isStopNum.value === isStartNum.value, _state);
if (_state === 'authorized') {
if (isStopNum.value === isStartNum.value) {
stopRecord();
} else {
showTalkingModel.value = true;
}
}
});
};
const setRecordTime = () => {
setTimeout(() => {
if (isRecording.value) {
recordTime.value += 1
setRecordTime()
}
}, 1000)
}
const isRecording = ref(false)
const recordTime = ref(0)
const startFlag = ref(1);
// const canStart = ref(true)
const startRecord = () => {
isStartNum.value += 1;
unref(recordObjCom).start({
format: formatType.value
});
};
const stopRecord = () => {
isStopNum.value = isStartNum.value;
try {
if (unref(recordObjCom).stop) {
unref(recordObjCom).stop();
setTimeout(() => {
closeModel()
}, 300)
} else {
closeModel();
}
} catch {
closeModel();
}
// setTimeout(() => {
// canStart.value = true
// }, 1000)
};
const closeModel = (cb = () => {}) => {
isStopNum.value = isStartNum.value;
setTimeout(() => {
showTalkingModel.value = false;
cb && cb();
}, 350);
setTimeout(() => {
isTalking.value = false;
}, 800);
};
// #endif
//#ifndef APP-PLUS
const recordObjCom = ref({});
const initRecord = () => {};
// #endif
onMounted(async () => {
initRecord?.();
});
// 录音结束
// 记录 按下移动位置
const touchX = ref(0);
const touchY = ref(0);
const baseY = ref(0);
const windowInfo = uni.getWindowInfo();
// 计算是否超出按下盒子位置
const isOut = computed(() => {
let _btnHeight = (windowInfo.screenWidth / 750) * 234;
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;
});
const recNum = ref(1);
const activeNum = ref(1);
const hasPermission = ref(false)
const getRecordPermission = async (obj) => {
if (isDisabled.value) return;
//#ifdef APP-PLUS
if (isTalking.value) {
common.msg('操作频繁，请稍后重试！');
setTimeout(() => {
isTalking.value = false;
}, 500);
return;
}
if (!hasPermission.value) {
let _res = await getPermission()
if (_res) {
hasPermission.value = true
setTimeout(() => {
if (!isGettingPermission.value) {
showOverlayTalking(obj);
} else {
isGettingPermission.value = false
}
}, 100)
}
} else {
showOverlayTalking(obj);
}
// #endif
//#ifdef H5
showOverlayTalking(obj);
// #endif
};
const getPermission = async () => {
//#ifdef APP-PLUS
// 安卓端
if (IsAndEnv) {
let _recordPerm = await permission.requestAndroidPermission('android.permission.RECORD_AUDIO');
if (_recordPerm !== 1) {
showTalkingModel.value = false;
let res = await common.show('提示信息', '当前页面需要使用的录音权限，是否前往开启？', true, '取消', '确定')
if (res) {
// 去开启权限
permission.gotoAppPermissionSetting();
} else {
// 取消
common.navigateBack();
}
return false
} else {
// isGettingPermission.value = false
return true
}
} else {
let _recordPerm = uni.getAppAuthorizeSetting();
let _state = _recordPerm.microphoneAuthorized;
if (_state === 'denied') {
common.show('提示信息', '当前页面需要使用的录音权限，是否前往开启？', true, '取消', '确定').then((res) => {
if (res) {
// 去开启权限
uni.openAppAuthorizeSetting();
} else {
// 取消
common.navigateBack();
}
});
return false
} else if (_state === 'not determined') {
// startRecord()
// isGettingPermission.value = false
return true
} else {
// isGettingPermission.value = false
return true
}
}
// #endif
// //#ifndef APP-PLUS
// return true
// // #endif
}
const isMoving = ref(false);
const isTalking = ref(false);
const showOverlayTalking = (obj) => {
console.log(obj)
if (showTalkingModel.value) return;
if (isGettingPermission.value) {
//#ifdef APP-PLUS
stopRecord()
// #endif
isGettingPermission.value = false
return
}
if (isLoadingState.value) {
uni.showToast({
title: props.loadingText,
icon: 'none',
duration: 1000
});
return;
}
if (!props.canAnswer) {
uni.showToast({
title: props.canAnswerText,
icon: 'none',
duration: 1000
});
return;
}
// if(!canStart.value){
// return
// }
isMoving.value = true;
isTalking.value = true;
emit('startRecord');
recNum.value += 1;
let _recnum = recNum.value
if (!isDisabled.value) {
touchX.value = obj.changedTouches[0].pageX;
touchY.value = obj.changedTouches[0].pageY;
baseY.value = obj.currentTarget.offsetTop;
//#ifdef APP-PLUS
// canStart.value = false
startRecord();
// #endif
//#ifdef H5
showTalkingModel.value = true
// #endif
setTimeout(() => {
if (_recnum === recNum.value) {
hideOverlayTalking(recNum.value);
}
}, 59 * 1010);
} else {
showTalkingModel.value = false;
uni.showToast({
title: '暂无问题需要回答！',
icon: 'none',
duration: 1000
});
}
};
const hideOverlayTalking = (obj) => {
isMoving.value = false;
if (!showTalkingModel.value) return;
//#ifdef APP-PLUS
stopRecord();
// #endif
//#ifdef H5
showTalkingModel.value = false
// #endif
};
const handleMove = (obj) => {
console.log(obj)
if (isMoving.value) {
touchX.value = obj.changedTouches[0].pageX;
touchY.value = obj.changedTouches[0].pageY;
// if (outScreen.value) {
// hideOverlayTalking(obj);
// }
}
};
// 发送文本
const showKeyboard = () => {
if (isLoadingState.value) {
uni.showToast({
title: props.loadingText,
icon: 'none',
duration: 1000
});
return;
}
if (!isDisabled.value) {
if (keyboardIsShow.value) {
if (answerValue.value.trim()) {
emit('submitAnswer', answerValue.value, changeBtn);
} else {
// keyboardIsShow.value = !keyboardIsShow.value
common.msg('不能发送空白消息！');
}
} else {
keyboardIsShow.value = !keyboardIsShow.value;
}
} else {
uni.showToast({
title: '暂无问题需要回答！',
icon: 'none',
duration: 1000
});
}
};
const changeBtn = () => {
if (props.isDisabled) return;
keyboardIsShow.value = !keyboardIsShow.value;
answerValue.value = '';
};
onHide(() => {
isGettingPermission.value = true
})
</script>
<style lang="scss" scoped>
.talk-btns {
height: 150rpx;
background-color: #fff;
padding: 25rpx 30rpx 0;
position: relative;
z-index: v-bind(btnZindex);
.touch-btn {
height: 92rpx;
box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);
text-align: center;
line-height: 92rpx;
font-size: 28rpx;
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;
// justify-content: flex-end;
width: 100%;
height: 100%;
pointer-events: none;
max-height: 100vh;
justify-content: space-between;
.circle-bg-box {
height: 234rpx;
background: url(@/static/images/course/talking.png) no-repeat;
background-size: cover;
position: relative;
pointer-events: none;
.tips-box {
padding-top: 67rpx;
line-height: 40rpx;
font-size: 33rpx;
color: #000;
text-align: center;
}
}
.btns-box {
height: 240rpx;
// padding: 0 120rpx;
width: 100%;
margin: 0 auto -20rpx;
overflow: hidden;
font-size: 28rpx;
text-align: center;
pointer-events: none;
padding-top: 40rpx;
.close-btn {
line-height: 28rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
float: left;
height: 100%;
width: 50%;
overflow: hidden;
color: #999;
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 {
float: right;
height: 100%;
width: 154rpx;
overflow: hidden;
color: #999;
pointer-events: none;
}
}
.talk-dialog {
width: 506rpx;
height: 234rpx;
margin: 0 auto;
background-color: #06f;
border-radius: 32rpx;
position: relative;
pointer-events: 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%);
pointer-events: none;
}
&::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;
pointer-events: none;
}
}
}
::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>
src/pages/course/study.vue
+4
View File
@@ -250,6 +250,7 @@ const getData = async flag => {
watchFlag.value += 1
}
}
const answerMethod = ref('01')
const startStudy = data => {
studyStartApi(data)
.then(res => {
@@ -260,6 +261,9 @@ const startStudy = data => {
logId.value = body.logId || ''
getGraphInfoUnStudy(1)
step.value = 2
console.log(body)
answerMethod.value = body.answerMethod || '01'
})
.catch(err => {})
}
src/pages/index/dialog.vue
+1 -1
View File
@@ -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/touchBtn.vue';
import TouchBtn from '@/pages/course/components/touchBtn0.vue';
import TalkingItem from './components/talking-item.vue';
import PreviewVue from './components/preview.vue';
import { useSocketStore } from '@/store/socket.js';
src/pages/me/index.vue
+1 -1
View File
@@ -200,7 +200,7 @@
const badgeNumRef = ref(null);
const currentPointsRef = ref(null);
const gotoTestPage = () => {
// common.navigateTo('/pages/test/index');
common.navigateTo('/pages/test/index');
};
const user_info = reactive({
userName: '',
src/pages/sparring/components/touchBtn.vue
+3 -2
View File
@@ -182,13 +182,14 @@
}
}
});
unref(recordObjCom).onError(() => {
unref(recordObjCom).onError((err) => {
isRecording.value = false
isGettingPermission.value = false
if (showTalkingModel.value) {
closeModel();
}
common.msg('语音输入错误，请重试！')
common.msg(err)
// common.msg(err'语音输入错误，请重试！')
});
};
const setRecordTime = () => {
src/pages/sparring/js/useWebSocket.js
+6 -13
View File
@@ -83,7 +83,6 @@ export default function useWebSocket(aaas = null, options = {}) {
playPcmCallback(numArray)
break;
case MessageType.ERROR:
console.log('错误',body.errCode, body.errMsg);
switch (body.errCode) {
case 1:
// ASR或TTS初始化出错
@@ -105,20 +104,14 @@ export default function useWebSocket(aaas = null, options = {}) {
code: 4001,
reason: body.errMsg
})
onClose({
code: 4001,
reason: body.errMsg
})
break;
default:
ws.value.close({
code: 4001,
reason: body.errMsg
})
onClose({
code: 4001,
reason: body.errMsg
})
console.log('其他错误码的默认处理', body);
// 其他错误码的默认处理（如果需要）
// ws.value.close({
// code: 1001,
// reason: body.errMsg
// })
break;
}
break;
src/static/images/course/cancel-active.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/static/images/course/cancel.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

src/static/images/course/translate-active.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

src/static/images/course/translate.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 KiB