修改客服输入框样式
This commit is contained in:
parent
20c946cdee
commit
9690df6930
@ -67,9 +67,9 @@
|
|||||||
@click="openForm('create')"
|
@click="openForm('create')"
|
||||||
v-hasPermi="['promotion:auto-response:create']"
|
v-hasPermi="['promotion:auto-response:create']"
|
||||||
>
|
>
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
<Icon icon="ep:plus" class="mr-5px" /> 新增自动恢复
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<!-- <el-button
|
||||||
type="success"
|
type="success"
|
||||||
plain
|
plain
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
@ -77,7 +77,7 @@
|
|||||||
v-hasPermi="['promotion:auto-response:export']"
|
v-hasPermi="['promotion:auto-response:export']"
|
||||||
>
|
>
|
||||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
</el-button>
|
</el-button> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
@ -4,11 +4,10 @@
|
|||||||
<div class="kefu-title">{{ conversation.userNickname }}</div>
|
<div class="kefu-title">{{ conversation.userNickname }}</div>
|
||||||
</el-header> -->
|
</el-header> -->
|
||||||
<el-main class="kefu-content overflow-visible">
|
<el-main class="kefu-content overflow-visible">
|
||||||
<el-scrollbar ref="scrollbarRef" always height="calc(100vh - 420px)" @scroll="handleScroll">
|
<el-scrollbar ref="scrollbarRef" always height="calc(100vh - 390px)" @scroll="handleScroll">
|
||||||
<div v-if="refreshContent" ref="innerRef" class="w-[100%] pb-3px">
|
<div v-if="refreshContent" ref="innerRef" class="w-[100%] pb-3px">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 消息列表 -->
|
<!-- 消息列表 -->
|
||||||
<div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
|
<div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
|
||||||
<div class="flex justify-center items-center mb-20px">
|
<div class="flex justify-center items-center mb-20px">
|
||||||
@ -69,9 +68,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
|
<div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
|
||||||
@ -80,9 +76,12 @@
|
|||||||
<Icon class="ml-5px" icon="ep:bottom" />
|
<Icon class="ml-5px" icon="ep:bottom" />
|
||||||
</div>
|
</div>
|
||||||
</el-main>
|
</el-main>
|
||||||
<el-footer height="230px">
|
|
||||||
|
<el-divider style="margin: 4px 0;" />
|
||||||
|
|
||||||
|
<el-footer height="185px">
|
||||||
<div class="h-[100%]">
|
<div class="h-[100%]">
|
||||||
<div class="chat-tools flex items-center">
|
<div class="flex items-center">
|
||||||
<EmojiSelectPopover @select-emoji="handleEmojiSelect" />
|
<EmojiSelectPopover @select-emoji="handleEmojiSelect" />
|
||||||
<PictureSelectUpload class="ml-15px mt-3px cursor-pointer" @send-picture="handleSendPicture" />
|
<PictureSelectUpload class="ml-15px mt-3px cursor-pointer" @send-picture="handleSendPicture" />
|
||||||
<!-- <VerbalTrick class="ml-11px mt-5px cursor-pointer" /> -->
|
<!-- <VerbalTrick class="ml-11px mt-5px cursor-pointer" /> -->
|
||||||
@ -104,10 +103,9 @@
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
|
<br/>
|
||||||
|
<textarea style="border: none; outline: none;" v-model="message" placeholder="请输入文字内容" rows="5" cols="75"></textarea>
|
||||||
<div class="h-45px flex justify-end">
|
<div class="h-45px flex justify-end">
|
||||||
<el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
|
<el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
|
||||||
</div>
|
</div>
|
||||||
@ -461,6 +459,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.hover-shadow:hover {
|
.hover-shadow:hover {
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
|
|
||||||
@ -496,6 +497,7 @@
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 10px;
|
width: 10px;
|
||||||
@ -537,7 +539,7 @@
|
|||||||
|
|
||||||
// 消息气泡
|
// 消息气泡
|
||||||
.kefu-message {
|
.kefu-message {
|
||||||
color: #a9a9a9;
|
color: #101010;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
|
box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 994 B |
Binary file not shown.
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 1.4 KiB |
@ -3,7 +3,7 @@
|
|||||||
<el-popover :width="500" placement="top" trigger="click">
|
<el-popover :width="500" placement="top" trigger="click">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<!-- <Icon :size="30" class="ml-10px cursor-pointer" icon="twemoji:grinning-face" /> -->
|
<!-- <Icon :size="30" class="ml-10px cursor-pointer" icon="twemoji:grinning-face" /> -->
|
||||||
<img :src="biaoqing" style="margin-left: 10px;" class="w-23px h-23px" />
|
<img :src="biaoqing" class="w-23px h-25px" />
|
||||||
</template>
|
</template>
|
||||||
<ElScrollbar height="300px">
|
<ElScrollbar height="300px">
|
||||||
<ul class="ml-2 flex flex-wrap px-2">
|
<ul class="ml-2 flex flex-wrap px-2">
|
||||||
@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
defineOptions({ name: 'EmojiSelectPopover' })
|
defineOptions({ name: 'EmojiSelectPopover' })
|
||||||
import biaoqing from '@/views/mall/promotion/kefu/components/asserts/biaoqian.png'
|
import biaoqing from '@/views/mall/promotion/kefu/components/asserts/biaoqing.png'
|
||||||
import { Emoji, useEmoji } from './emoji'
|
import { Emoji, useEmoji } from './emoji'
|
||||||
|
|
||||||
|
|
||||||
|
@ -156,7 +156,8 @@
|
|||||||
const server = ref(
|
const server = ref(
|
||||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
||||||
'?token=' +
|
'?token=' +
|
||||||
getRefreshToken() // 使用 getRefreshToken() 方法,而不使用 getAccessToken() 方法的原因:WebSocket 无法方便的刷新访问令牌
|
getRefreshToken()
|
||||||
|
// 使用 getRefreshToken() 方法,而不使用 getAccessToken() 方法的原因:WebSocket 无法方便的刷新访问令牌
|
||||||
) // WebSocket 服务地址
|
) // WebSocket 服务地址
|
||||||
|
|
||||||
|
|
||||||
@ -179,6 +180,8 @@
|
|||||||
},
|
},
|
||||||
onMessage: function (ws, event) {
|
onMessage: function (ws, event) {
|
||||||
console.log('收到的 WebSocket 消息:', event.data);
|
console.log('收到的 WebSocket 消息:', event.data);
|
||||||
|
|
||||||
|
|
||||||
a = a + 1 ;
|
a = a + 1 ;
|
||||||
if(a == 2){
|
if(a == 2){
|
||||||
getConversationList()
|
getConversationList()
|
||||||
@ -186,53 +189,7 @@
|
|||||||
a = 0;
|
a = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果收到的数据存在
|
|
||||||
// if (event.data) {
|
|
||||||
// let parsedData;
|
|
||||||
|
|
||||||
// // 尝试解析消息
|
|
||||||
// try {
|
|
||||||
// parsedData = JSON.parse(event.data);
|
|
||||||
// } catch (error) {
|
|
||||||
// console.error('JSON 解析错误:', error, '原始数据:', event.data);
|
|
||||||
// return; // 如果解析失败,跳过后续处理
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // 根据消息的 type 类型来处理不同的消息
|
|
||||||
// const { type } = parsedData;
|
|
||||||
// if (!type) {
|
|
||||||
// console.warn('收到未定义类型的消息:', parsedData);
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // 示例:处理特定类型的消息
|
|
||||||
// switch (type) {
|
|
||||||
// case 'pong':
|
|
||||||
// // 处理心跳消息
|
|
||||||
// console.log('收到心跳 ping 消息');
|
|
||||||
// // 如果需要回复 pong,可以在这里发送消息
|
|
||||||
// send(JSON.stringify({ type: 'pong' }));
|
|
||||||
// break;
|
|
||||||
|
|
||||||
// case 'chat':
|
|
||||||
// // 处理聊天消息
|
|
||||||
// console.log('收到聊天消息:', parsedData.content);
|
|
||||||
// // 处理聊天消息的逻辑
|
|
||||||
// break;
|
|
||||||
|
|
||||||
// case 'notification':
|
|
||||||
// // 处理通知消息
|
|
||||||
// console.log('收到通知消息:', parsedData.message);
|
|
||||||
// // 执行通知操作
|
|
||||||
// break;
|
|
||||||
|
|
||||||
// default:
|
|
||||||
// console.warn('收到未知类型的消息:', type);
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// console.warn('接收到空数据:', event);
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
autoReconnect: false, // 开启自动重连
|
autoReconnect: false, // 开启自动重连
|
||||||
heartbeat: true
|
heartbeat: true
|
||||||
@ -243,6 +200,7 @@
|
|||||||
|
|
||||||
/** 监听 WebSocket 数据 */
|
/** 监听 WebSocket 数据 */
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
|
console.log('连接服务器得到消息:',data.value)
|
||||||
if (!data.value) {
|
if (!data.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -255,6 +213,8 @@
|
|||||||
// 2.1 解析 type 消息类型
|
// 2.1 解析 type 消息类型
|
||||||
const jsonMessage = JSON.parse(data.value)
|
const jsonMessage = JSON.parse(data.value)
|
||||||
const type = jsonMessage.type
|
const type = jsonMessage.type
|
||||||
|
console.log('来自用户发送的消息:',data.value)
|
||||||
|
|
||||||
if (!type) {
|
if (!type) {
|
||||||
message.error('未知的消息类型:' + data.value)
|
message.error('未知的消息类型:' + data.value)
|
||||||
return
|
return
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
class="!w-240px"
|
class="!w-240px"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="登录账号" prop="account">
|
<!-- <el-form-item label="登录账号" prop="account">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.account"
|
v-model="queryParams.account"
|
||||||
placeholder="请输入登录账号"
|
placeholder="请输入登录账号"
|
||||||
@ -34,7 +34,7 @@
|
|||||||
@keyup.enter="handleQuery"
|
@keyup.enter="handleQuery"
|
||||||
class="!w-240px"
|
class="!w-240px"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="客服状态" prop="status">
|
<el-form-item label="客服状态" prop="status">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="queryParams.status"
|
v-model="queryParams.status"
|
||||||
@ -70,7 +70,7 @@
|
|||||||
@click="openForm('create')"
|
@click="openForm('create')"
|
||||||
v-hasPermi="['promotion:support-staff:create']"
|
v-hasPermi="['promotion:support-staff:create']"
|
||||||
>
|
>
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
<Icon icon="ep:plus" class="mr-5px" /> 新增客服
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="success"
|
type="success"
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
:key="dict.value" :label="dict.label" :value="dict.value" />
|
:key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<el-form-item label="标题" prop="title">
|
<!-- <el-form-item label="标题" prop="title">
|
||||||
<el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery"
|
<el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery"
|
||||||
class="!w-240px" />
|
class="!w-240px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -33,22 +33,22 @@
|
|||||||
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
|
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
|
type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="handleQuery">
|
<!-- <el-button @click="handleQuery">
|
||||||
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="resetQuery">
|
<el-button @click="resetQuery">
|
||||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||||
</el-button>
|
</el-button> -->
|
||||||
<el-button type="primary" plain @click="openForm('create')"
|
<el-button type="primary" plain @click="openForm('create')"
|
||||||
v-hasPermi="['promotion:verbal-trick:create']">
|
v-hasPermi="['promotion:verbal-trick:create']">
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
<Icon icon="ep:plus" class="mr-5px" /> 添加话术
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
|
<!-- <el-button type="success" plain @click="handleExport" :loading="exportLoading"
|
||||||
v-hasPermi="['promotion:verbal-trick:export']">
|
v-hasPermi="['promotion:verbal-trick:export']">
|
||||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
</el-button>
|
</el-button> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
Loading…
Reference in New Issue
Block a user