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

JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_fix: bug

Browse Source
This commit is contained in:
杨航
2026-03-23 17:45:22 +08:00
parent d23ed6ac2e
commit 8b68bfbe46
2 changed files with 152 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-input/comment-input.vue
+150 -120
View File
@@ -3,24 +3,11 @@
<view class="main-input-div">
<!-- 多行文本 -->
<view class="input-div">
<uv-textarea
class="textarea"
:class="{'margin-bottom-12':isShow}"
ref="textareaRef"
v-model="value"
border="none"
:placeholder="placeholder"
:customStyle="customStyle"
autoHeight
:adjustPosition="false"
fixed
:focus="isFocus"
:cursor="cursorLength"
@focus="focus"
@blur="blur"
></uv-textarea>
<uv-textarea class="textarea" :class="{'margin-bottom-12':isShow}" ref="textareaRef" v-model="value"
border="none" :placeholder="placeholder" :customStyle="customStyle" autoHeight :adjustPosition="false" fixed
:focus="isFocus" :cursor="cursorLength" @focus="focus" @blur="blur"></uv-textarea>
</view>
<view class="picture-cont" v-if="isShow && !isReply">
<!-- 下方的图片展示框 -->
<view class="imgs-div" v-if="!isImg">
@@ -33,36 +20,20 @@
<view class="picture-tips" v-if="isImg">最多可添加4张图片</view>
<view class="num-box">
<view class="tab" v-if="isShow">
<view
class="tab-btn"
:class="{ 'is-active': bbsTag == 'SUG' }"
@click="bbsTag = 'SUG'"
>
<view class="tab-btn" :class="{ 'is-active': bbsTag == 'SUG' }" @click="bbsTag = 'SUG'">
建议
</view>
<view
class="tab-btn"
:class="{ 'is-active': bbsTag == 'ASK' }"
@click="bbsTag = 'ASK'"
>
<view class="tab-btn" :class="{ 'is-active': bbsTag == 'ASK' }" @click="bbsTag = 'ASK'">
提问
</view>
</view>
<view class="slider-box">
<slider
:min="0"
:max="10"
:value="10"
@change="sliderChange"
:step="0.1"
:show-value="true"
:blockSize="14"
class="custom-slider"
></slider>
<slider :min="0" :max="10" :value="10" @change="sliderChange" :step="0.1" :show-value="true" :blockSize="14"
class="custom-slider"></slider>
</view>
</view>
</view>
<!-- 工具框 -->
<!-- <view class="setting-div" v-if="isShow"></view> -->
</view>
@@ -77,21 +48,23 @@
<image class="img" :src="commentInput1" mode="aspectFit"></image>
</view>
<view class="fl1"></view>
<view :class="['tool-send', sendDisabled?'is-disabled':'']" @click="submit">发送</view>
<view :class="['tool-send', sendDisabled?'is-disabled':'']" @click="submit">发送</view>
</view>
<!-- 下方主要表情输入框 -->
<view class="bottom-main-input-div">
<view class="expression-tool-div">
<view :class="['tool-icon tool-icon-img checked_tool',currentIndex === 0 ? 'is-active-tool':'']" @click="currentIndex = 0">
<view :class="['tool-icon tool-icon-img checked_tool',currentIndex === 0 ? 'is-active-tool':'']"
@click="currentIndex = 0">
<image class="img" :src="commentInput1" mode="aspectFit"></image>
</view>
<view v-if="!isReply" :class="['tool-icon tool-icon-img checked_tool',currentIndex === 1 ? 'is-active-tool':'']" @click="currentIndex = 1">
<view v-if="!isReply" :class="['tool-icon tool-icon-img checked_tool',currentIndex === 1 ? 'is-active-tool':'']"
@click="currentIndex = 1">
<image class="img" :src="commentInput4" mode="aspectFit"></image>
</view>
<view class="fl1"></view>
</view>
<swiper class="stack-swiper" :current="currentIndex" previous-margin="0"
next-margin="0" :autoplay="false" @change="changeCurrent">
<swiper class="stack-swiper" :current="currentIndex" previous-margin="0" next-margin="0" :autoplay="false"
@change="changeCurrent">
<swiper-item key="1" class="swiper-item">
<scroll-view :scroll-y="true" class="emoji-list">
<view class="emoji-item" v-for="emojiItem in emojiList" @click="insertValue(emojiItem)">
@@ -116,26 +89,38 @@
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, onBeforeUnmount } from 'vue';
import { emojiList } from '@/emoji';
import { publishCrsEvaluation, queryTraMemeInfoList } from '@/api/courseDetail.js'
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';
import {
uploadFile
} from '@/api/common'
const props = defineProps({
crsId:{
crsId: {
type: String,
default: ''
}
})
const emit = defineEmits(['submitOver', 'sendReply'])
const isReply = ref(false)
const clickHandler = () => {
if(!isShow.value){
if (!isShow.value) {
isReply.value = false
}
}
@@ -149,7 +134,7 @@
const isShow = ref(false);
const value = ref('');
const click_input = () => {
if(!isShow.value) isShow.value = true
if (!isShow.value) isShow.value = true
}
const textareaRef = ref()
const isFocus = ref(false)
@@ -163,7 +148,7 @@
isFocus.value = true
cursorLength.value = resStart.value || value.value.length
}
const sendDisabled = computed(()=>{
const sendDisabled = computed(() => {
return value.value.length === 0 && fileList.value.length === 0
})
const showEmoji = ref(false)
@@ -174,14 +159,14 @@
const focus = (event) => {
isShow.value = true
isFocus.value = true
if(!isReply.value){
if (!isReply.value) {
getMemList()
}
}
const placeholder = computed(()=>{
if(isReply.value){
return answerData.value.placeholder||'请输入回复信息'
}else{
const placeholder = computed(() => {
if (isReply.value) {
return answerData.value.placeholder || '请输入回复信息'
} else {
return '发条评论，和大家一起讨论'
}
})
@@ -192,22 +177,23 @@
isShow.value = true
isFocus.value = false
}
const hideAll = (flag=false) => {
const hideAll = (flag = false) => {
popHeight.value = '0px'
isShow.value = false
isFocus.value = false
if(flag){
isReply.value = false
if (flag) {
value.value = ''
fileList.value = []
}
}
const answerData = ref({})
const resetVal = (data={} , $isReply = true) => {
const resetVal = (data = {}, $isReply = true) => {
value.value = ''
fileList.value = []
isReply.value = $isReply
isReply.value = $isReply
answerData.value = data || {}
if($isReply){
if ($isReply) {
focus()
// showKeyborad()
}
@@ -215,17 +201,17 @@
const insertValue = (emojiItem) => {
let _val = value.value
value.value = _val.substring(0, resStart.value) + emojiItem + _val.substring(resStart.value, _val.length)
resStart.value+=emojiItem.length
resStart.value += emojiItem.length
}
const fileList = ref([]);
const bbsTag = ref('SUG')
// 方法
const uploadNow = (limit = 4) => {
if(isImg.value || fileList.value === 0){
if (isImg.value || fileList.value === 0) {
upload(limit)
}else{
common.show('','是否清空当前表情并重新添加？').then((res) => {
} else {
common.show('', '是否清空当前表情并重新添加？').then((res) => {
if (res) {
fileList.value = []
upload(limit)
@@ -262,30 +248,30 @@
}
const memList = ref([])
const getMemList = () => {
if(memList.value.length > 0){
if (memList.value.length > 0) {
return
}
queryTraMemeInfoList().then(res=>{
queryTraMemeInfoList().then(res => {
memList.value = res.body || []
})
}
const setMemValue = (item) => {
if(!isImg.value || fileList.value.length == 0){
if (!isImg.value || fileList.value.length == 0) {
fileList.value = [item.ossKey]
isImg.value = false
return
}
common.show('','是否清空当前图片并重新添加？').then((res) => {
common.show('', '是否清空当前图片并重新添加？').then((res) => {
if (res) {
fileList.value = [item.ossKey]
isImg.value = false
}
});
}
const submit = () => {
if(isReply.value){
reply_send()
if (isReply.value) {
reply_send()
return
}
if (value.value === '' && fileList.value.length === 0) {
@@ -303,7 +289,7 @@
bbsGrade: bbsGrade.value, // 综合评分(最高10分)
bbsTag: bbsTag.value, // 评价标签 （SUG 建议 ASK 提问 ）
bbsContent: value.value, // 评价内容
imgTyp: isImg.value? '01':'02'
imgTyp: isImg.value ? '01' : '02'
}
publishCrsEvaluation(_params).then((res) => {
const loadingDuration = Date.now() - loadingStartTime;
@@ -320,71 +306,83 @@
emit('submitOver')
}, 500);
}, delayTime);
}).catch(err=>{})
}).catch(err => {})
};
const reply_send = async () => {
emit('sendReply', {...answerData.value, bbsContent: value.value})
emit('sendReply', {
...answerData.value,
bbsContent: value.value
})
};
const bbsGrade = ref(10)
const sliderChange = (event) => {
bbsGrade.value = event.detail.value;
};
watch(()=> fileList.value, (val)=>{
if(val.length === 0){
watch(() => fileList.value, (val) => {
if (val.length === 0) {
isImg.value = true
}
})
const keyboardHeight = ref(0)
const maxKeyboardHeight = ref(0)
uni.onKeyboardHeightChange((res)=>{
maxKeyboardHeight.value = res.height > keyboardHeight.value?res.height : keyboardHeight.value
uni.onKeyboardHeightChange((res) => {
maxKeyboardHeight.value = res.height > keyboardHeight.value ? res.height : keyboardHeight.value
keyboardHeight.value = res.height
})
onBeforeUnmount(()=>{
onBeforeUnmount(() => {
})
watch(()=> showEmoji.value,(val)=>{
popHeight.value = val ? `${maxKeyboardHeight.value}px` : (keyboardHeight.value+'px')
watch(() => showEmoji.value, (val) => {
popHeight.value = val ? `${maxKeyboardHeight.value}px` : (keyboardHeight.value + 'px')
})
watch(()=> keyboardHeight.value,(val)=>{
popHeight.value = showEmoji.value ? `${maxKeyboardHeight.value}px` : keyboardHeight.value+'px'
watch(() => keyboardHeight.value, (val) => {
popHeight.value = showEmoji.value ? `${maxKeyboardHeight.value}px` : keyboardHeight.value + 'px'
})
defineExpose({
hideAll,
resetVal
})
defineExpose({hideAll, resetVal})
</script>
<style scoped lang="scss">
.stack-swiper{
.stack-swiper {
height: 270px;
}
.img-list{
.img-list {
box-sizing: border-box;
margin: 0 auto;
height: 270px;
overflow-y: auto;
padding: 0 14rpx;
width: 100%;
.img-item{
.img-item {
float: left;
width: 126rpx;
text-align: center;
&:not(:nth-child(5n)){
&:not(:nth-child(5n)) {
margin-right: 20rpx;
}
}
.img_100{
.img_100 {
width: 126rpx;
height: 126rpx;
display: inline-block;
}
}
.emoji-list{
.emoji-list {
box-sizing: border-box;
margin: 0 auto;
height: 270px;
overflow-y: auto;
padding: 0 14rpx;
width: 100%;
.emoji-item{
.emoji-item {
font-size: 44rpx;
// padding: 14rpx;
height: 90rpx;
@@ -394,71 +392,85 @@
line-height: 90rpx;
}
}
// 表情输入框
.expression-tool-div{
.expression-tool-div {
padding: 20rpx 10rpx;
display: flex;
align-items: center;
height: 120rpx;
.tool-icon{
.tool-icon {
display: flex;
align-items: center;
margin-right: 30rpx;
padding: 14rpx 28rpx;
border-radius: 60rpx;
margin: 0rpx 10rpx;
.img {
width: 50rpx;
height: 50rpx;
}
}
.checked_tool{
.checked_tool {
background-color: rgb(243, 243, 243);
&.is-active-tool{
&.is-active-tool {
background-color: #ddd;
}
}
}
.bottom-main-input-div{
.bottom-main-input-div {
width: 100%;
height: v-bind(popHeight);
transition: height 0.3s ease 0s;
}
.none {
display: none;
}
.margin-bottom-12{
.margin-bottom-12 {
margin-bottom: 12rpx;
}
.tool-div {
padding: 10rpx calc(18rpx + 20rpx);
display: flex;
align-items: center;
.tool-icon{
.tool-icon {
// padding: 14rpx 34rpx;
// border-radius: 60rpx;
// margin: 0rpx 10rpx;
}
.tool-icon-img {
display: flex;
align-items: center;
margin-right: 30rpx;
.img {
width: 50rpx;
height: 50rpx;
}
}
.tool-icon-emoji {
display: flex;
align-items: center;
.img {
width: 50rpx;
height: 50rpx;
}
}
.tool-send {
border-radius: 50rpx;
width: 120rpx;
@@ -469,12 +481,14 @@
font-size: 30rpx;
color: #fff;
margin-right: 20rpx;
&.is-disabled{
&.is-disabled {
background-color: #ccc;
// pointer-events: none;
}
}
}
.main-div {
position: fixed;
bottom: 0;
@@ -484,6 +498,7 @@
border-top: 2rpx solid rgb(220, 220, 220);
box-shadow: 0 -2rpx 20rpx rgb(220, 220, 220);
}
.main-input-div {
width: calc(100% - 40rpx);
margin: 20rpx;
@@ -493,13 +508,16 @@
border-radius: 40rpx;
overflow: hidden;
background-color: rgb(227, 230, 237);
.input-div {
width: 100%;
padding: 0;
}
.imgs-div {
display: flex;
padding: 0 18rpx;
.upload-img {
margin: 0rpx 20rpx 20rpx 0;
width: 120rpx;
@@ -507,19 +525,22 @@
border-radius: 12rpx;
}
}
.setting-div {
width: 100%;
height: 100rpx;
padding: 0 18rpx;
}
}
.tool-div {
border-bottom: 4rpx solid rgb(206, 206, 206);
}
.textarea{
.textarea {
padding: 14rpx;
}
.num-pic {
width: 92rpx;
height: 92rpx;
@@ -528,29 +549,34 @@
border-radius: 8rpx;
overflow: hidden;
}
.img-show{
.img-show {
width: 120rpx;
height: 120rpx;
}
.picture-cont{
.picture-cont {
padding: 0 16rpx;
}
.picture-tips{
.picture-tips {
color: #999;
font-size: 22rpx;
padding: 10rpx 0;
}
.num-box{
.num-box {
overflow: hidden;
height: 60rpx;
// padding-bottom: 30rpx;
.tab{
.tab {
float: left;
width: 200rpx;
overflow: hidden;
height: 40rpx;
.tab-btn{
.tab-btn {
float: left;
width: 78rpx;
height: 36rpx;
@@ -559,23 +585,27 @@
text-align: center;
border-radius: 8rpx;
border: 2rpx solid #999999;
&:not(:last-child){
&:not(:last-child) {
margin-right: 20rpx;
}
&.is-active {
color: #0066ff;
border: 2rpx solid #0066ff;
}
}
}
.slider-box{
.slider-box {
width: calc(100% - 200rpx);
float: left;
box-sizing: border-box;
// padding-left: 40rpx;
.custom-slider{
.custom-slider {
margin: 0 !important;
}
}
}
</style>
</style>
src/pages/index/components/question.vue
+2
View File
@@ -115,6 +115,7 @@
isPlaying.value = true
if (talkVoiceObj.value && talkVoiceObj.value.src) {
console.log(1, talkVoiceObj.value.src)
talkVoiceObj.value.seek(0);
setTimeout(() => {
talkVoiceObj.value.play()
}, 100)
@@ -135,6 +136,7 @@
itemVoice.value = url;
talkVoiceObj.value.src = url;
if (unref(dataInfo)?.id !== props.activeVoiceId) return
talkVoiceObj.value.seek(0);
talkVoiceObj.value.play();
} else {
downloadFile(unref(dataInfo).bucketKey)