You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

683 lines
26 KiB
Plaintext

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShopEmailDatas.aspx.cs" Inherits="TradeManageNew.TongJi.ShopEmailDatas" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>店铺邮件</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../themes/New.css" />
<link rel="stylesheet" type="text/css" href="../themes/DataGrid.css" />
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Scripts/DataGrid.js" type="text/javascript"></script>
<script src="../Scripts/DataPager.js" type="text/javascript"></script>
<script src="../Scripts/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="../Scripts/Global.js" type="text/javascript"></script>
<script src="../Scripts/WindowLoad.js" type="text/javascript"></script>
<script src="../Scripts/DatePicker/WdatePicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/fancybox/jquery.fancybox-1.3.4.css"
media="screen" />
<script src="../Scripts/MaskedTextBox.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="../Scripts/highcharts.js"></script>
<script type="text/javascript" src="../Scripts/exporting.js"></script>
<script src="../Scripts/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
var UserId = "<%=Session["UserId"]%>";
var WindowLoadModel = new WindowLoad();
var List_PageIndex = 1;
var Detail_PageIndex = 1;
var customerEmail = "";
$(document).ready(function () {
WindowLoadModel.ApplicationPath = "../";
WindowLoadModel.ControlID = "WindowLoad";
WindowLoadModel.Isbgiframe = true;
WindowLoadModel.Load();
ajaxInit(WindowLoadModel);
GetSelectShopList();
// 点击列表项
$("#myList [class='list-item']").live("click", function () {
$('.list-item').css("background-color", "#ffffff");
$(this).css("background-color", "rgb(215 210 210)");
customerEmail = $(this).find('.mes-obj').attr("customeremail");
$('#chat-top-title-a').text($(this).find('.mes-obj').text());
$('#chat-top-title-b').text(customerEmail);
$('#chat-top-title-b').attr('title', customerEmail);
$('#chat-top-title-b').attr('orderid', $(this).find('.mes-obj').attr("orderid"));
$('#echat-top-subject').text($(this).find('.mes-desc-c').text());
$('#echat-top-subject').attr('title', $(this).find('.mes-desc-c').text());
Detail_PageIndex = 1;
$('.chat-container').empty();
GetShopEmailDetail();
})
// 初始化时滚动到底部
scrollToBottom();
$("#btn_sch").bind("click", function () {
$(".list").empty();
List_PageIndex = 1;
GetShopEmailItemList();
});
GetShopEmailItemList();
$('#select_shop').change(function () {
var shopid = $(this).val();
GetShopEmailList(shopid);
})
$('#sendBtn').prop('disabled', true);
// 监听输入框的输入事件
$('#return-input').on('input', function () {
// 检查输入框的值是否为空
if ($(this).val() === '') {
// 如果输入框为空,则禁用按钮
$('#sendBtn').prop('disabled', true);
} else {
// 如果输入框不为空,则启用按钮
$('#sendBtn').prop('disabled', false);
}
});
//附件删除
$('.fj-del').live('click', function () {
$(this).parent('.fj-sp').remove();
})
$('#upfjBtn').on('click', function () {
$('#fileInput').click();
})
$('#fileInput').live('change', function () {
ajaxFileUpload_f();
//var files = $(this)[0].files;
//var formData = new FormData();
//for (var i = 0; i < files.length; i++) {
// formData.append('files', files[i]);
//}
////var param = new Object();
////param.files = formData;
//WindowLoadModel.Show();
//$.ajax({
// url: "../SysManageServiceNew.asmx/AmazonZNXUpFJ",
// //data: Sys.Serialization.JavaScriptSerializer.serialize(param),
// data: formData,
// //type: 'POST',
// processData: false,
// contentType: false,
// success: function (data) {
// WindowLoadModel.Hide();
// if (data.d != null) {
// if (data.d.Code == 1) {
// } else {
// alert(data.d.Message);
// }
// }
// }
//});
})
});
function ajaxFileUpload_f() {
if ($("#fileInput").val() == "") { alert("请选择要导入的文件"); return; }
$.ajaxFileUpload({
url: '../GlobalAshx/AjaxFileUpload.ashx?DirectoryName=attached/userEmail',
secureuri: false,
fileElementId: 'fileInput',
dataType: 'json',
success: function (data, status) {
alert('文件路径:' + data.FileName + '长度:' + data.FileSize);
},
error: function (data, status, e) {
alert(e);
}
})
return;
}
document.addEventListener("DOMContentLoaded", function () {
var myList = document.querySelector("#elist_container");
// 确保元素已经被正确获取
if (myList) {
// 监听滚动事件
myList.addEventListener("scroll", function () {
// 判断是否已经滚动到底部
if (myList.scrollTop + myList.offsetHeight >= myList.scrollHeight) {
// 触发事件
ItemOnReachBottom();
}
});
}
//监听站内信内容框滑动
var myContain = document.querySelector("#echat-container");
if (myContain) {
// 监听滚动事件
myContain.addEventListener("scroll", function () {
// 判断是否已经滚动到顶部
if (myContain.scrollTop === 0) {
// 触发事件
ContainerReachTop();
}
});
}
});
function GetSelectShopList() {
$("#select_shop").empty();
var param = new Object();
param.DeptId = 0;
param.PlatType = 2;
WindowLoadModel.Show();
$.ajax({
url: "../BaseDataNew.asmx/GetShopListForTM",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null) {
$(data.d).each(function (i) {
if (i == 0) {
$("#select_shop").append("<option value='" + this.ShopId + "' selected>" + this.ShopName + "</option>");
}
else {
$("#select_shop").append("<option value='" + this.ShopId + "'>" + this.ShopName + "</option>");
}
});
GetShopEmailList(data.d[0].ShopId);
}
}
});
}
//获取店铺邮箱账号
function GetShopEmailList(shopid) {
$("#select_email").empty();
var param = new Object();
param.shopid = shopid;
WindowLoadModel.Show();
$.ajax({
url: "../SysManageServiceNew.asmx/GetShopEmailsDatas",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null) {
$(data.d).each(function (i) {
if (i == 0) {
$("#select_email").append("<option value='" + this.ID + "' selected>" + this.EmailAccount + "</option>");
}
else {
$("#select_email").append("<option value='" + this.ID + "'>" + this.EmailAccount + "</option>");
}
});
}
}
});
}
//获取店铺邮件列表
function GetShopEmailItemList() {
var param = new Object();
param.shopid = $("#select_shop").val();
param.emailCode = $("#select_email").text();
param.emailType = $("#select-emailType").val();
param.pageIndex = List_PageIndex;
param.pageSize = 20;
WindowLoadModel.Show();
$.ajax({
url: "../SysManageServiceNew.asmx/GetShopEmailItemListDatas",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null) {
var ahtml = "";
$(data.d).each(function (i) {
var obj = data.d[i];
ahtml += '<li class="list-item"><div class="mes-obj" customerEmail="' + obj["CustomerEmail"] + '" orderid="' + obj["OrderCode"] + '">' + obj["CustomerName"] + '</div><div class="mes-desc"><span class="mes-desc-c">' + obj["Subject"] + '</span><span class="mes-desc-t">' + obj["EmailCNTime"] + '</span></div></li>'
});
$(".list").append(ahtml);
} else {
List_PageIndex -= 1;
}
}
});
}
//邮件列表滑到底触发事件
function ItemOnReachBottom() {
List_PageIndex += 1;
GetShopEmailItemList();
}
//获取站内信详情
function GetShopEmailDetail() {
var param = new Object();
param.shopid = $("#select_shop").val();
param.emailCode = $("#select_email").val();
param.emailType = $("#select-emailType").val();
param.customerEmail = customerEmail;
param.pageIndex = Detail_PageIndex;
param.pageSize = 10;
WindowLoadModel.Show();
$.ajax({
url: "../SysManageServiceNew.asmx/GetShopZNXListDatas",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null) {
if (Detail_PageIndex == 1) {
var ahtml = "";
$(data.d).each(function (i) {
var obj = data.d[i];
//发送,在右边
if (obj["EmailType"] == 1) {
ahtml += '<div class="message mes_right"><div class="mess_date_right">' + obj["EmailCNTime"] + '</div> <div class="mess-content_right">' + obj["EmailContent"] + '</div></div>';
}
else { //接收,在左边
ahtml += '<div class="message mes_left"><div class="mess_date_left">' + obj["EmailCNTime"] + '</div> <div class="mess-content_left">' + obj["EmailContent"] + '</div></div>';
}
});
$(".chat-container").empty();
$(".chat-container").append(ahtml);
scrollToBottom();
}
else {
$(data.d).each(function (i) {
var obj = data.d[i];
var ahtml = "";
//发送,在右边
if (obj["EmailType"] == 1) {
ahtml += '<div class="message mes_right"><div class="mess_date_right">' + obj["EmailCNTime"] + '</div> <div class="mess-content_right">' + obj["EmailContent"] + '</div></div>';
}
else { //接收,在左边
ahtml += '<div class="message mes_left"><div class="mess_date_left">' + obj["EmailCNTime"] + '</div> <div class="mess-content_left">' + obj["EmailContent"] + '</div></div>';
}
$(".message:first-child").before(ahtml);
});
}
} else {
Detail_PageIndex -= 1;
}
}
});
}
// 滚动到底部
function scrollToBottom() {
var chatContainer = $('.chat-container');
chatContainer.scrollTop(chatContainer.prop("scrollHeight"));
}
//站内信详情滑动到顶部触发事件
function ContainerReachTop() {
Detail_PageIndex += 1;
GetShopEmailDetail();
}
//发送信息给顾客
function sendMessage() {
var param = new Object();
param.shopid = $("#select_shop").val();
param.orderid = $("#chat-top-title-b").attr("orderid");
param.content = $("#return-input").val();
param.sellerEmail = $("#select_email").text();
param.customerEmail = $("#chat-top-title-b").text();
var fjpaths = "";
$(".fj-sp").each(function (i) {
if ($(this).text() != "") {
fjpaths += $(this).text() + ",";
}
})
param.attachments = fjpaths == "" ? "" : fjpaths.substring(0, fjpaths.length - 1);
console.log(param.attachments);
WindowLoadModel.Show();
$.ajax({
url: "../SysManageServiceNew.asmx/SendZNXToAmazonCustomer",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
WindowLoadModel.Hide();
if (data.d != null) {
if (data.d.Code == 1) {
$("#return-input").val('');
$("#chat-input-a .fj-sp").remove();
//发送新消息之后,重新获取所有的消息,并把消息内容框滑动到底部
Detail_PageIndex = 1;
GetShopEmailDetail();
scrollToBottom();
} else {
alert(data.d.Message);
}
}
}
});
}
</script>
</head>
<style type="text/css">
.top-filter {
margin-left:100px;
}
.list-container {
width: 400px;
height: 800px;
overflow-y: scroll;
float: left;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}
.list-item {
padding: 10px;
cursor: pointer;
height:50px;
}
.list-item:hover {
background-color: #f5f5f5;
}
.chat-container {
/* width: calc(100% - 200px);
height: 300px;*/
overflow-y: scroll;
float: left;
}
.message {
padding: 10px;
margin-bottom: 10px;
clear: both;
}
/* .message.mes_right {
background-color: #e6f2ff;
float: right;
}*/
/* 聊天容器样式 */
#chat-total{
width:842px;
height:800px;
float:left;
}
#chat-top{
height:50px;
width:820px;
background-color:#fff;
margin-top:0px;
padding:10px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
.chat-container {
width: 800px;
height: 530px; /* 添加容器的高度 */
margin: 0 auto;
padding:0px 20px;
border: 1px solid #ccc;
background-color: #fff;
overflow-y: scroll; /* 添加滚动条样式 */
}
#chat-input-container{
width:800px;
height:199px;
padding:0px 20px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #fff;
overflow-y: scroll; /* 添加滚动条样式 */
}
/* 聊天消息样式 */
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
background-color: #fff;
}
/* 左侧聊天对象样式 */
.mes_left {
float: left;
clear: both;
margin-right: 350px;
color: #444;
font-size:12px;
line-height:18px;
text-align:left;
}
/* 右侧聊天内容样式 */
.mes_right {
float: right;
clear: both;
margin-left: 350px;
color: #444;
text-align:left;
line-height:18px;
font-size:12px;
}
.mess_date_right{
text-align:right;
}
.mess_date_left{
text-align:left;
}
.mess-content_right{
background-color:#f5f6f9;
text-align:left;
padding:10px;
}
.mess-content_left{
background-color:rgba(44,115,234,.1);
padding:10px;
}
.mes-obj{
line-height: 16px;
height: 16px;
font-size: 15px;
overflow:hidden;
}
.mes-desc{
width:100%;
line-height: 16px;
height: 16px;
margin-top: 5px;
font-size: 12px;
margin-top:10px;
}
.mes-desc-c{
width:90%;
float:left;
overflow: hidden;
line-height:16px;
height:16px;
}
.mes-desc-t{
width:10%;
float:left;
text-align:right;
}
.chat-top-title{
line-height: 16px;
height: 16px;
font-size: 16px;
overflow:hidden;
}
#chat-top-title-a {
line-height: 16px;
height: 16px;
font-size: 15px;
float:left;
}
#chat-top-title-b {
line-height: 16px;
height: 16px;
font-size: 12px;
overflow:hidden;
margin-left:10px;
color:#444;
display:inline-block;
float:left;
}
.chat-top-subject{
width:790px;
float:left;
font-size:12px;
line-height:16px;
height:16px;
margin-top:10px;
overflow:hidden;
text-overflow:ellipsis;
max-width:790px;
}
#chat-input-a{
width:783px;
height:29px;
}
#chat-input-b{
margin-top:5px;
width:783px;
height:130px;
border-bottom:1px solid #e6e8eb;
}
#chat-input-c{
width:783px;
height:30px;
margin-top:5px;
}
#return-input{
width:763px;
height:110px;
border:none;
padding:10px;
}
#sendBtn{
width:70px;
height:30px;
margin-right:20px;
float:right;
font-size:12px;
color:#fff;
border-radius:5px;
background-color:#428bca;
border:none;
}
#upfjBtn{
width:70px;
height:30px;
margin-right:20px;
float:left;
font-size:12px;
color:#fff;
border-radius:5px;
background-color:#428bca;
border:none;
}
.fj-sp{
margin-left:10px;
float:left;
height:29px;
line-height:29px;
font-size:12px;
align-items:center;
width:100px;
overflow:hidden;
text-overflow:ellipsis;
}
.fj-del{
float:right;
margin-top:5px;
width:10px;
height:10px;
background-size:cover;
background-image:url('../images/Del.png');
}
</style>
<body class="headbody">
<div class="title_ico">
店铺邮件
</div>
<table border="1" cellpadding="0" cellspacing="0" style="width: 99%;" align="center" class="tableAll">
<tr>
<td><span class="top-filter">店铺:<select id="select_shop"></select></span>
<span class="top-filter">邮箱:<select id="select_email"></select></span>
<span class="top-filter"> 邮件类型:
<select id="select-emailType"><option value="0" selected>站内信</option><option value="1">发件箱</option><option value="2">收件箱</option></select>
</span>
</td>
<td><input id="btn_sch" class="btnClass btnClassFind" type="button" value="查询" /></td>
</tr>
<tr>
<td valign="top" colspan="7" style="height:700px;">
<div class="list-container" id="elist_container">
<ul class="list" id="myList">
<%-- <li class="list-item"><div class="mes-obj">聊天对象A</div><div class="mes-desc"><span class="mes-desc-c">爱丽丝对方拉风拉萨大幅拉升的技法卢卡斯阿萨的房间阿里山的肌肤</span><span class="mes-desc-t">10:03</span></div></li>
<li class="list-item"><div class="mes-obj">聊天对象B</div><div class="mes-desc"><span class="mes-desc-c">爱丽丝对方拉风拉萨大幅拉升的技法卢卡斯阿萨的房间阿里山的肌肤</span><span class="mes-desc-t">11-03</span></div></li>
--%>
</ul>
</div>
<div id="chat-total">
<div id="chat-top">
<div class="chat-top-title" id="echat-top-title"><span id="chat-top-title-a"></span><span id="chat-top-title-b"></span></div>
<div class="chat-top-subject" id="echat-top-subject"></div>
</div>
<div class="chat-container" id="echat-container">
</div>
<div id="chat-input-container">
<div id="chat-input-a"><input type="button" value="上传附件" id="upfjBtn" /><input type="file" id="fileInput" multiple style="display:none;"> <span class="fj-sp" title="gsdfg.png">sdfg.png<span class="fj-del"></span></span><span class="fj-sp">2222.jpg<span class="fj-del"></span></span></div>
<div id="chat-input-b"><textarea id="return-input" rows="10" cols="50"></textarea></div>
<div id="chat-input-c"><input type="button" value="发 送" id="sendBtn" onclick="sendMessage()"/></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>