|
@{
|
|
// string filename = ViewData["filename"].ToString(); // 附件id
|
|
}
|
@{
|
Layout = null;
|
}
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport"
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>招投标咨询</title>
|
<link rel="stylesheet" type="text/css" href="~/static/iconfont.css">
|
<link rel="stylesheet" href="~/static/chat.css?v=1">
|
<script src="~/static/jquery-3.4.1.min.js"></script>
|
<script src="~/js/vue.js"></script>
|
<script src="~/js/axios.min.js"></script>
|
<script src="~/js/lodash.min.js"></script>
|
</head>
|
<body>
|
<div class="chatContainer" style="z-index: 100;">
|
<!-- <div class="qqcss">
|
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=476666&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1341483593:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> <i class="iconfont icon-xiaoxi1"></i>
|
</div> -->
|
<div class="chatBtn">
|
<i class="iconfont icon-xiaoxi1"></i>
|
</div>
|
<div class="chat-message-num"></div>
|
<div class="chatBox" ref="chatBox" style="display: none">
|
<div class="chatBox-head">
|
<div class="chatBox-head-one">
|
在线咨询
|
<div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div>
|
</div>
|
<div class="chatBox-head-two">
|
<div class="chat-return">返回</div>
|
<div class="chat-people">
|
<div class="ChatInfoHead">
|
<img src="" alt="头像" />
|
</div>
|
<div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div>
|
</div>
|
<div class="chat-close">关闭</div>
|
</div>
|
</div>
|
<div class="chatBox-info">
|
<div class="chatBox-list" ref="chatBoxlist">
|
<div class="chat-list-people">
|
<div><img src="~/static/icon01.png" alt="头像" /></div>
|
<div class="chat-name">
|
<p>客服</p>
|
</div>
|
<div class="message-num">咨询</div>
|
</div>
|
<!--<div class="chat-list-people">-->
|
<!--<div><img src="img/icon02.png" alt="头像"/></div>-->
|
<!--<div class="chat-name">-->
|
<!--<p>客服2</p>-->
|
<!--</div>-->
|
<!--<div class="message-num">1</div>-->
|
<!--</div>-->
|
<!--<div class="chat-list-people">-->
|
<!--<div><img src="img/icon03.png" alt="头像"/></div>-->
|
<!--<div class="chat-name">-->
|
<!--<p>客服3</p>-->
|
<!--</div>-->
|
<!--<div class="message-num">2</div>-->
|
<!--</div>-->
|
|
|
</div>
|
<div class="chatBox-kuang" ref="chatBoxkuang">
|
<div class="chatBox-content">
|
<div class="chatBox-content-demo" id="chatBox-content-demo">
|
|
<div class="clearfloat">
|
<div class="author-name">
|
<small class="chat-date" id="systime">2019-5-24 19:24:35</small>
|
</div>
|
<div class="left">
|
<div class="chat-avatars"><img src="~/static/icon01.png" alt="头像" /></div>
|
<div class="chat-message">
|
你好！请问有什么可以帮到您的吗？
|
</div>
|
</div>
|
</div>
|
|
<!--<div class="clearfloat">-->
|
<!--<div class="author-name">-->
|
<!--<small class="chat-date">2017-12-02 14:26:58</small>-->
|
<!--</div>-->
|
<!--<div class="left">-->
|
<!--<div class="chat-avatars"><img src="img/icon01.png" alt="头像"/></div>-->
|
<!--<div class="chat-message">-->
|
<!--<img src="img/1.png" alt="">-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--<div class="clearfloat">-->
|
<!--<div class="author-name">-->
|
<!--<small class="chat-date">2017-12-02 14:26:58</small>-->
|
<!--</div>-->
|
<!--<div class="right">-->
|
<!--<div class="chat-message">嗯，适合做壁纸</div>-->
|
<!--<div class="chat-avatars"><img src="img/icon02.png" alt="头像"/></div>-->
|
<!--</div>-->
|
<!--</div>-->
|
|
</div>
|
</div>
|
<div class="chatBox-send">
|
<div class="div-textarea"></div>
|
<div>
|
@*<button id="chat-biaoqing" class="btn-default-styles">
|
<i class="iconfont icon-biaoqing"></i>
|
</button>*@
|
<label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
|
<input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
|
name="file" id="inputImage" class="hidden">
|
<i class="iconfont icon-tuxiang"></i>
|
</label>
|
<button id="chat-fasong" class="btn-default-styles">
|
<i class="iconfont icon-fasong"></i>
|
</button>
|
</div>
|
<div class="biaoqing-photo">
|
<ul>
|
<li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
|
<li>
|
<span class="emoji-picker-image" style="background-position: -102px -120px;"></span>
|
</li>
|
<li>
|
<span class="emoji-picker-image" style="background-position: -133px -120px;"></span>
|
</li>
|
<li>
|
<span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
|
</li>
|
<li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
|
<li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
|
<li>
|
<span class="emoji-picker-image" style="background-position: -102px -154px;"></span>
|
</li>
|
<li>
|
<span class="emoji-picker-image" style="background-position: -133px -154px;"></span>
|
</li>
|
<li>
|
<span class="emoji-picker-image" style="background-position: -164px -154px;"></span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script>
|
function timenow() {
|
var myDate = new Date();
|
var times = myDate.toLocaleString();
|
return times
|
}
|
|
document.getElementById('systime').innerHTML = timenow();
|
screenFuc();
|
$(".chatBox").toggle(10);
|
function screenFuc() {
|
var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
|
//屏幕小于768px时候,布局change
|
var winWidth = $(window).innerWidth();
|
|
if (winWidth <= 768) {
|
|
var totalHeight = $(window).height(); //页面整体高度
|
$(".chatBox-info").css("height", totalHeight - topHeight);
|
var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
|
//中间内容高度
|
$(".chatBox-content").css("height", infoHeight - 46);
|
$(".chatBox-content-demo").css("height", infoHeight - 46);
|
|
$(".chatBox-list").css("height", totalHeight - topHeight);
|
$(".chatBox-kuang").css("height", totalHeight - topHeight);
|
$(".div-textarea").css("width", winWidth - 100);
|
} else {
|
$(".chatBox-info").css("height", 495);
|
$(".chatBox-content").css("height", 448);
|
$(".chatBox-content-demo").css("height", 448);
|
$(".chatBox-list").css("height", 495);
|
$(".chatBox-kuang").css("height", 495);
|
$(".div-textarea").css("width", 900);
|
}
|
}
|
(window.onresize = function () {
|
screenFuc();
|
})();
|
//未读信息数量为空时
|
var totalNum = $(".chat-message-num").html();
|
if (totalNum == "") {
|
$(".chat-message-num").css("padding", 0);
|
}
|
$(".message-num").each(function () {
|
var wdNum = $(this).html();
|
if (wdNum == "") {
|
$(this).css("padding", 0);
|
}
|
});
|
|
|
//打开/关闭聊天框
|
$(".chatBtn").click(function () {
|
$(".chatBox").toggle(10);
|
})
|
$(".chat-close").click(function () {
|
$(".chatBox").toggle(10);
|
})
|
//进聊天页面
|
$(".chat-list-people").each(function () {
|
$(this).click(function () {
|
var n = $(this).index();
|
$(".chatBox-head-one").toggle();
|
$(".chatBox-head-two").toggle();
|
$(".chatBox-list").fadeToggle();
|
$(".chatBox-kuang").fadeToggle();
|
|
//传名字
|
$(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());
|
|
//传头像
|
$(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));
|
|
//聊天框默认最底部
|
$(document).ready(function () {
|
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
|
});
|
})
|
});
|
$(".chat-list-people").click();
|
//返回列表
|
$(".chat-return").click(function () {
|
$(".chatBox-head-one").toggle(1);
|
$(".chatBox-head-two").toggle(1);
|
$(".chatBox-list").fadeToggle(1);
|
$(".chatBox-kuang").fadeToggle(1);
|
});
|
|
// 发送信息
|
$("#chat-fasong").click(function () {
|
var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '') //<br>
|
textContent = textContent.trim();
|
if (textContent != "") {
|
$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
|
"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +
|
"<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
|
"<div class=\"chat-avatars\"><img src=\"/static/icon01.png\" alt=\"头像\" /></div> </div> </div>");
|
//发送后清空输入框
|
$(".div-textarea").html("");
|
//聊天框默认最底部
|
$(document).ready(function () {
|
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
|
});
|
document.getElementById('timenow').innerHTML = timenow();
|
|
axios.get('/Liaotian/FInd?key=这里输入自己的key哦&info=' + textContent) .then(res => { console.log(res); var list = res.data.DataList; if (list.length == 0) { reply('没有找到相关回答');
|
} else { for (var i = 0; i < list.length; i++) {
|
|
reply(list[i].question);
|
reply(list[i].anwser);
|
}
|
} }) .catch(function (err) { })
|
|
|
|
}
|
});
|
|
// 发送表情
|
$("#chat-biaoqing").click(function () {
|
$(".biaoqing-photo").toggle();
|
});
|
$(document).click(function () {
|
$(".biaoqing-photo").css("display", "none");
|
});
|
$("#chat-biaoqing").click(function (event) {
|
event.stopPropagation();//阻止事件
|
});
|
|
$(".emoji-picker-image").each(function () {
|
$(this).click(function () {
|
var bq = $(this).parent().html();
|
console.log(bq)
|
$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
|
"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +
|
"<div class=\"right\"> <div class=\"chat-message\"> " + bq + " </div> " +
|
"<div class=\"chat-avatars\"><img src=\"/static/icon01.png\" alt=\"头像\" /></div> </div> </div>");
|
//发送后关闭表情框
|
$(".biaoqing-photo").toggle();
|
//聊天框默认最底部
|
$(document).ready(function () {
|
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
|
});
|
document.getElementById('timenow').innerHTML = timenow();
|
})
|
});
|
//自动回复
|
function reply(textContent) {
|
if (textContent != "") {
|
$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
|
"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +
|
"<div class=\"left\"><div class=\"chat-avatars\"><img src=\"/static/icon01.png\" alt=\"头像\" /></div> " +
|
"<div class=\"chat-message\"> " + textContent + " </div> </div> </div>");
|
//发送后清空输入框
|
// $(".div-textarea").html("");
|
//聊天框默认最底部
|
$(document).ready(function () {
|
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
|
});
|
document.getElementById('timenow').innerHTML = timenow();
|
}
|
}
|
// 发送图片
|
function selectImg(pic) {
|
if (!pic.files || !pic.files[0]) {
|
return;
|
}
|
var reader = new FileReader();
|
reader.onload = function (evt) {
|
var images = evt.target.result;
|
$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
|
"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +
|
"<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
|
"<div class=\"chat-avatars\"><img src=\"/static/icon01.png\" alt=\"头像\" /></div> </div> </div>");
|
//聊天框默认最底部
|
$(document).ready(function () {
|
$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
|
});
|
document.getElementById('timenow').innerHTML = timenow();
|
};
|
|
reader.readAsDataURL(pic.files[0]);
|
|
}
|
|
|
</script>
|
</body>
|
</html>
|
|
|
|
|
|
