From 463f26d4658cab437b2ab8e89be3055286a9f1dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E5=85=81=E6=9E=9E?= <3422692813@qq.com> Date: Thu, 13 Mar 2025 18:01:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dc-App/pages/Chat/newChat.vue | 268 +++++++++++++-------------- dc-App/pages/Chat/newChat/submit.vue | 2 +- dc-App/pages/my/Contact.vue | 129 +++++++++++++ dc-App/pages/my/my.vue | 14 +- 4 files changed, 276 insertions(+), 137 deletions(-) create mode 100644 dc-App/pages/my/Contact.vue diff --git a/dc-App/pages/Chat/newChat.vue b/dc-App/pages/Chat/newChat.vue index de3a5d7..d19460f 100644 --- a/dc-App/pages/Chat/newChat.vue +++ b/dc-App/pages/Chat/newChat.vue @@ -16,7 +16,7 @@ - → + → {{ lang }} @@ -28,8 +28,8 @@ - - + + @@ -53,7 +53,7 @@ - @@ -62,29 +62,31 @@ image - {{ item.imageText }} - + Voice {{ item.answer }}
- + - + - @@ -116,7 +118,7 @@ export default { //是否长按事件 timer: null,//长按计时器 show: '0', - sayLangIndex : [1], + sayLangIndex: [1], langIndex: [11], columns: [ ['Arabic-阿拉伯语', @@ -251,7 +253,6 @@ export default { this.userId = infoData.userId this.userAvatar = infoData.userAvatar this.getMessageByStore() - this.goBottom() } this.getRecordsToken() @@ -259,6 +260,23 @@ export default { components: { submit, }, + // onReady() { + // console.log('ready') + // // this.bottomId = 'bottom'; // 触发滚动到底部 + // this.scrollToView = 'bottomId'; + // // this.$nextTick(() => { + // // setTimeout(() => { + // // uni.createSelectorQuery() + // // .select('#bottom') + // // .boundingClientRect((res) => { + // // if (res) { + // // this.scrollTop = res.top + 5500; // 先滚到底部，再往上偏移 50px + // // } + // // }) + // // .exec(); + // // }, 100); + // // }); + // }, methods: { async voiceTxt(item) { let res = await request({ @@ -275,37 +293,30 @@ export default { }, // 预览图片单张 previewImage(photoImg) { - console.log('预览图片') - photoImg = 'data:image/jpeg;base64,' + photoImg; - base64ToPath(photoImg).then((resInfo)=>{ + photoImg = 'data:image/jpeg;base64,' + photoImg; + base64ToPath(photoImg).then((resInfo) => { uni.getImageInfo({ src: resInfo, - success: function(res){ + success: function (res) { uni.previewImage({ - urls:[res.path] + urls: [res.path] }); }, - fail: function(err){ + fail: function (err) { console.log(err) } }) - }).catch((err)=>{ + }).catch((err) => { console.log(err) }) }, showTxt(item) { item.showImage = false - // this.showImageTextIndex = index - // console.log('触发',this.showImageTextIndex) - // this.showImage = false this.show = false }, showImageFunction(item) { item.showImage = true - // this.showImageTextIndex = index - // console.log('触发',this.showImageTextIndex) - // this.showImage = false this.show = false }, @@ -380,7 +391,6 @@ export default { } else { strStatus = "被永久拒绝权限" - } }, startSocket() { @@ -389,81 +399,92 @@ export default { this.msgInfo() //追加心跳机制 }, - translatorChinese() { - //调用api翻译成中文 - request({ - url: 'chatHttpApi/getChatInfo', - method: 'post', - data: { - q: this.messagesList[this.messagesList.length - 1].answer, - lang: this.lang - } - }).then(res => { - this.$nextTick(() => { - let msgItem = { - "inputs": { - "type": "text" - }, - "query": '', - "response_mode": 'streaming', - "conversation_id": uni.getStorageSync(this.info.conversation) || null, - "user": this.userId, - 'token': this.info.token, - 'answer': res.msg, - 'answerCh': '', - 'showImageTextIndex': '', - 'showImage': '', - 'imageText': '', - 'time': '', - 'type': '', - 'filePath': '', - "lang": "Chinese", - 'isTrans':false, - }; - this.messagesList.push(msgItem); - // this.messagesList[this.messagesList.length - 1].answerCh = this.messagesList[this.messagesList.length - 1].answerCh + res.msg - }) - }) + async translatorChinese() { + // 封装为 Promise，确保可以 await + return new Promise((resolve, reject) => { + // 调用 API 翻译成中文 + request({ + url: 'chatHttpApi/getChatInfo', + method: 'post', + data: { + q: this.messagesList[this.messagesList.length - 1].answer, + lang: this.lang + } + }).then(res => { + this.$nextTick(() => { + let msgItem = { + "inputs": { + "type": "text" + }, + "query": '', + "response_mode": 'streaming', + "conversation_id": uni.getStorageSync(this.info.conversation) || null, + "user": this.userId, + 'token': this.info.token, + 'answer': res.msg, + 'answerCh': '', + 'showImageTextIndex': '', + 'showImage': '', + 'imageText': '', + 'time': '', + 'type': '', + 'filePath': '', + "lang": "Chinese", + 'isTrans': false, + }; + this.messagesList.push(msgItem); + // 在 Promise 完成后调用 resolve + resolve(); // 确保 await 生效 + }); + }).catch(err => { + console.error('翻译失败:', err); + reject(err); // 处理错误 + }); + }); }, - msgInfo() { + async msgInfo() { if (this.msgSocket) { - this.msgSocket.onMessage(res => { + this.msgSocket.onMessage(async res => { if (this.info.conversation == 'Translator') { - if (this.messagesList[this.messagesList.length - 1].inputs.type != 'image') { - this.messagesList[this.messagesList.length - 1].answer = this.messagesList[this - .messagesList.length - 1].answer + res.data - if (this.lang == 'Chinese' || this.sayLang == 'zh-CHS') { - }else { - this.translatorChinese() + const lastMsg = this.messagesList[this.messagesList.length - 1]; + + if (lastMsg.inputs.type != 'image') { + // 1. 先追加数据 + lastMsg.answer += res.data; + + // 2. 按需等待翻译 + if (!(this.lang == 'Chinese' || this.sayLang == 'zh-CHS')) { + await this.translatorChinese(); // 确保返回 Promise } + + // 3. 统一执行后续操作 + this.postProcess(); } else { - //将res.data 转为json - let json = JSON.parse(res.data) - this.messagesList[this.messagesList.length - 1].answer = this.messagesList[this - .messagesList.length - 1].answer + json.answer - this.messagesList[this.messagesList.length - 1].imageText = this.messagesList[this - .messagesList.length - 1].imageText + json.tranContent + const json = JSON.parse(res.data); + lastMsg.answer += json.answer; + lastMsg.imageText += json.tranContent; + this.postProcess(); } - this.goBottom() - uni.setStorageSync(this.storeList + '_' + this.info.conversation, this.messagesList) } else { if (res.data.indexOf("conversation_id") > -1) { uni.setStorageSync(this.info.conversation, JSON.parse(res.data).conversation_id); } else if (res.data.indexOf("workflow_finished") > -1) { - //代表结束 - uni.setStorageSync(this.storeList + '_' + this.info.conversation, this.messagesList) - + // 代表结束 + uni.setStorageSync(this.storeList + '_' + this.info.conversation, this.messagesList); } else { - this.messagesList[this.messagesList.length - 1].answer = this.messagesList[this - .messagesList.length - 1].answer + res.data - this.goBottom() + this.messagesList[this.messagesList.length - 1].answer += res.data; + this.goBottom(); } } - - - }) + }); } }, + + // 新增公共方法 + postProcess() { + this.goBottom(); + uni.setStorageSync(this.storeList + '_' + this.info.conversation, this.messagesList); + }, //缓存中获取历史消息 getMessageByStore() { let tempList = uni.getStorageSync(this.storeList + '_' + this.info.conversation) || [] @@ -473,13 +494,7 @@ export default { } else { this.messagesList = tempList } - - // 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。 - this.$nextTick(() => { - this.$forceUpdate() - // 设置当前滚动的位置 - this.scrollToView = this.scrollId; - }) + this.goBottom() }, // 获取历史消息 getMessage() { @@ -513,11 +528,7 @@ export default { that.$set(that.messagesList, that.messagesList.length - 1, that.messagesList[that.messagesList .length - 1]) // 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。 - that.$nextTick(() => { - that.$forceUpdate() - // 设置当前滚动的位置 - that.scrollToView = this.scrollId; - }) + that.goBottom() } get(); @@ -555,36 +566,13 @@ export default { //音频播放 playVoice(e) { - console.log('地址',e) + console.log('地址', e) // let innerAudioContext1 = uni.createInnerAudioContext(); // innerAudioContext1.autoplay = true; // innerAudioContext1.playbackRate = 0.5; innerAudioContext.src = this.imagesUrl + e; console.log(innerAudioContext.src) innerAudioContext.play() - // innerAudioContext.onPlay(() => { - // console.log('开始播放'); - // }); - // innerAudioContext.onError((err) => { - // console.log('播放错误:', err); - // }); - - // console.log('音频开始') - // innerAudioContext.src = `data:audio/mp3;base64,${e}`; - // // innerAudioContext.src = e; - // // console.log(innerAudioContext.src); - // - // // 3. 添加事件监听 - // innerAudioContext.onPlay(() => { - // console.log('开始播放'); - // }); - // - // innerAudioContext.onError((err) => { - // console.error('播放错误:', err); - // }); - // - // // 4. 开始播放 - // innerAudioContext.play(); }, //地图定位 covers(e) { @@ -637,7 +625,7 @@ export default { 'type': '', 'filePath': inputData.filePath, "lang": this.lang, - 'isTrans':true, + 'isTrans': true, 'url': inputData.url }; if (this.info.conversation == 'Translator') { @@ -710,22 +698,34 @@ export default { }, // 滚动到底部 goBottom() { - // this.scrollToBottom() - this.scrollToView = ''; - this.$nextTick(() => { - // 设置当前滚动的位置 + this.$nextTick(() => { this.scrollToView = this.scrollId; - this.$forceUpdate() + this.$nextTick(() => { + // 设置当前滚动的位置 + this.scrollToView = ''; + this.$forceUpdate() + }) }) }, - // 滚动到底部 - scrollToBottom() { - this.$nextTick(() => { - setTimeout(() => { - this.scrollTop = 999999; // 设一个足够大的值，确保滚动到底部 - }, 50); // 增加微小延迟，等待 DOM 渲染完成 - }); + // 滚动至聊天底部 + scrollToBottom(e){ + setTimeout(()=>{ + let query = uni.createSelectorQuery().in(this); + query.select('#scrollview').boundingClientRect(); + query.select('#msglistview').boundingClientRect(); + query.exec((res) =>{ + if(res[1].height > res[0].height){ + this.scrollTop = this.rpxTopx(res[1].height - res[0].height) + } + }) + },15) + }, + // px转换成rpx + rpxTopx(px){ + let deviceWidth = uni.getSystemInfoSync().windowWidth + let rpx = ( 750 / deviceWidth ) * Number(px) + return Math.floor(rpx) }, } } diff --git a/dc-App/pages/Chat/newChat/submit.vue b/dc-App/pages/Chat/newChat/submit.vue index 038a1fb..d44e41e 100644 --- a/dc-App/pages/Chat/newChat/submit.vue +++ b/dc-App/pages/Chat/newChat/submit.vue @@ -10,7 +10,7 @@ + @focus="focus" v-model="msg" placeholder="Please enter content"> 按住说话 diff --git a/dc-App/pages/my/Contact.vue b/dc-App/pages/my/Contact.vue new file mode 100644 index 0000000..fb4773e --- /dev/null +++ b/dc-App/pages/my/Contact.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/dc-App/pages/my/my.vue b/dc-App/pages/my/my.vue index db15a13..50eb4db 100644 --- a/dc-App/pages/my/my.vue +++ b/dc-App/pages/my/my.vue @@ -27,6 +27,12 @@ History + + + + + Contact Us + @@ -107,8 +113,12 @@ } } }); - } + if (num == 5) { + uni.navigateTo({ + url: '/pages/my/Contact' + }) + } }, goback() { uni.navigateBack() @@ -197,7 +207,7 @@ .f_ { width: 25%; font-weight: 500; - font-size: 12px; + font-size: 23rpx; color: #333333; text-align: center; }