丁玲 / A6079080424317 · 提交

转到一个项目

作者 dl
提交 17fa96950eacf1918f8cfa4605bd58214314fabf 1 个父辈 5e9c25d7

客服功能

内嵌 并排对比
正在显示 29 个修改的文件 包含 57 行增加 和 637 行删除
... ... @@ -283,7 +283,7 @@ footer {
/*margin: 0 7px;*/
border-top: 1px solid #ececec;
box-sizing: border-box;
/*background-color: #fff;*/
background-color: #fff;
/*width: 100%;*/
}
... ...
... ... @@ -331,7 +331,7 @@ function getRequest(type, url, params, header) {
}).then(function (res) {
// alert(JSON.stringify(res))
if (res.data.code == 502) {
openView('login_index', 'login/login_index', '登录', 'login_index', false, false, false)
// openView('login_index', 'login/login_index', '登录', 'login_index', false, false, false)
} else {
resolve(res)
}
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>CS</title>
<link rel="stylesheet" href="cs.css?5">
<style>
.rongcloud-blueBg {
background: none;
background-color: #dbb25f;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>CS</title>
</head>
<body>
<div id="rcs-app"></div>
<link rel="stylesheet" href="cs.css?5">
<script src="./RongIMLib-cs.min.js"></script>
<script src="./RongIMEmoji.js"></script>
... ... @@ -27,33 +20,25 @@
<script src="template.js"></script>
<script src="emoji.js"></script>
<script src="cs.js"></script>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<!-- 实例化 -->
<script>
apiready = function () {
var rongYunToken = api.pageParam.rongYunToken;
var userId = api.pageParam.userId;
alert(rongYunToken);
RCS.init({
appKey: "8w7jv4qb82s2y",
token: rongYunToken,
RCS.init({
appKey: "c9kqb3rdkh4jj",
token: "qjxXwJizd7Y62DTmUEluw5lzpNwuJBCkPrRErVG12EKi1UP6giNGqszv6IQX0IndGKwjoGwevVmUVSN0x458KOqK0LwxTuhy",
target: document.getElementById('rcs-app'),
customerServiceId: "KEFU150535341165880", // 客服Id
userIcon: 'http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png',//用户默认头像，在用户没有头像的时候显示
csIcon: 'http://fsprodrcx.cn.ronghub.com/UQRxDVEHcD6_gHENUQRxDUs9XOZRBH25PGECfjBjFA/base64.png',//客服默认头像，在客服没有头像的时候显示,建议线上地址
showButton: false,
//是否需要按钮主动发起，设为false的时候，init()方法直接唤起聊天窗口,需客户自己编写按钮，点击之后调用init(),templates中的button模板不可用;设为true的时候，init()首先唤起客服咨询按钮，点击之后才连接客服，唤起聊天窗口，在进入页面之后就需调用init()方法。此参数是为了方便客户在点击客服按钮后自行获取token，在获取到token之后，执行init()即可。
connectingCallback: function () {
connectingCallback: function(){
console.log('连接中');
},//连接中的执行的方法，例如显示加载页面,可不传
connectedCallback: function () {
},//连接成功之后的方法，例如关闭加载页面,可不传
disconnectedCallback: function () {
connectedCallback: function(){},//连接成功之后的方法，例如关闭加载页面,可不传
disconnectedCallback: function(){
alert('连接断开');
},//断开连接之后的操作,可不传
templates: {
... ... @@ -73,9 +58,7 @@
// messageTemplate: 'templates/messageTemplate.html',
// userInfo: 'templates/userInfo.html',
}
});
}
});
</script>
</body>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>CS</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>CS</title>
<link rel="stylesheet" href="cs.min.css">
<style>
.rongcloud-blueBg {
background: none;
background-color: #dbb25f;
}
.rongcloud-consult button {
background: #dbb25f;
border-radius: 0.1rem;
}
</style>
</head>
<body>
<div id="rcs-app"></div>
<div id="rcs-app">
<link rel="stylesheet" href="cs.min.css">
</div>
<script src="../../js/api.js"></script>
<script src="../../js/weui.min.js"></script>
<!-- 可以将 SDK 下载到本地 配置 gruntfile 与 cs.js 合并压缩成一个 js 文件 -->
<script src="../RongIMLib-cs.min.js"></script>
<script src="//cdn.ronghub.com/RongIMVoice-2.2.4.min.js"></script>
<script src="cs.min.js"></script>
<script>
var rongYunToken = '';
var customerServiceId = '';
apiready = function () {
console.log(RCS)
rongYunToken = api.pageParam.rongYunToken;
customerServiceId = api.pageParam.userId;
RCS.init({
appKey: "c9kqb3rdkh4jj",
token: "qjxXwJizd7Y62DTmUEluw5lzpNwuJBCkPrRErVG12EKi1UP6giNGqszv6IQX0IndGKwjoGwevVmUVSN0x458KOqK0LwxTuhy",
// token:rongYunToken ,
target: document.getElementById('rcs-app'),
customerServiceId: "KEFU150535341165880", // 客服Id
userIcon: 'http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png',//用户默认头像，在用户没有头像的时候显示
csIcon: 'http://fsprodrcx.cn.ronghub.com/UQRxDVEHcD6_gHENUQRxDUs9XOZRBH25PGECfjBjFA/base64.png',//客服默认头像，在客服没有头像的时候显示,建议线上地址
showButton: true,
showButton: false,
//是否需要按钮主动发起，设为false的时候，init()方法直接唤起聊天窗口,需客户自己编写按钮，点击之后调用init(),templates中的button模板不可用;设为true的时候，init()首先唤起客服咨询按钮，点击之后才连接客服，唤起聊天窗口，在进入页面之后就需调用init()方法。此参数是为了方便客户在点击客服按钮后自行获取token，在获取到token之后，执行init()即可。
connectingCallback: function(){
connectingCallback: function () {
console.log('连接中');
},//连接中的执行的方法，例如显示加载页面,可不传
connectedCallback: function(){},//连接成功之后的方法，例如关闭加载页面,可不传
disconnectedCallback: function(){
connectedCallback: function () {
},//连接成功之后的方法，例如关闭加载页面,可不传
disconnectedCallback: function () {
alert('连接断开');
closeWindow()
},//断开连接之后的操作,可不传
templates: {
button: ['<div class="rongcloud-consult">',
' <button onclick="RCS.showCommon()"><span>客服咨询</span></button>',
'</div>',
'<div class="customer-service" style="display: none;"></div>'].join('')//"templates/button.html",
// button: ['<div class="rongcloud-consult">',
// ' <button onclick="RCS.showCommon()"><span></span></button>',
// '</div>',
// '<div class="customer-service" style="display: none;"></div>'].join('')//"templates/button.html",
// chat: "templates/chat.html",
// closebefore: 'templates/closebefore.html',
// conversation: 'templates/conversation.html',
... ... @@ -49,6 +73,9 @@
// userInfo: 'templates/userInfo.html',
}
});
RCS.close();
}
</script>
</body>
... ...
<!-- class="customer-service"主页面容器，类名不能修改 -->
<div class="rongcloud-consult">
<button onclick="RCS.showCommon()"><span>咨询客服</span></button>
</div>
<div class="customer-service" style="display: none;"></div>
\ No newline at end of file
<!--
class="rongcloud-text"消息输入框;
class="rongcloud-expressionContent"表情容器;
class="rcs-message-box"消息列表容器;
class="rongcloud-Messages-history"查看更多消息按钮;
class="rongcloud-mode1"、class="rongcloud-mode2"人工、机器人转换按钮的容器(机器人状态时，rongcloud-mode1隐藏，rongcloud-mode1显示);
class="rcs-connect-status"connect断开时，状态显示的容器
class="imageViewBox"图片预览容器
以上类名不能被修改
-->
<div class="rongcloud-kefuChat">
<div id="header" class="rongcloud-rong-header rongcloud-blueBg rongcloud-online">
{%if(this.terminal == 'phone'){%}
<span class="rongcloud-phone-exit" onclick="RCS.endConversation()"></span>
<div class="rongcloud-phone-infoBar">
<span class="rongcloud-phone-kefuName">客服</span>
</div>
{%}else{%}<div class="rongcloud-infoBar rongcloud-pull-left">
<div class="rongcloud-infoBarTit">
<span class="rongcloud-kefuName">客服</span>
</div>
</div>
<div class="rongcloud-toolBar rongcloud-headBtn rongcloud-pull-right">
<div class="rongcloud-voice"></div>
<a onclick="RCS.minimize()" class="rongcloud-kefuChatBoxHide rongcloud-sprite" title="隐藏"></a>
<a onclick="RCS.endConversation()" class="rongcloud-kefuChatBoxClose rongcloud-sprite" title="结束对话"></a>
</div>{%}%}
</div>
<div class="rongcloud-box">
<div class="rongcloud-outlineBox rcs-connect-status" style="display:none;">
<div class="rongcloud-sprite"></div>
<span>连接断开,请刷新重连</span>
</div>
{%if(this.announce.announceMsgFlag == 1){%}
<div class="rongcloud-noticeBox {%if(this.announce.announceClickFlag == 1){%} rongcloud-link {%}%}" {%if(this.announce.announceClickFlag == 1){%} onclick='RCS.openNotice({%JSON.stringify(this.announce.announceClickUrl)%})' {%}%}>
<div class="rongcloud-notice-horn"></div>
<span class="rongcloud-noticeBox-content">{%this.announce.announceMsg%}</span>
{%if(this.announce.announceClickFlag == 1){%}<div class="rongcloud-notice-link"></div>{%}%}
</div>
{%}%}
</div>
<div id="rcs-message-list" class="rcs-message-box {%if(this.announce.announceMsgFlag == 1){%} rongcloud-hasNotice {%}%}">
{%this.messageList%}
</div>
<div id="rcs-chat-box" class="rongcloud-rong-footer">
<div class="rongcloud-footer-con">
<div class="rongcloud-text-layout">
<div id="funcPanel" class="rongcloud-funcPanel rongcloud-robotMode">
<div class="rongcloud-MessageForm-tool" id="expressionWrap" style="overflow: visible;">
<i class="rongcloud-sprite rongcloud-iconfont-smile" onclick="RCS.showemoji(event)"></i>
<div class="rongcloud-expressionWrap" onclick="RCS.chooseEmoji(event)" style="display: none;">
<div class="rongcloud-expressionContent"></div>
</div>
</div>
<div class="rongcloud-mode1" style="display: none;">
<div class="rongcloud-MessageForm-tool">
<i class="rongcloud-sprite rongcloud-iconfont-upload" id="upload-image">
<input type="file" multiple="multiple" accept="image/png,image/gif,image/jpeg" onchange="RCS.imgUpload(event)"></input>
</i>
</div>
<!-- <div class="rongcloud-MessageForm-tool">
<i class="rongcloud-sprite rongcloud-iconfont-file" id="upload-file">
<input type="file" multiple="multiple" onchange="RCS.fileUpload(event)"></input>
</i>
</div> -->
<!-- <div class="rongcloud-MessageForm-tool">
<i class="rongcloud-sprite rongcloud-iconfont-download" id="download-his" onclick="RCS.getHistoryMsgFile()">
</i>
</div> -->
{%if(this.evaEntryPoint == 1){%}
<div class="rongcloud-MessageForm-tool">
<i class="rongcloud-sprite rongcloud-iconfont-evaluate" onclick="RCS.startEvaluate(event)">
</i>
</div>{%}%}
</div>
<div class="rongcloud-mode2"><a onclick="RCS.switchPerson()" id="chatSwitch" class="rongcloud-chatSwitch">转人工服务</a></div>
</div>
</div>
</div>
<div class="rongcloud-footer-input">
<div class="rongcloud-footer-textarea"">
<textarea class="rongcloud-text rongcloud-grey" placeholder="请输入文字..." onfocus="RCS.keyboard(event)" onkeydown="RCS.keySend(event)"></textarea>
</div>
<button type="button" style="background-color: #0099ff;" class="rongcloud-rong-btn rongcloud-rong-send-btn" id="rong-sendBtn" onclick="RCS.send(event)">发送</button>
</div>
</div>
</div>
<div class="rebox imageViewBox" onclick="RCS.escImageView()" style="display: none;">
</div>
\ No newline at end of file
<!-- 客服主动关闭弹出的页面 -->
<div class="rongcloud-layermbox">
<div class="rongcloud-laymshade"></div>
<div class="rongcloud-layermmain">
<div class="rongcloud-section">
<div class="rongcloud-layermchild rongcloud-endconversation">
<p class="rongcloud-prompt">客服会话已结束</p>
<div class="rongcloud-buttons" onclick="RCS.chatEnd()"><button class="rongcloud-button">确定</button></div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<!-- 会话列表每一个会话
class="rong-conversation"会话列表中的每一个会话
此类名不能被修改
-->
<div class="rong-conversation" _cid="{%this.cid%}" _name="{%this.name%}">
<img src="https://bsetting60.ntalker.com/application/static/setting/images/head.jpg" alt="">
<span class="rong-conversation-name">客服{%this.cid%} - {%this.name%}</span>
<div class="rong-conversation-message">...</div>
</div>
\ No newline at end of file
<!-- endconversation: 用户主动关闭弹出的页面
class="rongcloud-layermbox"弹出层容器
此类名不能被修改
-->
<div class="rongcloud-layermbox">
<div class="rongcloud-laymshade"></div>
<div class="rongcloud-layermmain">
<div class="rongcloud-section">
<div class="rongcloud-layermchild rongcloud-endconversation">
<p class="rongcloud-prompt">是否要结束当前会话?</p>
<div class="rongcloud-buttons"><button class="rongcloud-button" onclick="RCS.confirm()">是</button><button class="rongcloud-button" onclick="RCS.close()">否</button></div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<!-- evaluate: 评价页面
class="rongcloud-evaluate"评价弹出层容器;
class="rongcloud-evaluate-tag"评价tag容器;
此类名不能被修改
-->
<div class="rongcloud-layermbox rongcloud-evaluate">
<div class="rongcloud-laymshade"></div>
<div class="rongcloud-layermmain">
<div class="rongcloud-section">
<div class="rongcloud-layermchild rongcloud-evaluate">
<div class="rongcloud-layer-title">评价客服</div>
<div class="rongcloud-layer-body">
{%if(this.isQuestionFlag == 1){%}
<div class="rongcloud-group-row">
<div class="rongcloud-group-title">请问客服是否解决了您的问题</div>
<div class="rongcloud-group-tag-list">
<div class="rongcloud-group-tag rongcloud-solve-tag rongcloud-solve-active" onclick="RCS.isresolve(event,1)">已解决</div>
<div class="rongcloud-group-tag rongcloud-solve-tag" onclick="RCS.isresolve(event,0)">未解决</div>
</div>
</div>{%}%}
<div class="rongcloud-group-row">
<div class="rongcloud-group-title">请您对客服进行评价</div>
<span class="satisfaction-star satisfaction-star-selected" onclick="RCS.star(1)"></span>
<span class="satisfaction-star satisfaction-star-selected" onclick="RCS.star(2)"></span>
<span class="satisfaction-star satisfaction-star-selected" onclick="RCS.star(3)"></span>
<span class="satisfaction-star satisfaction-star-selected" onclick="RCS.star(4)"></span>
<span class="satisfaction-star satisfaction-star-selected" onclick="RCS.star(5)"></span>
</div>
<div class="rongcloud-evaluate-tag">
</div>
</div>
<div class="rongcloud-foot">
<button class="rongcloud-evaluate-btn" onclick="RCS.evaluate(true)">提交</button><button class="rongcloud-evaluate-btn" onclick="RCS.evaluate(false)">取消</button>
</div>
</div>
<!--反馈提示-->
<!-- <div class="rongcloud-layermchild rongcloud-feedback" ng-show="end">
<div class="rongcloud-layermcont">
感谢您的反馈 ^ - ^ ！
</div>
</div> -->
</div>
</div>
</div>
{%if(this.labelNameArray.length != 0){%}
<div class="rongcloud-group-row">
<div class="rongcloud-group-title">存在哪些问题{%if(this.isTagMust == 1){%}(必填){%}%}</div>
<div class="rongcloud-group-tag-list">
{%for(var index in this.labelNameArray){%}
<div class="rongcloud-group-tag rongcloud-tag-item" onclick="RCS.tagClick(event)">{%this.labelNameArray[index]%}</div>
{%}%}
</div>
</div>
<div class="rongcloud-group-row">
<textarea class="rongcloud-evaluate-suggest rongcloud-suggest" placeholder="其他想说的"></textarea>
</div>
{%}%}
\ No newline at end of file
<!-- imageView: 图片预览页面 -->
<a href="#" class="rebox-close rebox-button">×</a>
<div class="rebox-contents">
<img src="{%this.imageUrl%}" class="rebox-content">
</div>
<script id="rcs-templte-button" type="rcs/templte">
<!--#include file="button.html"-->
</script>
<script id="rcs-templte-main" type="rcs/templte">
<!--#include file="main.html"-->
</script>
<script id="rcs-templte-conversation" type="rcs/templte">
<!--#include file="conversation.html"-->
</script>
<script id="rcs-templte-chat" type="rcs/templte">
<!--#include file="chat.html"-->
</script>
<script id="rcs-templte-message" type="rcs/templte">
<!--#include file="message.html"-->
</script>
<script id="rcs-templte-message-template" type="rcs/templte">
<!--#include file="messageTemplate.html"-->
</script>
<script id="rcs-templte-closebefore" type="rcs/templte">
<!--#include file="closebefore.html"-->
</script>
<script id="rcs-templte-endconversation" type="rcs/templte">
<!--#include file="endconversation.html"-->
</script>
<script id="rcs-templte-evaluate" type="rcs/templte">
<!--#include file="evaluate.html"-->
</script>
<script id="rcs-templte-leaveword" type="rcs/templte">
<!--#include file="leaveword.html"-->
</script>
<script id="rcs-templte-imageView" type="rcs/templte">
<!--#include file="imageView.html"-->
</script>
<script id="rcs-templte-userInfo" type="rcs/templte">
<!--#include file="userInfo.html"-->
</script>
\ No newline at end of file
<!-- leaveword: 留言页面
class="rongcloud-leavemessage"留言弹出层容器
此类名不能被修改-->
<div class="rongcloud-leavemessage">
{%if(this.url){%}
<iframe id="leavewordIframe" src="{%this.url%}" frameborder="0" width="100%;" height="100%;"></iframe>
{%}else{%}
<div class="rongcloud-leavemessage-title">您好，请留言~</div>
<form>
{%for(var index in this.list){%}
<div class="rongcloud-form-item">
<label class="{%if(this.list[index].required){%}{%'rongcloud-require'%}{%}%}">{%this.list[index].title%}：</label>
{%if(this.list[index].type == 'text'){%}<input class="rongcloud-inputtext" name="{%this.list[index].name%}" placeholder="{%this.list[index].defaultText%}" type="text" onblur="RCS.validateLeaveMessage({%index%}, event)"></input>{%}else{%}
<textarea name="{%this.list[index].name%}" placeholder="{%this.list[index].defaultText%}" onblur="RCS.validateLeaveMessage({%index%}, event)"></textarea>{%}%}
<div class="rongcloud-form-error" style="display: none;"></div>
</div>{%}%}
<div class="rongcloud-leavemessage-form-btns">
<button class="rongcloud-btn" onclick="RCS.leaveMessageComfirm(event)">提交</button>
</div>
</form>{%}%}
</div>
\ No newline at end of file
<!-- main: 包括客服列表和聊天窗口的主页面
class="rcs-chat-wrapper"聊天窗口的容器
此类名不能被修改
-->
<div id="rcs-main" class="rongcloud-kefuListBox rongcloud-container">
{%if(this.showConversitionList){%}<div class="rongcloud-kefuList">
<div class="rongcloud-rong-header rongcloud-blueBg">
<div class="rongcloud-toolBar rongcloud-headBtn">
<div class="rongcloud-voice"></div>
<div class="rongcloud-sprite rongcloud-people"></div>
<span class="rongcloud-recent">客服列表</span>
<div class="rongcloud-sprite rongcloud-arrow-down cursor-pointer" onclick="RCS.minimize()"></div>
</div>
</div>
<div class="rongcloud-content">
<div class="rongcloud-netStatus" style="display:none">
<div class="rongcloud-sprite"></div>
<span>连接断开,请刷新重连</span>
</div>
<div class="rcs-conversation-list">
{%this.conversationList%}
<!-- <div class="rcs-conversation-item"></div> -->
</div>
</div>
</div>{%}%}
<div class="rcs-chat-wrapper"></div>
</div>
\ No newline at end of file
<!-- message: 消息list的页面 -->
<div class="rong-message-list">
{%if(this.firstEnter){%}<div class="rongcloud-Messages-history" style="display: none;"><b onclick="RCS.loadHisMessages()">查看历史消息</b></div>{%}else if(this.hasMore){%}<div class="rongcloud-Messages-history"><b onclick="RCS.loadHisMessages()">查看历史消息</b></div>{%}%}{%else{%}<div class="rongcloud-Messages-history"><b>没有更多消息</b></div>{%}%}
{%for(var index in this.list){%}{%switch(this.list[index].messageType){%}{%case 'TextMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.list[index].messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user.icon){%}{%this.list[index].content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.list[index].messageDirection != 1){%}{%this.list[index].content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-text">
<pre class="rongcloud-Message-entry">{%this.list[index].content.content%}</pre>
</div>
</div>
</div>{%break;%}
{%case 'ImageMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.list[index].messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user.icon){%}{%this.list[index].content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.list[index].messageDirection != 1){%}{%this.list[index].content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-img">
<span class="rongcloud-Message-entry">
<a onclick="RCS.viewImage(event)" class="cursor-pointer" data-img="{%this.list[index].content.imageUri%}">
<img src="{%this.list[index].content.imageUri%}" data-img="{%this.list[index].content.imageUri%}">
</a>
</span>
</div>
</div>
</div>{%break;%}
{%case 'FileMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.list[index].messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user.icon){%}{%this.list[index].content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user){%}{%this.list[index].content.user.name%}{%}else{%} {%'客服'%} {%}%} {%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-file">
<div class="rongcloud-sprite rongcloud-file-icon"></div>
<div class="rongcloud-file-name">{%this.list[index].content.name%}</div>
<div class="rongcloud-file-size">{%this.list[index].content.size%}</div>
<a class="rongcloud-sprite rongcloud-file-download" href="{%this.list[index].content.fileUrl%}" download="{%this.list[index].content.name%}"></a>
</div>
</div>
</div>{%break;%}
{%case 'VoiceMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.list[index].messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user.icon){%}{%this.list[index].content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.list[index].messageDirection != 1){%}{%this.list[index].content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-audio">
<span class="rongcloud-Message-entry">
{%if(this.messageDirection == 1){%}
<div style="display:inline-block;">
<span class="rongcloud-audioTimer">{%Math.ceil(this.list[index].content.duration || this.list[index].content.duration / 1024)%}''</span>
</div>
<span class="rongcloud-r-audioBox rongcloud-clearfix" onclick='RCS.play(event, {%JSON.stringify(this.list[index].content)%})'>
<i></i><i></i><i></i>
</span>
{%}else{%}
<span class="rongcloud-audioBox rongcloud-clearfix" onclick='RCS.play(event, {%JSON.stringify(this.list[index].content)%})'>
<i></i><i></i><i></i>
</span>
<div style="display:inline-block;">
<span class="rongcloud-audioTimer">{%Math.ceil(this.list[index].content.duration || this.list[index].content.duration / 1024)%}''</span>
</div>
{%}%}
</span>
</div>
</div>
</div>{%break;%}
{%case 'TimeMessage':%}
<div class="rongcloud-Messages-date">
<b>{%this.list[index].sentTime%}</b>
</div>{%break;%}
{%case 'InformationNotificationMessage':%}
<div class="rongcloud-sys-tips">
<span>{%this.list[index].content.message%}</span>
</div>{%break;%}
{%case 'AlertMessage':%}
<div class="rongcloud-sys-tips">
<span>{%this.list[index].content.content%}</span>
</div>{%break;%}
{%case 'SightMessage': %}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.list[index].messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user.icon){%}{%this.list[index].content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.list[index].messageDirection != 1){%}{%this.list[index].content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-sight" onclick="RCS.playVideo(event)">
<video poster="{% 'data:image/jpg;base64,' + this.list[index].content.content %}" src="{% this.list[index].content.sightUrl %}"></video>
<div class="play-btn"></div>
</div>
</div>
</div>
{%break;%}
{%default: %}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.list[index].messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.list[index].messageDirection != 1){%} {%if(this.list[index].content.user.icon){%}{%this.list[index].content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.list[index].messageDirection != 1){%}{%this.list[index].content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-text">
<pre class="rongcloud-Message-entry">当前版本暂不支持查看此消息</pre>
</div>
</div>
</div>{%}%}{%}%}
</div>
<!-- <div class="rongcloud-emptyBox">暂时没有新消息</div> -->
\ No newline at end of file
<!-- messageTemplate: 一个消息的页面 -->
<!-- class="rongcloud-audioState"声音消息播放状态
class="rongcloud-audioBox" 声音消息容器
此类名不能被修改 -->
{%switch(this.messageType){%}{%case 'TextMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.messageDirection != 1){%} {%if(this.content.user.icon){%}{%this.content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.messageDirection != 1){%}{%this.content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-text">
<pre class="rongcloud-Message-entry">{%this.content.content%}</pre>
</div>
</div>
</div>{%break;%}
{%case 'ImageMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.messageDirection != 1){%} {%if(this.content.user.icon){%}{%this.content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.messageDirection != 1){%}{%this.content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-img">
<span class="rongcloud-Message-entry">
<a onclick="RCS.viewImage(event)" class="cursor-pointer" data-img="{%this.content.imageUri%}">
<img src="{%this.content.imageUri%}" onload="RCS.scrollBottom()" data-img="{%this.content.imageUri%}">
</a>
</span>
</div>
</div>
</div>{%break;%}
{%case 'FileMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.messageDirection != 1){%} {%if(this.content.user.icon){%}{%this.content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.messageDirection != 1){%}{%this.content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-file">
<div class="rongcloud-sprite rongcloud-file-icon"></div>
<div class="rongcloud-file-name">{%this.content.name%}</div>
<div class="rongcloud-file-size">{%this.content.size%}</div>
<a class="rongcloud-sprite rongcloud-file-download" href="{%this.content.fileUrl%}" download="{%this.content.name%}"></a>
</div>
</div>
</div>{%break;%}
{%case 'VoiceMessage':%}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.messageDirection != 1){%} {%if(this.content.user.icon){%}{%this.content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.messageDirection != 1){%}{%this.content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-audio">
<span class="rongcloud-Message-entry">
{%if(this.messageDirection == 1){%}
<div style="display:inline-block;">
<span class="rongcloud-audioTimer">{%Math.ceil(this.content.duration || this.content.duration.length / 1024)%}''</span>
</div>
<span class="rongcloud-r-audioBox rongcloud-clearfix" onclick='RCS.play(event, {%JSON.stringify(this.content)%})'>
<i></i><i></i><i></i>
</span>
{%}else{%}
<span class="rongcloud-audioBox rongcloud-clearfix" onclick='RCS.play(event, {%JSON.stringify(this.content)%})'>
<i></i><i></i><i></i>
</span>
<div style="display:inline-block;">
<span class="rongcloud-audioTimer">{%Math.ceil(this.content.duration || this.content.duration.length / 1024)%}''</span>
<span class="rongcloud-audioState"></span>
</div>
{%}%}
</span>
</div>
</div>
</div>{%break;%}
{%case 'TimeMessage':%}
<div class="rongcloud-Messages-date">
<b>{%this.sentTime%}</b>
</div>{%break;%}
{%case 'InformationNotificationMessage':%}
<div class="rongcloud-sys-tips">
<span>{%this.content.message%}</span>
</div>{%break;%}
{%case 'AlertMessage':%}
<div class="rongcloud-sys-tips">
<span>{%this.content.content%}</span>
</div>{%break;%}
{%case 'SightMessage': %}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.messageDirection != 1){%} {%if(this.content.user.icon){%}{%this.content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.messageDirection != 1){%}{%this.content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-sight" onclick="RCS.playVideo(event)">
<video poster="{% 'data:image/jpg;base64,' + this.content.content %}" src="{% this.content.sightUrl %}"></video>
<div class="play-btn"></div>
</div>
</div>
</div>
{%break;%}
{%default: %}
<div class="rongcloud-Message rongcloud-clearfix {%if(this.messageDirection == 1){%} {%'rongcloud-Message-send'%} {%}%}" id="rcs-templte-message-text">
<div>
<div class="rongcloud-Message-header"><img class="rongcloud-img rongcloud-Message-avatar rongcloud-avatar" src="{%if(this.messageDirection != 1){%} {%if(this.content.user.icon){%}{%this.content.user.icon%}{%}else{%} {%RCS.config.csIcon%} {%}%} {%}else{%} {%RCS.config.userIcon%} {%}%}" alt="">
<div class="rongcloud-Message-author rongcloud-clearfix">
<a class="rongcloud-author">{%if(this.messageDirection != 1){%}{%this.content.user.name%}{%}else{%} {%'我'%} {%}%}</a>
</div>
</div>
</div>
<div class="rongcloud-Message-body">
<div class="rongcloud-Message-text">
<pre class="rongcloud-Message-entry">当前版本暂不支持查看此消息</pre>
</div>
</div>
</div>{%}%}
<!-- userInfo: 收集用户信息的页面
class="userInfoModel"收集用户信息页面容器
此类名不能被修改
-->
<div class="rongcloud-layermbox userInfoModel">
<div class="rongcloud-laymshade"></div>
<div class="rongcloud-layermmain">
<div class="rongcloud-section">
<div class="rongcloud-layermchild rongcloud-collectuserinfo">
<form name='userinfo' novalidate="true">
<div class="rongcloud-layer-body">
<div class="rongcloud-collectuserinfo-title">你好，客服邀请您填写如下内容</div>
<a class="rongcloud-layer-close" onclick="RCS.userInfoClose()">×</a>
{%for(var index in this.list){%}
<div class="rongcloud-form-item">
<label class="rongcloud-form-label {%if(this.list[index].required == 1){%}{%'rongcloud-require'%}{%}%}">{%this.list[index].label%}：</label>
{%switch(this.list[index].type){%}{%case 'input':%}
<input class="rongcloud-inputtext" type="text" name="{%this.list[index].name%}" data-label="{%this.list[index].label%}" data-pattern="{%this.list[index].rule%}" placeholder="{%this.list[index].defaultText%}" onblur="RCS.validateUserInfo(event)" {%if(this.list[index].required == 1){%}{%'data-required = required'%}{%}%}></input>{%break;%}{%case 'textarea':%}
<textarea name="{%this.list[index].name%}" placeholder="{%this.list[index].defaultText%}" data-label="{%this.list[index].label%}" data-pattern="{%this.list[index].rule%}" onblur="RCS.validateUserInfo(event)"></textarea>{%break;%}{%}%}
<div class="rongcloud-form-error" style="display: none;"></div>
</div>{%}%}
</div>
<div class="rongcloud-foot">
<button class="rongcloud-btn" onclick="RCS.userInfoConfirm(event)">提交</button>
</div>
</form>
</div>
</div>
</div>
</div>
\ No newline at end of file
... ... @@ -40,7 +40,7 @@
app.getRongYunToken();
api.openFrame({
name: 'cs',
url: '../../assets/sobot/cs.html',
url: '../../assets/sobot/dist/cs.html',
rect: {
x: 0,
y: 0,
... ... @@ -48,7 +48,8 @@
h: 'auto'
},
pageParam: {
rongYunToken: app.rongYunToken,
// rongYunToken: app.rongYunToken,
rongYunToken: '122344545',
userId: app.userId
}
});
... ... @@ -62,9 +63,7 @@
"XX-Device-Type": getDevice(),
'XX-Token': getToken()
};
alert(JSON.stringify(header))
getRequest('post', 'portal/RongYun/index', null, header).then(function (res) {
alert(JSON.stringify(res))
if (res.data.code == 1) {
app.rongYunToken = res.data.data.token;
app.userId = res.data.data.userId;
... ...