用户评价页面
1、效果
2、代码（复制即可运行）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>御风剑士</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
/*用户评价样式*/
ul#user_evaluate li{
border-top: 2px dashed #eee;
padding: 30px 0;
list-style:none
}
li.evaluate_li span{
display: inline-block;
vertical-align: top;
}
li.evaluate_li span.img img{
width: 50px;
height:50px;
border-radius: 50%;
margin-right:30px
}
li.evaluate_li span.info{
width: 675px;
display: inline-block;
vertical-align: top;
}
li.evaluate_li span.info h4{
font-size: 12px;
color: #999;
}
li.evaluate_li span.info p.time{
font-size: 12px;
color: #999;
}
li.evaluate_li span.info div.reply_info{
margin-top: 15px;
padding: 15px;
background: #f8f8f8;
font-size: 12px;
color: #999;
}
/*分页点击操作*/
div.switch-tag-wrap {
text-align:right;
}
div.js-switch{
color: #999;
display: inline-block;
font-size: 14px;
width: 60px;
text-align: center;
cursor: pointer;
margin-right: 20px;
}
div.js-switch:hover{
color:red;
}
div.switch-tag-wrap div.fr{
float:right;
}
/*评价选择*/
p.switch-head-line span.mr{
cursor: pointer;
margin-right: 60px;
}
.chooseActive{
color: red;
}
</style>
</head>
<body>
<div class="art-content">
<!-- 评价选择 -->
<p class="switch-head-line">
<label style="width: 80px;color: #999;">排序：</label>
<span class="mr chooseActive" eval_data='1' onclick="chooseEval(this)">好评(6)</span>
<span class="mr" eval_data='2' onclick="chooseEval(this)">中评(0)</span>
<span class="mr" eval_data='3' onclick="chooseEval(this)">差评(1)</span>
</p>
<!-- 评价选择 -->
<ul id="user_evaluate">
<li class="evaluate_li">
<span class="img">
<img src="https://avatar.csdn.net/1/4/1/3_qq_36025814.jpg" alt="头像" />
</span>
<span class="info">
<h4>御风剑士</h4>
<p>你好，很高兴认识你！</p>
<p class="time">2019-04-28</p>
<div class="reply_info"> 回复：你好。 </div>
</span>
</li>
</ul>
<!-- 分页-START -->
<div class="switch-tag-wrap " >
<!--<div class="js-switch next fr" data-external="2" onclick="trunPage(this)">下一页</div>
<div class="js-switch prev fr" data-external="1" onclick="trunPage(this)">上一页</div>
<div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div> -->
</div>
<!-- 分页-END -->
</div>
</body>
<script>
//翻页操作
function trunPage(obj){
var page = $(obj).attr('data-external');
var type = $('p.switch-head-line').find('span.chooseActive').attr('eval_data'); //获取评价类型
getEvalHtml(page, type); //元素追加
}
//选择操作
function chooseEval(obj){
// 点击高亮
$(obj).parent().find('span.chooseActive').removeClass('chooseActive');
$(obj).addClass('chooseActive');
// 点击评价时内容切换
getEvalHtml(1, $(obj).attr('eval_data'));
}
//为了模拟效果，直接写一些固定数据。
function getEvalHtml(page, type){
$('ul#user_evaluate').empty(); //元素清空
$('div.switch-tag-wrap').empty();
$('span#tempNotEva').empty();
//处理评论 START
var data = getDataByParam(page, type);
var dataList = data.list;
if(dataList!=''){ //数据拼接
var liHtml = '';
$.each(dataList, function(key, val){
liHtml +='<li class="evaluate_li">'+
'<span class="img">'+
'<img src="' + val['photo'] + '" alt="" />'+
'</span>'+
'<span class="info">'+
'<h4>' + val['name'] + '</h4>'+
'<p>' + val['content'] + '</p>'+
'<p class="time">' + val['createTime'] + '</p>';
if(val['reply']){
liHtml += '<div class="reply_info"> 回复：' + val['reply'] + ' </div>';
}
liHtml += '</span></li>';
});
//console.log(liHtml);
$('ul#user_evaluate').append(liHtml); //评论数据追加
//处理评论END
//处理分页 START
var pageHtml = '';
if(data['totalPage']>1){
if(data['page']!=data['totalPage']){//当前页不是最后一页?>
pageHtml +='<div class="js-switch next fr" data-external="'+ (data['page']*1+1) +'" onclick="trunPage(this)">下一页</div>';
}
if(data['page']!=1){//当前页不是第一页?>
pageHtml +='<div class="js-switch prev fr" data-external="'+ (data['page']*1-1) +'" onclick="trunPage(this)">上一页</div>';
}
if(data['totalPage']!=1 && data['page']!=1){//总页数不是1页，并且当前页不是第一页?>
pageHtml +='<div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div>';
}
$('div.switch-tag-wrap').append(pageHtml); //页数追加
}
//处理分页END
}else{
$('ul#user_evaluate').text('暂无评价！！！');
}
}
//根据页数，类型获取模拟数据
function getDataByParam(page, type){
var str = '';
var photo = 'https://avatar.csdn.net/1/4/1/3_qq_36025814.jpg';
if(type==1){
str = '{"page":"'+page+'",'+
'"totalPage":3,'+
'"list":['+
'{"content":"你好，这是好评(第'+page+'页)","createTime":"2019-04-27 11:52","name":"走起","photo":"'+photo+'","reply":""},'+
'{"content":"商品很实用(第'+page+'页)","createTime":"2019-04-28 11:53","name":"lrfc","photo":"'+photo+'","reply":"谢谢您的评价(第'+page+'页)"}'+
']}';
}else if(type==2){
str = '{"page":"'+page+'",'+
'"totalPage":0,'+
'"list":[]}';
}else if(type==3){
str = '{"page":"'+page+'",'+
'"totalPage":1,'+
'"list":['+
'{"content":"这个笔芯掉色","createTime":"2019-04-27 11:52","name":"走起","photo":"'+photo+'","reply":""}'+
']}';
}
return JSON.parse(str);
}
//调后台接口动态获取数据
/*
function getEvalHtml(page, type){
$.ajax({
url:'/index/index/get',
type:'post',
dataType:'json',
data:{page:page, type:type},
success:function(data){
if(data.code==1){
$('ul#user_evaluate').empty(); //元素清空
$('div.switch-tag-wrap').empty();
$('span#tempNotEva').empty();
//处理评论 START
var data = data.data;
var dataList = data.list;
if(dataList!=''){
var liHtml = '';
$.each(dataList, function(key, val){
liHtml +='<li class="evaluate_li">'+
'<span class="img">'+
'<img src="' + val['photo'] + '" alt="" />'+
'</span>'+
'<span class="info">'+
'<h4>' + val['name'] + '</h4>'+
'<p>' + val['content'] + '</p>'+
'<p class="time">' + val['createTime'] + '</p>';
if(val['reply']){
liHtml += '<div class="reply_info"> 回复：' + val['reply'] + ' </div>';
}
liHtml += '</span></li>';
});
//console.log(liHtml);
$('ul#user_evaluate').append(liHtml); //评论数据追加
//处理评论END
//处理分页 START
var pageHtml = '';
if(data['totalPage']>1){
if(data['page']!=data['totalPage']){//当前页不是最后一页?>
pageHtml +='<div class="js-switch next fr" data-external="'+ (data['page']*1+1) +'" onclick="trunPage(this)">下一页</div>';
}
if(data['page']!=1){//当前页不是第一页?>
pageHtml +='<div class="js-switch prev fr" data-external="'+ (data['page']*1-1) +'" onclick="trunPage(this)">上一页</div>';
}
if(data['totalPage']!=1 && data['page']!=1){//总页数不是1页，并且当前页不是第一页?>
pageHtml +='<div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div>';
}
$('div.switch-tag-wrap').append(pageHtml); //页数追加
}
//处理分页END
}else{
//$('ul#user_evaluate').text('暂无评价！！！');
}
}else{
alert(data.msg);
}
},
error:function(){
alert('服务器异常！');
}
});
}*/
</script>
</html>
