1 line
8.1 KiB
Plaintext
1 line
8.1 KiB
Plaintext
|
{"version":3,"file":"index.js","sources":["../../../../../../src/modules/mall/chat/index.vue","../../../../../../uniPage:/bW9kdWxlc1xtYWxsXGNoYXRcaW5kZXgudnVl"],"sourcesContent":["<template>\r\n <s-layout\r\n class=\"chat-wrap\"\r\n :title=\"!isReconnecting ? '连接客服成功' : '会话重连中'\"\r\n navbar=\"inner\"\r\n >\r\n <!-- 覆盖头部导航栏背景颜色 -->\r\n <div class=\"page-bg\" :style=\"{ height: sys_navBar + 'px' }\"></div>\r\n <!-- 聊天区域 -->\r\n <MessageList ref=\"messageListRef\">\r\n <template #bottom>\r\n <message-input\r\n v-model=\"chat.msg\"\r\n @on-tools=\"onTools\"\r\n @send-message=\"onSendMessage\"\r\n ></message-input>\r\n </template>\r\n </MessageList>\r\n <!-- 聊天工具 -->\r\n <tools-popup\r\n :show-tools=\"chat.showTools\"\r\n :tools-mode=\"chat.toolsMode\"\r\n @close=\"handleToolsClose\"\r\n @on-emoji=\"onEmoji\"\r\n @image-select=\"onSelect\"\r\n @on-show-select=\"onShowSelect\"\r\n >\r\n <message-input\r\n v-model=\"chat.msg\"\r\n @on-tools=\"onTools\"\r\n @send-message=\"onSendMessage\"\r\n ></message-input>\r\n </tools-popup>\r\n <!-- 商品订单选择 -->\r\n <SelectPopup\r\n :mode=\"chat.selectMode\"\r\n :show=\"chat.showSelect\"\r\n @select=\"onSelect\"\r\n @close=\"chat.showSelect = false\"\r\n />\r\n </s-layout>\r\n</template>\r\n\r\n<script setup>\r\nimport MessageList from '@/modules/mall/chat/components/messageList.vue'\r\nimport { reactive, ref, toRefs } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport ToolsPopup from '@/modules/mall/chat/components/toolsPopup.vue'\r\nimport MessageInput from '@/modules/mall/chat/components/messageInput.vue'\r\nimport SelectPopup from '@/modules/mall/chat/components/select-popup.vue'\r\nimport {\r\n KeFuMessageContentTypeEnum,\r\n WebSocketMessageTypeConstants,\r\n} from '@/modules/mall/chat/util/constants'\r\nimport FileApi from '@/sheep/api/infra/file'\r\nimport KeFuApi from '@/sheep/api/promotion/kefu'\r\nimport { useWebSocket } from '@/sheep/hooks/useWebSocket'\r\n\r\nconst sys_navBar = sheep.$platform.navbar\r\n\r\nconst chat = reactive({\r\n msg: '',\r\n scrollInto: '',\r\n showTools: false,\r\n toolsMode: '',\r\n showSelect: false,\r\n selectMode: '',\r\n})\r\n\r\n// 发送消息\r\nasync function onSendMessage() {\r\n if (!chat.msg) return\r\n try {\r\n const data = {\r\n contentType: KeFuMessageContentTypeEnum.TEXT,\r\n content: chat.msg,\r\n }\r\n await KeFuApi.sendKefuMessage(data)\r\n await messageListRef.value.refreshMessageList()\r\n chat.msg = ''\r\n } finally {\r\n chat.showTools = false\r\n }\r\n}\r\n\r\nconst messageListRef = ref()\r\n\r\n//= ====================== 聊天工具相关 start =======================\r\n\r\nfunction handleToolsClose() {\r\n chat.showTools = false\r\n chat.toolsMode = ''\r\n}\r\n\r\nfunction onEmoji(item) {\r\n chat.msg += item.name\r\n}\r\n\r\n// 点击工具栏开关\r\nfunction onTools(mode) {\r\n if (isReconnecting.value) {\r\n sheep.$helper.toast('您已掉线！请返回重试')\r\n return\r\n }\r\n\r\n if (!chat.toolsMode || chat.toolsMode === mode) {\r\n chat.showTools = !chat.showTools\r\n }\r\n chat.toolsMode = mode\r\n if (!chat.showTools) {\r\n chat.toolsMode = ''\r\n }\r\n}\r\n\r\nfunction onShowSelect(mode) {\r\n chat.showTools = false\r\n chat.showSelect = true\r\n chat.selectMode = mode\r\n}\r\n\r\nasync function onSelect({ type, data }) {\r\n let msg\r\n switch (type) {\r\n case 'image':\r\n const res = await FileApi.uploadFile(data.tempFiles[0].path)\r\n msg = {\r\n contentType: KeFuMessageContentTypeEnum.IMAGE,\r\n content: res.data,\r\n }\r\n break\r\n case 'goods':\r\n msg = {\r\n contentType: KeFuMessageContentTypeEnum.PRODUCT,\r\n content: JSON.stringify(data),\r\n }\r\n break\r\n case 'order':\r\n msg = {\r\n contentT
|