root/allLikeMall
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

修改客服输入框样式

Browse Source
This commit is contained in:
sonjinyon 2024-11-12 15:43:21 +08:00
parent 20c946cdee
commit 9690df6930
9 changed files with 37 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
yudao-admin-vue3/src/views/mall/promotion/autoresponse/index.vue
View File

@ -67,9 +67,9 @@
@click="openForm('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
type="success"
plain
@click="handleExport"
@ -77,7 +77,7 @@
v-hasPermi="['promotion:auto-response:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-button> -->
</el-form-item>
</el-form>
</ContentWrap>

24
yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
View File

@ -4,11 +4,10 @@
<div class="kefu-title">{{ conversation.userNickname }}</div>
</el-header> -->
<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-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
<div class="flex justify-center items-center mb-20px">
@ -69,9 +68,6 @@
</div>
</div>
</div>
</el-scrollbar>
<div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
@ -80,9 +76,12 @@
<Icon class="ml-5px" icon="ep:bottom" />
</div>
</el-main>
<el-footer height="230px">
<el-divider style="margin: 4px 0;" />
<el-footer height="185px">
<div class="h-[100%]">
<div class="chat-tools flex items-center">
<div class="flex items-center">
<EmojiSelectPopover @select-emoji="handleEmojiSelect" />
<PictureSelectUpload class="ml-15px mt-3px cursor-pointer" @send-picture="handleSendPicture" />
<!-- <VerbalTrick class="ml-11px mt-5px cursor-pointer" /> -->
@ -104,10 +103,9 @@
</el-dropdown-item>
</template>
</el-dropdown>
</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">
<el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
</div>
@ -461,6 +459,9 @@
</script>
<style lang="scss" scoped>
.hover-shadow:hover {
background-color: lightgray;
@ -495,6 +496,7 @@
.kefu-message {
margin-left: 20px;
position: relative;
&::before {
content: '';
@ -537,7 +539,7 @@
// 消息气泡
.kefu-message {
color: #a9a9a9;
color: #101010;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
padding: 5px 10px;

BIN
yudao-admin-vue3/src/views/mall/promotion/kefu/components/asserts/biaoqian.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

BIN
yudao-admin-vue3/src/views/mall/promotion/kefu/components/asserts/tupian.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 994 B

BIN
yudao-admin-vue3/src/views/mall/promotion/kefu/components/asserts/xiaoxi.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
yudao-admin-vue3/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
View File

@ -3,7 +3,7 @@
<el-popover :width="500" placement="top" trigger="click">
<template #reference>
<!-- <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>
<ElScrollbar height="300px">
<ul class="ml-2 flex flex-wrap px-2">
@ -27,7 +27,7 @@
<script lang="ts" setup>
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'

58
yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue
View File

@ -154,9 +154,10 @@
// ======================= WebSocket start =======================
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=' +
getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
getRefreshToken()
// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
) // WebSocket 服务地址
@ -179,6 +180,8 @@
},
onMessage: function (ws, event) {
console.log('收到的 WebSocket 消息:', event.data);
a = a + 1 ;
if(a == 2){
getConversationList()
@ -186,53 +189,7 @@
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, // 开启自动重连
heartbeat: true
@ -243,6 +200,7 @@
/** 监听 WebSocket 数据 */
watchEffect(() => {
console.log('连接服务器得到消息:',data.value)
if (!data.value) {
return
}
@ -255,6 +213,8 @@
// 2.1 解析 type 消息类型
const jsonMessage = JSON.parse(data.value)
const type = jsonMessage.type
console.log('来自用户发送的消息:',data.value)
if (!type) {
message.error('未知的消息类型：' + data.value)
return

6
yudao-admin-vue3/src/views/mall/promotion/supportstaff/index.vue
View File

@ -26,7 +26,7 @@
class="!w-240px"
/>
</el-form-item>
<el-form-item label="登录账号" prop="account">
<!-- <el-form-item label="登录账号" prop="account">
<el-input
v-model="queryParams.account"
placeholder="请输入登录账号"
@ -34,7 +34,7 @@
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
</el-form-item> -->
<el-form-item label="客服状态" prop="status">
<el-select
v-model="queryParams.status"
@ -70,7 +70,7 @@
@click="openForm('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
type="success"

14
yudao-admin-vue3/src/views/mall/promotion/verbaltrick/index.vue
View File

@ -25,7 +25,7 @@
:key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</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"
class="!w-240px" />
</el-form-item>
@ -33,22 +33,22 @@
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
: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-button @click="handleQuery">
<!-- <el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-button> -->
<el-button type="primary" plain @click="openForm('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 type="success" plain @click="handleExport" :loading="exportLoading"
<!-- <el-button type="success" plain @click="handleExport" :loading="exportLoading"
v-hasPermi="['promotion:verbal-trick:export']">
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-button> -->
</el-form-item>
</el-form>
</ContentWrap>