修改客服输入框样式

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

View File

@ -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>

View File

@ -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

View File

@ -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'

View File

@ -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

View File

@ -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"

View File

@ -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>