364 lines
20 KiB
HTML
364 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<title>我的消息 </title>
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/css/tpshop.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/css/myaccount.css"/>
|
||
<script src="__STATIC__/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||
|
||
|
||
<body class="bg-f5">
|
||
<style>
|
||
/*消息中心优化*/
|
||
.mesg_container{ width:100%;background-color: #fff; min-height:800px; padding-bottom:50px;}
|
||
.mesg_tab{ width:98%; padding-left:2%;}
|
||
.mesg_tab ul{ overflow:hidden;}
|
||
.mesg_tab ul li{ width:120px; height:60px; float:left; line-height:60px;}
|
||
.mesg_tab ul li a{ padding-bottom:8px;}
|
||
.mesgtab_cur a{ color:red; font-weight:bold; border-bottom:3px solid red;}
|
||
.mesg_infoma{ width:98%; padding-left:2%;}
|
||
.mesg_infoma .mesg_infoitems{ display:none; font-size:14px; margin-top:16px;}
|
||
/*物流消息*/
|
||
.mesg_infoma .mesg_infoitems input[type=checkbox]{ width:16px; height:16px;}
|
||
.mesg_tit{ width:100%;}
|
||
.mesg_tit span,.mesg_tit a{ display:inline-block; height:30px; line-height:30px;}
|
||
.mesg_tit span input[type=checkbox]{ border:1px solid #aeaeae; vertical-align:middle; margin-right:10px;}
|
||
.mesg_tit a{ margin-left:40px;}
|
||
.mesg_tit a img{ vertical-align:middle; margin-top:-3px; margin-right:10px;}
|
||
.mesg_con{ width:100%; margin-top:14px;}
|
||
.logist_lists{ width:100%; padding:0;}
|
||
.logist_lists li{ width:100%; margin-bottom:32px; overflow:hidden;}
|
||
.mesgdeta_check{ padding:0 20px; float:left;}
|
||
.mesgdeta_check input[type=checkbox]{ border:1px solid #ff0000;}
|
||
.mesgdeta_ri{ width:66%; float:left; border:1px solid #d9d9d9;}
|
||
.mesgdeta_fir{ height:40px; line-height:40px; padding:0 20px; border-bottom:1px solid #e6e6e6;}
|
||
.mesgdeta_fir span{ float:left;}
|
||
.mesgdeta_fir i{ width:8px; height:8px; float:left; margin-left:10px; border-radius:50%; background-color:#ff3c3d; margin-top:16px;}
|
||
.mesgdeta_fir a{ float:right; height:100%; margin-left:16px;}
|
||
.mesgdeta_fir a img{ vertical-align:middle; margin-top:-3px;}
|
||
.mesgdeta_fir em{ float:right; display:inline-block; height:18px; margin-top:11px; line-height:18px; padding-right:16px; border-right:1px solid #d9d9d9; color:#999;}
|
||
.mesgdeta_sec{ padding:15px 20px; overflow:hidden;}
|
||
.mesgdeta_sec span{ display:block; float:left; width:64px; height:64px;}
|
||
.mesgdeta_sec span img{ width:100%;}
|
||
.mesgdeta_sec em{ display:block; height:64px; float:right; width:86%;}
|
||
.mesgdeta_sec em p{ height:40px; line-height:20px; overflow:hidden;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
|
||
.mesgdeta_sec em i{ display:inline-block; line-height:14px; margin-top:8px; color:#999;}
|
||
.mesgdeta_thi{ padding:0 20px; border-top:1px solid #e6e6e6;}
|
||
.mesgdeta_thi a{ display:block; line-height:36px; background:url(images/arrow_two.png) center right no-repeat;}
|
||
/*通知消息*/
|
||
.notice_mesgdeta_sec{ padding:20px;}
|
||
.notice_mesgde_thi{ width:100%; padding:0; background-color:#ffefe3;}
|
||
.notice_mesgde_thi a{ margin:0 20px;}
|
||
/*活动消息*/
|
||
.act_mesgde_sec{ padding:15.5px;}
|
||
.act_img{ display:block; width:100%; height:280px; position:relative;text-align: center;}
|
||
.act_img img{ vertical-align:top;height: 100%;}
|
||
.act_img span{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.5); font-size:30px; color:#fff; text-align:center; line-height:280px; font-weight:bold;}
|
||
.active_finish{ color:#999;}
|
||
/*私信*/
|
||
.direct_mesg_check input[type=checkbox]{ margin-top:40px;}
|
||
.directmesg_ri{ width:66%; float:left; border-bottom:1px solid #d9d9d9; border-top:1px solid #d9d9d9; padding:15px 20px; overflow:hidden;}
|
||
.directmesg_img{ width:64px; height:64px; float:left; position:relative;}
|
||
.directmesg_img img{ width:100%;}
|
||
.directmesg_img i{ width:16px; height:16px; border-radius:50%; background-color:#ff4848; color:#fff; font-size:12px; line-height:16px; text-align:center; position:absolute; top:-6px; right:-6px;}
|
||
.directmesg_con{ width:87%; float:right; cursor:pointer;}
|
||
.directmesg_con .mesgdeta_fir{ border:none; padding:0; height:26px; line-height:26px;}
|
||
.directmesg_con .mesgdeta_fir em{ margin-top:4px;}
|
||
.directmesg_con p{ color:#999; margin-top:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||
/*页码
|
||
.paging-pages{ width:100%; text-align:right; margin-top:20px;font-size:14px;margin-bottom:60px;}
|
||
.paging-pages a{ display:inline-block; text-align:center; width:48px; height:36px; line-height:36px; color:#666; border:1px solid #E6E6E6; margin-left:6px;}
|
||
.page-index,.prev-page,.next-page,.last-page{ width:70px!important;}
|
||
.paging-pages span{ display:inline-block; width:80px; height:36px; line-height:36px; color:#999; text-align:center;}
|
||
.paging-pages a:hover{ background-color:#ff4848; color:#fff;}
|
||
.page_cur{background-color:#ff4848;color:#fff!important;}*/
|
||
</style>
|
||
<style>
|
||
/*消息详情*/
|
||
.mesg_deta_con{ width:72%; padding:0 60px; border:1px solid #e6e6e6; margin-top:16px;}
|
||
.mesgdeta_tit{ padding:60px 0 30px; border-bottom:1px dashed #e1e1e1;}
|
||
.mesgdeta_tit h3{ font-size:18px; text-align:center;}
|
||
.mesgdeta_tit p{ color:#999; text-align:center; margin-top:20px;}
|
||
.mesgdeta_tit p i{ margin-right:50px;}
|
||
.mesgdeta_mid{ min-height:464px;}
|
||
.mesgdeta_bot{ padding:25px 0; color:#999; border-top:1px dashed #e1e1e1;}
|
||
.mesgdeta_bot span{ width:100%; height:18px; display:block; line-height:18px;}
|
||
.mesgdeta_bot span em{ float:left;}
|
||
.mesgdeta_bot span a{ width:90%; float:left; color:#333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
|
||
.next_mesg{ margin-top:12px;}
|
||
/*暂无消息*/
|
||
.mesg_none{ margin-top:16px; text-align:center;}
|
||
.mesg_none img{ margin-top:100px;}
|
||
.mesg_none span{ display:block; color:#999; font-size:16px;}
|
||
/*删除消息弹窗*/
|
||
.delmesg_confir{ width:500px; font-size:16px; color:#333;}
|
||
.delmesg_up{ width:90%; height:48px; padding:0 5%; line-height:48px; background-color:#ededed;}
|
||
.delmesg_up b{ float:left;}
|
||
.delmesg_up a{ float:right;}
|
||
.delmesg_down{ width:100%; height:auto; text-align:center; background-color:#fff;}
|
||
.delmesg_down p{ height:130px; line-height:130px;}
|
||
.delmesg_down span{ display:block; width:100%; font-size:14px; border-top:1px solid #e1e1e1; padding:20px 0;}
|
||
.delmesg_down span a{ display:inline-block; width:80px; height:36px; line-height:36px; border-radius:5px;}
|
||
.mesgdel_canc{ border:1px solid #cecece; margin-right:20px;}
|
||
.mesgdel_confir{ background-color:#ff3333; color:#fff;}
|
||
</style>
|
||
<include file="user/header"/>
|
||
<div class="home-index-middle">
|
||
<div class="w1224">
|
||
<div class="g-crumbs"><a href="">我的商城</a><i class="litt-xyb"></i><span>我的消息</span></div>
|
||
<div class="home-main">
|
||
<include file="user/menu"/>
|
||
|
||
<!--消息中心优化后-->
|
||
<div class="ri-menu fr">
|
||
<div class="mesg_container">
|
||
<div class="mesg_tab">
|
||
<ul id="mesg_tab">
|
||
<li <if condition="((null == $Think.get.type) OR ($Think.get.type == 2))">class="mesgtab_cur"
|
||
</if>><a href="{:U('Home/User/message_notice',array('type'=>2))}">物流<notempty name="no_read['message_logistics_no_read']">（{$no_read['message_logistics_no_read']}）</notempty></a></li>
|
||
<li <if condition="((null != $Think.get.type) and ($Think.get.type == 0))">class="mesgtab_cur"
|
||
</if>><a href="{:U('Home/User/message_notice',array('type'=>0))}">通知<notempty name="no_read['message_notice_no_read']">（{$no_read['message_notice_no_read']}）</notempty></a></li>
|
||
<li <if condition="($Think.get.type == 1)">class="mesgtab_cur"
|
||
</if>><a href="{:U('Home/User/message_notice',array('type'=>1))}">活动<notempty name="no_read['message_activity_no_read']">（{$no_read['message_activity_no_read']}）</notempty></a></li>
|
||
<li <if condition="($Think.get.type == 3)">class="mesgtab_cur"
|
||
</if>><a href="{:U('Home/User/message_notice',array('type'=>3))}">私信<notempty name="no_read['message_private_no_read']">（{$no_read['message_private_no_read']}）</notempty></a></li>
|
||
</ul>
|
||
</div>
|
||
<!--消息内容-->
|
||
<div class="mesg_infoma" id="mesg_infoma">
|
||
<div class="mesg_infoitems" style="display:block;">
|
||
<if condition="count($list) gt 0"/>
|
||
<div class="mesg_tit">
|
||
<span><input type="checkbox" onclick="checkedAll(this)" id="checkAll">全选</span>
|
||
<a href="javascript:deletedAllMsg();"><img src="__STATIC__/images/delet.png">删除</a>
|
||
</div>
|
||
</if>
|
||
<div class="mesg_con">
|
||
<ul class="logist_lists">
|
||
<volist name="list" id="v">
|
||
<if condition="(null != $Think.get.type) and ($Think.get.type == 0)"/>
|
||
|
||
<li txt="通知 0">
|
||
<div class="mesgdeta_check"><input type="checkbox" name="msg_id" value="{$v.rec_id}"></div>
|
||
<div class="mesgdeta_ri">
|
||
<div class="mesgdeta_fir">
|
||
<span>{$v.MessageNotice.message_title}</span><empty name="v.is_see"><i></i></empty>
|
||
<a href="javascript:deletedMessage({$v.rec_id});"><img src="__STATIC__/images/delet.png"></a><em>{$v.MessageNotice.send_time_text}</em></div>
|
||
<div class="mesgdeta_sec"><p>{$v.MessageNotice.message_content}</p></div>
|
||
<if condition="$v.MessageNotice.mmt_code eq '123'"/>
|
||
<div class="mesgdeta_thi notice_mesgde_thi"><a href="javascript:void(0);">立即使用</a></div>
|
||
<elseif condition="$v.MessageNotice.mmt_code eq 'message_notice'"/>
|
||
<div class="mesgdeta_thi notice_mesgde_thi"><a href="javascript:MessageNoticeInfo({$v.message_id});">查看详情</a></div>
|
||
<else/>
|
||
<div class="mesgdeta_thi notice_mesgde_thi"><a href="javascript:void(0);">查看详情</a></div>
|
||
</if>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
<elseif condition="$Think.get.type == 1"/>
|
||
|
||
|
||
<li txt="活动 1">
|
||
<div class="mesgdeta_check"><input type="checkbox" name="msg_id" value="{$v.rec_id}"></div>
|
||
<div class="mesgdeta_ri">
|
||
<div class="mesgdeta_fir"><span>{$v.MessageActivity.message_title}</span><empty name="v.is_see"><i></i></empty><a href="javascript:deletedMessage({$v.rec_id});"><img src="__STATIC__/images/delet.png"></a><em>{$v.MessageActivity.send_time_text}</em></div>
|
||
<div class="act_mesgde_sec"><a href="javascript:void(0);" class="act_img"><img src="{$v.MessageActivity.img_uri}"><if condition="($v.MessageActivity.finished)"><span>活动已结束</span></if> </a></div>
|
||
<div class="mesgdeta_thi"><a href="javascript:messageAcitivityInfo('{$v.MessageActivity.home_url}',{$v.rec_id},'{$v.MessageActivity.mmt_code}',{$v.MessageActivity.finished});">查看详情</a></div>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
<elseif condition="$Think.get.type == 3"/>
|
||
<li txt="私信 MessagePrivate 暂时空着">
|
||
<div class="mesgdeta_check direct_mesg_check"><input type="checkbox" name="msg_id" value="{$v.rec_id}"></div>
|
||
<div class="directmesg_ri">
|
||
<div class="directmesg_img"><img src="__STATIC__/images/perslogo.png"><i>3</i></div>
|
||
<div class="directmesg_con">
|
||
<div class="mesgdeta_fir"><span>xx旗舰店客服A</span><a href="javascript:deletedMessage({$v.rec_id});"><img src="__STATIC__/images/delet.png"></a><em>今天 11:28</em></div>
|
||
<p>您好，请问需要什么服务呢？</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<else />
|
||
|
||
|
||
<li txt="物流 2">
|
||
<div class="mesgdeta_check"><input type="checkbox" name="msg_id" value="{$v.rec_id}"></div>
|
||
<div class="mesgdeta_ri">
|
||
<div class="mesgdeta_fir">
|
||
<span>{$v.MessageLogistics.message_title}</span>
|
||
|
||
<empty name="v.is_see"><i></i></empty>
|
||
<a href="javascript:deletedMessage({$v.rec_id});"><img src="__STATIC__/images/delet.png"></a><em>{$v.MessageLogistics.send_time_text}</em></div>
|
||
<div class="mesgdeta_sec"><span><img src="__STATIC__/images/proimg.png"></span><em><p>{$v.MessageLogistics.message_content}</p><i>订单编号：{$v.MessageLogistics.order_sn} </i></em></div>
|
||
<div class="mesgdeta_thi"><a href="javascript:void(0);">查看详情</a></div>
|
||
</div>
|
||
</li>
|
||
|
||
</if>
|
||
|
||
</volist>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!--消息详情-->
|
||
<div class="mesg_infoma" style="display:none;">
|
||
<div class="mesg_deta_con">
|
||
<div class="mesgdeta_tit">
|
||
<h3>此处为该消息/活动标题</h3>
|
||
<p><i>时间：2018-05-02 16 : 36</i><em>来自：xx旗舰店</em></p>
|
||
</div>
|
||
<div class="mesgdeta_mid"></div>
|
||
<div class="mesgdeta_bot">
|
||
<span class="prev-_article"><em>上一篇：</em><a href="">京东7Fresh生鲜超市第二家在哪？怎么样？</a></span>
|
||
<span class="next_mesg"><em>下一篇：</em><a href="">知识付费是焦虑的“止痛药”还是“良方”？这个功能定生死！</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mesg_infoma" style="display:none;" id="message_notice">
|
||
<div class="mesg_deta_con">
|
||
<div class="mesgdeta_tit">
|
||
<h3>活动标题</h3>
|
||
<p><i>时间</i><em>来自</em></p>
|
||
</div>
|
||
<div class="mesgdeta_mid">内容</div>
|
||
</div>
|
||
</div>
|
||
<!--消息为空-->
|
||
<if condition="count($list) == 0"/>
|
||
<div class="mesg_infoma" >
|
||
<div class="mesg_none">
|
||
<img src="__STATIC__/images/mesgnone.png">
|
||
<span>暂无消息记录哦~</span>
|
||
</div>
|
||
</div>
|
||
</if>
|
||
<!--删除消息弹窗-->
|
||
<div class="mesg_infoma" style="background-color:rgba(0,0,0,0.5);display:none;" id="delmsg">
|
||
<div class="delmesg_confir">
|
||
<div class="delmesg_up"><b>删除消息</b><a href="javascript:void(0);" class="tp_cancel"><img src="__STATIC__/images/del_btn.png"></a></div>
|
||
<div class="delmesg_down">
|
||
<p>确定删除该消息吗？</p>
|
||
<span>
|
||
<a href="javascript:void(0);" class="mesgdel_canc tp_cancel">取消</a>
|
||
<a href="javascript:void(0);" class="mesgdel_confir tp_confirm">确定</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="paging-pages">
|
||
{$page}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--footer-s-->
|
||
<div class="footer p">
|
||
<include file="public/footer" />
|
||
</div>
|
||
<!--footer-e-->
|
||
<!--TAB切换-->
|
||
<script>
|
||
|
||
$(function() {
|
||
// 全选或不全选
|
||
$('input[name=msg_id]').change(function(){
|
||
var flage = false;
|
||
if ($(this).is(":checked")) {
|
||
flage = true;
|
||
$("input[name=msg_id]").each(function(){
|
||
if (!$(this).is(":checked"))
|
||
flage = false;
|
||
});
|
||
}
|
||
$("#checkAll").prop('checked', flage)
|
||
})
|
||
})
|
||
// 设置全选
|
||
function checkedAll(obj) {
|
||
var flage = $(obj).is(":checked"); //全选选中为true，否则为false
|
||
$("input[name=msg_id]").each(function(){
|
||
$(this).prop('checked', flage);
|
||
});
|
||
}
|
||
// 删除
|
||
function deletedAllMsg() {
|
||
var arr = new Array();
|
||
$("input[name=msg_id]").each(function(){
|
||
if ($(this).is(":checked"))
|
||
arr.push($(this).val())
|
||
});
|
||
if (arr.length > 0) {
|
||
deletedMessage(arr.join(','))
|
||
} else {
|
||
layer.alert("至少选一项", {icon: 2, time: 2000})
|
||
}
|
||
}
|
||
|
||
// 删除消息
|
||
function deletedMessage(msg_id) {
|
||
layer.confirm('消息删除后将无法找回！', {
|
||
btn: ['是','否']
|
||
}, function() {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:U('Home/User/deletedMessage')}",
|
||
data: {msg_id: msg_id},
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
if (data.status == 1) {
|
||
layer.alert(data.msg, {icon: 1, time: 0},function () {
|
||
location.reload();
|
||
});
|
||
// $('#message_' + msg_id).remove()
|
||
} else {
|
||
layer.alert(data.msg, {icon: 2, time: 2000});
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.alert('网络错误，请稍后再试', {icon: 2, time: 2000});
|
||
}
|
||
});
|
||
}, function(tmp){
|
||
layer.close(tmp);
|
||
})
|
||
}
|
||
// 查看通知消息详情
|
||
function MessageNoticeInfo(msg_id) {
|
||
location.href = "{:U('Home/User/message_details')}" + "?msg_id=" + msg_id + "&type=0"
|
||
}
|
||
// 查看活动消息详情
|
||
function messageAcitivityInfo(url, msg_id, mmt_code, is_finished) {
|
||
if (is_finished) {
|
||
// layer.alert('已结束', {icon: 2, time: 2000});
|
||
return;
|
||
}
|
||
if (mmt_code == 'team_activity') {
|
||
layer.alert('请在手机上查看', {icon: 2, time: 2000});
|
||
return;
|
||
}
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:U('Home/User/setMessageForRead')}",
|
||
data: {msg_id: msg_id},
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
},
|
||
error: function () {
|
||
}
|
||
});
|
||
location.href = url;
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
</body>
|
||
</html> |