You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
7.9 KiB
201 lines
7.9 KiB
{layout name="layout" /}
|
|
<div class="boxwraper">
|
|
<div class="leftwraper">
|
|
<div class="contentwraper">
|
|
<div class="navs">
|
|
<a href="{:url('index')}" class="active"><i class="fa fa-angle-left"></i> 返回上一页</a>
|
|
</div>
|
|
<div class="content">
|
|
<style>
|
|
.chatcontent p{padding:0px 8px !important;margin:0px !important;font-size:1.2rem !important;line-height:1.8rem !important;}
|
|
.chatcontent .title{font-size:1.4rem !important;;line-height:1.8rem !important;margin:10px 0px;display:block;}
|
|
.chatcontent img{max-width:100%;}
|
|
.chatbox{background:rgba(244,242,245,1);min-height:400px;}
|
|
.chatinput {width: 100%;background: #fff;padding: 8px 0px;}
|
|
.chatinput .input {display: inline-block;vertical-align: top;width: 78%;}
|
|
.chatinput input {background: #f4f5f8;border-radius: 10px;border: none;height: 2.8rem;width: 100%;outline: none;text-indent: 10px;}
|
|
.chatinput .btn {display: inline-block;vertical-align: top;width: 20%;text-align: center;float:right;}
|
|
.chatinput button {height: 2.4rem;margin-top: 0.2rem;width:100%;background: url({$yf_home_path}public/images/btnbg.jpg) repeat-x;outline: none;border: none;color: #fff;border-radius: 6px;outline: none;}
|
|
|
|
.chatbox {
|
|
overflow-y: auto;
|
|
overflow-y: scroll;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-box-flex: 2;
|
|
-ms-flex: 2;
|
|
flex: 2;
|
|
height:500px;
|
|
padding:10px 15px;
|
|
}
|
|
.chatbox .chatitem .chatbody {
|
|
flex: 1;
|
|
}
|
|
.chatitem .avatar {
|
|
margin-right: .3rem!important;
|
|
}
|
|
.chatitem {
|
|
display: flex!important;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.chatbox .chatitem .msgrow{ margin-top:8px;align-items: center!important;display: flex!important;}
|
|
.chatbox .right .msgrow{justify-content: flex-end!important;}
|
|
.chatbox .chatitem .chatcontent {
|
|
background-color:#fff;
|
|
max-width: 90%;
|
|
min-width: 10%;
|
|
border-radius: 0 10px 10px 10px;
|
|
font-size:15px;
|
|
padding:0.6rem!important;
|
|
}
|
|
.chatbox .chatitem.right {
|
|
text-align: right;
|
|
}
|
|
.chatbox .red{color:#9f2925;}
|
|
.chatbox .chatitem.right .chatcontent {
|
|
background-color:#9f2925;
|
|
color:#fff;
|
|
text-align: left;
|
|
border-radius: 15px 0 15px 15px;
|
|
}
|
|
.avatar img{
|
|
height:32px;
|
|
width: 32px;
|
|
font-size: 12px;
|
|
border-radius:50%;
|
|
}
|
|
</style>
|
|
<div class="chatbox">
|
|
<div class="container">
|
|
<ul class="chatlist">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chatinput">
|
|
<div class="input">
|
|
<input type="text" name="word" id="word">
|
|
</div>
|
|
<div class="btn">
|
|
<button id="send">发送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightwraper">
|
|
<div class="hots">
|
|
<div class="title">讨论最热帖子</div>
|
|
<div class="wraper">
|
|
{volist name="hots" id="vo"}
|
|
<div class="ritem">
|
|
<a href="{:url('detail',['id'=>$vo['id']])}" >{$vo.name|RemoveXSS}</a>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
<div class="interested">
|
|
<div class="title">你可能最感兴趣的帖子</div>
|
|
<div class="wraper">
|
|
{volist name="marrows" id="vo"}
|
|
<div class="ritem">
|
|
<a href="{:url('detail',['id'=>$vo['id']])}" >{$vo.name|RemoveXSS}</a>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
<div class="postbtn">
|
|
<a href="{:url('article')}" target="__blank"><img src="{$yf_home_path}public/images/postbtn.png" class="wid100"></a>
|
|
<a href="{:url('home/center/mybbs')}" target="__blank"><img src="{$yf_home_path}public/images/userbtn.png" class="wid100"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{$yf_theme_path}public/js/layer/layer.js"></script>
|
|
<script>
|
|
var catehtml='';
|
|
var qlist=[];
|
|
var rlist=[];
|
|
var first=true;
|
|
function getTime(){
|
|
var myDate=new Date();
|
|
return myDate.getHours()+":"+myDate.getMinutes();
|
|
}
|
|
|
|
function scrollToEnd(){
|
|
var h = $(".chatlist").height()-400;
|
|
$('.chatbox').animate({scrollTop:h},800);
|
|
}
|
|
function postHistory(fields){
|
|
var url="{:url('history',['uid'=>$uid,'type'=>$type])}";
|
|
$.post(url,fields,function(data){});
|
|
}
|
|
function getlogs(){
|
|
var url="{:url('ajaxchat',['uid'=>$uid,'type'=>$type])}";
|
|
$.get(url,function(data){
|
|
var res=data.data;
|
|
if(res.length){
|
|
var html='';
|
|
res.forEach(function(item,key){
|
|
var poster=item.poster;
|
|
if(typeof poster=='undefined'||poster==''){
|
|
poster="{$yf_theme_path}/public/img/peo.png";
|
|
}
|
|
{if condition="$type eq 'replay'"}
|
|
if(typeof item.ques!='undefined'&&item.ques){
|
|
html+='<li class="chatitem right"><div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'<i class="zmdi zmdi-check-all text-primary"></i></span>';
|
|
html+='<div class="msgrow "><div class="chatcontent">'+item.ques+'</div></div></div></li>';
|
|
}
|
|
if(typeof item.ans!='undefined'&&item.ans){
|
|
html+='<li class="chatitem "><div class="avatar"><img src="'+poster+'" οnerrοr="javascript:this.src=\'{$yf_theme_path}/public/img/peo.png\';" /></div>';
|
|
html+='<div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'</span><div class="msgrow"><div class="chatcontent">'+item.ans+'</div></div></div></li>';
|
|
}
|
|
{else}
|
|
if(typeof item.ques!='undefined'&&item.ques){
|
|
html+='<li class="chatitem "><div class="avatar"><img src="'+poster+'" οnerrοr="javascript:this.src=\'{$yf_theme_path}/public/img/peo.png\';" /></div>';
|
|
html+='<div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'</span><div class="msgrow"><div class="chatcontent">'+item.ques+'</div></div></div></li>';
|
|
}
|
|
if(typeof item.ans!='undefined'&&item.ans){
|
|
html+='<li class="chatitem right"><div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'<i class="zmdi zmdi-check-all text-primary"></i></span>';
|
|
html+='<div class="msgrow "><div class="chatcontent">'+item.ans+'</div></div></div></li>';
|
|
}
|
|
{/if}
|
|
});
|
|
$(".chatlist").html(html);
|
|
}
|
|
scrollToEnd();
|
|
});
|
|
}
|
|
$(function(){
|
|
getlogs();
|
|
setInterval(function(){
|
|
getlogs();
|
|
},20000);
|
|
$("#send").click(function(){
|
|
var index=layer.load(1, {shade: [0.1,'#fff']});
|
|
var word=$("#word").val();
|
|
word=word.trim();
|
|
if(typeof word=='undefined'||word==''){
|
|
return false;
|
|
}
|
|
var poster="{$poster}";
|
|
if(typeof poster=='undefined'||poster==''){
|
|
poster="{$yf_theme_path}/public/img/peo.png";
|
|
}
|
|
var html='<li class="chatitem"><div class="avatar"><img src="'+poster+'" οnerrοr="javascript:this.src=\'{$yf_theme_path}/public/img/peo.png\';" /></div><div class="chatbody"><span class="datetime">{$nickname},'+getTime()+'<i class="zmdi zmdi-check-all text-primary"></i></span>';
|
|
html+='<div class="msgrow "><div class="chatcontent">'+word+'</div></div></div></li>';
|
|
|
|
$(".chatlist").append(html);
|
|
scrollToEnd();
|
|
$("#word").val('');
|
|
layer.close(index);
|
|
{if condition="$type eq 'replay'"}
|
|
postHistory({'ans':word});
|
|
{else}
|
|
postHistory({'ques':word});
|
|
{/if}
|
|
});
|
|
});
|
|
</script>
|