485 lines
22 KiB
Plaintext
485 lines
22 KiB
Plaintext
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Admin_Member_chat_view.aspx.cs" Inherits="Mtxfw.VipSite.Admin_Member_chat_view" %>
|
|
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head id="Head1" runat="server">
|
|
<title></title>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<meta http-equiv="Cache-Control" content="no-store" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10" />
|
|
<script src="/Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
|
|
<script src="/Scripts/common.js" type="text/javascript"></script>
|
|
<script type="text/javascript" src="/layer/layer.js"></script>
|
|
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
|
|
|
|
<!-- Basic Styles -->
|
|
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.css">
|
|
<!--[if IE 7]>
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/css/font-awesome-ie7.min.css">
|
|
<![endif]-->
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/css/smartadmin-production.css">
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/css/smartadmin-skins.css">
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/css/your_style.css">
|
|
|
|
<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/css/demo.css">
|
|
|
|
|
|
<!-- FAVICONS -->
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/css/cjadd.css?t=2">
|
|
<script src="/Scripts/moment.js"></script>
|
|
<script type="text/javascript">
|
|
var timeout0=null;
|
|
function judgetime(time){
|
|
var today=new Date();
|
|
var nowtime=parseInt(today.getTime()/1000);
|
|
var overtime=moment(time, 'YYYY/MM/DDTHH:mm:ss.sssZ');
|
|
var deadline=overtime.unix();
|
|
var minus=nowtime-deadline;
|
|
if((minus/86400)>1){
|
|
// var d="2015-12-16T06:27:19.189Z";
|
|
/*var ctime=new Date(time.replace("-","/"));
|
|
var yy=ctime.getFullYear();
|
|
var MM=ctime.getMonth()+1;
|
|
var dd=ctime.getDate();
|
|
return yy+"-"+MM+"-"+dd;*/
|
|
return time.split(" ")[0].replace("/","-").replace("/","-");
|
|
// alert(ztime);
|
|
}else if((minus/3600)>1){
|
|
var hh=parseInt(minus/3600);
|
|
return hh+"小时前";
|
|
// alert(ztime);
|
|
}else if((minus/60)>1){
|
|
var mm=parseInt(minus/60);
|
|
return mm+"分钟前";
|
|
// alert(ztime);
|
|
}else{
|
|
return "刚刚";
|
|
}
|
|
}
|
|
|
|
function onselectpic(id) {
|
|
var val = $("#File_AdsImg" + id).val();
|
|
|
|
if (val != "") {
|
|
var file = document.getElementById("File_AdsImg" + id).files[0];
|
|
//$("#uploadForm span").html("已选择图片");
|
|
var reader = new FileReader();
|
|
//将文件以Data URL形式读入页面
|
|
reader.readAsDataURL(file);
|
|
reader.onload = function (e) {
|
|
|
|
|
|
$("#showimg" + id).html("<img src=\"" + this.result + "\" style=\"width:100px;\" />");
|
|
}
|
|
//$("#showimg").html("<img src=\"" + getFileUrl("File_AdsImg") + "\" style=\"width:80px;\" />");
|
|
|
|
}
|
|
}
|
|
|
|
function addMsg(param) {
|
|
var avatar = param.avatar;
|
|
if (avatar == "") {
|
|
avatar = "../images/hytopico.png";
|
|
}
|
|
|
|
var html = '<div class="demo-container' + (param.userid == 0 ? '-right' : '') + ' demo-container-box" id="databox_' + param.id + '" >'
|
|
+ '<div class="demo-container-time-box"><div>' + judgetime(param.addtime) + '</div></div>'
|
|
+ '<div class="demo-container-left-box">'
|
|
+ '<img src="' + avatar + '"/>'
|
|
+ '</div>'
|
|
+ '<div class="demo-container-right-box">'
|
|
|
|
//+'<div class="demo-container-title" onclick="onfriendlink('+param.userid+',\''+param.ncname+'\')">'
|
|
//+param.ncname
|
|
//+'</div>'
|
|
+ '<div class="webui-popover">';
|
|
|
|
|
|
html += '<div class="webui-popover-content">';
|
|
|
|
/*if (param.CategoryId == 1) {
|
|
html += '<img onclick="showimg(\'' + param.content + '\')" src="' + api + param.maxpic + '" />';
|
|
|
|
} else {*/
|
|
html += '<div class="content">' + param.content + '</div>';
|
|
|
|
//}
|
|
|
|
html += '</div>';
|
|
if (param.CategoryId != 1) {
|
|
|
|
html += '<div class="webui-popover-ico"></div>';
|
|
}
|
|
html += '</div>'
|
|
+ '</div>';
|
|
html+='<div class="webui-popover-robox"><input type="checkbox" class="checkbox" name="paramcheckbox" value="'+param.id+'" /></div>';
|
|
html += '</div><div class="clear"></div>';
|
|
return html;
|
|
}
|
|
|
|
function onshowgl() {
|
|
|
|
$(".webui-popover-robox").show();
|
|
$("#footer").show();
|
|
//$(".webui-popover-robox .checkbox").prop("checked", true);
|
|
$(".footer_btn").show();
|
|
$(".footer_btn2").hide();
|
|
|
|
}
|
|
function allselect() {
|
|
$(".webui-popover-robox .checkbox").prop("checked", true);
|
|
}
|
|
function qxselect() {
|
|
$(".webui-popover-robox .checkbox").prop("checked", false);
|
|
}
|
|
|
|
|
|
function qxdel(){
|
|
$(".webui-popover-robox").hide();
|
|
$(".footer_btn2").show();
|
|
$(".footer_btn").hide();
|
|
}
|
|
function qydel(){
|
|
var delids="";
|
|
var acheckboxs = $(".webui-popover-robox .checkbox");
|
|
for(var i=0;i<acheckboxs.length;i++){
|
|
|
|
if($(acheckboxs[i]).prop("checked")==true){
|
|
|
|
if(delids!=""){
|
|
delids=delids + "," + $(acheckboxs[i]).val();
|
|
}else{
|
|
delids=$(acheckboxs[i]).val();
|
|
}
|
|
}
|
|
}
|
|
|
|
if(delids!=""){
|
|
$.post("/Ajax.ashx", { action: "delcxinfo", delids: escape(delids),ttype:1}, function (data2) {
|
|
|
|
if (data2==0) {
|
|
for(var i=0;i<acheckboxs.length;i++){
|
|
|
|
if($(acheckboxs[i]).prop("checked")==true){
|
|
|
|
if(delids!=""){
|
|
$("#databox_" + $(acheckboxs[i]).val()).hide();
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
alert(data2);
|
|
}
|
|
|
|
});
|
|
|
|
}else{
|
|
alert("未选择");
|
|
}
|
|
|
|
}
|
|
var startsj = "";
|
|
function getinfos(ag) {
|
|
if(ag==2){
|
|
$(".ajaxLoader").css("display","block");
|
|
}
|
|
var Start = $("#sysnew .databox").length;
|
|
if(ag==1){
|
|
Start = 0;
|
|
}
|
|
if(ag==0 || ag==1){
|
|
startsj="";
|
|
}
|
|
$.ajaxSettings.async = false;
|
|
$.getJSON("/Ajax.ashx",
|
|
{ action: "getinfos",t:<%=t %>, senderid: "<%=senderid %>", receiverid: "<%=receiverid %>",startsj:startsj,Start:Start },
|
|
function (data) {
|
|
|
|
if (data.success) {
|
|
var html = "";
|
|
if (data.total > 0) {
|
|
startsj = data.items[data.total - 1].addtime;
|
|
if (ag == 2) {
|
|
|
|
for (var i = 0; i < data.total; i++) {
|
|
|
|
if ($("#databox_" + data.items[i].id).length == 0) {
|
|
html += addMsg(data.items[i]);
|
|
}
|
|
}
|
|
} else {
|
|
for (var i = data.total-1; i >= 0; i--) {
|
|
|
|
if ($("#databox_" + data.items[i].id).length == 0) {
|
|
html += addMsg(data.items[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var ele = $("#sysnew");
|
|
if(ag==2){
|
|
setTimeout(function(){
|
|
//设置滚动条到最顶部
|
|
ele.scrollTop = 0;
|
|
},300);
|
|
}else{
|
|
setTimeout(function(){
|
|
//设置滚动条到最底部
|
|
ele.scrollTop = ele.scrollHeight;
|
|
},300);
|
|
}
|
|
if(ag==1){
|
|
$("#sysnew").html(html);
|
|
}else if(ag==2){
|
|
$("#sysnew").html(html+$("#sysnew").html());
|
|
}else{
|
|
$("#sysnew").append(html);
|
|
}
|
|
|
|
if(html!=""){
|
|
$("#footer").show();
|
|
$(".footer_btn").hide();
|
|
$(".footer_btn2").show();
|
|
}
|
|
if(ag==2){
|
|
$(".ajaxLoader").css("display","none");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function addinfoto() {
|
|
if ($("#File_AdsImg").val() != "" || $("#addbody").val() != "") {
|
|
var formData = new FormData();
|
|
formData.append("action", "addinfoto");
|
|
formData.append("receiverid", "<%=senderid%>");
|
|
|
|
formData.append("addbody", $("#addbody").val());
|
|
|
|
|
|
formData.append("Photo", $('#File_AdsImg')[0].files[0]);
|
|
|
|
$.ajax({
|
|
url: '/Ajax.ashx',
|
|
type: 'POST',
|
|
data: formData,
|
|
dataType:"text",
|
|
contentType:"application/x-www-form-urlencoded",
|
|
async: false,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (returndata) {
|
|
|
|
if (returndata == "0") {
|
|
|
|
$("#addbody").val("");
|
|
|
|
$("#showimg").html("");
|
|
getinfos(0);
|
|
} else {
|
|
alert(returndata);
|
|
}
|
|
},
|
|
error: function (returndata) {
|
|
alert(returndata);
|
|
}
|
|
});
|
|
} else {
|
|
alert("内容或图片不能为空！");
|
|
}
|
|
}
|
|
function onshowimg(_src) {
|
|
$(".layer img").attr("src", _src);
|
|
$(".layer").fadeIn();
|
|
}
|
|
$(document).ready(function () {
|
|
|
|
getinfos(1);
|
|
if(timeout0!=null){
|
|
clearInterval(timeout0);
|
|
}
|
|
timeout0 =setInterval("getinfos(0)", 8000);
|
|
|
|
$("#sysnew").scroll(function () {
|
|
var ele = $("#sysnew");
|
|
if (ele.scrollTop = ele.scrollHeight) {
|
|
getinfos(2);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
.uploadForm{ float:left; position: relative; margin-top:5px;
|
|
width:8em; height:25px;
|
|
text-align:center;
|
|
line-height:25px;
|
|
background-color:#fd4400;
|
|
text-indent:0px;
|
|
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px 3px 3px 3px;
|
|
color:#fff;
|
|
font-size:12px;
|
|
z-index:2;
|
|
text-indent:0;
|
|
|
|
cursor:pointer;}
|
|
.uploadForm span{position: relative; display:block; width:100%; height:100%;color:#fff;}
|
|
.uploadForm input{position: absolute;width:100%; height:25px; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0);}
|
|
.chatbox{ max-width:640px; max-height:600px; overflow-y:auto; border:1px solid #f1f1f1; background-color:#fff; border-radius:0.3em;}
|
|
.addchatbox{ max-width:640px; overflow-y:auto;}
|
|
#footer{width:100%; margin:0; padding:1em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; display:none;}
|
|
.footer_btn{ float:left; width:5em; line-height:2.5em; margin-left:1em; background-color:#ff5400;border-radius:0.4em; overflow:hidden; color:#fff;display:none;}
|
|
.footer_btn2{ float:left; width:5em; line-height:2.5em; margin-left:1em; background-color:#ff5400;border-radius:0.4em; overflow:hidden; color:#fff;}
|
|
.demo-container{float:left; margin:0;width:100%; padding:0.8em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
|
|
.demo-container .demo-container-left-box{ float:left; width:10%;}
|
|
.demo-container .demo-container-left-box img{margin:0; width:2.5em; height:2.5em; background-color:#fff;border-radius: 0.3em; overflow:hidden;}
|
|
|
|
.demo-container .demo-container-right-box{float:left; width:90%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
|
|
.demo-container .demo-container-title{float:left;width:100%; padding-left:0.8em; text-align:left;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
|
|
.demo-container .webui-popover{float:left;width:85%; margin-top:0em; position:relative; padding-left:0.8em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
|
|
.demo-container .webui-popover .webui-popover-content{float:left;z-index:0;margin:0; padding:0; min-height:2.5em; line-height:2.5em; width:auto; max-width:100%; border-radius:0.5em; border:1px solid #f1f1f1;background-color:#fff;box-sizing:border-box;}
|
|
.demo-container .webui-popover .webui-popover-content img{float:left;max-width:6em;margin:0; padding:0;border-radius:0.3em; overflow:hidden;}
|
|
.demo-container .webui-popover .webui-popover-content .audio{float:left; max-width:100%;}
|
|
.demo-container .webui-popover .webui-popover-content .audio img{float:left;margin-top:0.7em; width:1em; height:1em;}
|
|
.demo-container .webui-popover .webui-popover-content .audio div{float:left;text-align:left;}
|
|
.demo-container .webui-popover .webui-popover-content .audio div div.secondsfont{width:1em; height:1em; color:#000;}
|
|
.demo-container .webui-popover .webui-popover-content .audio div.yuanquan{position:absolute; top:1em; right:-1em; width:0.5em; height:0.5em;border-radius:50%; background-color:#FF0000; overflow:hidden;}
|
|
.demo-container .webui-popover .webui-popover-content .audio[isplayed="true"] div div.secondsfont{color:#000;}
|
|
.demo-container .webui-popover .webui-popover-content .audio[isplayed='true'] div.yuanquan{display:none;}
|
|
|
|
.demo-container .webui-popover .webui-popover-content .content{float:left;padding:0.5em 0.5em;box-sizing:border-box;color:#000;line-height:1.5em;}
|
|
.demo-container .webui-popover .webui-popover-content .content img{margin-top:0.1em;margin-bottom:0.1em;}
|
|
.demo-container .webui-popover .webui-popover-ico{ position:absolute;left:-0.1em;top:0.7em;z-index:1; width:1em;height:1em; background:url("../images/webui-popover-ico0.png") no-repeat 0 0;background-size:100% 100%;}
|
|
|
|
.demo-container .webui-popover-robox{float:right;margin-top:-2em;width:2em; display:none;}
|
|
.demo-container-time-box{float:left; width:100%;}
|
|
.demo-container-time-box div{float:none;margin:0 auto; width:auto; padding:0.2em 0.5em; text-align:center; border-radius:0.3em; color:#c8c8c8}
|
|
|
|
.demo-container-right{float:left; margin:0;width:100%; padding:0.8em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
|
|
.demo-container-right .demo-container-left-box{ float:right; width:10%;}
|
|
.demo-container-right .demo-container-left-box img{margin:0; width:2.5em; height:2.5em; background-color:#fff;border-radius: 0.3em; overflow:hidden;}
|
|
|
|
.demo-container-right .demo-container-right-box{float:right; width:90%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
|
|
.demo-container-right .demo-container-title{float:right;width:100%; padding-right:0.8em; text-align:right;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
|
|
.demo-container-right .webui-popover{float:right;width:85%; margin-top:0em; position:relative; padding-right:0.8em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
|
|
.demo-container-right .webui-popover .webui-popover-content{float:right;z-index:0;margin:0; padding:0; min-height:2.5em; line-height:2.5em; width:auto; max-width:100%; border-radius:0.5em; border:1px solid #89be4f; background-color:#a8e563;box-sizing:border-box;}
|
|
.demo-container-right .webui-popover .webui-popover-content img{float:left;max-width:6em;margin:0; padding:0;border-radius:0.3em; overflow:hidden;}
|
|
.demo-container-right .webui-popover .webui-popover-content .audio{float:left; max-width:100%; position:relative;}
|
|
.demo-container-right .webui-popover .webui-popover-content .audio img{float:right;margin-top:0.7em; width:1em; height:1em;}
|
|
.demo-container-right .webui-popover .webui-popover-content .audio div{float:left;text-align:left;}
|
|
.demo-container-right .webui-popover .webui-popover-content .audio div div.secondsfont{float:right; width:1em; height:1em; color:#000;}
|
|
.demo-container-right .webui-popover .webui-popover-content .audio[isplayed="true"] div div.secondsfont{color:#000;}
|
|
.demo-container-right .webui-popover .webui-popover-content .audio[isplayed='true'] div.yuanquan{display:none;}
|
|
.demo-container-right .webui-popover .webui-popover-content .content{float:left;padding:0.5em;box-sizing:border-box;color:#000;line-height:1.5em;}
|
|
.demo-container-right .webui-popover .webui-popover-content .content img{margin-top:0.1em;margin-bottom:0.1em;}
|
|
.demo-container-right .webui-popover-robox{float:left;margin-top:-2em; width:2em; display:none;}
|
|
.demo-container-right .webui-popover .webui-popover-ico{ position:absolute;right:-0.1em;top:0.7em;z-index:1; width:1em;height:1em; background:url("../images/webui-popover-ico.png") no-repeat 0 0;background-size:100% 100%;}
|
|
|
|
.ajaxLoader{position:fixed; top:48%;left:0;right:0; display:none; margin: 0 auto; vertical-align: middle; width:6em; height:6em; line-height:2em; font-size:1em; z-index:1001; text-align:center;}
|
|
.ajaxLoader div{
|
|
margin: 0 auto; vertical-align: middle; width:100%; height:100%; background-color: #F1F1F1; color:#000000; -webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;
|
|
}
|
|
.ajaxLoader img {
|
|
margin-top:1em; width:1.8em; height:1.8em;
|
|
}
|
|
.layer {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, .5);
|
|
display: none;
|
|
}
|
|
|
|
.layer img {
|
|
width: auto;
|
|
max-width:20em;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body id="page">
|
|
<script type="text/javascript" src="/layer/extend/layer.ext.js"></script>
|
|
<form runat="server">
|
|
<!-- RIBBON -->
|
|
<div id="ribbon">
|
|
|
|
<span class="ribbon-button-home"><img src="/images/home.png" /></span>
|
|
|
|
<!-- breadcrumb -->
|
|
<ol class="breadcrumb">
|
|
<li><a href="/gl.aspx" target="_top">主页</a></li>
|
|
<li><a href="/Member_Index.aspx">会员中心首页</a></li>
|
|
<li><a href="/Admin_Member_config.aspx">后台管理</a></li>
|
|
<li>聊天详情</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
</div>
|
|
<!-- END RIBBON -->
|
|
<!-- MAIN CONTENT -->
|
|
<div style="opacity: 1;" id="content">
|
|
<div class="frontMain">
|
|
|
|
<h1 class="title01"><span class="semi-bold">聊天详情</span><span class="addtitle"></span></h1>
|
|
<div class="MainContent">
|
|
<table width="100%" class=" data_table">
|
|
<tr>
|
|
<th>留言信息：</th>
|
|
<td colspan="3"><div class="chatbox" id="sysnew">
|
|
|
|
</div>
|
|
<div id="footer"><div class="footer_btn2" onclick="onshowgl()">管理</div><div class="footer_btn" onclick="qxdel()">取消操作</div><div class="footer_btn" onclick="allselect()">全选</div><div class="footer_btn" onclick="qxselect()">取消全选</div><div class="footer_btn" onclick="qydel()">删除所选</div></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>询问：</th>
|
|
<td colspan="3" style=" text-align:left;">
|
|
<form id="uploadFormdata" target="_self">
|
|
<div class="addchatbox">
|
|
<textarea id="addbody" name="addbody" placeholder="想说点什么呢?" style=" width:24em; padding:0.2em; height:8em;border:1px solid #dfdfdf; background-color:#f1f1f1;"></textarea>
|
|
<div class="clearfix"></div>
|
|
<div class="uploadForm"><span>点击选择图片</span><input type="file" id="File_AdsImg" name="Photo" onchange="onselectpic('')" style=" border:1px solid #ccc;" /></div><div style=" float:left; width:100px;" id="showimg"></div>
|
|
<div class="clearfix"></div>
|
|
<input type="button" id="addbtn" class="abtn" onclick="addinfoto()" value="发送信息" style="width:24em; margin-top:1em;" />
|
|
|
|
<input type="hidden" name="receiverid" value="<%=senderid %>" />
|
|
</div>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="ajaxLoader">
|
|
<div class=""><img src="/images/load.gif" /><br>正在加载...</div>
|
|
</div>
|
|
<div class="layer" onclick='$(".layer").fadeOut();'>
|
|
<img src="/images/jt.png" alt="">
|
|
</div>
|
|
</form>
|
|
</body></html>
|