<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="format-detection" content="telephone=no" />
|
<title>沟通中</title>
|
<link rel="stylesheet" type="text/css"
|
href="__STATIC__/newcj/css/themes.css?v=2017129">
|
<link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/h5app.css">
|
<link rel="stylesheet" type="text/css" href="__STATIC__/newcj/fonts/iconfont.css?v=2016070717">
|
<script src="__STATIC__/newcj/js/jquery.min2.js"></script>
|
<script src="__STATIC__/newcj/js/dist/flexible/flexible_css.debug.js"></script>
|
<script src="__STATIC__/newcj/js/dist/flexible/flexible.debug.js"></script>
|
<script src="__STATIC__/qqFace/js/jquery.qqFace.js"></script>
|
<style>
|
table{width: 100%;}
|
.qqFace { margin-top: -338px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid;
|
width: 92%;}
|
.qqFace table td { padding: 0px; text-align: center;}
|
.qqFace table td img { cursor: pointer; border: 1px #fff solid; width: 90%}
|
.qqFace table td img:hover { border: 1px #0066cc solid; }
|
</style>
|
|
</head>
|
<body ontouchstart>
|
<div class='fui-page-group'>
|
<div class='fui-page chatDetail-page'>
|
<div class="chat-header flex">
|
<!--<span class="return"><i class="icon icon-toleft t-48"></i></span>-->
|
<span class="shop-titlte t-30">商店</span>
|
<span class="shop-online t-26"></span>
|
<!--<span class="into-shop">进店</span>-->
|
</div>
|
<div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
|
<div class="chat-content">
|
<p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
|
<!--<p class="chat-time"><span class="time">2019-10-10</span></p>-->
|
<p class="chat-time"></p>
|
|
<!-- <div class="chat-text section-left flex">-->
|
<!-- <span class="char-img" style="background-image:-->
|
<!-- url(__STATIC__/newcj/img/123.jpg)"></span>-->
|
<!-- <span class="text"><i class="icon icon-sanjiao4 t-32"></i>你好</span>-->
|
<!-- </div>-->
|
|
<!-- <div class="chat-text section-right flex">-->
|
<!-- <span class="text"><i class="icon icon-sanjiao3 t-32"></i>你好</span>-->
|
<!-- <span class="char-img" style="background-image:-->
|
<!-- url(__STATIC__/newcj/img/132.jpg)"></span>-->
|
<!-- </div>-->
|
|
</div>
|
</div>
|
<div class="fix-send flex footer-bar">
|
<i class="icon icon-emoji1 t-50"></i>
|
<input class="send-input t-28" maxlength="200" id="saytext">
|
<input type="file" name="pic" id="file" style="display: none">
|
<i class="icon icon-add image_up t-50" style="color: #888;"></i>
|
<span class="send-btn">发送</span>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script>
|
var fromid = {$fromid};
|
var toid = {$toid};
|
|
var from_head = '';
|
var to_head = '';
|
var online = 0;
|
var to_name = '';
|
|
var API_URL = "https://socket.kocoinlab.com/index.php/api/chat/";
|
//连接socket服务器
|
var ws = new WebSocket("wss://socket.kocoinlab.com/ws1");
|
|
//接收socket服务方的消息
|
ws.onmessage = function (e) {
|
var message = eval("("+e.data+")");
|
switch (message.type) {
|
case 'init':
|
var bind = '{"type":"bind","fromid":"'+fromid+'"}';
|
ws.send(bind);
|
get_head(fromid,toid);
|
get_name(toid);
|
message_load();
|
var online = '{"type":"online","toid":'+toid+',"fromid":'+fromid+'}';
|
ws.send(online);
|
changeNoRead();
|
return;
|
case 'text':
|
if (toid == message.fromid){
|
$(".chat-content").append('<div class="chat-text section-left flex">\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+to_head+')"></span>\n' +
|
' <span class="text"><i class="icon icon-sanjiao4 t-32"></i>' +
|
replace_em(message.data) +
|
'</span>\n' +
|
' </div>');
|
$('.chat-content').scrollTop(3000);
|
}
|
changeNoRead();
|
return;
|
case 'say_img':
|
if (toid == message.fromid){
|
$(".chat-content").append('<div class="chat-text section-left flex">\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+to_head+')"></span>\n' +
|
' <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/' +
|
message.img_name +'">'+
|
'</span>\n' +
|
' </div>');
|
$('.chat-content').scrollTop(3000);
|
changeNoRead();
|
}
|
return;
|
case 'save':
|
save_Message(message);
|
if (message.isread == 1){
|
online = 1;
|
$('.shop-online').text('在线');
|
}else {
|
online = 0;
|
$('.shop-online').text('不在线');
|
}
|
return;
|
case 'online':
|
if (message.status == 1){
|
online = 1;
|
$('.shop-online').text('在线');
|
}else {
|
online = 0;
|
$('.shop-online').text('不在线');
|
}
|
return;
|
// case 'close':
|
// console.log(message);
|
// if (message.uid == toid){
|
// $('.shop-online').text('不在线');
|
// }else {
|
// $('.shop-online').text('在线');
|
// }
|
}
|
}
|
|
|
|
$('.send-btn').click(function () {
|
//客户端给gatewayworker发送消息
|
|
var text = $('.send-input').val();
|
|
var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';
|
$(".chat-content").append('<div class="chat-text section-right flex">\n' +
|
' <span class="text"><i class="icon icon-sanjiao3 t-32"></i>' +
|
replace_em(text) +
|
'</span>\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+from_head+')"></span>\n' +
|
' </div>');
|
$('.chat-content').scrollTop(3000);
|
ws.send(message);
|
$('.send-input').val('');
|
})
|
|
function save_Message(message) {
|
$.post(
|
API_URL+"save_message",
|
message,
|
function () {
|
|
},'json'
|
)
|
}
|
|
function changeNoRead() {
|
$.post(
|
API_URL+"changeNoRead",
|
{"fromid":fromid,"toid":toid},
|
function () {
|
|
},'json'
|
)
|
}
|
|
function get_head(fromid,toid) {
|
$.post(
|
API_URL+"getHead",
|
{"fromid":fromid,"toid":toid},
|
function (e) {
|
from_head = e.from_head;
|
to_head = e.to_head;
|
},'json'
|
)
|
}
|
|
function get_name(toid) {
|
$.post(
|
API_URL+"get_name",
|
{"uid":toid},
|
function (e) {
|
to_name = e.toname;
|
$('.shop-titlte').text('与'+to_name+'聊天中')
|
},'json'
|
)
|
}
|
|
function message_load() {
|
$.post(
|
API_URL+"load",
|
{"fromid":fromid,"toid":toid},
|
function (e) {
|
$.each(e,function (index,content) {
|
if(fromid == content.fromid){
|
if (content.type == 2){
|
$(".chat-content").append('<div class="chat-text section-right flex">\n' +
|
' <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/' +
|
content.content+'">'+
|
'</span>\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+from_head+')"></span>\n' +
|
' </div>');
|
}else {
|
$(".chat-content").append('<div class="chat-text section-right flex">\n' +
|
' <span class="text"><i class="icon icon-sanjiao3 t-32"></i>' +
|
replace_em(content.content) +
|
'</span>\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+from_head+')"></span>\n' +
|
' </div>');
|
}
|
}else {
|
if (content.type == 2){
|
$(".chat-content").append('<div class="chat-text section-left flex">\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+to_head+')"></span>\n' +
|
' <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/' +
|
content.content +'">'+
|
'</span>\n' +
|
' </div>');
|
$('.chat-content').scrollTop(3000);
|
}else {
|
$(".chat-content").append('<div class="chat-text section-left flex">\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url(' + to_head + ')"></span>\n' +
|
' <span class="text"><i class="icon icon-sanjiao4 t-32"></i>' +
|
replace_em(content.content) +
|
'</span>\n' +
|
' </div>');
|
}
|
}
|
})
|
$('.chat-content').scrollTop(3000);
|
},'json'
|
)
|
}
|
|
function replace_em(str){
|
str = str.replace(/\</g,'<');
|
str = str.replace(/\>/g,'>');
|
str = str.replace(/\n/g,'<br/>');
|
str =
|
str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/qqFace/arclist/$1.gif" border="0" />');
|
return str;
|
}
|
|
$(function(){
|
$('.icon-emoji1').qqFace({
|
assign:'saytext',
|
path:'__STATIC__/qqFace/arclist/' //表情存放的路径
|
});
|
|
// $(".sub_btn").click(function(){
|
//
|
// var str = $("#saytext").val();
|
//
|
// $("#show").html(replace_em(str));
|
//
|
// });
|
|
});
|
|
$('.return').click(function() {
|
var url = 'https://socket.kocoinlab.com/index.php/index/index/lists?fromid='+fromid;
|
window.location.herf = url;
|
|
});
|
|
$('.image_up').click(function () {
|
$('#file').click();
|
})
|
|
$('#file').change(function () {
|
fromdata = new FormData();
|
fromdata.append('fromid',fromid);
|
fromdata.append('toid',toid);
|
fromdata.append('online',online);
|
fromdata.append('file',$("#file")[0].files[0]);
|
|
$.ajax({
|
url:API_URL+"uploadimg",
|
type:"POST",
|
cache:false,
|
data:fromdata,
|
dataType:'json',
|
processData:false,//会把所有的数据转换后才能对象，所以禁用掉
|
contentType:false,
|
success:function (data,status,xhr) {
|
console.log(data);
|
if (data.status == 'ok'){
|
$(".chat-content").append('<div class="chat-text section-right flex">\n' +
|
' <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/' +
|
data.img_name+'">'+
|
'</span>\n' +
|
' <span class="char-img" style="background-image:\n' +
|
' url('+from_head+')"></span>\n' +
|
' </div>');
|
$('.chat-content').scrollTop(3000);
|
|
var message =
|
'{"data":"'+data.img_name+'","fromid":"'+fromid+'","toid":"'+toid+'","type":"say_img"}';
|
$("#file").val("");
|
ws.send(message);
|
|
}else {
|
console.log(data.status)
|
}
|
}
|
});
|
})
|
|
|
|
</script>
|
|
</html>
|
