like
/
customAgent
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 Commits
1 Branch
0 Tags
18 MiB
 
 
 
Tag: Branch: Tree: ff1778df8f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ff1778df8f'
${ noResults }
customAgent/src/components/chat-content.vue

2388 lines
96 KiB
Raw Blame History

<template>
<div class="chat-content-box historicRecords" v-if="historylist && historylist.length > 0">
<div :class="[
elder ? 'elder-wrapper' : '',
integratedUser && manualService == 2 && item.sessionId === sessionId
? 'disable-sys-menu'
: '',
]" class="chat-content-box-item opacity" style="position: relative" v-for="(item, index) in historylist"
:key="index" :id="item.VIEW_ID"
v-show="(item.msgText && item.msgText != 'null') || item.cmd === 'ServiceSessionOpenedEvent'"
@touchstart="touchStartBubble(item, index, $event)" @touchmove="touchMoveBubble" @touchend="touchEndBubble"
@contextmenu="onContextMenu(item, $event)" @click="closeQuoteMenu">
<!-- 引用功能菜单悬浮窗 -->
<div v-if="quoteMenuTimestamp && quoteMenuTimestamp === item.timestamp" class="quote-menu-box"
:style="quoteMenuPositions[item.timestamp] || {}">
<template v-if="item.reqAndResType == '1' || item.msgType == '01'">
<div class="quote-menu-btn" @click.stop="onCopyMessage(item)">复制</div>
<div class="quote-menu-divider"></div>
</template>
<div class="quote-menu-btn" @click.stop="onQuoteMessage(item)">引用</div>
<div class="quote-arrow"></div>
</div>
<div class="time-show" v-if="item.fromFlag && item.fromFlag != 'other' && item.msgText && item.timestamp">
<span class="session-tips">{{ FormatDate(item.timestamp, 'yyyy年MM月dd日 hh:mm') }}</span>
</div>
<!-- <div class="chat-content-other" v-if="item.fromFlag == 'other'">
<span class="session-tips" v-html="item.msgText"></span>
</div> -->
<!-- 消息未读提示 -->
<div class="this-news-box news-tips-box" v-if="item.fromFlag === 'unreadtips'">
<div class="this-news-tips" v-html="item.msgText"></div>
</div>
<!-- 右边消息类型 -->
<div class="chat-content-list" v-if="item.msgText && item.fromFlag == '1' && item.reqAndResType == '1'">
<!-- 文本消息 -->
<div class="chat-content-txt">
<div class="send-message-loading" v-if="(sendLoading && String(item.timestamp) === String(timestamp)) || item.sendLoading">
<van-loading type="spinner" size="18rem" />
</div>
<div class="chat-txt-content" v-if="item.msgText">
<p class="messageBox" v-if="
item.msgText.includes('xss') ||
item.msgText.includes('i0.a') ||
item.msgText.includes('0x.a') ||
item.msgText.includes('k.ki') ||
item.msgText.includes('xss.pt')
" v-text="$xss(replaceBrEmoticon(item.msgText, item))"></p>
<p v-else class="messageBox" v-html="$xss(replaceBrEmoticon(item.msgText))"></p>
</div>
</div>
</div>
<!-- 右边消息类型 -->
<div class="chat-content-list" v-if="item.msgText && item.fromFlag == '1' && item.reqAndResType == '10'">
<!-- 文本消息 -->
<div class="chat-content-txt">
<div class="send-message-loading" v-if="(sendLoading && String(item.timestamp) === String(timestamp)) || item.sendLoading">
<van-loading type="spinner" size="18rem" />
</div>
<div class="chat-txt-content" v-if="item.msgText">
<p class="messageBox" v-if="
item.msgText.includes('xss') ||
item.msgText.includes('i0.a') ||
item.msgText.includes('0x.a') ||
item.msgText.includes('k.ki') ||
item.msgText.includes('xss.pt')
" v-text="$xss(replaceBrEmoticon(item.msgText, item))"></p>
<p v-else class="messageBox" v-html="$xss(replaceBrEmoticon(item.msgText))"></p>
</div>
</div>
</div>
<!-- 右边消息类型 -->
<div class="chat-content-list" v-if="
item.msgText && item.fromFlag == '1' && item.reqAndResType == '5' && !item.bpErrorContent
">
<!-- 语音消息 -->
<div class="chat-content-txt">
<div class="send-message-loading" v-if="item.sendLoading">
<van-loading type="spinner" size="18rem" />
</div>
<Audio class="audio-box" :voiceNo="0" :voiceUrl="item.msgText" />
<!-- 语音内容：{{item.voiceNo}} -->
<!-- <div
class="chat-txt-content"
@touchstart="longTouchDel(item, index)"
@touchend="cleartime(index)"
:data-msgSource="item.msgSource"
>
</div> -->
</div>
</div>
<!-- 图片消息 -->
<div class="chat-content-list" v-if="item.msgText && item.fromFlag == '1' && item.reqAndResType == '2'">
<div class="chat-content-image">
<div class="send-message-loading" v-if="(sendLoading && String(item.timestamp) === String(timestamp)) || item.sendLoading">
<van-loading type="spinner" size="18rem" />
</div>
<div class="chat-content-image-box" @click="ImagePreviewBox(item.msgText)" :data-timestamp="item.timestamp">
<DynamicImage :image-key="item.msgText" />
</div>
</div>
</div>
<!-- 右边消息类型 -->
<!--- 左边消息 -->
<!-- 链接人工客服 -->
<div class="chat-content-list" v-if="
item.fromFlag &&
item.fromFlag == '2' &&
(item.msgText || item.cmd === 'ServiceSessionOpenedEvent')
" :class="{ showMoreCard: item.cmd == 'ServiceSessionOpenedEvent' }">
<!--- 人工入口 -->
<div class="chat-room-cont" v-if="item.cmd && (item.cmd == 'SXRGFW' || item.cmd == 'PTRGFW')">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage :image-key="headerAvatar.robotUrl" class="avatarUrl-img" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main service-radius">
<div class="service-header-icon flex flex-align-center">
<DynamicImage :image-key="headerAvatar.artificialUrl" />
<div class="tips-body">
<div class="service-icon-tips">是否连线，获得人工帮助？</div>
<div class="service-icon-tips">
洋洋是文字客服，无法语音哦~如需语音服务可拨打我司统一客服热线95500，我们都将竭诚为您服务。
</div>
</div>
</div>
<div class="service-link-box before-top">
<button class="service-link-btn" disabled="disabled" @click.stop="manualAnswer($event)">
点击此处，连线人工客服
</button>
</div>
</div>
</div>
</div>
</div>
<!--会话创建成功 白班 排队3分钟之内-->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionCreatedEvent'">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main">
<div class="leave-message-cont" v-html="item.msgText"></div>
</div>
</div>
</div>
</div>
<!-- 排队3分钟 坐席忙-->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionWillScheduleTimeoutEvent'">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main scheduleTimeout-box">
<div class="leave-message-cont" v-html="item.msgText"></div>
<!-- 2021/12 关爱版开启留言按钮, 隐藏95950000 95980000 95985000渠道留言按钮 -->
<div class="leave-message-btn"
v-if="!($nohxmessage || []).includes(source) && userInfo.blacklistFlag != '1'">
<button class="answer-items" disabled="disabled" @click.stop="leaveMessageBtn($event)">
点击此处，给我们留言
</button>
<!-- <button class="answer-items" disabled="disabled" @click.stop="exitMessage($event)">点击此处，退出人工</button> -->
</div>
</div>
</div>
</div>
</div>
<!--会话创建成功 夜班-->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionCreatedEventNight'">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main">
<div class="leave-message-cont" v-html="item.msgText"></div>
<!-- 2021/12 关爱版开启留言按钮, 隐藏95950000 95980000 95985000渠道留言按钮 -->
<div class="leave-message-btn"
v-if="!($nohxmessage || []).includes(source) && userInfo.blacklistFlag != '1'">
<button class="answer-items" disabled="disabled" @click.stop="leaveMessageBtn($event)">
点击此处，给我们留言
</button>
</div>
</div>
</div>
</div>
</div>
<!--银保在线浦发平台-->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionCreatedEventNoMessage'">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main">
<div class="leave-message-cont" v-html="item.msgText"></div>
</div>
</div>
</div>
</div>
<!-- 银保在线浦发平台 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionWillScheduleTimeoutNoMessage'">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main scheduleTimeout-box">
<div class="leave-message-cont" v-html="item.msgText"></div>
</div>
</div>
</div>
</div>
<!--坐席已接起-->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionOpenedEvent'">
<!--人工客服接入卡片 -->
<div class="service-opened-card">
<div class="card-header-box">
<img class="card-bg-img" src="@/assets/images/human-card-bg.png" alt="bg" />
<img class="card-body-img" src="@/assets/images/human-card-body.png" alt="body" />
</div>
<div class="card-content-box">
<div class="card-title">您好，人工客服为您服务</div>
<div class="card-sub">
{{ item.agentNickName || '太平洋寿险客服' }}
</div>
</div>
</div>
</div>
<!--关掉页面-->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'ServiceSessionClosedEvent'">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type">
<div class="chat-left-txt" v-html="item.msgText"></div>
</div>
</div>
</div>
</div>
<!-- 变更地址 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'CHANGE_ADDRESS_CMD'">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main">
<edit-address :itemList="item" :disabled="true"></edit-address>
</div>
</div>
</div>
</div>
<!-- 智能计算 -->
<!-- <div class="chat-room-cont" >
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">{{item.seatNum}}</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box">
<intelligent-computing :itemList="item"></intelligent-computing>
</div>
</div>
</div>
</div> -->
<!-- 智能计算 周岁 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'zs'">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 0">
<intelligent-computing :itemList="item" :propsType="'yearOld'"
:btnFloat="false"></intelligent-computing>
</div>
</div>
</div>
</div>
<!-- 智能就算 gcq 观察期 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'gcq'">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 0">
<intelligent-computing :itemList="item" :propsType="'observation'"
:btnFloat="false"></intelligent-computing>
</div>
</div>
</div>
</div>
<!-- 智能计算 kxq 宽限期 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'kxq'">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 0">
<intelligent-computing :itemList="item" :propsType="'gracePeriod'"
:btnFloat="false"></intelligent-computing>
</div>
</div>
</div>
</div>
<!-- 智能计算 sxrdyr 生效日对应日 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'sxrdyr'">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 0">
<intelligent-computing :itemList="item" :propsType="'takeEffect'"
:btnFloat="false"></intelligent-computing>
</div>
</div>
</div>
</div>
<!-- 营业网点 -->
<div class="chat-room-cont" v-else-if="item.cmd && (item.cmd == 'YYWDBD' || item.cmd == 'YYWDDA')">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<network-address :itemList="item" :disabled="true"></network-address>
</div>
</div>
</div>
</div>
<!-- 营业网点 -->
<div class="chat-room-cont" v-else-if="item.cmd && (item.cmd == 'GMMDBDCX' || item.cmd == '$gmmdbdcx-da')">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<gm-network-address :itemList="item" :disabled="isHistory"></gm-network-address>
</div>
</div>
</div>
</div>
<!-- 转账失效 -->
<div class="chat-room-cont" v-else-if="
item.cmd &&
(item.cmd == 'yhzzsx' ||
item.cmd == 'fhzzsx' ||
item.cmd == 'scjzzsx' ||
item.cmd == 'wnzhzzsx' ||
item.cmd == 'tbzzsx' ||
item.cmd == 'dkzzsx' ||
item.cmd == 'lpzzsx' ||
item.cmd == '$zzsx-da') // $zzsx-da这是展示的答案
">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<transfer-accounts :itemList="item" :disabled="isHistory"></transfer-accounts>
</div>
</div>
</div>
</div>
<!-- 续期缴费转账时效表单 -->
<div class="chat-room-cont" v-else-if="
item.cmd && (item.cmd == 'XQJFZZSXBD' || item.cmd == '$xqjfzzsx-da') // $xqjfzzsx-da这是展示的答案
">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<xqjfzzsx-accounts :itemList="item" :disabled="true"></xqjfzzsx-accounts>
</div>
</div>
</div>
</div>
<!-- 个人 团体投保 -->
<div class="chat-room-cont" v-else-if="item.cmd && (item.cmd == 'grtbbd' || item.cmd == 'tttbbd')">
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<insurance-reservation :itemList="item" :disabled="true"></insurance-reservation>
</div>
</div>
</div>
</div>
<!-- 断点服务 -->
<div class="chat-room-cont" v-else-if="item.cmd && item.cmd == 'RGAN'">
<!--人工客服 -->
<div class="chat-content-left">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main service-radius">
<div class="service-header-icon flex flex-align-center">
<DynamicImage :image-key="headerAvatar.artificialUrl" />
<div class="service-icon-tips" v-text="item.msgText"></div>
</div>
<div class="service-link-box before-top">
<button class="service-link-btn" disabled="disabled" @click.stop="manualAnswer($event)">
点击此处，连线人工客服
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 非人工入口 -->
<div class="chat-room-cont" v-else>
<!-- 显示图片 --->
<div class="chat-content-left" v-if="item.reqAndResType == '2' && item.msgType == '02'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box">
<!--
<div class="chat-left-txt connectionArtificial" v-html="item.msgText"></div>
<div class="content-question-answer" v-if="item.intents && item.intents.length > 0" >
<button class="answer-items" v-for="(items, index) in item.intents" :key="index" disabled="disabled" @click.stop="richCallAnswer(items.intent)">{{items.intent}}</button>
</div>
-->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
</div>
</div>
</div>
<!-- 人工交互推送表单表格 --->
<div class="chat-content-left" v-if="item.reqAndResType == '09' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage :image-key="headerAvatar.artificialUrl" class="avatarUrl-img" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<policy-form-table :itemList="item"></policy-form-table>
</div>
</div>
</div>
<!-- 加评价 -->
<div class="chat-content-left" v-if="
(item.reqAndResType == '01' || item.reqAndResType == '1') &&
(item.msgType == '01' || item.msgType == '1') &&
item.cmd !== 'CPZX'
">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main text-folding-box" :class="{
'question-text': item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ',
}">
<!--
<text-content v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents" :itemlist="item" :disabled="true"></text-content>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">0101如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="manualAnswer($event)">进入人工服务</button>。</div> -->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ'">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 如需更多帮助 进入人工服务-->
<!-- <div class="chat-content-left" v-if="item.reqAndResType == '01' && (item.cmd && item.cmd == 'RGFWHS')">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
</div>
<div class="chat-items">
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">{{item.seatNum}}</div>
<div class="content-left-main">
<div class="chat-left-txt" v-html="replacementRag(item.msgText)"></div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="manualAnswer($event)">进入人工服务</button>。</div>
</div>
</div>
</div> -->
<!--带图片的-->
<div class="chat-content-left" v-if="item.reqAndResType == '01' && item.msgType == '02'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box" :class="{
'question-text': item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ',
}">
<!--
<div class="chat-left-txt connectionArtificial" v-html="replacementRag(item.msgText)"></div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replacementRag(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ'">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 意图澄清 02 05--->
<div class="chat-content-left" v-if="item.reqAndResType == '02' && item.msgType == '05'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box">
<!--
<div class="chat-left-txt connectionArtificial" v-html="replacementRag(item.msgText)"></div>
<div class="content-question-answer" v-if="item.intents && item.intents.length > 0" >
<button class="answer-items" disabled="disabled" v-for="(items, index) in item.intents" :key="index" @click.stop="richCallAnswer(items.intent)">{{items.intent}}</button>
</div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replacementRag(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
</div>
</div>
</div>
<!-- 聊天应答 文本--->
<div class="chat-content-left" v-if="item.reqAndResType == '03' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box"
:style="newBiaoQingBackground(item.msgText)">
<!--
<div class="chat-left-txt connectionArtificial" v-html="replacementRagEmoticon(item.msgText)"></div>
<div class="content-question-answer" v-if="item.intents && item.intents.length > 0" >
<button class="answer-items" disabled="disabled" v-for="(items, index) in item.intents" :key="index" @click.stop="richCallAnswer(items.intent)">{{items.intent}}</button>
</div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="item.msgText" :intents="item.intents" :itemlist="item"
:isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
</div>
</div>
</div>
<!-- 聊天应答 图片--->
<div class="chat-content-left" v-if="item.reqAndResType == '03' && item.msgType == '02'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box">
<!--
<div class="chat-left-txt connectionArtificial" v-html="replacementRag(item.msgText)"></div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replacementRag(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
</div>
</div>
</div>
<!-- 展开收起类型 --->
<!-- 多轮 文本--->
<div class="chat-content-left" v-if="
item.reqAndResType == '05' &&
item.msgType == '01' &&
!(item.cmd || '').includes('CPLB')
">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box"
:style="newBiaoQingBackground(item.msgText)">
<!--
<div class="chat-left-txt connectionArtificial" v-html="replacementRagEmoticon(item.msgText)"></div>
<div class="content-question-answer" v-if="item.intents && item.intents.length > 0" >
<button class="answer-items" disabled="disabled" v-for="(items, index) in item.intents" :key="index" @click.stop="richCallAnswer(items.intent)">{{items.intent}}</button>
</div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="item.msgText" :intents="item.intents" :itemlist="item"
:isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum" :disabled="true"
:reqAndResType="item.reqAndResType"></text-folding>
</div>
</div>
</div>
<!-- 文本的展开收起 -->
<div class="chat-content-left"
v-if="item.reqAndResType == '06' && item.msgType == '01' && item.cmd !== 'CPZX'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main text-folding-box" :class="{
'question-text': item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ',
}">
<!--
<text-content v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents" heightMax="autoHeight" :disabled="true"></text-content>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true" heightMax="autoHeight"></text-folding>
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ'">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 展开收起类型 --->
<!-- 文本的展开收起 带图片 -->
<div class="chat-content-left" v-if="item.reqAndResType == '06' && item.msgType == '02'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main text-folding-box" :class="{
'question-text': item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ',
}">
<!--
<text-content v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents" heightMax="autoHeight" :disabled="true"></text-content>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true" heightMax="autoHeight"></text-folding>
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ'">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 多轮 买保险咨询 -->
<div class="chat-content-left" v-if="!!item.cmd && item.cmd.includes('CPLB')">
<div class="content-left-icon">
<DynamicImage :image-key="headerAvatar.robotUrl" class="avatarUrl-img" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main">
<!-- 产品卡片组件 -->
<product-card-list v-if="item.specialData" :products="item.specialData" />
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ' && item.specialData">
<button class="help-button-item" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 产品模板-->
<div class="chat-content-left" v-if="item.cmd === 'CPZX'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main noPadding">
<Product :responseData="item.specialData" :intents="item.intents" v-if="item.specialData"
:itemlist="item" />
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ' && item.specialData">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 展开收起类型 --->
<!-- 问题评价--->
<div class="chat-content-left" v-if="item.reqAndResType == '07' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box">
<!--
<div class="chat-left-txt connectionArtificial" v-html="replacementRag(item.msgText)"></div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replacementRag(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true" heightMax="autoHeight"></text-folding>
</div>
</div>
</div>
<!-- 人工聊天应答 文本--->
<div class="chat-content-left" v-if="item.reqAndResType == '08' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type" :style="newBiaoQingBackground(item.msgText)">
<div class="chat-left-txt emoticon-img" :class="{
'red-txt': item.msgText.indexOf('请问您还在线吗？洋洋在等您哦') != -1,
}" v-html="replacementRagEmoticon(item.msgText)"></div>
</div>
</div>
<div class="volumeBody" v-if="elder">
<img src="@/assets/images/play.png" class="volumeIcon" alt="" @click="clickPlayIcon(item)"
v-show="audioItemId != item.qaId" />
<img src="@/assets/images/stop.png" class="volumeIcon" alt="" @click="clickPlayIcon(item)"
v-show="audioItemId == item.qaId" />
</div>
</div>
<!-- 人工推送金额卡片 --->
<div class="chat-content-left" v-if="
(item.reqAndResType == '22' ||
(item.msgText &&
(item.msgText.includes('[cardpush]') || item.msgText.includes('[card_push]')))) &&
item.msgType == '01'
">
<div class="content-left-icon">
<DynamicImage :image-key="headerAvatar.artificialUrl" class="avatarUrl-img" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main computing-text-box" style="padding: 14rem">
<policy-form-table :itemList="item"></policy-form-table>
</div>
</div>
</div>
<!-- 人工推送模块跳转 --->
<div class="chat-content-left" v-if="
(item.reqAndResType == '21' || (item.msgText && item.msgText.includes('[scene]'))) &&
item.msgType == '01'
">
<div class="content-left-icon">
<DynamicImage :image-key="headerAvatar.artificialUrl" class="avatarUrl-img" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type">
<div class="chat-left-txt emoticon-img" v-html="replacementRagEmoticon(
item.sceneData && item.sceneData.msg ? item.sceneData.msg : item.msgText || ''
)
"></div>
<a class="humanJumpBtn" href="javaScript:void(0)" @click="humanMessageJump(item)">{{
item.sceneData && item.sceneData.btnName ? item.sceneData.btnName : '点击查看'
}}</a>
</div>
</div>
</div>
<!-- 人工推送寿险转产险 --->
<div class="chat-content-left" v-if="item.reqAndResType == '23' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage :image-key="headerAvatar.artificialUrl" class="avatarUrl-img" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<!-- APP渠道展示文字+按钮 -->
<div v-if="item.source == '95290000' || item.source == '95530000'"
class="content-left-main img-text-type">
<div class="chat-left-txt emoticon-img" v-html="replacementRagEmoticon(item.transferDto.msg)"></div>
<a class="humanJumpBtn" href="javaScript:void(0)" @click="sxToCxJump(item.transferDto)">{{
item.transferDto.btnName }}</a>
</div>
<!-- 小程序渠道展示文字+二维码 -->
<div v-if="isSource958(item)" class="content-left-main img-text-type">
<DynamicImage :image-key="item.transferDto.img" />
<div class="chat-left-txt emoticon-img" v-html="replacementRagEmoticon(item.transferDto.msg)"></div>
</div>
</div>
</div>
<!-- 人工聊天应答 图片--->
<div class="chat-content-left" v-if="item.reqAndResType == '08' && item.msgType == '02'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.artificialUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type image-box-style" :style="newBiaoQingBackground(item.msgText)">
<div class="chat-content-image-box" @click="ImagePreviewBox(item.imgUrl)"
:data-timestamp="item.timestamp">
<!-- <DynamicImage
:image-key="item.imgUrl"
/> -->
<!-- <img
v-lazy="item.imgUrl"
ref="imagePreview"
:timestamp="item.timestamp"
/> -->
<DynamicImage :image-key="item.imgUrl" />
</div>
</div>
</div>
</div>
<!-- 无法回答 -->
<div class="chat-content-left" v-if="item.reqAndResType == '04' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main img-text-type text-folding-box">
<!--
<text-content v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents" :disabled="true"></text-content>
-->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true"></text-folding>
</div>
</div>
</div>
<!-- 文本的展开收起 -->
<div class="chat-content-left" v-if="item.reqAndResType == '11' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main text-folding-box" :class="{
'question-text': item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ',
}">
<!--
<text-content v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents" heightMax="autoHeight" :disabled="true"></text-content>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :itemlist="item" :isWX="isWX"
:tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum" :disabled="true"
heightMax="autoHeight"></text-folding>
<hot-question :isQA="true"></hot-question>
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ'">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 展开收起类型 --->
<!-- 文本的展开收起 带图片 -->
<div class="chat-content-left" v-if="item.reqAndResType == '11' && item.msgType == '02'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main text-folding-box" :class="{
'question-text': item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ',
}">
<!--
<text-content v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents" heightMax="autoHeight" :disabled="true"></text-content>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled" @click.stop="connectionArtificial($event)">进入人工服务</button>。</div>
-->
<text-folding v-if="item.msgText" :introduce="replaceALabel(item.msgText)" :intents="item.intents"
:itemlist="item" :isWX="isWX" :tokenExist="tokenExist" :lostChatInfoNum="lostChatInfoNum"
:disabled="true" heightMax="autoHeight"></text-folding>
<!--问题反馈 -->
<div class="help-button-box flex flex-align-center before-top"
v-if="item.cmd != 'RGFWHS' && item.cmd != 'QXRGPJ'">
<button class="help-button-item" disabled="disabled" @click.stop="appraise(2, item, $event)"
:data-ref="`u_${item.timestamp}`">
<em class="help-button-icon"></em>没有帮助
</button>
<button class="help-button-item" disabled="disabled" @click.stop="appraise(1, item, $event)"
:data-ref="`r_${item.timestamp}`">
<em class="help-button-icon"></em>有帮助
</button>
</div>
</div>
</div>
</div>
<!-- 展开收起类型 --->
<!-- 服务器异常 -->
<div class="chat-content-left" v-if="item.reqAndResType == '99' && item.msgType == '01'">
<div class="content-left-icon">
<DynamicImage class="avatarUrl-img" :image-key="headerAvatar.robotUrl" />
<div class="chat-name" v-if="item.seatNum && item.seatNum != '调度员'">
{{ item.seatNum }}
</div>
</div>
<div class="chat-items">
<div class="content-left-main">
<div class="chat-left-txt connectionArtificial" v-html="replacementRag(item.msgText)"></div>
<div class="question-answer-help" v-if="item.cmd && item.cmd == 'RGFWHS'">
如需更多帮助，请点击<button class="answer-help-btn" disabled="disabled"
@click.stop="connectionArtificial($event)">
进入人工服务</button>。
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 这里是统一追加的尾部引用横幅 -->
<div v-if="(item.quoteData && item.quoteData.quoteMsg) || item.quoteMsg"
:class="['quote-display-wrapper', item.fromFlag == '1' ? 'is-right' : 'is-left']">
<div class="quote-display-inner">
<span v-if="
item.quoteData &&
item.quoteData.quoteType == '2' &&
item.quoteData.quoteMsg &&
item.quoteData.quoteMsg !== '[图片]'
" class="quote-image-preview" @click.stop="ImagePreviewBox(item.quoteData.quoteMsg)">
引用内容:
<DynamicImage :image-key="item.quoteData.quoteMsg" alt="引用图片" style="
width: 60rem;
height: 60rem;
vertical-align: middle;
margin-left: 5rem;
border-radius: 4rem;
overflow: hidden;
" image-style="width: 100%; height: 100%; object-fit: cover;" />
</span>
<span v-else-if="item.quoteData && item.quoteData.quoteType == '3'">
引用内容: [语音]
</span>
<span v-else>
引用内容:
<span v-html="replacementRagEmoticon(
item.quoteData && item.quoteData.quoteMsg
? item.quoteData.quoteMsg
: item.quoteMsg
)
"></span>
</span>
</div>
</div>
</div>
<div style="display: hidden" ref="audioBody"></div>
</div>
</template>
<script>
import Bus from "@/utils/bus";
import utils from "@/utils/utils";
import { FormatDate } from '@/utils/filters';
import faceJSON from "@/mock/face.json";
// import TextContent from '@/components/text-content.vue'
import HotQuestion from "@/components/hot-question.vue";
import EditAddress from "@/components/edit-address.vue";
import TextFolding from "@/components/text-folding.vue";
import intelligentComputing from "@/components/intelligent-computing.vue";
import { showToast, showImagePreview, showConfirmDialog, closeToast, Loading } from "vant";
import { mapState, mapActions } from 'pinia'
import { useAppStore } from '@/store/app.js'
import networkAddress from "@/components/network-address.vue";
import transferAccounts from "@/components/transfer-accounts.vue";
import insuranceReservation from "@/components/insurance-reservation.vue";
import Product from "@/components/product/index.vue"
import xqjfzzsxAccounts from "@/components/xqjfzzsx-accounts.vue";
import GmNetworkAddress from './gmNetwork-address.vue';
import axios from 'axios'
import _ from 'lodash';
import Audio from './Audio.vue';
import ProductCardList from "@/components/product-card-list.vue";
import policyFormTable from "@/components/policy-form-table.vue";
import DynamicImage from '@/components/common/DynamicImage.vue';
import imageService from '@/utils/imageService';
import wx from 'weixin-js-sdk';
export default {
props: ["historylist", "tokenExist", "lostChatInfoNum", "isHistory"],
components: {
[Loading.name]: Loading,
// TextContent,
EditAddress,
TextFolding,
intelligentComputing,
networkAddress,
transferAccounts,
insuranceReservation,
Product,
xqjfzzsxAccounts,
GmNetworkAddress,
Audio,
HotQuestion,
ProductCardList,
policyFormTable,
DynamicImage,
},
data() {
return {
utils: utils,
publicPath: import.meta.env.BASE_URL,
facejson: faceJSON,
imagesList: [],
expressionProcessing: {}, //处理成img表情
bigExpressionProcessing: {}, //处理成img表情
ImagePreviewList: [],
timestampList: [], //图片对应的id
isWX: false,
isAndroid: false,
audioItemId: '',
hxOpenSuccesed: [],
quoteMenuTimestamp: null,
quoteMenuItem: null,
quoteMenuPositions: {},
};
},
computed: {
isSource958() {
return (item) => {
return item.source && String(item.source).slice(0, 3) === '958';
};
},
newBiaoQingBackground(item) {
return (item) => {
console.log(
" this.bigExpressionProcessing[item]",
this.bigExpressionProcessing[item]
);
let obj = {
background: this.bigExpressionProcessing[item] ? "none" : "#fff",
};
return obj;
};
},
...mapState(useAppStore, [
'userId',
'userInfo',
'headerAvatar',
'sessionId',
'source',
'mescrollContent',
'chatList',
'timestamp',
'sendLoading',
'manualService',
'hxOpenSucceseds',
'integratedUser',
'token',
'elder',
]),
},
created() {
this.processedEmoji();
for (let i = 0; i < this.historylist.length; i++) {
const item = this.historylist[i];
if (item.cmd == 'ServiceSessionOpenedEvent') {
if (!this.hxOpenSuccesed.includes(item.sessionId)) {
this.hxOpenSuccesed.push(item.sessionId)
}
}
}
this.set_hxOpenSuccesed(this.hxOpenSuccesed);
// this.isWX = utils.isWeiXin();
// this.isAndroid = utils.isAndroid() == 'isAndroid' ? true : false;
},
mounted() {
var that = this;
// console.log('chatList======', this.chatList);
this.$nextTick(() => {
try {
window.getLink = function (item) {
that.getLink(item);
};
window.jumpOpenLink = function (item) {
that.jumpOpenLink(item);
};
window.rich_call = function (item, type) {
that.rich_call(item, type);
};
window.ImagePreviewBox = function (src) {
that.ImagePreviewBox(src);
};
//跳转H5链接 拼接参数
window.jumpOpenWeb = function (type, url, urlType) {
console.log('chat-content', type, url);
var params = {};
if (type === "YY_0000") {
//保单管家
params = {
idnum: "1",
ownerId: that.userInfo.encryptPid,
openid: that.userInfo.sourceUserId,
};
//置换密匙
const completeURL = that.handleURL(url, params)
that.$post("semantic/getYdbqTicket", { url: completeURL, userId: that.userId }).then(res => {
console.log(res)
if (res.code === 0) {
//data空表示开关关闭
if (res.data === "" || res.data === null || res.data === undefined) {
utils.openWxPage(url, params);
} else {
const ticketParam = {
accessTicket: res.data
}
utils.openWxPage(url, ticketParam);
}
} else {
showToast("网络异常，请重试")
}
})
} else if (type === "YY_ydbq") {
//移动保全页面
params = {
mobile: that.userInfo.phone,
pid: that.userInfo.encryptPid,
openid: that.userInfo.sourceUserId,
};
//置换密匙
const completeURL = that.handleURL(url, params)
that.$post("semantic/getYdbqTicket", { url: completeURL, userId: that.userId }).then(res => {
console.log(res)
if (res.code === 0) {
//data空表示开关关闭
if (res.data === "" || res.data === null || res.data === undefined) {
utils.openWxPage(url, params);
} else {
const ticketParam = {
accessTicket: res.data
}
utils.openWxPage(url, ticketParam);
}
} else {
showToast("网络异常，请重试")
}
})
} else if (type === "YY_APP_H5") {
//在app内部页面打开h5（带参形式）
params = {
mobile: that.userInfo.phone,
pid: that.userInfo.encryptPid,
};
utils.AppOpenH5(url, params);
} else if (type === "ydbq_2") {
// 给付系统
params = {
url: url,
generateType: type,
userId: that.userId,
};
return utils.openSpecPage(params);
} else if (type === "YY_CMD") {
// 查门店
const newUrl = url + `&idnum=1&openId=${that.userInfo.sourceUserId}&entryOpenid=${that.userInfo.entryOpenid}`
//置换密匙
that.$post("semantic/getYdbqTicket", { url: newUrl, userId: that.userId, isCmd: "1" }).then(res => {
console.log(res)
if (res.code === 0) {
//data空表示开关关闭
if (res.data === "" || res.data === null || res.data === undefined) {
return that.jumpOpenLink(newUrl);
} else {
const ticketUrl = url + `&accessTicket=${res.data}`
return that.jumpOpenLink(ticketUrl);
}
} else {
showToast("网络异常，请重试")
}
})
} else if (type === "YY_lsjl") {
// 跳转历史记录
const openid = utils.getUrlParams().openid
that.$router.push({
name: "history",
query: {
ht: that.source,
openid: openid,
tokenExist: that.tokenExist,
isWX: that.isWX,
lostChatInfoNum: that.lostChatInfoNum,
param: utils.getUrlParams().param
},
});
return
} else if (type === "YY_kjmyd") {
utils.useTechSdk()
return
} else if (type === "YY_hfhz") {
// 回访回执
const param = { certNum: "1", systemSource: "yykf", userId: that.userId }
that.$post("semantic/xdhfCreateToken", param).then(res => {
const entryptedId = that.userInfo.versionHFHZ
params = {
sessionToken: res.data,
holderId: encodeURI(entryptedId),
holderType: 'a',
hzhfSystemSource: '0803',
ishwFlag: '1',
isqshzFlag: '1',
}
utils.openWxPage(url, params);
})
} else if (type === "YY_1v1") {
// 1v1专属服务
that.$post("thirdPartyAuth/getExclusiveServicesToken").then(res => {
if (res.code === 0) {
if (res.data) {
params = {
sour: 'yykf',
omoSource: that.userInfo.source,
omoSourceName: encodeURIComponent(that.userInfo.sourceName),
token: res.data
}
utils.openWxPage(url, params);
}
} else {
showToast("网络异常，请重试")
}
})
} else if (type === "YY_yzsfx") {
// 一站式复效
that.$post("semantic/getYzsUrl", { userId: that.userId, bqType: url, urlType }).then(res => {
if (res.code === 0) {
if (res.data) {
let yUrl = res.data
utils.openWxPage(yUrl, '');
}
} else {
showToast("网络异常，请重试")
}
})
} else if (type === "YY_GWXCX") {
//官微小程序
const path = url;
wx.miniProgram.navigateTo({
url: path
});
} else if (type === "YY_GWXCX_HOME") {
//官微小程序首页
const path = url;
console.log('path', path, wx.miniProgram.reLaunch)
wx.miniProgram.reLaunch({
url: path
});
}
};
//小程序渠道预览pdf
window.previewPdf = function (url) {
console.log('previewPdf', url)
let isMiniProgram = false;
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
isMiniProgram = true;
}
});
if (isMiniProgram) {
that.$router.push({
name: 'previewPdf',
params: {
url: url
}
})
} else {
that.jumpOpenLink(url);
}
};
//知识中打开app页面
window.openAppPage = function (params) {
if (params) {
params = params.replace(/\'/g, '"'); //app不能接收单引号参数
utils.AppToOutModules(params);
}
};
//转人工服务
window.connectionArtificial = function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue == false;
}
};
//阻止a标签没有内容时跳转问题
utils.aHrefJump(document.querySelectorAll(".messageBox a"));
} catch (error) {
console.log(error);
}
});
document.addEventListener("touchstart", this.handleDocumentTouch);
},
beforeDestroy() {
document.removeEventListener("touchstart", this.handleDocumentTouch);
},
methods: {
FormatDate,
// 坐席推送模块跳转
humanMessageJump(item) {
console.log('触发模块')
const appLink = item?.sceneData?.appLink;
const wxLink = item?.sceneData?.wxLink;
//判断当前环境
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
//小程序
const path = wxLink;
wx.miniProgram.navigateTo({
url: path,
});
return
}
});
//APP
if (item.source === '95290000') {
let appParams = appLink.replace(/\'/g, '"');
console.log(appParams)
utils.AppToOutModules(appParams);
return
}
},
handleDocumentTouch(e) {
if (e && e.target && typeof e.target.closest === 'function' && e.target.closest('.quote-menu-box')) {
return;
}
this.closeQuoteMenu();
},
onContextMenu(item, event) {
if (this.manualService == 2 && item.sessionId === this.sessionId) {
let bubble = event.target && event.target.closest && event.target.closest('.chat-txt-content, .chat-content-image-box, .content-left-main, .Audio, .audio-box');
if (bubble) {
event.preventDefault();
}
}
},
onCopyMessage(item) {
this.closeQuoteMenu();
if (!item || !item.msgText) return;
let textToCopy = item.msgText.replace(/<br\s*\/?>/gi, '\n').replace(/&nbsp;/ig, ' ').replace(/<[^>]+>/g, '');
const input = document.createElement('textarea');
input.value = textToCopy;
input.setAttribute('readonly', 'readonly');
input.style.position = 'absolute';
input.style.left = '-9999rem';
document.body.appendChild(input);
input.select();
try {
document.execCommand('copy');
showToast('复制成功');
} catch (err) {
showToast('复制失败');
}
document.body.removeChild(input);
},
closeQuoteMenu() {
this.quoteMenuTimestamp = null;
this.quoteMenuItem = null;
const bubbles = document.querySelectorAll(".quote-active-bubble");
bubbles.forEach((el) => {
el.classList.remove("quote-active-bubble");
});
},
touchStartBubble(item, index, event) {
this.touchMoved = false;
console.log('长按引用该条消息====', item)
// 校验会话是否是同一通或是否非人工、白名单、智能部分
if (this.manualService != 2) return;
if (item.sessionId !== this.sessionId || !this.integratedUser || item.msgSource == 1) return;
//特定类型答案不支持引用
if (item.reqAndResType === "21" || item.reqAndResType === "22" || item.reqAndResType === "23") {
return;
}
let bubble = event.target.closest('.chat-txt-content, .chat-content-image-box, .content-left-main, .Audio, .audio-box, .voiceElement');
if (!bubble) return;
let currentTarget = event.currentTarget;
this.touchTimer = setTimeout(() => {
if (this.touchMoved) return;
this.closeQuoteMenu();
bubble.classList.add("quote-active-bubble");
setTimeout(() => bubble.classList.remove('quote-active-bubble'), 300);
this.quoteMenuTimestamp = item.timestamp;
this.quoteMenuItem = item;
let rectOuter = currentTarget.getBoundingClientRect();
let rectInner = bubble.getBoundingClientRect();
let leftOffset = rectInner.left - rectOuter.left + (rectInner.width / 2);
let topOffset = rectInner.top - rectOuter.top - 46;
let screenWidth = window.innerWidth || document.documentElement.clientWidth;
let menuHalfWidth = 65; // 预估最大半宽
let absoluteCenterX = rectInner.left + (rectInner.width / 2);
let menuShift = 0;
if (absoluteCenterX + menuHalfWidth > screenWidth) {
menuShift = screenWidth - (absoluteCenterX + menuHalfWidth) - 10;
} else if (absoluteCenterX - menuHalfWidth < 0) {
menuShift = (menuHalfWidth - absoluteCenterX) + 10;
}
this.$set(this.quoteMenuPositions, item.timestamp, {
top: topOffset + "rem",
left: leftOffset + "rem",
transform: `translateX(calc(-50% + ${menuShift}rem))`,
'--arrow-shift': `${-menuShift}rem`
});
}, 700);
},
touchMoveBubble() {
this.touchMoved = true;
clearTimeout(this.touchTimer);
},
touchEndBubble() {
clearTimeout(this.touchTimer);
},
onQuoteMessage(item) {
this.closeQuoteMenu();
console.log("历史记录：引用消息", item);
Bus.$emit("quoteMessageBus", item);
},
...mapActions(useAppStore, {
set_userid: 'setUserId',
set_chatList: 'setChatList',
set_sendLoading: 'setSendLoading',
set_manualService: 'setManualService',
set_sendMessageList: 'setSendMessageList',
set_hxOpenSuccesed: 'setHxOpenSuccesed',
transferCustomer: 'transferCustomer',
sendmessageContent: 'sendmessageContent',
savePaperResult: 'savePaperResult',
set_leaveMessage: 'setLeaveMessage',
}),
//URL拼接参数
handleURL(url, params) {
let flag = url.indexOf("?") != -1 ? true : false
let urlPar = '';
if (params) {
Object.getOwnPropertyNames(params).forEach((item, index) => {
if (index === 0 && !flag) {
urlPar += `?${item}=${params[item]}`;
} else {
urlPar += `&${item}=${params[item]}`
}
});
}
return url + urlPar
},
//寿险转产险按钮
sxToCxJump(transferDto) {
if (!!transferDto?.bntUrl) {
showConfirmDialog({
title: "是否确认转接产险",
message: "",
})
.then(() => {
utils.AppToOutModules(transferDto.bntUrl);
let param = {
userId: this.userId,
};
console.log(param)
this.$post("HumanChat/closeEvent", param)
.then((res) => {
closeToast();
// console.log("欢迎语配置信息：", res.data)
if (res.code && res.code != 0) {
// showToast(res.msg);
return;
}
})
.catch((error) => {
console.log(error);
});
})
.catch(() => {
// 取消转接
});
}
},
getHeaderUrl(src, iconUrl) {
try {
var imgSrc = require(`../assets/images/${iconUrl}.png`);
if (src) {
imgSrc = src;
}
} catch (error) {
console.log(error.message);
}
return imgSrc;
},
//转换a标签href为onclick
replaceALabel(textStr) {
//替换a标签
var rega = /href=['"]([^'"]*)['"]/gi;
var regHttp = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(.)+$/;
var regPdf = /\.pdf(\?.*)?$/i; // 匹配 .pdf 结尾的链接，支持大小写
var regHttpOnly = /^[hH][tT]{2}[pP]:\/\//; // 匹配 http:// 协议
if (textStr) {
textStr = this.replaceImage(textStr); //替换图片
textStr = textStr.replace(rega, (item, text) => {
// console.log(item, text);
if (regHttp.test(text) == true) {
// 判断是否为 PDF 链接
if (regPdf.test(text)) {
// 如果是 http 协议的 PDF，转换为 https
if (regHttpOnly.test(text)) {
text = text.replace(/^[hH][tT]{2}[pP]:\/\//, 'https://');
}
return (text = `onclick="previewPdf('${text}')" href="javascript:;"`);
} else {
return (text = `onclick="jumpOpenLink('${text}')" href="javascript:;"`);
}
} else {
return item;
}
});
}
return textStr;
},
//替换所有img标签
replaceImage(textStr) {
var rega = /<img [^>]*src=['"]([^'"]+)[^>]*>/g;
// var regVideo = /<video [^>]*src=['"]([^'"]+)[^>]*>/g;
if (textStr) {
textStr = textStr.replace(rega, (item, text) => {
return `<img class="preview-box-img" src="${text}" onclick="ImagePreviewBox('${text}')" alt="图片"/>`;
});
// console.log('wx', this.isWX)
// console.log('isAndroid', this.isAndroid)
//处理微信安卓视频挡着输入框问题
// if(this.isWX && this.isAndroid){
// // console.log(this.isWX, this.isAndroid)
// textStr = textStr.replace(regVideo, (item, text) => {
// return this.addStr(item, ' x5-video-player-type="h5"', 'controls="true"');
// })
// }
}
return textStr;
},
addStr(oldStr, addItem, afterWhich) {
// 在指定字符串后面添加指定字符串
var strArr = oldStr.split("");
strArr.splice(oldStr.indexOf(afterWhich) + afterWhich.length, 0, addItem);
return strArr.join("");
},
replaceBrEmoticon(str) {
str = str || "";
str = this.replaceALabel(str);
// str = this.replaceImage(str);//替换图片
let res = str
.replace(/\n|\r\n/g, "<br/>")
.replace(/\s/g, " ")
.replace(/&quot;/g, '"')
.replace(/&#39;/g, "'");
return this.emojiToImage(res); //替换 br
},
// \n替换<br>
replacementRag(str) {
str = str || "";
str = this.replaceALabel(str);
// str = this.replaceImage(str);//替换图片
return str
.replace(/\\n/gm, "<br/>")
.replace(/&quot;/g, '"')
.replace(/&#39;/g, "'");
},
// \n替换<br> 和 表情
replacementRagEmoticon(str) {
str = str || "";
str = this.replaceALabel(str);
let res = str
.replace(/\\n/gm, "<br/>")
.replace(/&quot;/g, '"')
.replace(/&#39;/g, "'"); //替换表情
return this.emojiToImage(res); //替换 br
},
//表情处理
processedEmoji() {
this.facejson.forEach((item, index) => {
// console.log(item, index)
item.faceList.forEach((items) => {
this.expressionProcessing[`[${items.title}]`] = items.src;
});
item.bigExpression.forEach((items) => {
this.bigExpressionProcessing[`[${items.title}]`] = items.src;
});
});
},
//生成图片表情
emojiToImage(str) {
let srcImg = "";
let regex = /\[[^\]]+\]/g;
let imgHtml = "";
srcImg = str.replace(regex, (item, index) => {
if (this.expressionProcessing[item]) {
console.log(item, this.expressionProcessing[item], this.publicPath,'publicPath')
imgHtml = `<img src="${this.publicPath + this.expressionProcessing[item]
}" alt="small-image" title="${item}" />`;
} else if (this.bigExpressionProcessing[item]) {
imgHtml = `<img src="${this.publicPath + this.bigExpressionProcessing[item]
}" alt="big-image" title="${item}"/>`;
} else {
imgHtml = item;
}
return imgHtml;
});
// console.log("表情",srcImg)
return srcImg;
},
//页面链接跳转
getLink(href) {
// window.location.href = href;
utils.AppToHttpHtml(href);
},
jumpOpenLink(url) {
utils.AppToHttpHtml(url);
},
getIntroduce(item) {
this.$nextTick(() => {
this.introduce = item;
});
},
previewList() {
//图片预览处理
this.$nextTick(() => {
const imglist = [];
const timestampList = []; //为了获取图片的index
if (this.$refs.imagePreview && this.$refs.imagePreview.length > 0) {
this.$refs.imagePreview.forEach((item, index) => {
if (item.src) {
imglist.push(item.src);
}
});
this.$refs.imagePreview.forEach((item, index) => {
if (item.attributes.timestamp.value) {
timestampList.push(item.attributes.timestamp.value);
}
});
this.timestampList = timestampList;
this.ImagePreviewList = imglist;
}
});
},
async ImagePreviewBox(src) {
src = src || "";
const imageUrl = await imageService.getImageByKey(src)
if (!imageUrl) return
// var timestamp = event.currentTarget.dataset.timestamp;
// var currentIndex = this.timestampList.indexOf(timestamp);
// currentIndex = currentIndex ? currentIndex : 0;
// console.log('当前index', currentIndex)
showImagePreview({
images: [imageUrl],
showIndex: false,
startPosition: 0,
loop: false,
});
},
//链接人工客服
manualAnswer() {
let sendParmas = {
reqAndResType: "1", //1文本 2图片 3问提评价
msgType: "01", //01文本 02图片
msgText: "转接寿险人工客服",
msgSource: this.manualService, //1机器人 2人工
cmd: "ZJSXRGFW",
};
let current = event.currentTarget;
if (!this.sendLoading) {
this.transferCustomer(sendParmas)
.then((res) => {
// console.log(res)
current.disabled = true;
})
.catch((err) => {
console.log(err);
});
}
},
scrollTopBody() {
setTimeout(() => {
//滚动到底部
try {
this.mescrollContent.scrollTop =
this.mescrollContent.scrollHeight || 0;
} catch (error) {
console.log(error.message);
}
}, 300);
},
//点击问题按钮
richCallAnswer(itemTxt) {
let sendParmas = {
reqAndResType: "1", //1文本 2图片 3问提评价
msgText: itemTxt,
msgSource: this.manualService, //1机器人 2人工
};
//发送的消息 存到store
if (!this.sendLoading) {
this.scrollTopBody();
// this.$store.dispatch('addSendMessageList', sendParmas).then((res) => {
// //发送机器人 存到store
// this.$store.dispatch('sendingRobot', sendParmas).then((res) => {
// this.scrollTopBody();
// console.log("问题中的按钮=", res)
// this.associationalWord = false;
// })
// })
this.sendmessageContent(sendParmas)
.then((res) => { })
.catch((err) => {
console.log(err);
});
}
},
rich_call(item, type) {
// console.log(item, type);
},
//评价接口
appraise(evaluation, item, event) {
//evaluation 1为有帮助 2没有帮助
let current = event.currentTarget;
let settled = event.currentTarget.parentNode.children[1]; //有帮助
let unsettled = event.currentTarget.parentNode.children[0]; //没有帮助
let param = {
fromFlag: 1,
userId: this.userId,
sessionId: this.sessionId,
source: this.source,
qaId: item.qaId,
evaluation: evaluation,
reqAndResType: "3",
timestamp: new Date().valueOf(),
};
current.disabled = true;
//this.set_sendLoading(true);
// 满意度调查系统需求
this.savePaperResult(param)
.then((res) => { })
.catch((err) => {
console.log(err);
});
this.$post("evaluation/evaluateAnswer", param)
.then((res) => {
//this.set_sendLoading(false);
// console.log("评价接口==", res)
if (res.code && res.code != 0) {
showToast(res.msg);
current.disabled = false;
return;
}
// 禁掉按钮
current.disabled = true;
current.classList.add("active");
if (current.innerText === "有帮助") {
unsettled.disabled = true;
} else if (current.innerText === "没有帮助") {
settled.disabled = true;
}
this.set_chatList(res.data);
this.scrollTopBody();
//评价返回数据
})
.catch((error) => {
current.disabled = false;
console.log(error);
});
},
//留言
leaveMessageBtn(event) {
let current = event.currentTarget;
this.set_leaveMessage(true);
current.disabled = true;
},
//关闭页面
exitMessage(event) {
let current = event.currentTarget;
current.disabled = true;
showConfirmDialog({
title: "退出",
message:
"确认要退出吗？选择“确认”将会退出页面；选“取消”将会刷新页面，重新建立会话。",
})
.then(() => {
utils.closeWindow();
})
.catch(() => {
// window.location.reload();
utils.AppReloadHtml();
});
},
clickPlayIcon(item) {
console.log(item);
// 替换掉文本中的表情
const words = item.msgText.replace(/\[[^\]]*\]/g, ' ');
// 如果有音频正在播放则先关闭上一个音频
const param = {
msgText: words,
}
// 生成audio标签,以及各种属性
const audio = document.createElement('audio')
//202108027，增加source标签，适配ios高版本兼容问题
const sourceEl = document.createElement('source')
audio.appendChild(sourceEl)
// 获取所有audio标签
const audios = document.getElementsByTagName('audio')
// 循环暂停其他audio
// HTMLCollection对象转为Array来遍历，直接for也可以
Array.from(audios).forEach((el) => {
// 其他audio标签
if (el !== audio) {
el.pause()
el.currentTime = 0;
}
})
if (this.audioItemId == item.qaId) {
this.audioItemId = '';
return
}
showToast('识别中...')
// 这里调接口获取base64音频
this.$post("voice/tts", param)
.then((res) => {
// 语音路径
const audioUrl = res.data.voiceData
// 拼接请求地址
const url = import.meta.env.DEV ? `/api/liics_api/download/voice/tts/${audioUrl}` : `/liics_api/download/voice/tts/${audioUrl}`
axios.get(url, { headers: { token: this.token }, responseType: 'blob' }).then((response) => {
if (response.status === 200) {
sourceEl.src = URL.createObjectURL(response.data)
sourceEl.type = 'audio/mpeg'
// audio.src = URL.createObjectURL(response.data)
audio.style.width = '100%'
// audio.controls='controls'
audio.setAttribute('controlsList', 'nodownload')
// 获取父节点，塞进去
const audioBody = (this.$refs.audioBody)
audioBody?.appendChild(audio)
// 保存当前audio标签
this.audioEl = audio
// 播放当前点击的audio
audio.play()
this.audioItemId = item.qaId;
// 更新播放状态
this.playFlag = true
// audio原生事件增加逻辑
// 暂停时逻辑
audio.addEventListener('pause', () => { // 开始播放时触发play事件
this.playFlag = false
this.audioItemId = '';
})
// 播放事件逻辑，暂停其他播放
audio.addEventListener('play', () => { // 开始播放时触发play事件
// 获取所有audio标签
const audios = document.getElementsByTagName('audio')
// 循环暂停其他audio
// HTMLCollection对象转为Array来遍历，直接for也可以
Array.from(audios).forEach((el) => {
// 其他audio标签
if (el !== audio) {
el.pause()
el.currentTime = 0;
}
})
})
// 播放完成后逻辑
audio.addEventListener('ended', () => { // 开始播放时触发play事件
// 获取所有audio标签
const audios = document.getElementsByTagName('audio')
this.audioItemId = '';
this.playFlag = false
})
} else {
this.audioFlag = false
this.labaFlag = true
this.audioItemId = '';
showToast('语音播报异常，请稍后重试~')
}
})
})
.catch((error) => {
// showToast('洋洋出错了，请重试')
console.log(error);
this.$set(item, 'audioState', 'stop');
});
},
},
watch: {
chatList: {
handler: function (newValue, oldValue) {
var that = this;
// this.$nextTick(function () {
// setTimeout(() => {
// that.previewList();
// }, 10)
// }.bind(this));
},
deep: true,
},
historylist: {
handler: function (newValue, oldValue) {
for (let i = 0; i < this.historylist.length; i++) {
const item = this.historylist[i];
if (item.cmd == 'ServiceSessionOpenedEvent') {
if (!this.hxOpenSuccesed.includes(item.sessionId)) {
this.hxOpenSuccesed.push(item.sessionId)
}
}
}
this.set_hxOpenSuccesed(this.hxOpenSuccesed);
var that = this;
this.$nextTick(
function () {
setTimeout(() => {
that.previewList();
}, 10);
//阻止a标签没有内容时跳转问题
utils.aHrefJump(document.querySelectorAll(".messageBox a"));
}.bind(this)
);
},
deep: true,
},
},
};
</script>
<style lang="scss" scoped>
.showMoreCard {
margin-top: 50rem;
overflow: visible;
}
.volumeBody {
position: absolute;
top: 10rem;
right: 0rem;
}
.volumeIcon {
float: right;
/* position: relative; */
/* top: -30rem; */
width: 55rem;
height: 55rem;
}
.humanJumpBtn {
display: block;
text-align: center;
font-family: NotoSansHans-Regular;
font-size: 14rem;
height: 40rem;
line-height: 40rem;
color: #fff;
box-sizing: border-box;
margin: 14rem 5rem;
position: relative;
background: #579aff;
box-shadow: 1rem 2rem 5rem 0 rgba(10, 75, 173, 0.42), inset 0 -4rem 15rem 0 rgba(164, 203, 255, 0.25);
border-radius: 8rem;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
.quote-menu-box {
position: absolute;
z-index: 1000;
background-color: #4c4c4c;
color: #fff;
border-radius: 4rem;
padding: 8rem 16rem;
font-size: 14rem;
white-space: nowrap;
box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
}
.quote-menu-divider {
width: 1rem;
height: 14rem;
background-color: rgba(255, 255, 255, 0.3);
margin: 0 12rem;
}
.disable-sys-menu {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
.chat-txt-content p {
-webkit-user-select: none;
user-select: none;
}
}
.quote-menu-btn {
cursor: pointer;
}
.quote-arrow {
position: absolute;
bottom: -4rem;
left: calc(50% + var(--arrow-shift, 0rem));
transform: translateX(-50%) rotate(45deg);
width: 8rem;
height: 8rem;
background-color: #4c4c4c;
}
:deep(.quote-active-bubble) {
filter: brightness(0.9) !important;
opacity: 0.9 !important;
transition: all 0.2s;
}
.quote-display-wrapper {
display: flex;
width: 100%;
clear: both;
margin-top: 2rem;
margin-bottom: 8rem;
}
.quote-display-wrapper.is-right {
justify-content: flex-end;
padding-right: 50rem;
/* 适配右侧气泡位置 */
}
.quote-display-wrapper.is-left {
justify-content: flex-start;
padding-left: 0;
}
.quote-display-inner {
background-color: #f2f3f5;
padding: 6rem 10rem;
border-radius: 6rem;
font-size: 13rem;
color: #999;
max-width: 70%;
word-break: break-all;
text-align: left;
line-height: normal;
}
:deep(.quote-display-inner img[alt='small-image']),
:deep(.quote-display-inner img[alt='big-image']) {
display: inline-block !important;
vertical-align: middle !important;
width: 20rem !important;
height: 20rem !important;
max-width: 20rem !important;
max-height: 20rem !important;
margin: 0 2rem !important;
}
/* 人工客服接入提示卡片 */
.service-opened-card {
position: relative;
width: 100%;
margin: 20rem 0 12rem;
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.service-opened-card .card-header-box {
position: relative;
width: 100%;
height: 95rem;
overflow: visible;
display: flex;
justify-content: center;
}
.service-opened-card .card-bg-img {
width: 100%;
height: 135%;
object-fit: cover;
border-top-left-radius: 16rem;
border-top-right-radius: 16rem;
display: block;
}
.service-opened-card .card-body-img {
position: absolute;
top: -38rem;
left: 50%;
transform: translateX(-50%);
width: 103rem;
height: auto;
z-index: 1;
pointer-events: none;
}
.service-opened-card .card-content-box {
position: relative;
z-index: 2;
width: 100%;
background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
border-radius: 16rem;
padding: 16rem 16rem 14rem;
text-align: center;
box-sizing: border-box;
box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.04);
margin-top: -36rem;
}
.service-opened-card .card-title {
font-size: 15rem;
font-weight: 600;
color: #17204d;
margin-top: 0;
line-height: 26rem;
}
.service-opened-card .card-sub {
font-size: 14rem;
color: #7e849f;
margin-top: 4rem;
line-height: 1.3;
}
</style>
<style>
@import '@/assets/style/chat.css';
</style>