1067 lines
42 KiB
JavaScript
1067 lines
42 KiB
JavaScript
// 客服的id
|
||
var kf_id = 0;
|
||
var kf_name = '';
|
||
// 是否点击显示表情的标志
|
||
var flag = 1;
|
||
// 发送锁标识
|
||
var sendLock = 0;
|
||
// 是否显示默认的聊天记录
|
||
var commChat = 1;
|
||
|
||
// 两个时间段的消息相隔时间
|
||
var msg_time = 2;
|
||
|
||
var lockReconnect = false; //避免重复连接
|
||
|
||
var socket;
|
||
|
||
// 连接服务器
|
||
if (config != undefined && config.socket != undefined) {
|
||
// var loading = layer.load(1, {
|
||
// shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
// });
|
||
showloading(true);
|
||
// 创建一个Socket实例
|
||
// // 1console.log(config);
|
||
var url = config.socket + ':' + config.port;
|
||
createWebSocket(url);
|
||
// var socket = new WebSocket('ws://' + config.socket + ":" + config.port);
|
||
// 加锁
|
||
lockInput();
|
||
//showSystem({content: '连接中...'});
|
||
// document.getElementById('title').innerText = '连接中...';
|
||
// document.getElementById('title').innerText = showloading(true);
|
||
//
|
||
}
|
||
|
||
/**
|
||
* 创建一个socket对象
|
||
* @param {[type]} url [description]
|
||
* @return {[type]} [description]
|
||
*/
|
||
function createWebSocket(url) {
|
||
try {
|
||
socket = new WebSocket(url);
|
||
eventHandle();
|
||
} catch (e) {
|
||
reconnect(url);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* socke操作
|
||
* @param {[type]} config [description]
|
||
* @return {[type]} [description]
|
||
*/
|
||
function eventHandle() {
|
||
socket.onclose = function () {
|
||
reconnect(url);
|
||
};
|
||
|
||
// 监听错误
|
||
socket.onerror = function (err) {
|
||
// showSystem({
|
||
// content: '连接失败'
|
||
// });
|
||
// document.getElementById('title').innerText = '连接失败';
|
||
layer.msg('连接失败,正在尝试重连...', { icon: 2, title: '错误提示' });
|
||
reconnect(url);
|
||
};
|
||
// 打开Socket
|
||
socket.onopen = function (res) {
|
||
showloading(false);
|
||
// 1console.log('握手成功');
|
||
// 登录
|
||
var login_data = '{"path":"api/userInit","param":{"type":"user", "kf_id" : "'
|
||
+ config.uid + '","user_id":"' + JSON.parse(config.token).user.user_id + '","user_name":"'
|
||
+ JSON.parse(config.token).user.user_name + '","avatar_url":"'
|
||
+ JSON.parse(config.token).user.avatar_url + '","group_id":"'
|
||
+ config.group + '","kf_type":"' + config.kf_type + '","data":"" },"access_token":"123456"}';
|
||
console.log(login_data);
|
||
// // 1console.log(login_data);
|
||
socket.send(login_data);
|
||
// 解锁
|
||
unlockInput();
|
||
};
|
||
|
||
// 监听消息
|
||
socket.onmessage = function (res) {
|
||
var data = eval("(" + res.data + ")");
|
||
// // 1console.log(data['message_type'], data);
|
||
switch (data['message_type']) {
|
||
// 服务端ping客户端
|
||
case 'ping':
|
||
ws.send('{"type":"ping"}');
|
||
break;
|
||
// 已经被分配了客服
|
||
case 'connect':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
if (chekc_msg) return;
|
||
// // 1console.log(data.data.common_words_map);return;
|
||
kf_id = data.data.kf_id;
|
||
kf_name = data.data.kf_name;
|
||
var is_online = data.data.is_online == 2 ? "<font style='font-size:8px'>(离线)</font>" : "<font style='font-size:8px; display: none;'>(离线)</font>";
|
||
// // 1console.log(is_online);
|
||
// var is_online = data.data.is_online == 2 ? showloading(true)+"<font style='font-size:8px'>(离线)</font>" : ''
|
||
showSystem({
|
||
content: '客服 ' + data.data.kf_name + ' 为您服务'
|
||
});
|
||
document.getElementById('title').innerHTML = '与 ' + kf_name + ' 交流中' + is_online;
|
||
if (1 == commChat) {
|
||
showChatLog();
|
||
}
|
||
unlockInput();
|
||
// 显示kf支付方式
|
||
showKfPayWay(data.data.common_words_map);
|
||
if (data.data.is_online == 1) {
|
||
$('#recharge').show();
|
||
}
|
||
break;
|
||
// 排队等待
|
||
case 'wait':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
if (chekc_msg) return;
|
||
lockInput();
|
||
document.getElementById('title').innerHTML = '请稍后再来';
|
||
showSystem(data.data);
|
||
break;
|
||
// 监测聊天数据
|
||
case 'chatMessage':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
if (chekc_msg) return;
|
||
showMsg(data.data);
|
||
break;
|
||
case 'text':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
// 1console.log(chekc_msg);
|
||
if (chekc_msg) return;
|
||
showMsg(data.data, data.data.content);
|
||
break;
|
||
case 'img':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
if (chekc_msg) return;
|
||
var payment_type = data.data.img_type
|
||
if (payment_type != '' && payment_type != null && payment_type == 'wexin') {
|
||
sessionStorage.setItem("payment_wexin", JSON.stringify(data.data));
|
||
} else if (payment_type != '' && payment_type != null && payment_type == 'alipay') {
|
||
sessionStorage.setItem("payment_alipay", JSON.stringify(data.data));
|
||
} else if (payment_type != '' && payment_type != null && payment_type == 'huabei') {
|
||
sessionStorage.setItem("payment_huabei", JSON.stringify(data.data));
|
||
} else if (payment_type != '' && payment_type != null && payment_type == 'credit') {
|
||
sessionStorage.setItem("payment_credit", JSON.stringify(data.data));
|
||
} else if (payment_type != '' && payment_type != null && payment_type == 'bank') {
|
||
sessionStorage.setItem("payment_bank", JSON.stringify(data.data));
|
||
}
|
||
var content = data.data.content
|
||
|
||
showMsg(data.data, content, 'img');
|
||
break;
|
||
// 问候语
|
||
case 'helloMessage':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
if (chekc_msg) return;
|
||
showMsg(data.data, 1);
|
||
break;
|
||
// 转接
|
||
case 'relinkMessage':
|
||
var chekc_msg = checkMsgIsRepeat(data.data.msg_id);
|
||
if (chekc_msg) return;
|
||
commChat = 2;
|
||
document.getElementById('title').innerHTML = '正在转接中...';
|
||
break;
|
||
// kf下线
|
||
case 'kf_offline':
|
||
$('#recharge').hide();
|
||
$('#title').children('font').show();
|
||
break;
|
||
// 客服上线
|
||
case 'kf_online':
|
||
// // 1console.log(data.data);
|
||
var kf_id = data.data.kf_id;
|
||
showKfPayWay(data.data.common_words_map);
|
||
$('#recharge').show();
|
||
// 添加离线
|
||
$('#title').children('font').hide();
|
||
break;
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 重新连接
|
||
* @param {[type]} url [description]
|
||
* @return {[type]} [description]
|
||
*/
|
||
function reconnect(url) {
|
||
if (lockReconnect) return;
|
||
lockReconnect = true;
|
||
//没连接上会一直重连，设置延迟避免请求过多
|
||
setTimeout(function () {
|
||
createWebSocket(url);
|
||
lockReconnect = false;
|
||
}, 2000);
|
||
}
|
||
|
||
/**
|
||
* 获取kf支付类型
|
||
* @param {[type]} id [description]
|
||
* @return {[type]} [description]
|
||
*/
|
||
function showKfPayWay(data) {
|
||
var str = '';
|
||
$.each(data, function (i, v) {
|
||
str += "<div class='btn' onclick='getPayWay(this)'>" + v.type_name + "</div>";
|
||
});
|
||
str += "<div class='btn' onclick='getPayWay(this)'>我充好了</div>";
|
||
$('#recharge').html(str);
|
||
}
|
||
|
||
// 图片 文件上传
|
||
layui.use(['upload'], function () {
|
||
var upload = layui.upload;
|
||
|
||
// 执行实例
|
||
var uploadInstImg = upload.render({
|
||
elem: '#up-image' // 绑定元素
|
||
,
|
||
accept: 'images',
|
||
exts: 'jpg|jpeg|png|gif',
|
||
url: '/index/upload/uploadImg' // 上传接口
|
||
,
|
||
done: function (res) {
|
||
let url = res.data.src;
|
||
console.log(url);
|
||
|
||
let image = new Image();
|
||
image.src = url;
|
||
image.onload = function(){
|
||
let base64 = getBase64Image(image);
|
||
sendMsg(base64, 1, url);
|
||
}
|
||
},
|
||
error: function () {
|
||
// 请求异常回调
|
||
}
|
||
});
|
||
|
||
$('.layui-upload-file').hide();
|
||
});
|
||
|
||
$(function () {
|
||
|
||
// 监听输入改变发送按钮
|
||
$("#msg").bind('input porpertychange', function () {
|
||
|
||
if ($("#msg").val().length > 0) {
|
||
$(".layim-send").removeClass('layui-disabled');
|
||
} else {
|
||
$(".layim-send").addClass('layui-disabled');
|
||
}
|
||
});
|
||
|
||
|
||
|
||
// 点击发送
|
||
$("#send").click(function () {
|
||
sendMsg();
|
||
});
|
||
|
||
// 点击表情
|
||
$('#up-face').click(function (e) {
|
||
e.stopPropagation();
|
||
if (1 == flag) {
|
||
showFaces();
|
||
$('#face-box').show();
|
||
flag = 2;
|
||
} else {
|
||
$('#face-box').hide();
|
||
flag = 1;
|
||
}
|
||
});
|
||
|
||
// 监听点击旁边关闭表情
|
||
document.addEventListener("click", function () {
|
||
if (2 == flag) {
|
||
document.getElementById('face-box').style.display = 'none';
|
||
flag = 1;
|
||
}
|
||
});
|
||
});
|
||
|
||
// 发送消息
|
||
function sendMsg(sendMsg, is_img = 0, url = '') {
|
||
|
||
if (1 == sendLock) {
|
||
return false;
|
||
}
|
||
let content_type = '';
|
||
if (is_img === 1) {
|
||
content_type = 'img';
|
||
}
|
||
|
||
var msg = (typeof (sendMsg) == 'undefined') ? $('#msg').val() : sendMsg;
|
||
if ('' == msg) {
|
||
return false;
|
||
}
|
||
|
||
var msg_id = uuid();
|
||
|
||
var _html = $("#chat-list").html();
|
||
var time = getTime();
|
||
|
||
var content = is_img === 1 ? replaceContent('img[' + location.origin + url + ']') : replaceContent(msg);
|
||
// 检测是否显示时间
|
||
var next_time = $("#chat-list").find('span').last().text();
|
||
var check_time = checkMegTime(next_time, time, msg_time);
|
||
// // 1console.log(next_time, time);
|
||
// // 1console.log(check_time);
|
||
if (check_time) {
|
||
_html += '<li class="layim-chat-system"><span>' + time + '</span></li>';
|
||
}
|
||
_html += '<li class="layim-chat-li layim-chat-mine">';
|
||
_html += '<div class="layim-chat-user">';
|
||
_html += '<img src="' + JSON.parse(config.token).user.avatar_url + '"><cite>我</cite></div>';
|
||
_html += '<div class="layim-chat-text">' + content + ' </div></li>';
|
||
|
||
$('#chat-list').html(_html);
|
||
|
||
// 发送消息
|
||
socket.send(JSON.stringify({
|
||
path: "api/chat",
|
||
param: {
|
||
"type": "user",
|
||
"to_id": config.uid,
|
||
"to_name": config.name,
|
||
"group_id": "2",
|
||
"content": msg,
|
||
"content_type": content_type,
|
||
"msg_id": msg_id,
|
||
"from_name": JSON.parse(config.token).user.user_name,
|
||
"from_id": JSON.parse(config.token).user.user_id,
|
||
"from_avatar": JSON.parse(config.token).user.avatar_url,
|
||
"data": ""
|
||
},
|
||
"access_token": "123456",
|
||
}));
|
||
|
||
|
||
// 储存我发出的信息
|
||
var key = kf_id + '-' + config.uid;
|
||
// 1console.log(key);
|
||
// if (typeof (Storage) !== "undefined") {
|
||
var localMsg = getCache(key);
|
||
if (localMsg == null || localMsg.length == 0) {
|
||
localMsg = [];
|
||
}
|
||
localMsg.push({
|
||
type: 'mine',
|
||
name: '我',
|
||
time: time,
|
||
msg_id: msg_id,
|
||
content: content,
|
||
avatar: JSON.parse(config.token).user.avatar_url,
|
||
payment: '',
|
||
data: '',
|
||
message_type: ''
|
||
});
|
||
|
||
cacheChat({
|
||
key: key,
|
||
data: localMsg
|
||
});
|
||
// }
|
||
|
||
$('#msg').val('');
|
||
$(".layim-send").addClass('layui-disabled');
|
||
|
||
// 滚动条自动定位到最底端
|
||
wordBottom();
|
||
}
|
||
|
||
function getBase64Image(img) {
|
||
var canvas = document.createElement("canvas");
|
||
canvas.width = img.width;
|
||
canvas.height = img.height;
|
||
var ctx = canvas.getContext("2d");
|
||
ctx.drawImage(img, 0, 0, img.width, img.height);
|
||
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
|
||
var dataURL = canvas.toDataURL("image/"+ext);
|
||
return dataURL;
|
||
}
|
||
|
||
// 展示发送来的消息
|
||
function showMsg(info, content, img, flag) {
|
||
// 返回确定接收到消息
|
||
// return;
|
||
var msg_id = uuid();
|
||
socket.send(JSON.stringify({
|
||
path: 'api\/sendReceiptMsg',
|
||
param: { type: 'user', msg_id: info.msg_id },
|
||
access_token: '123456'
|
||
}));
|
||
var time = getTime();
|
||
var _html = $("#chat-list").html();
|
||
var content = $.trim(content);
|
||
var reg = /\[([^\s\[\]]+?)\]/g
|
||
if (reg.test(content)) {
|
||
content = 'face' + content
|
||
var content = replaceContent(content);
|
||
}
|
||
// var img = /img\[([^\s]+?)\]/g
|
||
// var connect_img = content.substring(0,4)
|
||
// 检测是否显示时间
|
||
var next_time = $("#chat-list").find('span').last().text();
|
||
var check_time = checkMegTime(next_time, info.time, msg_time);
|
||
if (check_time) {
|
||
_html += `<li class="layim-chat-system" id='${info.msg_id}'><span>` + info.time + `</span></li>`;
|
||
}
|
||
_html += `<li class="layim-chat-li" id='${info.msg_id}'>`;
|
||
_html += '<div class="layim-chat-user">';
|
||
_html += '<img src="' + info.avatar + '"><cite>' + info.name + '</cite></div>';
|
||
if (img == 'img') {
|
||
var type = 'img'
|
||
var payment = info.img_type
|
||
switch (payment) {
|
||
case 'wexin':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment1.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'alipay':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'huabei':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment34.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'credit':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment6.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'bank':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment2.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case '':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-photos" src="' + content + '" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
default:
|
||
break;
|
||
}
|
||
} else {
|
||
var type = 'text'
|
||
_html += `<div class="layim-chat-text">` + content + `</div></li>`;
|
||
}
|
||
|
||
|
||
|
||
$('#chat-list').html(_html);
|
||
|
||
// 滚动条自动定位到最底端
|
||
wordBottom();
|
||
|
||
// 储存我收到的信息
|
||
var key = kf_id + '-' + config.uid;
|
||
// 1console.log(key);
|
||
if (typeof (Storage) !== "undefined" && typeof (flag) == "undefined") {
|
||
var localMsg = getCache(key);
|
||
if (localMsg == null || localMsg.length == 0) {
|
||
localMsg = [];
|
||
}
|
||
localMsg.push({
|
||
type: 'other',
|
||
name: info.name,
|
||
time: time,
|
||
content: content,
|
||
payment: info.img_type,
|
||
avatar: info.avatar,
|
||
message_type: type,
|
||
data: info.data
|
||
});
|
||
|
||
cacheChat({
|
||
key: key,
|
||
data: localMsg
|
||
});
|
||
}
|
||
}
|
||
|
||
// 缓存聊天数据 [本地存储策略]
|
||
function cacheChat(obj) {
|
||
if (typeof (Storage) !== "undefined") {
|
||
localStorage.setItem(obj.key, JSON.stringify(obj.data));
|
||
}
|
||
}
|
||
|
||
// 从本地缓存中，拿出数据
|
||
function getCache(key) {
|
||
return JSON.parse(localStorage.getItem(key));
|
||
}
|
||
|
||
// 对话框定位到最底端
|
||
function wordBottom() {
|
||
// 滚动条自动定位到最底端
|
||
var box = $(".layim-chat-main");
|
||
box.scrollTop(box[0].scrollHeight);
|
||
}
|
||
|
||
// 锁住输入框
|
||
function lockInput() {
|
||
sendLock = 1;
|
||
document.getElementById('msg').setAttribute('readonly', 'readonly');
|
||
}
|
||
|
||
// 解锁输入框
|
||
function unlockInput() {
|
||
sendLock = 0;
|
||
document.getElementById('msg').removeAttribute('readonly');
|
||
}
|
||
|
||
// 展示表情数据
|
||
function showFaces() {
|
||
var alt = getFacesIcon();
|
||
// // 1console.log(alt);
|
||
var _html = '<ul class="layui-layim-face" style="position: absolute;bottom: 0;height: 100px;background-color: white;">'
|
||
var len = alt.length;
|
||
for (var index = 0; index < len; index++) {
|
||
_html += '<li title="' + alt[index] + '" onclick="checkFace(this)"><img src="/static/customer/images/face/' + index + '.png" /></li>';
|
||
}
|
||
_html += '</ul>';
|
||
|
||
document.getElementById('face-box').innerHTML = _html;
|
||
}
|
||
|
||
// 选择表情
|
||
function checkFace(obj) {
|
||
var msg = document.getElementById('msg').value;
|
||
// // 1console.log(obj, msg);
|
||
document.getElementById('msg').value = msg + 'face' + obj.title + ' ';
|
||
document.getElementById('face-box').style.display = 'none';
|
||
$(".layim-send").removeClass('layui-disabled');
|
||
flag = 1;
|
||
}
|
||
|
||
// 系统消息
|
||
function showSystem(info) {
|
||
|
||
$("#chat-list").append('<li class="layim-chat-system"><span>' + info.content + '</span></li>');
|
||
}
|
||
|
||
// 展示本地聊天缓存
|
||
function showChatLog() {
|
||
|
||
var chatLog = getCache(kf_id + '-' + config.uid);
|
||
if (chatLog == null || chatLog.length == 0) {
|
||
return;
|
||
}
|
||
|
||
var _html = '';
|
||
var len = chatLog.length;
|
||
for (var i = 0; i < len; i++) {
|
||
var item = chatLog[i];
|
||
if ('mine' == item.type) {
|
||
// 检测上次聊天时间
|
||
var check_time = false;
|
||
if (i > 1) {
|
||
var check_time = checkMegTime(chatLog[i - 1].time, item.time, msg_time);
|
||
}
|
||
|
||
if (check_time) {
|
||
_html += '<li class="layim-chat-system"><span>' + item.time + '</span></li>';
|
||
}
|
||
_html += '<li class="layim-chat-li layim-chat-mine">';
|
||
_html += '<div class="layim-chat-user">';
|
||
_html += '<img src="' + item.avatar + '"><cite>' + item.name + '</cite></div>';
|
||
_html += '<div class="layim-chat-text">' + item.content + ' </div></li>';
|
||
|
||
} else if ('other' == item.type) {
|
||
_html += '<li class="layim-chat-system"><span>' + item.time + '</span></li>';
|
||
_html += '<li class="layim-chat-li">';
|
||
_html += '<div class="layim-chat-user">';
|
||
_html += '<img src="' + item.avatar + '"><cite>' + item.name + '</cite></div>';
|
||
if (item.message_type == 'img') {
|
||
var payment = item.payment
|
||
if (payment == undefined) {
|
||
payment = ''
|
||
}
|
||
switch (payment) {
|
||
case 'wexin':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment1.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'alipay':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'huabei':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment34.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'credit':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment6.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case 'bank':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-payment" src="/static/service/images/payment/ic_bg_payment2.png" payment=' + payment + ' width="230px" height="100px"></div></li>';
|
||
break;
|
||
case '':
|
||
_html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-photos" src="' + item.content + '" payment="" width="100px" height="100px"></div></li>';
|
||
// _html += '<div class="layim-chat-img" style="padding-top: 26px;background-color: transparent;min-height: 22px;line-height: 22px;margin-top: 25px;"><img class="layui-mylink-photos" src="data:image/png;base64,' + item.content + '" payment="" width="100px" height="100px"></div></li>';
|
||
default:
|
||
break;
|
||
}
|
||
} else {
|
||
_html += '<div class="layim-chat-text">' + item.content + '</div></li>';
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
document.getElementById('chat-list').innerHTML = _html;
|
||
|
||
// 滚动条自动定位到最底端
|
||
|
||
wordBottom();
|
||
}
|
||
//图片编码base64
|
||
function getBase64(imgUrl) {
|
||
window.URL = window.URL || window.webkitURL;
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("get", imgUrl, true);
|
||
// 至关重要
|
||
xhr.responseType = "blob";
|
||
xhr.onload = function () {
|
||
if (this.status == 200) {
|
||
//得到一个blob对象
|
||
var blob = this.response;
|
||
// 1console.log("blob", blob)
|
||
// 至关重要
|
||
let oFileReader = new FileReader();
|
||
oFileReader.onloadend = function (e) {
|
||
let base64 = e.target.result;
|
||
sendMsg(base64)
|
||
};
|
||
oFileReader.readAsDataURL(blob);
|
||
}
|
||
}
|
||
xhr.send();
|
||
}
|
||
|
||
// 退出
|
||
function loginOut() {
|
||
window.history.go(-1);
|
||
}
|
||
|
||
function closeOut(index) {
|
||
layer.close(layer.index);
|
||
}
|
||
|
||
|
||
// $("#recharge").on("touchstart", function(e) {
|
||
// // 判断默认行为是否可以被禁用
|
||
// if (e.cancelable) {
|
||
// // 判断默认行为是否已经被禁用
|
||
// if (!e.defaultPrevented) {
|
||
// e.preventDefault();
|
||
// }
|
||
// }
|
||
// startX = e.originalEvent.changedTouches[0].pageX,
|
||
// startY = e.originalEvent.changedTouches[0].pageY;
|
||
// });
|
||
// $("#recharge").on("touchmove", function(e) {
|
||
// // 判断默认行为是否可以被禁用
|
||
// if (e.cancelable) {
|
||
// // 判断默认行为是否已经被禁用
|
||
// if (!e.defaultPrevented) {
|
||
// e.preventDefault();
|
||
// }
|
||
// }
|
||
// moveEndX = e.originalEvent.changedTouches[0].pageX,
|
||
// moveEndY = e.originalEvent.changedTouches[0].pageY,
|
||
// X = moveEndX - startX,
|
||
// Y = moveEndY - startY;
|
||
// // // 1console.log(X)
|
||
// //左滑
|
||
// if ( X > 0 ) {
|
||
// var num = parseInt($("#recharge").css('margin-left'));
|
||
// // // 1console.log(num + X);
|
||
|
||
// if(num + X < 0){
|
||
// $("#recharge").css('margin-left', num + X + 'px');
|
||
// }else{
|
||
// $("#recharge").css('margin-left', '0px');
|
||
// }
|
||
// }
|
||
// //右滑
|
||
// else if ( X < 0 ) {
|
||
// var num = parseInt($("#recharge").css('margin-left'));
|
||
|
||
// if(num + X > -185){
|
||
// $("#recharge").css('margin-left', num + X + 'px');
|
||
// }else{
|
||
// $("#recharge").css('margin-left', '-185px');
|
||
// }
|
||
// }else{
|
||
// // 1console.log('单击');
|
||
// }
|
||
// });
|
||
// 点击发送要获取的支付方式
|
||
// $(document).on('click','.btn',function(){
|
||
// // 1console.log(12312)
|
||
// var payment = $(this).text();
|
||
// sendMsg(payment)
|
||
// })
|
||
function getPayWay(_this) {
|
||
// 1console.log(_this);
|
||
var payment = $(_this).text();
|
||
sendMsg(payment);
|
||
}
|
||
|
||
//点击获取支付方式
|
||
$(document).on('click', '.layui-mylink-payment', function () {
|
||
var payment = $(this).attr('payment')
|
||
var alipay_data = sessionStorage.payment_alipay;
|
||
if (alipay_data) {
|
||
var src_alipay_origin = JSON.parse(alipay_data).content
|
||
var src_alipay = "data:image/jpg;base64," + src_alipay_origin
|
||
var alipay = JSON.parse(alipay_data).payment
|
||
var a_name = JSON.parse(alipay_data).data.name
|
||
var account_num = JSON.parse(alipay_data).data.account_num
|
||
var surname = a_name.substr(0, 1);
|
||
var uname = a_name.substr(1);
|
||
|
||
} else {
|
||
var alipay = ''
|
||
}
|
||
var wexin = sessionStorage.payment_wexin;
|
||
if (wexin) {
|
||
var src_wexin_origin = JSON.parse(wexin).content;
|
||
var src_wexin = "data:image/jpg;base64," + src_wexin_origin
|
||
} else {
|
||
var src_wexin = ''
|
||
}
|
||
var huabei = sessionStorage.payment_huabei;
|
||
if (huabei) {
|
||
var src_huabei_origin = JSON.parse(huabei).content;
|
||
var src_huabei = "data:image/jpg;base64," + src_huabei_origin
|
||
} else {
|
||
var src_huabei = ''
|
||
}
|
||
var credit = sessionStorage.payment_credit;
|
||
if (credit) {
|
||
var src_credit_origin = JSON.parse(credit).content;
|
||
var src_credit = "data:image/jpg;base64," + src_credit_origin
|
||
} else {
|
||
var src_credit = ''
|
||
}
|
||
var bank_data = sessionStorage.payment_bank;
|
||
if (bank_data) {
|
||
var bank = JSON.parse(bank_data).payment
|
||
var bank_name = JSON.parse(bank_data).data.name
|
||
var account_num_bank = JSON.parse(bank_data).data.account_num
|
||
var branch_bank = JSON.parse(bank_data).data.branch_bank
|
||
var open_bank = JSON.parse(bank_data).data.open_bank
|
||
|
||
} else {
|
||
var bank = ''
|
||
}
|
||
switch (payment) {
|
||
case 'wexin':
|
||
var _html = "";
|
||
_html += "<div style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: -13px;'>"
|
||
_html += "<div style='text-align: center;'><img id='img_tp' src='" + src_wexin_origin + "' style='width: 130px;height: 130px;'><br /><font><small>微信扫一扫<small></font></div>"
|
||
_html += "</div><br />"
|
||
_html += `<div style='text-align: center;'><button style='color: white;background: #f14f2b;border-color: #f14f2b;border-radius: 3px;width: 100px;height: 34px;border: 0px;' onclick="saveFile('` + src_wexin_origin + `','` + new Date().getTime() + '.png' + `')">保存二维码</button></div>`
|
||
// _html += "<div style='text-align: center;'><button id='baocun' style='color: white;background: #f14f2b;border-color: #f14f2b;border-radius: 3px;width: 100px;height: 34px;border: 0px;' >保存二维码</button></div>"
|
||
layer.open({
|
||
title: ['提示', 'text-align: center;background-color: black;color: white;border-top-left-radius: 13px;border-top-right-radius: 13px;', '12312'],
|
||
type: 0,
|
||
content: _html,
|
||
anim: 5,
|
||
skin: "alipay",
|
||
btn: false,
|
||
closeBtn: 2,
|
||
tips: [1, '#c00']
|
||
});
|
||
break;
|
||
case 'alipay':
|
||
var _html = "";
|
||
_html += "<div align='center' style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: 10px'>"
|
||
_html += "<div style='margin-top: -31px;background-color: #e4e2e2;'>复制支付宝账号，支付宝<font color='blue'>【转账】</font>付钱</div>"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>支付宝账号</font><font style='float: right'>" + account_num + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div><br />"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>支付宝姓</font><font style='float: right'>" + surname + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div><br />"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>支付宝名</font><font style='float: right'>" + uname + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div><br />"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>支付宝姓名</font><font style='float: right'>" + a_name + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div>"
|
||
if (src_alipay_origin) {
|
||
// var img_base = getBase64(src_alipay_origin);
|
||
// // 1console.log(src_alipay_origin);return;
|
||
_html += "<div style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: 40px;'>"
|
||
_html += "<div style='float: left;text-align: center;'><img src='" + src_alipay_origin + "' style='width: 130px;height: 130px;'><br /><font size='3'><small>可直接扫码支付<small></font></div>"
|
||
_html += "<div style=''><br /><font style='font-size: 12px;'>打开支付宝使用扫一扫选择相册中的二维码</font></div>"
|
||
_html += "</div><br />"
|
||
_html += `<div style='text-align: center;'><button style='color: white;background: #f14f2b;border-color: #f14f2b;border-radius: 3px;width: 100px;height: 34px;border: 0px;' onclick="saveFile('` + src_alipay_origin + `','` + new Date().getTime() + '.png' + `')">保存二维码</button></div>`
|
||
}
|
||
_html += "</div>"
|
||
layer.open({
|
||
title: ['<img src="/static/customer/images/cz/zfb.png" style="width: 28px;height: 28px;margin-bottom: 6px;"> ' + '支付宝账号转账', 'text-align: center;background-color: black;color: white;border-top-left-radius: 13px;border-top-right-radius: 13px;', '12312'],
|
||
type: 0,
|
||
content: _html,
|
||
anim: 5,
|
||
skin: "alipay",
|
||
btn: false,
|
||
closeBtn: 2,
|
||
tips: [1, '#c00']
|
||
});
|
||
break;
|
||
case 'huabei':
|
||
var _html = "";
|
||
_html += "<div style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: -13px;'>"
|
||
_html += "<div style='float: left;text-align: center;'><img src='" + src_huabei_origin + "' style='width: 130px;height: 130px;'><br /><font size='3'><small>可直接扫码支付<small></font></div>"
|
||
_html += "<div style=''><font><img src='/static/customer/images/cz/ic_huabei_cz.png' style='width: 28px;height: 28px;'>当前使用花呗支付</font><br /><font>请与充值客服确定金额</font><br /><font style='font-size: 12px;'>打开支付宝使用扫一扫选择相册中的二维码</font></div>"
|
||
_html += "</div><br />"
|
||
_html += `<div style='text-align: center;'><button style='color: white;background: #f14f2b;border-color: #f14f2b;border-radius: 3px;width: 100px;height: 34px;border: 0px;' onclick="saveFile('` + src_huabei_origin + `','` + new Date().getTime() + '.png' + `')">保存二维码</button></div>`
|
||
layer.open({
|
||
title: ['提示', 'text-align: center;background-color: black;color: white;border-top-left-radius: 13px;border-top-right-radius: 13px;', '12312'],
|
||
type: 0,
|
||
content: _html,
|
||
anim: 5,
|
||
skin: "alipay",
|
||
btn: false,
|
||
closeBtn: 2,
|
||
tips: [1, '#c00']
|
||
});
|
||
break;
|
||
case 'credit':
|
||
var _html = "";
|
||
_html += "<div style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: -13px;'>"
|
||
_html += "<div style='text-align: center;'><img src='" + src_credit_origin + "' style='width: 130px;height: 130px;'><br /><font><small>支付宝|微信扫一扫<small></font></div>"
|
||
_html += "</div><br />"
|
||
_html += `<div style='text-align: center;'><button style='color: white;background: #f14f2b;border-color: #f14f2b;border-radius: 3px;width: 100px;height: 34px;border: 0px;' onclick="saveFile('` + src_credit_origin + `','` + new Date().getTime() + '.png' + `')">保存二维码</button></div>`
|
||
layer.open({
|
||
title: ['提示', 'text-align: center;background-color: black;color: white;border-top-left-radius: 13px;border-top-right-radius: 13px;', '12312'],
|
||
type: 0,
|
||
content: _html,
|
||
anim: 5,
|
||
skin: "alipay",
|
||
btn: false,
|
||
closeBtn: 2,
|
||
tips: [1, '#c00']
|
||
});
|
||
break;
|
||
case 'bank':
|
||
var _html = "";
|
||
_html += "<div align='center' style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: -13px;'>"
|
||
// _html += "<div style='margin-top: -31px;background-color: #e4e2e2;'>复制支付宝账号，支付宝<font color='blue'>【转账】</font>付钱</div>"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>银行卡姓名</font><font style='float: right'>" + bank_name + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div><br />"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>银行卡号</font><font style='float: right'>" + account_num_bank + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div><br />"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>开户银行</font><font style='float: right'>" + branch_bank + "<i class='layui-icon' style='margin-left: 5px; float: right;' onclick='copyText(this)' title='复制'></i></font></div><br />"
|
||
_html += "<div style='width:100%;height:100%;'><font style='float: left;color: #504f4f;'>开户支行</font><font style='float: right'>" + open_bank + "<i class='layui-icon' style='margin-left: 5px; float: right; ' onclick='copyText(this)' title='复制'></i></font></div>"
|
||
_html += "</div>"
|
||
layer.open({
|
||
title: ['<img src="/static/customer/images/cz/zfb.png" style="width: 28px;height: 28px;margin-bottom: 6px;"> ' + '银行卡账号转账', 'text-align: center;background-color: black;color: white;border-top-left-radius: 13px;border-top-right-radius: 13px;', '12312'],
|
||
type: 0,
|
||
content: _html,
|
||
anim: 5,
|
||
skin: "alipay",
|
||
btn: false,
|
||
closeBtn: 2,
|
||
tips: [1, '#c00']
|
||
});
|
||
break;
|
||
case '':
|
||
showBigPic()
|
||
default:
|
||
break;
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 图片路径转base64
|
||
* @param {*} img
|
||
*/
|
||
function getBase64(img) { //传入图片路径，返回base64
|
||
function getBase64Image(img, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
|
||
var canvas = document.createElement("canvas");
|
||
canvas.width = width ? width : img.width;
|
||
canvas.height = height ? height : img.height;
|
||
|
||
var ctx = canvas.getContext("2d");
|
||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||
var dataURL = canvas.toDataURL();
|
||
return dataURL;
|
||
}
|
||
var image = new Image();
|
||
image.crossOrigin = '';
|
||
image.src = img;
|
||
var deferred = $.Deferred();
|
||
if (img) {
|
||
image.onload = function () {
|
||
deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
|
||
}
|
||
|
||
var tmp_img = deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']
|
||
|
||
// 获取base64
|
||
tmp_img.then(function (base64) {
|
||
return base64;
|
||
}, function (err) {
|
||
// 1console.log(err);
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 在本地进行文件保存
|
||
* @param {String} data 要保存到本地的图片数据
|
||
* @param {String} filename 文件名
|
||
*/
|
||
function saveFile(data, filename) {
|
||
// // 1console.log(filename);
|
||
// return;
|
||
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
|
||
save_link.href = data;
|
||
save_link.download = filename;
|
||
|
||
const event = document.createEvent('MouseEvents');
|
||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||
save_link.dispatchEvent(event);
|
||
}
|
||
|
||
//显示大图
|
||
function showBigPic(src) {
|
||
layer.photos({
|
||
photos: {
|
||
data: [{
|
||
"alt": "大图模式",
|
||
"src": src
|
||
}]
|
||
},
|
||
shade: 0.5,
|
||
closeBtn: 2,
|
||
anim: 0,
|
||
resize: false,
|
||
success: function (layero, index) {
|
||
|
||
}
|
||
});
|
||
}
|
||
$(document).on('click', '.layui-mylink-photos', function () {
|
||
// 1console.log(src)
|
||
var src = $(this).attr('src')
|
||
layer.photos({
|
||
photos: {
|
||
data: [{
|
||
"alt": "大图模式",
|
||
"src": src
|
||
}]
|
||
},
|
||
shade: 0.5,
|
||
closeBtn: 2,
|
||
anim: 0,
|
||
resize: false,
|
||
success: function (layero, index) {
|
||
|
||
}
|
||
});
|
||
});
|
||
// 加载loading
|
||
function showloading(t) {
|
||
if (t) { //如果是true则显示loading
|
||
// 1console.log(t);
|
||
loading = layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
} else { //如果是false则关闭loading
|
||
// 1console.log("关闭loading层:" + t);
|
||
layer.closeAll('loading');
|
||
}
|
||
}
|
||
|
||
$(document).on('click', '#baocun', function () {
|
||
// alert(123);
|
||
var src = $('#img_tp').attr('src');
|
||
SaveAs5(src)
|
||
// 1console.log(src)
|
||
})
|
||
|
||
function SaveAs5(imgURL) {
|
||
|
||
var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
|
||
// 1console.log(oPop)
|
||
for (; oPop.document.readyState != "complete";) {
|
||
if (oPop.document.readyState == "complete") break;
|
||
}
|
||
|
||
oPop.document.execCommand("SaveAs");
|
||
oPop.close();
|
||
|
||
}
|
||
|
||
// 聊天框获取焦点时聊天列表弹到最下方
|
||
$("#msg").focus(function () {
|
||
wordBottom();
|
||
// setTimeout(function () {
|
||
// wordBottom();
|
||
// }, 1000);
|
||
});
|
||
|
||
// 当手机虚拟键盘弹起时聊天界面上弹
|
||
var wHeight = window.innerHeight; //获取初始可视窗口高度
|
||
window.addEventListener('resize', function () { //监测窗口大小的变化事件
|
||
var hh = window.innerHeight; //当前可视窗口高度
|
||
var viewTop = $('.layim-chat-main'); //可视窗口高度顶部距离网页顶部的距离
|
||
if (wHeight > hh) { //可以作为虚拟键盘弹出事件
|
||
viewTop.animate({
|
||
scrollTop: viewTop[0].scrollHeight
|
||
}); //调整可视页面的位置
|
||
} else { //可以作为虚拟键盘关闭事件
|
||
viewTop.animate({
|
||
scrollTop: viewTop[0].scrollHeight
|
||
});
|
||
}
|
||
wHeight = hh;
|
||
});
|
||
|
||
/**
|
||
* 复制文本到粘贴板
|
||
* @param {*} _this 当前元素
|
||
*/
|
||
function copyText(_this) {
|
||
// 获取父级元素文本内容
|
||
var tmp_text = $(_this).parent().text();
|
||
var text = tmp_text.substring(0, tmp_text.length - 1);
|
||
// 添加临时元素
|
||
$('body').append("<div style='display: block;' id='tmp-copy'>" + text + "</div>");
|
||
var copy_e = document.getElementById('tmp-copy');
|
||
if (document.body.createTextRange) { // 该属性只有IE支持
|
||
var range = document.body.createTextRange();
|
||
range.moveToElementText(copy_e);
|
||
range.select();
|
||
var copy = document.execCommand('Copy');
|
||
if (copy) {
|
||
layer.msg('复制成功');
|
||
} else {
|
||
layer.msg('复制失败');
|
||
}
|
||
} else if (window.getSelection) {
|
||
var selection = window.getSelection();
|
||
selection.removeAllRanges();
|
||
var range = document.createRange();
|
||
range.selectNodeContents(copy_e);
|
||
selection.addRange(range);
|
||
// 1console.log(selection);
|
||
var copy = document.execCommand('Copy');
|
||
selection.removeAllRanges();
|
||
if (copy) {
|
||
layer.msg('复制成功');
|
||
} else {
|
||
layer.msg('复制失败');
|
||
}
|
||
}
|
||
// 移除临时元素
|
||
$('#tmp-copy').remove();
|
||
// // 1console.log($('#tmp-copy').text());
|
||
}
|
||
|
||
/**
|
||
* 检测消息是否重复
|
||
* @param {*} uid 用户id
|
||
* @param {*} msg_id 消息id
|
||
*/
|
||
function checkMsgIsRepeat(msg_id) {
|
||
if (!msg_id) return false;
|
||
var dom = $('chat-list').find('#' + msg_id);
|
||
// 1console.log(dom.length);
|
||
if (!dom || dom.length == 0) return false;
|
||
return true;
|
||
} |