1014 行
40 KiB
HTML
1014 行
40 KiB
HTML
<style>
|
||
#shopro-kefu-container .el-dialog {
|
||
width: 900px;
|
||
}
|
||
|
||
#shopro-kefu-container .el-dialog__body,
|
||
#shopro-kefu-container .el-dialog__header {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
#shopro-kefu-container .el-dialog__header {
|
||
background: #FBFBFB;
|
||
}
|
||
|
||
#shopro-kefu-container .el-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 19px;
|
||
}
|
||
|
||
#shopro-kefu-container .image-slot {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.ellipsis-item {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.shopro-chat-goods-title {
|
||
width: 144px;
|
||
}
|
||
|
||
.display-flex {
|
||
display: flex;
|
||
}
|
||
|
||
.scrollbar-containering::-webkit-scrollbar {
|
||
width: 6px;
|
||
background: #F4F4F4;
|
||
}
|
||
|
||
.scrollbar-containering::-webkit-scrollbar-thumb {
|
||
width: 6px;
|
||
background: #e6e6e6;
|
||
height: 20px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.el-textarea__inner::-webkit-scrollbar {
|
||
width: 4px;
|
||
background: #F4F4F4;
|
||
}
|
||
|
||
.el-textarea__inner::-webkit-scrollbar-thumb {
|
||
width: 4px;
|
||
background: #e6e6e6;
|
||
height: 20px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
|
||
.shopro-kefu-container-shake {
|
||
animation: shopro-shake 1s;
|
||
-o-animation: shopro-shake 1s;
|
||
-webkit-animation: shopro-shake 1s;
|
||
-moz-animation: shopro-shake 1s;
|
||
}
|
||
|
||
@keyframes shopro-shake {
|
||
|
||
0%,
|
||
100% {
|
||
-webkit-transform: translateX(0);
|
||
}
|
||
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
-webkit-transform: translateX(-5px);
|
||
}
|
||
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
-webkit-transform: translateX(5px);
|
||
}
|
||
}
|
||
|
||
@keyframes dyeing {
|
||
0% {
|
||
-moz-box-shadow: 0 0 0 0 rgba(119, 97, 251, 0.5);
|
||
box-shadow: 0 0 0 0 rgba(119, 97, 251, 0.5);
|
||
}
|
||
|
||
70% {
|
||
-moz-box-shadow: 0 0 0 10px rgba(119, 97, 251, 0);
|
||
box-shadow: 0 0 0 10px rgba(119, 97, 251, 0);
|
||
}
|
||
|
||
100% {
|
||
-moz-box-shadow: 0 0 0 0 rgba(119, 97, 251, 0);
|
||
;
|
||
box-shadow: 0 0 0 0 rgba(119, 97, 251, 0);
|
||
;
|
||
}
|
||
}
|
||
|
||
#shopro-kefu-button {
|
||
position: absolute;
|
||
top: 80%;
|
||
right: 20px;
|
||
width: 50px;
|
||
height: 50px;
|
||
z-index: 2000;
|
||
cursor: pointer;
|
||
border-radius: 25px;
|
||
background: #7761FB url(/assets/addons/shopro/img/chat/menu.gif) center no-repeat;
|
||
background-size: 30px 27px;
|
||
animation: dyeing 2s infinite;
|
||
}
|
||
|
||
.shopro-kefu-title {
|
||
display: flex;
|
||
align-items: center;
|
||
/* justify-content: space-between; */
|
||
padding: 0 18px;
|
||
height: 50px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.shopro-kefu-title-avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid #E6E6E6;
|
||
border-radius: 14px;
|
||
margin-right: 12px
|
||
}
|
||
|
||
.shopro-kefu-title-name {
|
||
margin-right: 16px;
|
||
color: #534C70;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.shopro-kefu-title-line {
|
||
width: 80px
|
||
}
|
||
|
||
.shopro-kefu-content {
|
||
height: 657px;
|
||
display: flex;
|
||
}
|
||
|
||
.chater-left {
|
||
height: 100%;
|
||
width: 303px;
|
||
border-right: 1px solid #F4F4F4;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chater-header {
|
||
display: flex;
|
||
width: 300px;
|
||
height: 38px;
|
||
border-bottom: 1px solid #F4F4F4;
|
||
}
|
||
|
||
.chater-header-item {
|
||
width: 100px;
|
||
height: 38px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.chater-header-item-active {
|
||
width: 84px;
|
||
height: 26px;
|
||
background: rgba(157, 96, 255, 0.2);
|
||
border-radius: 18px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #7438D5;
|
||
}
|
||
|
||
.chater-header-container {
|
||
flex: 1;
|
||
overflow: auto;
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.chater-header-list {
|
||
padding: 8px 10px 13px 0px;
|
||
border-bottom: 1px solid #F4F4F4;
|
||
cursor: pointer;
|
||
background: #fff;
|
||
}
|
||
|
||
.chater-header-list:hover {
|
||
/* background: #EBDFFF; */
|
||
}
|
||
|
||
.chater-header-list:hover .chater-el-icon-close i {
|
||
display: block;
|
||
}
|
||
|
||
.chater-header-list-active,
|
||
.chater-header-list-offline-active {
|
||
background: #EBDFFF;
|
||
}
|
||
|
||
.offline-status {
|
||
margin: 0 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.offline-status .line-status-offline {
|
||
color: #ED655F;
|
||
}
|
||
|
||
.offline-status .line-status-online {
|
||
color: #7438D5;
|
||
}
|
||
|
||
.chater-el-icon-close {
|
||
font-size: 10px;
|
||
width: 22px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.chater-el-icon-close i {
|
||
display: none;
|
||
}
|
||
|
||
.chater-el-icon-close:hover {
|
||
color: #A268FF;
|
||
}
|
||
|
||
.chater-header-list-image {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #C4C4C4;
|
||
border: 1px solid #E6E6E6;
|
||
margin-right: 10px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.chater-header-list-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.chater-header-list-message {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.chater-header-list-message-1 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 14px;
|
||
margin-bottom: 6px
|
||
}
|
||
|
||
.chater-header-list-message-2 {
|
||
line-height: 12px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.chater-right {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.shopro-chat-container {
|
||
height: 517px;
|
||
padding: 20px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.shopro-chat-container-item {
|
||
display: flex;
|
||
margin-bottom: 42px;
|
||
}
|
||
|
||
.shopro-chat-container-item-system {
|
||
width: 100%;
|
||
}
|
||
|
||
.shopro-chat-container-item-image {
|
||
width: 38px;
|
||
height: 38px;
|
||
border: 1px solid #E6E6E6;
|
||
border-radius: 19px;
|
||
margin-right: 14px
|
||
}
|
||
|
||
.shopro-chat-container-item-image-1 {
|
||
width: 38px;
|
||
height: 38px;
|
||
border: 1px solid #E6E6E6;
|
||
border-radius: 19px;
|
||
margin-left: 14px
|
||
}
|
||
|
||
.shopro-chat-container-item-message {
|
||
background: #F6F6F6;
|
||
border-radius: 6px 6px 6px 0px;
|
||
max-width: 432px;
|
||
}
|
||
|
||
.shopro-chat-container-item-message-1 {
|
||
max-width: 432px;
|
||
border-radius: 6px 6px 0px 6px;
|
||
color: #444;
|
||
background: #ECE1FF;
|
||
}
|
||
|
||
.shopro-chat-container-item-message-text {
|
||
padding: 10px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.shopro-chat-container-item-message-text img {
|
||
width: 100%;
|
||
}
|
||
|
||
.shopro-send-container {
|
||
width: 100%;
|
||
height: 140px;
|
||
padding: 0 24px 0 16px;
|
||
border-top: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.shopro-send-tip-container {
|
||
height: 42px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.shopro-send-tip-item {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.shopro-send-textarea {
|
||
height: 44px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.shopro-send-textarea::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.shopro-send-textarea::-webkit-scrollbar-thumb {
|
||
width: 6px;
|
||
background: #ccc;
|
||
height: 20px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.shopro-send-textarea textarea {
|
||
height: 44px;
|
||
width: 554px !important;
|
||
border: none;
|
||
margin: 0px;
|
||
}
|
||
|
||
.shopro-send-textarea textarea:focus {
|
||
border: none !important;
|
||
}
|
||
|
||
.shopro-send-button-container {
|
||
padding: 12px 0;
|
||
height: 64px
|
||
}
|
||
|
||
.shopro-send-button {
|
||
width: 78px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
background: #7438D5;
|
||
border-radius: 4px;
|
||
float: right;
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
#inputFile {
|
||
display: none;
|
||
}
|
||
|
||
.shopro-chat-goods-item {
|
||
min-width: 240px;
|
||
height: 60px;
|
||
/* background: #FFFFFF; */
|
||
/* border: 1px solid #E6E6E6; */
|
||
border-radius: 4px;
|
||
padding: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.shopro-chat-goods-image {
|
||
width: 44px;
|
||
height: 44px;
|
||
border: 1px solid #E6E6E6;
|
||
border-radius: 3px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.shopro-chat-goods-image .el-image,
|
||
.shopro-chat-image {
|
||
position: relative;
|
||
border-radius: 3px !important;
|
||
}
|
||
|
||
.shopro-chat-goods-message {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
height: 100%;
|
||
}
|
||
|
||
.shopro-chat-goods-bodys {
|
||
justify-content: space-between;
|
||
height: 20px;
|
||
}
|
||
|
||
.customer-service {
|
||
color: #fff;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.customer-user {
|
||
color: #444;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.customer-system {
|
||
justify-content: center;
|
||
}
|
||
|
||
.shopro-chat-system {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 10px;
|
||
border-radius: 10px;
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.shopro-chat-emoji-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
height: 150px;
|
||
overflow: auto;
|
||
padding: 10px 10px 5px;
|
||
}
|
||
|
||
.shopro-chat-emoji-image {
|
||
width: 24px;
|
||
height: 24px;
|
||
/* border: 1px solid #E6E6E6; */
|
||
border-radius: 3px;
|
||
margin-right: 10px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.shopro-chat-emoji-image:nth-of-type(6n) {
|
||
margin-right: 0px;
|
||
}
|
||
|
||
.shopro-send-pre,
|
||
.shopro-send-pre:focus,
|
||
.shopro-send-pre:default {
|
||
border: none !important;
|
||
outline: none;
|
||
background: none;
|
||
height: 44px;
|
||
padding: 0;
|
||
}
|
||
|
||
.message-dot {
|
||
padding: 4px 7px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
background: #F15847;
|
||
color: #fff;
|
||
}
|
||
|
||
.common-words-item,
|
||
.common-words-item-tip {
|
||
cursor: pointer;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 12px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
color: #666;
|
||
}
|
||
|
||
.common-words-item-tip {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.common-words-item:hover {
|
||
background: #F7F7FC;
|
||
}
|
||
|
||
.no-more-data {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.shopro-chat-order-item {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.shopro-chat-order-title {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
#shopro-kefu-container .el-dialog__headerbtn {
|
||
height: 50px;
|
||
top: 0;
|
||
}
|
||
|
||
.shopro-kefu-title-line input,
|
||
.shopro-kefu-title-line .el-input__inner {
|
||
border: none;
|
||
background-color: #FBFBFB;
|
||
color: inherit;
|
||
}
|
||
|
||
#shopro-kefu-button .message-dot {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 7px;
|
||
float: right;
|
||
}
|
||
|
||
.el-popover {
|
||
padding: 0;
|
||
}
|
||
|
||
.el-popover-common-words {
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.emoji {
|
||
width: 20px !important;
|
||
height: 20px !important;
|
||
margin: 0 2px;
|
||
}
|
||
|
||
.el-icon-loading {
|
||
color: #7438D5;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-left: -10px;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.shopro-chat-container-item-message .el-icon-loading {
|
||
color: #999;
|
||
}
|
||
|
||
.transfer-item {
|
||
width: 160px;
|
||
background: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.transfer-item .el-input__inner {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.el-dialog__wrapper {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.specific-createtime {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.specific-createtime .createtime-item {
|
||
width: 160px;
|
||
border-radius: 10px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
background: #f6f6f6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #777;
|
||
}
|
||
|
||
label {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.error-tip-popover.el-popover {
|
||
padding: 12px 16px;
|
||
border: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.error-tip-popover.el-popper[x-placement^=left] .popper__arrow {
|
||
border-left-color: #e6e6e6;
|
||
}
|
||
|
||
.kefu-access-status {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 16px;
|
||
width: 565px;
|
||
height: 42px;
|
||
background: #FFFCF7;
|
||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
color: #F0AF41;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 100;
|
||
}
|
||
|
||
.kefu-access-status-left i {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.shopro-nosend-container {
|
||
padding: 16px;
|
||
font-size: 17px;
|
||
color: #D1D1D1;
|
||
}
|
||
|
||
#shopro-kefu-container .shopro-chat-container-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
#shopro-kefu-container .shopro-chat-container-icon .el-image {
|
||
width: 146px;
|
||
height: 146px;
|
||
}
|
||
|
||
.shopro-chat-container-tip {
|
||
font-size: 16px;
|
||
color: #999999;
|
||
margin-top: 30px;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/x-template" id="chatTemp" style="position: relative;">
|
||
|
||
<div id="shopro-kefu-container" class="">
|
||
<el-popover
|
||
popper-class="error-tip-popover"
|
||
placement="left"
|
||
width="264"
|
||
trigger="manual"
|
||
v-model="errorTipVisible">
|
||
<div>客服连接失败，请点击 <span style="cursor: pointer;color: #7438D5;" @click="linkWebSocket(passvalue.wsUri, passvalue.token, passvalue.expire_time, passvalue.customer_service_id)">重新连接</span><i style="margin-left:10px;cursor: pointer" class="el-icon-close" @click="closeErrorTipVisible"></i></div>
|
||
<div slot="reference" id="shopro-kefu-button" ref="shoproKefuButtonRef" v-show="isButtonShow" @mousedown="moveKefu" @click="openDialog()">
|
||
<div v-if="kefuButtonvisible && !dialogVisible" class="message-dot"></div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :custom-class="shoproKefuShake?'shopro-kefu-container-shake':''" v-dialogDrag>
|
||
<span slot="title">
|
||
<div class="shopro-kefu-title" ref="shoproKefuTitleRef" v-if="adminData.customer_service" @click.stop="closerightShowId">
|
||
<img class="shopro-kefu-title-avatar" :src="adminData.customer_service.avatar?Fast.api.cdnurl(adminData.customer_service.avatar):'/assets/addons/shopro/img/chat/default.png'">
|
||
<div class="shopro-kefu-title-name">客服-{{adminData.customer_service.name}}</div>
|
||
<div class="shopro-kefu-title-line" v-if="relink==1">
|
||
<el-select v-model="lineStatus" size="mini" placeholder="" @change="changeLineStatus" :style="{color:lineStatus=='online'?'#7438D5':(lineStatus=='offline'?'#ED655F':'#666666')}">
|
||
<el-option v-for="line in lineOptions" :key="line.value" :label="line.label" :value="line.value">
|
||
<span :style="{color: line.color}">{{ line.label }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div v-if="relink==0">
|
||
网络断开中，请点击 <span style="cursor: pointer;color: #7438D5;" @click="linkWebSocket(passvalue.wsUri, passvalue.token, passvalue.expire_time, passvalue.customer_service_id)">重新连接</span>
|
||
</div>
|
||
</div>
|
||
</span>
|
||
<div class="shopro-kefu-content" @click.stop="closerightShowId">
|
||
<div class="chater-left">
|
||
<div class="chater-header">
|
||
<div class="chater-header-item"
|
||
v-for="(chater,chaterIndex) in liaoData" @click="changeGroup(chaterIndex)">
|
||
<span v-if="groupIndex!=chaterIndex">{{chater.title}}</span>
|
||
<div class="chater-header-item-active" v-if="groupIndex==chaterIndex">{{chater.title}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="chater-header-container scrollbar-containering">
|
||
<div class="chater-header-list" v-if="openGroupList.length>0"
|
||
v-for="(group,gIndex) in openGroupList" :class="[(user_offline.includes(group.session_id) && isChatingId==group.session_id)?'chater-header-list-offline-active':'',((user_offline.includes(group.session_id) && isChatingId!=group.session_id)) ?'chater-header-list-offline':'',((!user_offline.includes(group.session_id)) && isChatingId==group.session_id)?'chater-header-list-active':'']" @click.stop="selectChating(group.session_id,gIndex,true,group)"
|
||
@contextmenu.prevent="show($event,group.session_id,gIndex)">
|
||
<div class="display-flex">
|
||
<div class="chater-el-icon-close" @click.stop="deleteChating(group.session_id,gIndex,true)">
|
||
<i class="el-icon-close"></i>
|
||
</div>
|
||
<div class="chater-header-list-image">
|
||
<img :src="group.avatar?Fast.api.cdnurl(group.avatar):'/assets/addons/shopro/img/chat/user-default.png'" />
|
||
</div>
|
||
<div class="chater-header-list-message">
|
||
<div class="chater-header-list-message-1">
|
||
<div class="display-flex" style="flex:1">
|
||
<div class="ellipsis-item">{{group.nickname}}</div>
|
||
<div class="offline-status">
|
||
<span v-if="user_offline.includes(group.session_id)" class="line-status-offline">离线</span>
|
||
<span v-else class="line-status-online">在线</span>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:12px;flex-shrink: 0;" v-if="group.last_message">
|
||
{{timeFilter(group.last_message.createtime*1000)}}
|
||
</div>
|
||
</div>
|
||
<div class="chater-header-list-message-2">
|
||
<div class="display-flex">
|
||
<!-- <div v-if="user_offline.includes(group.session_id)" class="offline-status">{{user_offline.includes(group.session_id)?'离线':''}}</div> -->
|
||
<div v-if="group.last_message">
|
||
<div v-if="group.last_message.message_type=='text'">
|
||
[文本]
|
||
</div>
|
||
<div v-if="group.last_message.message_type=='image'">[图片]</div>
|
||
<div v-if="group.last_message.message_type=='goods'">[商品]</div>
|
||
<div v-if="group.last_message.message_type=='order'">[订单]</div>
|
||
</div>
|
||
</div>
|
||
<div class="message-dot" v-if="group.message_unread_num">{{group.message_unread_num>99?'99+':group.message_unread_num}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右键 -->
|
||
<div :style="{position:'fixed',top:rightShowPosition.top,left:rightShowPosition.left,zIndex:1}" v-if="rightShowId==group.session_id">
|
||
<el-select class="transfer-item" v-model="transferAdminList" placeholder="请选择转接客服人员" @change="transferKfu" size="small">
|
||
<el-option
|
||
v-for="item in changeKefuList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chater-right">
|
||
<!-- 弹出提示 -->
|
||
<div v-if="kefuAccessStatus" class="kefu-access-status">
|
||
<div class="kefu-access-status-left">
|
||
<i class="el-icon-warning"></i>
|
||
{{kefuAccessTip}}
|
||
</div>
|
||
<i class="el-icon-close" @click="closeKefuAccessStatus"></i>
|
||
</div>
|
||
<div v-show="!isChatingId" class="shopro-chat-container scrollbar-containering shopro-chat-container-icon">
|
||
<el-image src="/assets/addons/shopro/img/chat/chat-icon.png" fit="contain">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
<div class="shopro-chat-container-tip">
|
||
暂时没有会话哦!
|
||
</div>
|
||
</div>
|
||
<div v-show="isChatingId" class="shopro-chat-container scrollbar-containering" ref="shoproChatContainerRef">
|
||
<div class="no-more-data" v-if="message_num<10">没有更多数据了</div>
|
||
<template v-if="isChatingId">
|
||
<div class="shopro-chat-container-item"
|
||
:class="[specific.sender_identify=='customer_service'?'customer-service':'customer-user',specific.message_type=='system'?'customer-system':'']"
|
||
v-for="(specific,specificindex) in specificChatMessage" style="flex-direction: column;">
|
||
<template v-if="specific.message_type=='system'">
|
||
<div class="shopro-chat-system">{{specific.message}}<div>
|
||
</template>
|
||
<template v-if="specific.sender_identify=='user' && specific.message_type!='system'">
|
||
<template>
|
||
<div class="specific-createtime" v-if="specificindex>0 && specific.createtime-specificChatMessage[specificindex-1].createtime>300">
|
||
<div class="createtime-item">
|
||
{{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
|
||
</div>
|
||
</div>
|
||
<div class="specific-createtime" v-if="specificindex==0 && specific.createtime">
|
||
<div class="createtime-item">
|
||
{{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="display-flex">
|
||
<div class="shopro-chat-container-item-image">
|
||
<el-image v-if="specific.identify"
|
||
:src="specific.identify.avatar?Fast.api.cdnurl(specific.identify.avatar):'/assets/addons/shopro/img/chat/user-default.png'"
|
||
fit="cover">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
<div class="shopro-chat-container-item-message">
|
||
<!--type='text' -->
|
||
<div class="shopro-chat-container-item-message-text" v-if="specific.message_type=='text'" v-html="specific.message"></div>
|
||
<!--type='image' -->
|
||
<div class="shopro-chat-container-item-message-text shopro-chat-image" :style="{width:!specific.hidden?'30px':''}" v-if="specific.message_type=='image'">
|
||
<i v-if="!specific.hidden" class="el-icon-loading"></i>
|
||
<el-image ref="imageRef" lazy :src="Fast.api.cdnurl(specific.message)" fit="contain" @load="getimageload(specificindex)" @error="imagerror(specificindex)">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
<!--type='goods' -->
|
||
<div class="shopro-chat-goods-item" v-if="specific.message_type=='goods'" @click="openGoods(specific.message.id)">
|
||
<div class="shopro-chat-goods-image">
|
||
<el-image
|
||
:src="Fast.api.cdnurl(specific.message.image)"
|
||
fit="contain">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
<div class="shopro-chat-goods-message">
|
||
<div class="display-flex">
|
||
<div style="margin-right:10px;">{{specific.message.id}}</div>
|
||
<div class="shopro-chat-goods-title ellipsis-item">{{specific.message.title}}</div>
|
||
</div>
|
||
<div class="shopro-chat-goods-bodys display-flex">
|
||
<div>￥{{specific.message.price}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--type='order' -->
|
||
<div class="shopro-chat-order-item" v-if="specific.message_type=='order'" @click="openOrder(specific.message.id)">
|
||
<div class="shopro-chat-order-title">订单号：{{specific.message.order_sn}}</div>
|
||
<div class="shopro-chat-goods-item">
|
||
<div class="shopro-chat-goods-image">
|
||
<el-image
|
||
:src="Fast.api.cdnurl(specific.message.image)"
|
||
fit="contain">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
<div class="shopro-chat-goods-message">
|
||
<div class="display-flex">
|
||
<div style="margin-right:10px">{{specific.message.id}}</div>
|
||
<div class="shopro-chat-goods-title ellipsis-item">{{specific.message.title}}</div>
|
||
</div>
|
||
<div class="shopro-chat-goods-bodys display-flex">
|
||
<div>￥{{specific.message.price}}</div>
|
||
<div class="shopro-chat-goods-stock">x{{specific.message.num}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="specific.sender_identify=='customer_service' && specific.message_type!='system'">
|
||
<div class="specific-createtime" v-if="specificindex>0 && specific.createtime-specificChatMessage[specificindex-1].createtime>300">
|
||
<div class="createtime-item">
|
||
{{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
|
||
</div>
|
||
</div>
|
||
<div class="specific-createtime" v-if="specificindex==0 && specific.createtime">
|
||
<div class="createtime-item">
|
||
{{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
|
||
</div>
|
||
</div>
|
||
<div class="display-flex" style="justify-content: flex-end;">
|
||
<div class="shopro-chat-container-item-message-1">
|
||
<!--type='text' -->
|
||
<div class="shopro-chat-container-item-message-text" v-if="specific.message_type=='text'" v-html="specific.message"></div>
|
||
<!--type='image' -->
|
||
<div class="shopro-chat-container-item-message-text shopro-chat-image" :style="{width:!specific.hidden?'30px':''}" v-if="specific.message_type=='image' && specific.message">
|
||
<i v-if="!specific.hidden" class="el-icon-loading"></i>
|
||
<el-image ref="imageRef" lazy :src="Fast.api.cdnurl(specific.message)" fit="contain" @load="getimageload(specificindex)" @error="imagerror(specificindex)">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
<div class="shopro-chat-goods-item" v-if="specific.message_type=='goods'" @click="openGoods(specific.message.id)">
|
||
<div class="shopro-chat-goods-image">
|
||
<el-image
|
||
:src="Fast.api.cdnurl(specific.message.image)"
|
||
fit="contain">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
<div class="shopro-chat-goods-message">
|
||
<div class="display-flex">
|
||
<div style="margin-right:10px">{{specific.message.id}}</div>
|
||
<div class="shopro-chat-goods-title ellipsis-item">{{specific.message.title}}</div>
|
||
</div>
|
||
<div class="shopro-chat-goods-bodys display-flex">
|
||
<div>￥{{specific.message.price}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="shopro-chat-container-item-image-1">
|
||
<el-image v-if="specific.identify"
|
||
:src="specific.identify.avatar?Fast.api.cdnurl(specific.identify.avatar):'/assets/addons/shopro/img/chat/default.png'"
|
||
fit="cover">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="shopro-send-container shopro-nosend-container" v-show="isChatingId && kefuAccessStatusSend">
|
||
暂时无法与之会话
|
||
</div>
|
||
<div class="shopro-send-container" v-show="isChatingId && !kefuAccessStatusSend">
|
||
<div class="shopro-send-tip-container">
|
||
<el-popover placement="top-start" width="222" v-model="emojivisible">
|
||
<div class="scrollbar-containering shopro-chat-emoji-container" style="">
|
||
<div class="shopro-chat-emoji-image" v-for="emoji in emoji_list" @click="selectEmoji(emoji)">
|
||
<el-image
|
||
:src="'/assets/addons/shopro/img/emoji/'+emoji.file"
|
||
fit="contain">
|
||
<div slot="error" class="image-slot">
|
||
<i class="el-icon-picture-outline"></i>
|
||
</div>
|
||
</el-image>
|
||
</div>
|
||
</div>
|
||
<img class="shopro-send-tip-item" slot="reference" src="/assets/addons/shopro/img/chat/expression.png" />
|
||
</el-popover>
|
||
<el-popover placement="top-start" width="180" v-model="commonWordsvisible">
|
||
<div>
|
||
<div class="common-words-item" v-if="commonWordsList.length==0">赶紧去配置常用语吧～</div>
|
||
<div class="scrollbar-containering el-popover-common-words" v-if="commonWordsList.length>0">
|
||
<div class="common-words-item ellipsis-item" v-for="(words,wordsIndex) in commonWordsList" @click="selectCommonWords(wordsIndex)">{{words.name}}</div>
|
||
</div>
|
||
</div>
|
||
<img class="shopro-send-tip-item" slot="reference" src="/assets/addons/shopro/img/chat/commonWords.png" />
|
||
</el-popover>
|
||
<img class="shopro-send-tip-item" style="margin-top: 4px;" @click="selectGoods()" src="/assets/addons/shopro/img/chat/goods.png" />
|
||
<div class="shopro-send-tip-item">
|
||
<label for="inputFile">
|
||
<img class="shopro-send-tip-item" src="/assets/addons/shopro/img/chat/file.png" />
|
||
</label>
|
||
<input id="inputFile" type="file" @change="addfile" ref="inputFileRef" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
|
||
</div>
|
||
</div>
|
||
<div class="shopro-send-textarea scrollbar-containering">
|
||
<div class="shopro-send-pre" v-model="sendMessage" contenteditable @keyup.enter.stop="successMessage(event)"></div>
|
||
</div>
|
||
<div class="shopro-send-button-container">
|
||
<div class="shopro-send-button" @click="successMessage()">发送</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</script> |