From dd42b26d1fd45e3e8598e64eb939ae9cee0719d6 Mon Sep 17 00:00:00 2001 From: wangyifeng <812766448@qq.com> Date: Tue, 22 Apr 2025 19:06:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AF=AD=E9=9F=B3=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E5=92=8C=E8=AF=AD=E9=9F=B3=E8=BD=AC=E6=96=87=E5=AD=97?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=8C=E5=B9=B6=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/chat/index.js | 22 ++- src/components/deep-bubble/deep-bubble.vue | 205 +++++++++++---------- src/pages/dialog/index.vue | 132 ++++++++++++- 3 files changed, 251 insertions(+), 108 deletions(-) diff --git a/src/api/chat/index.js b/src/api/chat/index.js index a405445..45fe6a5 100644 --- a/src/api/chat/index.js +++ b/src/api/chat/index.js @@ -1,9 +1,6 @@ import request from '@/service/index.js' import qs from 'qs' -import { - useTalkStore, - useDialogueStore -} from '@/store' +import { useTalkStore, useDialogueStore } from '@/store' // 获取聊天列表服务接口 export const ServeGetTalkList = (data) => { @@ -44,7 +41,11 @@ export const ServeTopTalkList = (data) => { // 清除聊天消息未读数服务接口 export const ServeClearTalkUnreadNum = (data, unReadNum) => { console.log('=======chatApp==UnreadNum', unReadNum) - if(!useTalkStore().items[useTalkStore().findTalkIndex(useDialogueStore().index_name)]?.is_disturb){ + if ( + !useTalkStore().items[ + useTalkStore().findTalkIndex(useDialogueStore().index_name) + ]?.is_disturb + ) { if (typeof plus !== 'undefined') { let OAWebView = plus.webview.all() OAWebView.forEach((webview) => { @@ -229,4 +230,13 @@ export const ServeMessageReadDetail = (data) => { method: 'POST', data, }) -} \ No newline at end of file +} + +// 语音转文字 +export const ServeConvertText = (data) => { + return request({ + url: '/api/v1/talk/message/voice-to-text', + method: 'POST', + data, + }) +} diff --git a/src/components/deep-bubble/deep-bubble.vue b/src/components/deep-bubble/deep-bubble.vue index d7d8213..fc9572c 100644 --- a/src/components/deep-bubble/deep-bubble.vue +++ b/src/components/deep-bubble/deep-bubble.vue @@ -25,7 +25,15 @@ class="flex flex-col items-center justify-center" > -
复制
+
复制
+ +
+ +
转文字
-
多选
+
多选
-
引用
+
引用
-
撤回
+
撤回
-
删除
+
删除
@@ -78,8 +86,8 @@ // 组件 // uniapp & vue -import { onLoad, onReady } from "@dcloudio/uni-app"; -import { defineEmits, defineProps } from "vue"; +import { onLoad, onReady } from '@dcloudio/uni-app' +import { defineEmits, defineProps } from 'vue' import { reactive, ref, @@ -87,18 +95,18 @@ import { computed, nextTick, getCurrentInstance, - onMounted, - onBeforeUnmount -} from "vue"; -import copy07 from "@/static/image/chatList/copy07@2x.png"; -import multipleChoices from "@/static/image/chatList/multipleChoices@2x.png"; -import cite from "@/static/image/chatList/cite@2x.png"; -import withdraw from "@/static/image/chatList/withdraw@2x.png"; -import delete07 from "@/static/image/chatList/delete@2x.png"; + onMounted, + onBeforeUnmount, +} from 'vue' +import copy07 from '@/static/image/chatList/copy07@2x.png' +import multipleChoices from '@/static/image/chatList/multipleChoices@2x.png' +import cite from '@/static/image/chatList/cite@2x.png' +import withdraw from '@/static/image/chatList/withdraw@2x.png' +import delete07 from '@/static/image/chatList/delete@2x.png' // pinia -const systemInfo = uni.getSystemInfoSync(); -const bubbleRef = ref(null); +const systemInfo = uni.getSystemInfoSync() +const bubbleRef = ref(null) const props = defineProps({ isShowCopy: { @@ -113,109 +121,114 @@ const props = defineProps({ type: Boolean, default: true, }, -}); + isShowConvertText: { + //是否显示转文字 + type: Boolean, + default: false, + }, +}) -const emits = defineEmits(["clickMenu"]); +const emits = defineEmits(['clickMenu']) /** * @name 生成UUID */ const uuid = () => { - const reg = /[xy]/g; - return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" + const reg = /[xy]/g + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' .replace(reg, function (c) { var r = (Math.random() * 16) | 0, - v = c == "x" ? r : (r & 0x3) | 0x8; - return v.toString(16); + v = c == 'x' ? r : (r & 0x3) | 0x8 + return v.toString(16) }) - .replace(/-/g, ""); -}; + .replace(/-/g, '') +} -const popoverBoxId = `ID${uuid()}`; -const popoverContentId = `ID${uuid()}`; -const instance = getCurrentInstance(); +const popoverBoxId = `ID${uuid()}` +const popoverContentId = `ID${uuid()}` +const instance = getCurrentInstance() const data = reactive({ popoverShow: false, defaultStyle: {}, showStyle: { left: 0, - right: "", - transform: "", + right: '', + transform: '', }, iconStyle: { - left: "", - right: "", - transform: "", + left: '', + right: '', + transform: '', }, -}); +}) /** * @name 获取DOM */ const getDom = (dom) => { return new Promise((resolve, reject) => { - const query = uni.createSelectorQuery().in(instance); - let select = query.select(dom); + const query = uni.createSelectorQuery().in(instance) + let select = query.select(dom) const boundingClientRect = select.boundingClientRect((data) => { - resolve(data); - }); - boundingClientRect.exec(); - }); -}; + resolve(data) + }) + boundingClientRect.exec() + }) +} const itemClick = (item) => { - emits("clickMenu", item); -}; + emits('clickMenu', item) +} // 弹起 长按5 -let pressDownTime = 0; -let time = null; +let pressDownTime = 0 +let time = null const onTouchstart = () => { - time && clearTimeout(time); - time = setTimeout(open, 500); -}; + time && clearTimeout(time) + time = setTimeout(open, 500) +} const onTouchend = () => { - time && clearTimeout(time); -}; + time && clearTimeout(time) +} const open = async () => { - let popoverContent = await getDom(`#${popoverContentId}`); - let popoverBox = await getDom(`#${popoverBoxId}`); + let popoverContent = await getDom(`#${popoverContentId}`) + let popoverBox = await getDom(`#${popoverBoxId}`) // 缩放中心点 - let originX = popoverBox.width / 2; + let originX = popoverBox.width / 2 // 根据距离 初始化位置 判断是顶部还是底部 - let isTop = popoverBox.top - 50 > popoverContent.height; + let isTop = popoverBox.top - 50 > popoverContent.height // 上面还是下面 data.defaultStyle = { - top: isTop ? "60rpx" : "auto", - bottom: !isTop ? "-20rpx" : "auto", - transform: `translateY(${isTop ? "-100%" : "100%"}) scale(.8)`, - }; + top: isTop ? '60rpx' : 'auto', + bottom: !isTop ? '-20rpx' : 'auto', + transform: `translateY(${isTop ? '-100%' : '100%'}) scale(.8)`, + } // 左边还是右边 if (popoverBox.left > systemInfo.windowWidth - popoverBox.right) { - data.defaultStyle.right = 0; + data.defaultStyle.right = 0 // 动画缩放中心点 - data.defaultStyle["transform-origin"] = `${ + data.defaultStyle['transform-origin'] = `${ popoverContent.width - originX - }px ${isTop ? "100%" : "0%"}`; + }px ${isTop ? '100%' : '0%'}` } else { - data.defaultStyle.left = 0; + data.defaultStyle.left = 0 // 动画缩放中心点 - data.defaultStyle["transform-origin"] = `${originX}px ${ - isTop ? "100%" : "0%" - }`; + data.defaultStyle['transform-origin'] = `${originX}px ${ + isTop ? '100%' : '0%' + }` } - data.showStyle = { ...data.defaultStyle }; + data.showStyle = { ...data.defaultStyle } // icon位置样式 let iconDefsultStyle = { - transform: `translate(0%, ${isTop ? "20%" : "-20%"})`, - "border-top-color": isTop ? "#333333" : "", - "border-bottom-color": !isTop ? "#333333" : "", - top: !isTop ? "-20rpx" : "auto", - bottom: isTop ? "-20rpx" : "auto", - }; + transform: `translate(0%, ${isTop ? '20%' : '-20%'})`, + 'border-top-color': isTop ? '#333333' : '', + 'border-bottom-color': !isTop ? '#333333' : '', + top: !isTop ? '-20rpx' : 'auto', + bottom: isTop ? '-20rpx' : 'auto', + } setTimeout(() => { if (popoverBox.left > systemInfo.windowWidth - popoverBox.right) { @@ -224,55 +237,55 @@ const open = async () => { ...data.defaultStyle, // 显示 opacity: 1, - transform: `translateY(${isTop ? "-100%" : "100%"}) scale(1)`, - "pointer-events": "auto", - }; + transform: `translateY(${isTop ? '-100%' : '100%'}) scale(1)`, + 'pointer-events': 'auto', + } data.iconStyle = { right: `${originX}px`, - left: "auto", + left: 'auto', ...iconDefsultStyle, - }; + } } else { data.showStyle = { // 位置 ...data.defaultStyle, // 显示 opacity: 1, - transform: `translateY(${isTop ? "-100%" : "100%"}) scale(1)`, - "pointer-events": "auto", - }; + transform: `translateY(${isTop ? '-100%' : '100%'}) scale(1)`, + 'pointer-events': 'auto', + } data.iconStyle = { left: `${originX}px`, - right: "auto", + right: 'auto', ...iconDefsultStyle, - }; + } } - if (!data.popoverShow) data.popoverShow = true; - }, 200); -}; + if (!data.popoverShow) data.popoverShow = true + }, 200) +} const close = (time) => { setTimeout(() => { - data.popoverShow = false; - data.showStyle = data.defaultStyle; - }, time || 0); -}; + data.popoverShow = false + data.showStyle = data.defaultStyle + }, time || 0) +} const handleClickOutside = (event) => { - if (data.popoverShow = false) { + if ((data.popoverShow = false)) { return false } if (bubbleRef.value && !bubbleRef.value.contains(event.target)) { - close(); + close() } -}; +} onMounted(() => { - document.addEventListener('click', handleClickOutside); - }); + document.addEventListener('click', handleClickOutside) +}) onBeforeUnmount(() => { - document.removeEventListener('click', handleClickOutside); -}); + document.removeEventListener('click', handleClickOutside) +})