kefu/public/static/service/js/dialogue_admin.js

1421 lines
53 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

var uinfo = {
id: 'KF' + uid,
username: uname,
avatar: avatar,
group: group
};
// var id_payment = (new Date()).valueOf();
var db = {};
function clickpayment() {
$(".layui-mylink-photos").on('click', function () {
// console.log(6754213423);
sessionStorage.getItem("payment");
//支付宝
var alipay_data = sessionStorage.payment_alipay;
if (alipay_data) {
var src = JSON.parse(alipay_data).content
var length = src.length
var img_alipay = src.substring(4, length - 1)
var alipay = JSON.parse(alipay_data).payment
var name = JSON.parse(alipay_data).data.name
var account_num = JSON.parse(alipay_data).data.account_num
} else {
var alipay = ''
}
//微信
var wexin = sessionStorage.payment_wexin;
if (wexin) {
var src = JSON.parse(wexin).content
var length = src.length
var img_wexin = src.substring(4, length - 1)
var wexin = JSON.parse(wexin).payment
} else {
var wexin = ''
}
//花呗
var huabei = sessionStorage.payment_huabei;
if (huabei) {
var src = JSON.parse(huabei).content
var length = src.length
var img_huabei = src.substring(4, length - 1)
var huabei = JSON.parse(huabei).payment
} else {
var huabei = ''
}
//信用卡
var credit = sessionStorage.payment_credit;
if (credit) {
var src = JSON.parse(credit).content
var length = src.length
var img_credit = src.substring(4, length - 1)
var credit = JSON.parse(credit).payment
} else {
var credit = ''
}
//银行卡
var bank_data = sessionStorage.payment_bank;
if (bank_data) {
var bank = JSON.parse(bank_data).payment
var name = JSON.parse(bank_data).data.name
var account_num = 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 = ''
}
var data = sessionStorage.data;
if (data) {
var src = JSON.parse(data).content
var length = src.length
var img = src.substring(4, length - 1)
} else {
var src = ''
}
if ($(this).attr('payment') == '' && $(this).attr('payment') == 'undefined') {
// showBigPic();
} else {
if (wexin == $(this).attr('payment')) {
var _html = "";
_html += "<div align='center' style='width:300px;height:300px;background:white;border-radius: 3px;margin-left: 10px;'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_wechat.png' + " class='payment_img'>" + '&nbsp;' + "微信二维码收款</p><hr>"
_html += "<p>保存二维码到相册,微信|扫一扫|付钱</p>"
_html += "<img src='" + img_wexin + "' style='margin:0 auto;width:100px;height:100px'></div>"
layer.open({
title: false,
content: _html,
btn: false,
skin: "wexin",
isOutAnim: false
});
} else if (alipay == $(this).attr('payment')) {
var _html = "";
_html += "<div><div align='center' style='width:100%;height:100%;;background:white;border-radius: 3px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_zfb.png' + " class='payment_img'>" + '&nbsp;' + "支付宝二维码收款</p><hr>"
_html += "<p>保存二维码到相册,支付宝|扫一扫|付钱</p>"
_html += "<img src='" + img_alipay + "' style='margin:0 auto;width:100px;height:100px;margin-bottom: 10px;'></div>"
_html += "<div align='center' style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: 10px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_zfb.png' + " class='payment_img'>" + '&nbsp;' + "支付宝账号转账</p><hr>"
_html += "<p>可用支付宝,支付宝[转账]付钱</p>"
_html += "<table border='0' style='width:80%;height:100%;'><tr style='font-size: 13px;color: #5a5a5a;'><td>支付宝账号</td><td style='float: right'>" + name + "</td></tr>"
_html += "<tr style='font-size: 13px;color: #5d5d5d;'><td>支付宝姓名</td><td style='float: right'>" + account_num + "</td></tr></table></div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "alipay",
isOutAnim: false
});
} else if (huabei == $(this).attr('payment')) {
var _html = "";
_html += "<div style='width:100%;height:100%;'><div align='center' style='width:100%;height:40%;;background:white;border-radius: 3px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_huabei.png' + " class='payment_img'>" + '&nbsp;' + "蚂蚁花呗二维码收款</p><hr>"
_html += "<p>保存二维码到相册,支付宝|扫一扫|付钱</p>"
_html += "<img src='" + img_huabei + "' style='margin:0 auto;width:100px;height:100px;margin-bottom: 10px;'></div>"
_html += "<div style='width:100%;height:40%;background:white;border-radius: 3px;margin-top: 10px;text-align: -webkit-left;'>"
_html += "<p style='text-align: -webkit-center;'><img src=" + '/static/service/images/payment/ic_warn.png' + " class='payment_img'>" + '&nbsp;' + "温馨提示</p><hr>"
_html += "<p class='payment-text' style='color: #5a5a5a;font-size: 13px;'>**花呗充值会收取手续费,详情请咨询专业**</p>"
_html += "<p class='payment-text' style='color: #5a5a5a;font-size: 13px;'>为避免扫码失败使用支付宝扫码之前请关闭wifi用手机流量来扫码支付</p>"
_html += "</div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "huabei",
isOutAnim: false
});
} else if (credit == $(this).attr('payment')) {
var _html = "";
_html += "<div style='width:100%;height:100%;'><div align='center' style='width:100%;height:40%;;background:white;border-radius: 3px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_visa.png' + " class='payment_img'>" + '&nbsp;' + "信用卡二维码收款</p><hr>"
_html += "<p>保存二维码到相册,支付宝|扫一扫|付钱</p>"
_html += "<img src='" + img_credit + "' style='margin:0 auto;width:100px;height:100px;margin-bottom: 10px;'></div>"
_html += "<div style='width:100%;height:40%;background:white;border-radius: 3px;margin-top: 10px;text-align: -webkit-left;'>"
_html += "<p style='text-align: -webkit-center;'><img class='payment_img' src=" + '/static/service/images/payment/ic_warn.png' + ">" + '&nbsp;' + "温馨提示</p><hr>"
_html += "<p class='payment-text'>**信用卡充值会收取手续费,详情请咨询专业**</p>"
_html += "<p class='payment-text'>同时支持支付宝与微信扫码</p>"
_html += "<p class='payment-text'>为避免扫码失败使用支付宝扫码之前请关闭wifi用手机流量来扫码支付</p>"
_html += "<p class='payment-text'>若进行大额支付,使用微信扫码会比支付宝成功率高哦~</p>"
_html += "</div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "credit",
isOutAnim: false
});
} else if (bank == $(this).attr('payment')) {
var _html = "";
_html += "<div style='width:100%;height:100%;'><div align='center' style='width:100%;height:60%;;background:white;border-radius: 3px'>"
_html += "<p><img class='payment_img' src=" + '/static/service/images/payment/ic_bank_card.png' + " >" + '&nbsp;' + "银行卡收款</p><hr>"
_html += "<p>可用支付宝,微信[转账到银行卡]功能付钱</p>"
_html += "<table border='0' style='width:80%;height:100%;'><tr><td>银行卡姓名</td><td style='float: right'>" + name + "</td></tr>"
_html += "<tr><td>银行卡号</td><td style='float: right'>" + account_num + "</td></tr>"
_html += "<tr><td>开户银行</td><td style='float: right'>" + open_bank + "</td></tr>"
_html += "<tr><td>开户支行</td><td style='float: right'>" + branch_bank + "</td></tr></table></div>"
_html += "<div style='width:100%;height:40%;background:white;border-radius: 3px;margin-top: 10px;text-align: -webkit-left;'>"
_html += "<p style='text-align: -webkit-center;'><img class='payment_img' src=" + '/static/service/images/payment/ic_warn.png' + ">" + '&nbsp;' + "温馨提示</p><hr>"
_html += "<p class='payment-text'>**信用卡充值会收取手续费,详情请咨询专业**</p>"
_html += "<p class='payment-text'>同时支持支付宝与微信扫码</p>"
_html += "<p class='payment-text'>为避免扫码失败使用支付宝扫码之前请关闭wifi用手机流量来扫码支付</p>"
_html += "<p class='payment-text'>若进行大额支付,使用微信扫码会比支付宝成功率高哦~</p>"
_html += "</div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "credit",
isOutAnim: false
});
}
}
});
}
/**
* 缓存用户数据
* @param data
*/
function cacheUserData(data) {
var uid = data.id;
// console.log(uid + '用户数据:');
//存储订单数据
// sessionStorage.setItem("f-"+uid, JSON.stringify(data.data));
}
/**
* 商品与订单模板渲染
* @param id
*/
function order_view(id, type) {
// console.log('order_view');
// layui.use('laytpl', function(){
// var laytpl = layui.laytpl;
// var data = sessionStorage.getItem('f-'+id);
// if(!data) return false;
// data = JSON.parse(data);
// //渲染模版
// var getTpl = $('#'+data.type+'_tpl').html();
// laytpl(getTpl).render(data[data.type], function(html){
// if(type == 'del') html = '';
// $('#order_list').html(html);
// });
// };
// });
}
$(function () {
var uid = $("#active-user").attr('data-id');
$("#coin_uid").val(uid);
// 获取离线记录
getOutChatLog(uid, 1);
var user_msg_box = $('#u-' + uid);
// 链接数据库
// db = inquiryDB(`${uinfo.id}-${uid}`, 'chat_data', 1);
// console.log(user_msg_box.length);
if (user_msg_box.length == 0) {
let _html2 = '';
_html2 += '<ul style="display: block;" id="u-' + uid + '">';
_html2 += '</ul>';
//添加主聊天面板
$('.chat-box').append(_html2);
}
// getChatLog(uid, 1);
// 监听快捷键发送
// document.getElementById('msg-area').addEventListener('keydown', function (e) {
// // if (e.keyCode != 13) return;
// if (event.ctrlKey && event.keyCode == 13) {
// e.preventDefault(); // 取消事件的默认动作
// sendMessage();
// }
// });
// 点击表情
var index;
$("#face").click(function (e) {
e.stopPropagation();
layui.use(['layer'], function () {
var layer = layui.layer;
var isShow = $(".layui-mylink-face").css('display');
if ('block' == isShow) {
layer.close(index);
return;
}
var height = $(".chat-box").height() - 110;
layer.ready(function () {
index = layer.open({
type: 1,
offset: [height + 'px', $(".layui-side").width() + 'px'],
shade: false,
title: false,
closeBtn: 0,
area: '395px',
content: showFaces()
});
});
});
});
$(document).click(function (e) {
layui.use(['layer'], function () {
var layer = layui.layer;
if (isShow) {
layer.close(index);
return false;
}
});
});
// 发送消息
$("#send").click(function () {
sendMessage();
});
// hover用户
$(".layui-unselect li").hover(function () {
$(this).find('i').show();
}, function () {
$(this).find('i').hide();
});
// 关闭用户
$('.close').click(function () {
var uid = $(this).parent().data('id');
$(this).parent().remove(); // 清除左侧的用户列表
$('#u-' + uid).remove(); // 清除右侧的聊天详情
});
// 检测滚动,异步加载更多聊天数据
$(".chat-box").scroll(function () {
var top = $(".chat-box").scrollTop();
});
// 会员转接
$("#scroll-link").click(function () {
return false;
var id = $("#active-user").attr('data-id');
var name = $("#active-user").attr('data-name');
var avatar = $("#active-user").attr('data-avatar');
var ip = $("#active-user").attr('data-ip');
if (id == '' || name == '') {
layer.msg("请选择要转接的会员");
}
// 二次确认
var layerIndex = null;
layerIndex = layer.confirm('确定转接', {
title: '转接提示',
closeBtn: 0,
icon: 3,
btn: ['确定', '取消'] // 按钮
}, function () {
layer.close(layerIndex);
layerIndex = layer.open({
title: '',
type: 1,
area: ['30%', '40%'],
content: $("#change-box")
});
// 监听选择
layui.use(['form'], function () {
var form = layui.form;
form.on('select(group)', function (data) {
if (uinfo.group == data.value) {
layer.msg("已经在该分组,不需要转接!");
} else {
layer.close(layerIndex);
var group = data.value; // 分组
// 交换分组
var change_data = '{' +
'"path":"api/changeGroup", ' +
'"param":{"type":"kf", "uid":"' + id + '", "name" : "' + name + '", "avatar" : "' + avatar + '", "group_id": ' + group + ', "ip" : "' + ip + '"},' +
'"access_token" : "' + token + '"}';
// console.log(change_data);
ws.send(change_data);
// layer.msg('转接成功');
}
});
});
}, function () {
});
});
//账号选择
$("#change-account").click(function () {
var id = $("#active-user").attr('data-id');
var name = $("#active-user").attr('data-name');
var avatar = $("#active-user").attr('data-avatar');
var ip = $("#active-user").attr('data-ip');
// if(id == '' || name == ''){
// layer.msg("请选择要转接的会员");
// }
// 二次确认
var layerIndex = null;
// layerIndex = layer.confirm('确定更换支付账号?', {
// title: '转接提示',
// closeBtn: 0,
// icon: 3,
// btn: ['确定', '取消'] // 按钮
// }, function(){
// layer.close(layerIndex);
// layerIndex = layer.open({
// title: '',
// type: 1,
// area: ['30%', '40%'],
// content: $("#account-box")
// });
layer.open({
title: false,
type: 1,
content: $("#account-box"),
area: ['500px', '300px']
});
// 监听选择
layui.use(['form'], function () {
var form = layui.form;
form.on('select(type)', function (data) {
$.getJSON('/service/index/changeType', { id: data.value }, function (res) {
var option = '';
option += '<option value="">请选择</option>';
$("#payment").html();
$.each(res.data, function (key, val) {
if (val.id == 0) {
option += '<option value="' + val.id + '" disabled="disabled">没有选项</option>'
$("#payment").html(option)
form.render('select')
} else {
if (val.is_use == 1 && val.status == 1) {
option += '<option value="' + val.id + '" selected="selected">' + val.account_num + '</option>'
} else {
option += '<option value="' + val.id + '">' + val.account_num + '</option>'
}
$("#payment").html(option)
form.render('select')
}
})
$("#payment").get(0).selectIndex = 0
});
})
form.on('submit(changePayment)', function (data) {
$.getJSON('/service/index/changeAccount', { id: data.field.payment, type: data.field.type }, function (res) {
// // console.log(res);
if (1 == res.code) {
layer.closeAll();
layer.msg('更换成功,请刷新页面!');
} else if (0 == res.code) {
layer.msg(res.msg);
}
});
// layer.close(layerIndex);
});
});
// }, function(){
// });
});
});
function send_qrcode() {
var qrcode = $('#payment_img').attr('src');
var payment_type = $('#payment_type').val()
var payment_name = $('#payment_name').val()
var payment_num = $('#payment_num').val()
var payment_bank = $('#payment_bank').val()
var payment_open = $('#payment_open').val()
if (qrcode != undefined) {
// console.log('发送的二维码url' + qrcode);
sendMessage('img[' + qrcode + ']');
} else {
var content = "支付方式:" + payment_type + '\n' + "银行卡姓名:" + payment_name + "\n" + "银行卡号:" + payment_num + "\n" + "开户银行:" + payment_bank + "\n" + "开户支行:" + payment_open
// console.log('发送的内容:' + content)
sendMessage(content)
}
}
var isShow = false;
layui.use(['element', 'form'], function () {
var element = layui.element;
var form = layui.form;
});
// 图片 文件上传
layui.use(['upload', 'layer'], function () {
var upload = layui.upload;
var layer = layui.layer;
// 执行实例
var uploadInstImg = upload.render({
elem: '#image' // 绑定元素
, accept: 'images'
, exts: 'jpg|jpeg|png|gif'
, url: '/service/upload/uploadImg' // 上传接口
, done: function (res) {
sendMessage('img[' + res.data.src + ']');
// showBigPic();
}
, error: function () {
// 请求异常回调
}
});
var uploadInstFile = upload.render({
elem: '#file' // 绑定元素
, accept: 'file'
, exts: 'zip|rar'
, url: '/service/upload/uploadFile' // 上传接口
, done: function (res) {
sendMessage('file(' + res.data.src + ')[' + res.msg + ']');
}
, error: function () {
// 请求异常回调
}
});
});
// 展示表情数据
function showFaces() {
isShow = true;
var alt = getFacesIcon();
var _html = '<div class="layui-mylink-face"><ul class="layui-clear mylink-face-list">';
layui.each(alt, function (index, item) {
_html += '<li title="' + item + '" onclick="checkFace(this)"><img style="width:20px" src="/static/service/js/layui/images/face/' + index + '.png" /></li>';
});
_html += '</ul></div>';
return _html;
}
// 选择表情
function checkFace(obj) {
var word = $(".msg-area").val() + ' face' + $(obj).attr('title') + ' ';
// console.log('word')
// console.log(word)
// console.log('word')
$(".msg-area").val(word).focus();
}
// 发送消息
function sendMessage(sendMsg) {
var msg = (typeof (sendMsg) == 'undefined') ? $(".msg-area").val() : sendMsg;
if ('' == msg) {
layui.use(['layer'], function () {
var layer = layui.layer;
return layer.msg('请输入回复内容', { time: 1000 });
});
return false;
}
// console.log('msg')
// console.log(msg)
// console.log('msg')
var word = msgFactory(msg, 'mine', uinfo);
var uid = $("#active-user").attr('data-id');
var uname = $("#active-user").attr('data-name');
var time = getTime();
// console.log('我是消息');
if (!uid) {
layui.use(['layer'], function () {
var layer = layui.layer;
return layer.msg('请先选择要发送的用户', { time: 1000 });
});
return false;
}
// 远程发送
$.post('/service/Dialogue/sendOffLineDialogue', { user_id: uid, content: msg }, function (res, item) {
// // console.log(res, item);
if (res.code == 1) {
更改统计数
if (user_status == true) {
// var key = uinfo.id + '-' + uid;
// if (typeof (Storage) !== "undefined") {
// var localMsg = msgQueueCheck(getCache(key));
// if (localMsg == null || localMsg.length == 0) {
// localMsg = [];
// }
// localMsg.push({ type: 'mine', from_id: uinfo.id, from_name: uinfo.username, time_line: time, to_name: uname, to_id: uid, img_id: '', payment: '', content: msg, from_avatar: uinfo.avatar, msg: msg });
// cacheChat({ key: key, data: localMsg });
// }
db.addMsg({ type: 'mine', from_id: uinfo.id, from_name: uinfo.username, time_line: time, to_name: uname, to_id: uid, img_id: '', payment: '', content: msg, from_avatar: uinfo.avatar, msg: msg }, function (e) {
setTimeout(function () {
// if (e.readyState == 'done') console.log('成功');
// console.log(e.readyState);
}, 50);
});
}
// console.log("开始添加")
$("#u-" + uid).append(word);
$(".msg-area").val('');
// 滚动条自动定位到最底端
wordBottom();
} else {
layer.msg(res.msg);
return;
}
});
// ws.send(JSON.stringify({
// path: 'api\/chat',
// param: {type:'kf',to_id: uid, to_name: uname, content: msg, from_name: uinfo.username,
// from_id: uinfo.id, from_avatar: uinfo.avatar},
// access_token: token
// }));
//本地缓存
}
// 缓存聊天记录到本地
function cacheChat(obj) {
if (typeof (Storage) !== "undefined") {
localStorage.setItem(obj.key, JSON.stringify(obj.data));
}
}
// 从本地缓存中,拿出数据
function getCache(key) {
return JSON.parse(localStorage.getItem(key));
}
// 缓存未读消息数 key: 'unread-' + kf_id + '-' + uid, number : 数量
function cacheUnread(key, number) {
if (typeof (Storage) !== "undefined") {
if (number) {
localStorage.setItem(key, parseInt(number));
} else {
localStorage.removeItem(key); // 传过来的数量为空则删除该缓存
}
}
}
// 从本地获取未读消息数
function getUnread(key) {
var result = localStorage.getItem(key) ? parseInt(localStorage.getItem(key)) : 0;
return result;
}
//获取时间
function getTime() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
var s = myDate.getSeconds();
if (date < 10) date = '0' + date;
if (month < 10) month = '0' + month;
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
if (s < 10) minute = '0' + minute;
return year + '-' + month + "-" + date + " " + hour + ':' + minute + ':' + s;
}
// 展示用户发送来的消息
function showUserMessage(userInfo, content) {
//消息提示音
sendWarnAudio('msg');
//添加用户到用户列表
if ($('#f-' + userInfo.id).length == 0) {
addUser(userInfo, userInfo.qrcode);
//存储订单数据
// sessionStorage.setItem("f-"+userInfo.id, JSON.stringify(userInfo.data));
order_view(userInfo.id);
}
// 如果 在线用户tab为折叠状态则tab上显示新消息提醒
showTabNotice('on');
// 未读条数计数
if (!$('#f-' + userInfo.id).hasClass('active')) {
var num = $('#f-' + userInfo.id).find('span:eq(1)').text();
if (num == 'new' || !num) {
num = 1;
} else {
num = parseInt(num) + 1;
}
cacheUnread(makeUnreadKey(uid, userInfo.id), num);
$('#f-' + userInfo.id).find('span:eq(1)').removeClass('layui-badge').addClass('layui-badge').text(num);
}
var word = msgFactory(content, 'user', userInfo);
setTimeout(function () {
$("#u-" + userInfo.id).append(word);
// 滚动条自动定位到最底端
wordBottom();
$(document).on("click", ".layui-mylink-photos", function () {
var value = $(this).attr('payment');
if (value == 123) {
// showBigPic();
} else {
clickpayment()
}
})
// showBigPic();
}, 200);
var time = getTime();
//本地存储
// var key = 'KF' + uid + '-' + userInfo.id
// if (typeof (Storage) !== "undefined" && typeof (flag) == "undefined") {
// var localMsg = msgQueueCheck(getCache(key));
// if (localMsg == null || localMsg.length == 0) {
// localMsg = [];
// }
// localMsg.push({ type: 'user', from_id: userInfo.id, from_name: userInfo.name, time_line: time, to_name: uname, to_id: uid, img_id: '', payment: '', content: content, from_avatar: userInfo.avatar, msg: '' });
// cacheChat({ key: key, data: localMsg });
// }
db.addMsg({ type: 'user', from_id: userInfo.id, from_name: userInfo.name, time_line: time, to_name: uname, to_id: uid, img_id: '', payment: '', content: content, from_avatar: userInfo.avatar, msg: '' }, function (e) {
setTimeout(function () {
// if (e.readyState == 'done') console.log('成功');
// console.log(e.readyState);
}, 50);
});
}
// 消息发送工厂
function msgFactory(content, type, uinfo, payment) {
if (payment != "" && payment != null) {
var payment = payment
width = '120px'
height = '50px'
} else {
width = '110px'
height = '100px'
}
var id_payment = id_payment
var _html = '';
if ('mine' == type) {
_html += '<li class="mylink-chat-mine">';
} else {
_html += '<li>';
}
_html += '<div class="mylink-chat-user">';
_html += '<img src="' + uinfo.avatar + '">';
if ('mine' == type) {
_html += '<cite><i>' + getDate() + '</i>' + uinfo.username + '</cite>';
} else {
_html += '<cite>' + uinfo.name + '<i>' + getDate() + '</i></cite>';
}
_html += '</div><div class="mylink-chat-text">' + replaceContent(content, id_payment, payment, width, height) + '</div>';
_html += '</li>';
return _html;
}
// 获取日期
function getDate() {
var d = new Date(new Date());
return d.getFullYear() + '-' + digit(d.getMonth() + 1) + '-' + digit(d.getDate())
+ ' ' + digit(d.getHours()) + ':' + digit(d.getMinutes()) + ':' + digit(d.getSeconds());
}
//补齐数位
var digit = function (num) {
return num < 10 ? '0' + (num | 0) : num;
};
// 滚动条自动定位到最底端
function wordBottom() {
var box = $(".chat-box");
box.scrollTop(box[0].scrollHeight);
}
// 切换在线用户
function changeUserTab(obj) {
$("#user_list li").removeClass('active');
$("#offline_user_list li").removeClass('active');
obj.addClass('active').siblings().removeClass('active');
wordBottom();
}
// 添加在线用户到面板
function addUser(data) {
//缓存用户数据
cacheUserData(data);
var _html = '<li class="layui-nav-item" data-id="' + data.id + '" id="f-' + data.id +
'" data-name="' + data.name + '" data-avatar="' + data.avatar + '" data-ip="' + data.ip + '">';
_html += '<img src="' + data.avatar + '">';
_html += '<span class="user-name" style="width:40%">' + data.name + '</span>';
_html += '<span class="layui-badge" style="margin-left:5px">new</span>';
_html += '<i class="layui-icon close" style="display:none">ဇ</i>';
_html += '</li>';
// 添加左侧列表
$("#user_list").append(_html);
// 如果没有选中人,选中第一个
// var hasActive = 0;
// $("#all_user_list li").each(function(){
// if($(this).hasClass('active')){
// hasActive = 1;
// }
// });
var _html2 = '';
_html2 += '<ul id="u-' + data.id + '">';
_html2 += '</ul>';
// 添加主聊天面板
$('.chat-box').append(_html2);
// if(0 == hasActive){
// $("#all_user_list").find('li').eq(0).addClass('active').find('span:eq(1)').removeClass('layui-badge').text('');
// $("#u-" + data.id).addClass('show-chat-detail');
// var id = $(".layui-unselect").find('li').eq(0).data('id');
// var name = $(".layui-unselect").find('li').eq(0).data('name');
// var ip = $(".layui-unselect").find('li').eq(0).data('ip');
// var avatar = $(".layui-unselect").find('li').eq(0).data('avatar');
// // 设置当前会话用户
// $("#active-user").attr('data-id', id).attr('data-name', name).attr('data-avatar', avatar).attr('data-ip', ip);
// $("#f-user").val(name);
// $("#f-user-id").val(id);
// $("#coin_uid").val(id);
// $("#f-ip").val(ip);
// $.getJSON('/service/index/getCity', {ip: ip}, function(res){
// $("#f-area").val(res.data);
// });
// //第一个用户默认展示
// order_view(data.id);
// }
if ($("#user_list").prop('hidden') == false) {
// getChatLog(data.id, 1);
checkUser();
} else {
checkUser();
}
}
/**
* 拼接本地缓存未读消息key
* @param kfId 客服id
* @param userId 用户id
*/
function makeUnreadKey(kfId, userId) {
return 'unread-' + kfId + '-' + userId;
}
/**
* 显示在线、离线未读提示
* @param type 在线、离线类型
*/
function showTabNotice(type) {
if ($('#' + type + '_span').hasClass('fold')) {
$('#' + type + 'line_user .layui-badge').show();
}
}
//删除离线用户
function offline_user_del(userId, e) {
// 阻止点击事件冒泡
window.event ? window.event.cancelBubble = true : e.stopPropagation();
$.getJSON('/service/index/delOfflineUser?user_id=' + userId, function (res) {
if (1 == res.code) {
layer.msg('删除成功');
var key = 'KF' + uid + '-' + userId;
localStorage.removeItem(key);//清除客服对离线用户的本地缓存
$("#offline_user_list #f-" + userId).remove(); // 清除左侧的用户列表
$('#u-' + userId).remove(); // 清除右侧的聊天详情
// 清除右侧的访客信息
$('#f-user').val('');
$("#coin_uid").val('');
$('#f-ip').val('');
$('#f-area').val('');
} else {
layer.msg(res.msg);
return;
}
});
}
function user_over(data) {
data.css('background-color', 'red');
}
function user_out(data) {
data.css('background-color', '#aaa');
}
// 操作新连接用户的 dom操作
function checkUser() {
$("#all_user_list").find('li').unbind("click"); // 防止事件叠加
// 切换用户
$(".layui-unselect").find('li').bind('click', function () {
if ($(this).attr('class') == 'layui-nav-item active') {
return;
}
changeUserTab($(this));
// console.log($(this).data('name'));
var userId = $(this).data('id');
var avatar = $(this).data('avatar');
var name = $(this).data('name');
var ip = $(this).data('ip');
// 展示相应的对话信息
$('.chat-box ul').each(function () {
if ('u-' + userId == $(this).attr('id')) {
$(this).addClass('show-chat-detail').siblings().removeClass('show-chat-detail');
}
});
// 去除消息提示
$(this).find('span:eq(1)').removeClass('layui-badge').text('');
// 清除本地未读消息缓存 makeUnreadKey(parseInt(uid), userId)
cacheUnread(makeUnreadKey(uid, userId), 0);
// 设置当前会话的用户
$("#active-user").attr('data-id', userId).attr('data-name', name).attr('data-avatar', avatar).attr('data-ip', ip);
// 右侧展示详情
$("#f-user").val(name);
$("#f-user-id").val(userId);
$("#coin_uid").val(userId);
$("#f-ip").val(ip);
$.getJSON('/service/index/getCity', { ip: ip }, function (res) {
$("#f-area").val(res.data);
});
//重新渲染商品订单模板
order_view(userId);
// console.log("点击更换了");
getChatLog(userId, 1);
wordBottom();
});
}
// 删除离线用户聊天面板(离线转换成在线)
function delOffUser(data) {
// 获取 该用户是否为当前聊天用户
let active = $("#offline_user_list #f-" + data.id).hasClass('active');
$("#offline_user_list #f-" + data.id).remove(); // 清除左侧的用户列表
$('#u-' + data.id).remove(); // 清除右侧的聊天详情
if ($("#offline_user_list li").length == 0) {
$("#off_span").attr('class', 'fold');
}
// 清除右侧的访客信息
$('#f-user').val('');
$('#f-user-id').val('');
$("#coin_uid").val('');
$('#f-ip').val('');
$('#f-area').val('');
// 如果该用户为当前聊天用户
if (active) {
$("#on_span").attr('class', 'unfold'); // 展开在线用户tab
$("#user_list").prop('hidden', false); // 显示在线用户列表
$("#off_span").attr('class', 'fold'); // 折叠离线用户tab
$("#offline_user_list").prop('hidden', true); // 隐藏离线用户列表
$('#user_list #f-' + data.id).click();
}
}
// 发送快捷语句
function sendWord(obj) {
var msg = $(obj).data('word');
sendMessage(msg);
}
// 获取聊天记录
function getChatLog(uid, page, flag, width, height) {
var chatLog = getCache(uinfo.id + "-" + uid);
// console.log("------------获取本地数据-----------------")
// console.log(chatLog)
// console.log("------------获取本地数据-----------------")
$.ajax({
url: '/service/index/getOfflineMsg?uid=' + uid + '&page=' + page,
type: "get",
async: false,
dataType: "json",
success: function (res) {
// console.log("------------获取离线数据-----------------")
// console.log(res.data)
if (res.data.length == 0) {
return;
}
for (var i = 0; i <= res.data.length - 1; i++) {
if (res.data[i].type != 'user') {
continue;
}
if (chatLog != null) {
chatLog.push(...res.data);
} else {
chatLog = res.data;
}
// // console.log(res.data);return;
var tkey = uinfo.id + '-' + uid;
if (typeof (Storage) !== "undefined") {
var localMsg = getCache(tkey);
if (localMsg == null || localMsg.length == 0) {
localMsg = [];
}
localMsg.push(...res.data);
cacheChat({ key: tkey, data: localMsg });
}
}
// console.log("------------获取离线数据-----------------")
}
})
// console.log("------------获取所有数据-----------------")
// console.log(chatLog)
// console.log("------------获取所有数据-----------------")
if (chatLog == null || chatLog.length == 0) {
return;
}
var _html = ''
var len = chatLog.length;
for (var i = 0; i < len; i++) {
var v = chatLog[i];
if (v.payment != null && v.payment != '') {
var content = v.msg
width = '120px'
height = '50px'
} else {
var content = v.content
width = '110px'
height = '100px'
}
if ('mine' == v.type) {
_html += '<li class="mylink-chat-mine">';
} else {
_html += '<li>';
}
_html += '<div class="mylink-chat-user">';
_html += '<img src="' + v.from_avatar + '">';
if ('mine' == v.type) {
_html += '<cite><i>' + v.time_line + '</i>' + v.from_name + '</cite>';
} else {
_html += '<cite>' + v.from_name + '<i>' + v.time_line + '</i></cite>';
}
console.log(width, height);
_html += '</div><div class="mylink-chat-text">' + replaceContent(content, v.img_id, v.payment, width, height) + '</div>';
_html += '</li>';
}
setTimeout(function () {
// 滚动条自动定位到最底端
if (typeof flag == 'undefined') {
$("#u-" + uid).html(_html);
wordBottom();
} else {
$("#u-" + uid).prepend(_html);
}
$(document).on("click", ".layui-mylink-photos", function () {
var value = $(this).attr('payment');
if (value == 123) {
// showBigPic();
} else {
clickpayment()
}
})
}, 100);
}
/**
* 获取离线聊天记录
* @param {*} uid
* @param {*} page
* @param {*} flag
*/
function getOutChatLog(uid, page, _this = '') {
$.getJSON('/Admin/Dialoguelogs/getOutLineMsgLog', { uid: uid, kf_id: kf_id, page: page }, function (res) {
// // console.log(res);
if (res.code != 1) return false;
if (res.data.length < 1) {
layer.msg('暂无数据');
return;
}
if (res.msg == res.total) {
var _html = '<div class="layui-flow-more">没有更多了</div>';
} else {
var _html = '<div class="layui-flow-more"><a href="javascript:;" data-page="' + parseInt(res.msg + 1)
+ `" onclick="getOutChatLog(${uid}, ${page + 1}, this)"><cite>更多记录</cite></a></div>`;
}
var len = res.data.length;
for (var i = 0; i < len; i++) {
var v = res.data[len - i - 1];
if ('mine' == v.type) {
_html += '<li class="mylink-chat-mine">';
} else {
_html += '<li>';
}
_html += '<div class="mylink-chat-user">';
_html += '<img src="' + v.from_avatar + '">';
if ('mine' == v.type) {
_html += '<cite><i>' + v.time_line + '</i>' + v.from_name + '</cite>';
} else {
_html += '<cite>' + v.from_name + '<i>' + v.time_line + '</i></cite>';
}
_html += '</div><div class="mylink-chat-text">' + replaceContent(v.content, '', '', '110px', '100px')+ '</div>';
_html += '</li>';
}
// 隐藏加载更多
if (_this) {
$(_this).hide();
var box = $(".chat-box");
var show_height = box.height();
box.scrollTop(show_height + 550);
}
var user_msg_log_box = $("#u-" + uid).html();
$("#u-" + uid).html(_html + user_msg_log_box);
if (!_this) {
wordBottom();
}
// setTimeout(function () {
// // 滚动条自动定位到最底端
// if (typeof flag == 'undefined') {
// $("#u-" + uid).html(_html);
// // wordBottom();
// } else {
// $("#u-" + uid).prepend(_html);
// }
// // showBigPic();
// }, 100);
});
}
$(".layui-mylink-photos").on('click', function (obj) {
var value = $(this).attr('payment');
var src = this.src;
if (value == 123) {
layer.photos({
photos: {
data: [{
"alt": "大图模式",
"src": src
}]
}
, shade: 0.5
, closeBtn: 2
, anim: 0
, resize: false
, success: function (layero, index) {
}
});
}
});
// 显示大图
function showBigPic(obj) {
// console.log(obj);
var src = obj.src;
layer.photos({
photos: {
data: [{
"alt": "大图模式",
"src": src
}]
}
, shade: 0.5
, closeBtn: 2
, anim: 0
, resize: false
, success: function (layero, index) {
}
});
}
// 获取更多的的记录
// function getMore(obj) {
// $(obj).remove();
// var page = $(obj).attr('data-page');
// var uid = $(".layui-unselect").find('li').eq(0).data('id');
// getOutChatLog(uid, page, 1);
// }
// 删除历史聊天记录
function removeLocalStorage(key) {
localStorage.removeItem(key);
}
function sendWarnAudio(type) {
var turnAudio = document.getElementById("myWarnAudio");
if (!turnAudio) {
// console.log('初始化');
turnAudio = document.createElement("audio");
document.body.appendChild(turnAudio);
turnAudio.id = "myWarnAudio";
turnAudio.controls = false;
turnAudio.loop = false;
turnAudio.hidden = true;
}
if (type == 'msg') {
turnAudio.src = "/static/common/mp3/msn.mp3";
}
turnAudio.play();
}
/**
* 支付选择账号
*/
function paySelect() {
// 1console.log(1111);
layer.open({
title: '选择账号',
type: 2,
content: '/service/dialogue/selectAccount',
// content: $("#account-box"),
area: ['600px', '400px'],
cancel: function (index, layero) {
if (select_pay_type) {
// // console.log(select_pay_type);return;
window.location.reload();
}
}
});
}
/**
* 支付显示
* @param {*} _this 当前点击对象
*/
function payShowLayer(_this) {
sessionStorage.getItem("payment");
//支付宝
var alipay_data = sessionStorage.payment_alipay;
// 1console.log(this);
if (alipay_data) {
var src = JSON.parse(alipay_data).content
var length = src.length
var img_alipay = src.substring(4, length - 1)
var alipay = JSON.parse(alipay_data).payment
var name = JSON.parse(alipay_data).data.name
var account_num = JSON.parse(alipay_data).data.account_num
} else {
var alipay = ''
}
//微信
var wexin = sessionStorage.payment_wexin;
if (wexin) {
var src = JSON.parse(wexin).content
var length = src.length
var img_wexin = src.substring(4, length - 1)
var wexin = JSON.parse(wexin).payment
} else {
var wexin = ''
}
//花呗
var huabei = sessionStorage.payment_huabei;
if (huabei) {
var src = JSON.parse(huabei).content
var length = src.length
var img_huabei = src.substring(4, length - 1)
var huabei = JSON.parse(huabei).payment
} else {
var huabei = ''
}
//信用卡
var credit = sessionStorage.payment_credit;
if (credit) {
var src = JSON.parse(credit).content
var length = src.length
var img_credit = src.substring(4, length - 1)
var credit = JSON.parse(credit).payment
} else {
var credit = ''
}
//银行卡
var bank_data = sessionStorage.payment_bank;
if (bank_data) {
var bank = JSON.parse(bank_data).payment
var name = JSON.parse(bank_data).data.name
var account_num = 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 = ''
}
var data = sessionStorage.data;
if (data) {
var src = JSON.parse(data).content
var length = src.length
var img = src.substring(4, length - 1)
} else {
var src = ''
}
if ($(_this).attr('payment') == '' && $(_this).attr('payment') == 'undefined') {
// showBigPic();
} else {
if (wexin == $(_this).attr('payment')) {
var _html = "";
_html += "<div align='center' style='width:300px;height:300px;background:white;border-radius: 3px;margin-left: 10px;'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_wechat.png' + " class='payment_img'>" + '&nbsp;' + "微信二维码收款</p><hr>"
_html += "<p>保存二维码到相册,微信|扫一扫|付钱</p>"
_html += "<img src='" + img_wexin + "' style='margin:0 auto;width:100px;height:100px; margin-top: 40px;'></div>"
layer.open({
title: false,
content: _html,
btn: false,
skin: "wexin",
isOutAnim: false
});
} else if (alipay == $(_this).attr('payment')) {
var _html = "";
_html += "<div><div align='center' style='width:100%;height:100%;;background:white;border-radius: 3px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_zfb.png' + " class='payment_img'>" + '&nbsp;' + "支付宝二维码收款</p><hr>"
_html += "<p>保存二维码到相册,支付宝|扫一扫|付钱</p>"
_html += "<img src='" + img_alipay + "' style='margin:0 auto;width:100px;height:100px;margin-bottom: 10px;'></div>"
_html += "<div align='center' style='width:100%;height:60%;background:white;border-radius: 3px;margin-top: 10px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_zfb.png' + " class='payment_img'>" + '&nbsp;' + "支付宝账号转账</p><hr>"
_html += "<p>可用支付宝,支付宝[转账]付钱</p>"
_html += "<table border='0' style='width:80%;height:100%;'><tr style='font-size: 13px;color: #5a5a5a;'><td>支付宝账号</td><td style='float: right'>" + name + "</td></tr>"
_html += "<tr style='font-size: 13px;color: #5d5d5d;'><td>支付宝姓名</td><td style='float: right'>" + account_num + "</td></tr></table></div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "alipay",
isOutAnim: false
});
} else if (huabei == $(_this).attr('payment')) {
var _html = "";
_html += "<div style='width:100%;height:100%;'><div align='center' style='width:100%;height:40%;;background:white;border-radius: 3px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_huabei.png' + " class='payment_img'>" + '&nbsp;' + "蚂蚁花呗二维码收款</p><hr>"
_html += "<p>保存二维码到相册,支付宝|扫一扫|付钱</p>"
_html += "<img src='" + img_huabei + "' style='margin:0 auto;width:100px;height:100px;margin-bottom: 10px;'></div>"
_html += "<div style='width:100%;height:40%;background:white;border-radius: 3px;margin-top: 10px;text-align: -webkit-left;'>"
_html += "<p style='text-align: -webkit-center;'><img src=" + '/static/service/images/payment/ic_warn.png' + " class='payment_img'>" + '&nbsp;' + "温馨提示</p><hr>"
_html += "<p class='payment-text' style='color: #5a5a5a;font-size: 13px;'>**花呗充值会收取手续费,详情请咨询专业**</p>"
_html += "<p class='payment-text' style='color: #5a5a5a;font-size: 13px;'>为避免扫码失败使用支付宝扫码之前请关闭wifi用手机流量来扫码支付</p>"
_html += "</div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "huabei",
isOutAnim: false
});
} else if (credit == $(_this).attr('payment')) {
var _html = "";
_html += "<div style='width:100%;height:100%;'><div align='center' style='width:100%;height:40%;;background:white;border-radius: 3px'>"
_html += "<p><img src=" + '/static/service/images/payment/ic_visa.png' + " class='payment_img'>" + '&nbsp;' + "信用卡二维码收款</p><hr>"
_html += "<p>保存二维码到相册,支付宝|扫一扫|付钱</p>"
_html += "<img src='" + img_credit + "' style='margin:0 auto;width:100px;height:100px;margin-bottom: 10px;'></div>"
_html += "<div style='width:100%;height:40%;background:white;border-radius: 3px;margin-top: 10px;text-align: -webkit-left;'>"
_html += "<p style='text-align: -webkit-center;'><img class='payment_img' src=" + '/static/service/images/payment/ic_warn.png' + ">" + '&nbsp;' + "温馨提示</p><hr>"
_html += "<p class='payment-text'>**信用卡充值会收取手续费,详情请咨询专业**</p>"
_html += "<p class='payment-text'>同时支持支付宝与微信扫码</p>"
_html += "<p class='payment-text'>为避免扫码失败使用支付宝扫码之前请关闭wifi用手机流量来扫码支付</p>"
_html += "<p class='payment-text'>若进行大额支付,使用微信扫码会比支付宝成功率高哦~</p>"
_html += "</div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "credit",
isOutAnim: false
});
} else if (bank == $(_this).attr('payment')) {
var _html = "";
_html += "<div style='width:100%;height:100%;'><div align='center' style='width:100%;height:60%;;background:white;border-radius: 3px'>"
_html += "<p><img class='payment_img' src=" + '/static/service/images/payment/ic_bank_card.png' + " >" + '&nbsp;' + "银行卡收款</p><hr>"
_html += "<p>可用支付宝,微信[转账到银行卡]功能付钱</p>"
_html += "<table border='0' style='width:80%;height:100%;'><tr><td>银行卡姓名</td><td style='float: right'>" + name + "</td></tr>"
_html += "<tr><td>银行卡号</td><td style='float: right'>" + account_num + "</td></tr>"
_html += "<tr><td>开户银行</td><td style='float: right'>" + open_bank + "</td></tr>"
_html += "<tr><td>开户支行</td><td style='float: right'>" + branch_bank + "</td></tr></table></div>"
_html += "<div style='width:100%;height:40%;background:white;border-radius: 3px;margin-top: 10px;text-align: -webkit-left;'>"
_html += "<p style='text-align: -webkit-center;'><img class='payment_img' src=" + '/static/service/images/payment/ic_warn.png' + ">" + '&nbsp;' + "温馨提示</p><hr>"
_html += "<p class='payment-text'>**信用卡充值会收取手续费,详情请咨询专业**</p>"
_html += "<p class='payment-text'>同时支持支付宝与微信扫码</p>"
_html += "<p class='payment-text'>为避免扫码失败使用支付宝扫码之前请关闭wifi用手机流量来扫码支付</p>"
_html += "<p class='payment-text'>若进行大额支付,使用微信扫码会比支付宝成功率高哦~</p>"
_html += "</div></div>"
layer.open({
title: false,
content: _html,
auto: ['500px', '500px'],
btn: false,
skin: "credit",
isOutAnim: false
});
}
}
}
/**
* 过滤消息队列
* @param {*} msg_list 消息列表
* @param {*} length 长度
*/
function msgQueueCheck(msg_list, length = 50) {
if (typeof msg_list == "undefined" || msg_list == null || msg_list == "") return msg_list;
if (msg_list.length < length) return msg_list;
// $new_list = msg_list.slice(msg_list.length - length, length);
$new_list = msg_list.slice(msg_list.length - length);
return $new_list;
}