需求：一个商城app,想通过阿里云旺实现和淘宝一样的多商家多客服的功能。
方案1：商城自营申请一个云旺id，商城下申请子客服给各个商家。
缺点：目前云旺一个appid可以申请一个主客服和5个子客服。想突破5个子客服需向淘宝申请。
方案2：每个商家申请一个appid,这样每个商家都可以有一个主客服和5个子客服。
缺点：用户在各个商家内不是互通的，需在每个商家云旺账号里同步用户数据。各个云旺id互通需向淘宝申请。
方案3：用阿里openim把客服当普通用户处理，商家通过网页和用户聊天。
缺点：客服不能用千牛，也自然没有智能分流等等，网页版比较简陋。
以下为方案3代码，比较简陋，仅作个人记录。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线客服</title>
<style>
.demo{
position: absolute;
right: 0;
bottom: 0;
width: 700px;
height: 470px;
}
</style>
</head>
<body>
<div class="demo" id="J_demo"></div>
<!--[if lt IE 9]>
<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
<![endif]-->
<!-- 自动适配移动端与pc端 -->
<script src="https://g.alicdn.com/aliww/??h5.imsdk/2.1.5/scripts/yw/wsdk.js,h5.openim.kit/0.4.0/scripts/kit.js" charset="utf-8"></script>
<script>
// http://www.taobao.com/market/seller/openim/kit.php?uid=test0&to=test1&appkey=230136&pwd=123456&fullscreen
var search = location.search.substring(1);
var s = search.split('&'),kv;
var result = {};
for(var i = 0, len = s.length; i < len; i++){
kv = s[i].split('=');
result[kv[0]] = decodeURIComponent(kv[1]);
}
var touid = result.touid ? result.touid : 'gele66';
// 在url上加上fullscreen参数,即可变为全屏
if(result.fullscreen){
var d = document.getElementById('J_demo');
d.parentNode.removeChild(d);
}
window.onload = function(){
WKIT.init({
container: result.fullscreen ? null : document.getElementById('J_demo'),
uid: 'gele_shop4',
appkey: '244156',
credential: 'c3bb188708bffa9f11d476a0793fdc6e',
touid: touid,
theme: 'red',
//groupId: '162074220',
//sendMsgToCustomService:true, //使用客服模式, 默认值: false
title: '客服',
sendBtn:true,
logo: ' http://alm.com//seller_imgs/seller_logo/logo_thumb/14966880843756398.jpg',
avatar: 'http://alm.com//seller_imgs/seller_logo/logo_thumb/14966880843756398.jpg',
toAvatar:'https://img.alicdn.com/tps/TB1BsZ6JpXXXXaZXpXXXXXXXXXX-81-81.png',
//pluginUrl: 'file:///F:/phpStudy/WWW/aa/user.html',
customUrl: 'file:///F:/phpStudy/WWW/aa/user.html?touid='+touid //最近联系人页面
});
}
</script>
</body>
</html>
<!--文档地址：http://baichuan.taobao.com/docs/doc.htm?spm=a3c0d.7629140.0.0.fFqC1D&treeId=41&articleId=103361&docType=1 一定要认真看一遍-->
<!--user.html-->
<!DOCTYPE html>
<html>
<head>
<title>最近联系人</title>
<style>
.contact>div>a{
display: block;
height: 30px;
}
.contact>div>a>img{
height: 30px;
width: 30px;
float: left;
}
.contact .chat-user-name{
display: inline-block;
font-size: 20px;
margin-left: 3px;
float: left;
color:#9b9b9b;
}
.contact .chat-user{
margin: 2px 0px;
}
.msg_num{
display: none;
float: left;
height: 16px;
min-width:16px;
text-align: center;
margin-left: 4px;
color: white;
margin-top: 5px;
line-height: 16px;
font-size: 8px;
border-radius: 16px;
background-color: #07bbef;
}
.current{
background-color: #dc2a2e;
}
.current .chat-user-name{
color:#fff;
}
</style>
</head>
<body>
<div class='contact'></div>
<script src="https://g.alicdn.com/aliww/h5.openim.sdk/1.0.6/scripts/wsdk.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var openIm = null;
function OpenIm() {
}
var touid = getQueryVariable("touid");
var sdk = new WSDK();
//登录im帐号
OpenIm.prototype.imLogin = function () {
sdk.Base.login({
uid:'gele_shop4',
appkey: '244156',
credential: 'c3bb188708bffa9f11d476a0793fdc6e',
timeout: 5000, //登录超时时间
success: function (data) {
console.log('login success', data);
openIm.imGetRecentContact();
},
error: function (error) {
console.log('login fail', error);
alert("消息获取失败,请刷新重试");
}
});
}
//设置与某人的消息已读
OpenIm.prototype.setUserReadState = function () {
var obj = this;
sdk.Chat.setReadState({
touid: touid,
timestamp: Math.floor((+new Date()) / 1000),
success: function (data) {
console.log('设置已读成功', data);
},
error: function (error) {
console.log('设置已读失败', error);
}
});
}
//获取一个月内的最近联系人
OpenIm.prototype.imGetRecentContact = function () {
var obj = this;
sdk.Base.getRecentContact({
count: 10,
success: function (data) {
//console.log(data);
data = data.data;
var list = data.cnts;
var elementString='';
list.forEach(function (item) {
//获取到uid
var uid = sdk.Base.getNick(item.uid);
elementString+='<div class="chat-user">';
if(uid == touid){
elementString+='<a uid='+uid+' class="current" >';
}else{
elementString+='<a uid='+uid+'>';
}
elementString+='<img class="chat-avatar" src="https://img.alicdn.com/tps/TB1BsZ6JpXXXXaZXpXXXXXXXXXX-81-81.png" >';
elementString+='<div class="chat-user-name">'+uid+'</div><div class="msg_num n'+uid+'"></div></a></div>';
})
$('.contact').append(elementString);
openIm.setUserReadState();
//获取联系人未读消息数
openIm.getUsersUnreadMsgCount();
},
error: function (error) {
console.log('获取最近联系人及最后一条消息内容失败', error);
}
});
}
//获取联系人未读消息数
OpenIm.prototype.getUsersUnreadMsgCount = function () {
var obj = this;
//var recentTribe = [];
//var unReadTotals = 0; //未读消息总条数
sdk.Base.getUnreadMsgCount({
count: 10, //一次获取的条数
success: function (data) {
console.log(data);
var list = data.data;
list.forEach(function (item) {
//前8位是chntribe表示群
if (item.contact.substring(0, 8) === 'chntribe') {
//recentTribe.push(item);
} else {
//document.write(item.contact.substring(8) + '在' + getLocalTime(item.timestamp) + ',');
//document.write('给我发了' + item.msgCount + '条消息，最后一条消息是在' + getLocalTime(item.lastmsgTime) + '发的<br />');
//unReadTotals += item.msgCount;
if( touid != item.contact.substring(8)){
$('.n'+item.contact.substring(8)).text(item.msgCount);
$('.n'+item.contact.substring(8)).show();
console.log(item.contact.substring(8) + '给我发了' + item.msgCount + '条消息');
}
}
});
//document.write('未读消息总条数：', unReadTotals);
},
error: function (error) {
//document.write('获取未读消息的条数失败', error);
}
});
}
$(function () {
openIm = new OpenIm();
openIm.imLogin();
//每10妙更新未读消息
window.setInterval(function(){
openIm.getUsersUnreadMsgCount();
}, 10000);
});
$("body").delegate(".contact a","click",function(){
touid = $(this).attr('uid');
window.open('kit.html?touid='+touid, 'webcall', 'toolbar=no,status=no,scrollbars=0,resizable=0,menubar＝0,location=0,width=1000,height=700');
});
</script>
</body>
</html>