這一章主要是頁面布局和退出登錄,還有顯示用戶名,沒有什么新的技術點。
退出登錄代碼:
~~~
/**
* 退出登錄
*/
public function logout(){
// 清除session
session(null);
return $this->success('退出成功',url('index/login/index'));
}
~~~
個人中心頁面調用退出登錄方法:

上面的php代碼就是用來顯示用戶名代碼的。
下面來看一下頁面添加了什么功能:

頁面代碼如下:
~~~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
<meta name="author" content="m.jd.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="__INDEX__/css/base2013.css" charset="gbk">
<link rel="stylesheet" type="text/css" href="__INDEX__/css/myhome1.01.css" charset="gbk">
<script type="text/javascript" src="__INDEX__/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="__INDEX__/js/spin.min.js"></script>
<style></style>
<!-- 對url處理 -->
<script type="text/javascript" src="__INDEX__/js/ojbUrl.js"></script>
<!--數據埋點-->
<script type="text/javascript" src="__INDEX__/js/pingJS.1.0.js"></script>
<!--通用頭尾css js add by lizhenyou 2015-4-17-->
<link rel="stylesheet" type="text/css" href="__INDEX__/css/header.css" charset="utf-8">
<link href="__INDEX__/css/new_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__INDEX__/js/m_common.js"></script>
<link rel="stylesheet" type="text/css" charset="utf-8" href="__INDEX__/css/header(1).css">
<script type="text/javascript" src="__INDEX__/js/downloadAppPlugIn.js"></script>
</head>
<body id="body">
<a name="top"></a>
<header>
<div class="new-footer">
<ul>
<li>
<a href="index.html">
<img id="imggame" src="__INDEX__/images/heard/fenlei.png" />
<span>首頁</span>
</a>
</li>
<li>
<a href="/">
<img id="imggame" src="__INDEX__/images/heard/tognshubang-0604.png"/>
<span>娛樂</span>
</a>
</li>
<li>
<a href="/">
<img id="imggame" src="__INDEX__/images/heard/dianzihsu.png"/>
<span>聊天</span>
</a>
</li>
<li>
<a href="gerenzx.html">
<img id="imggame" src="__INDEX__/images/heard/547bc742N95a14876.png" />
<span>個人中心</span>
</a>
</li>
</ul>
</div>
<!-- 通用頭 div -->
<div id="m_common_header" style="min-height:45px;">
<header class="jd-header">
<div class="jd-header-bar">
<div id="m_common_header_goback" class="jd-header-icon-back">
<a href=""><span></span></a>
</div>
<div class="jd-header-title">我的商城</div>
</div>
<ul id="m_common_header_shortcut" class="jd-header-shortcut" style="display: none;">
<li id="m_common_header_shortcut_m_index">
<a class="J_ping" report-eventid="MCommonHead_home" report-eventparam="" page_name="" href=""> <span class="shortcut-home"></span> <strong>首頁</strong> </a>
</li>
<li class="J_ping" report-eventid="MCommonHead_CategorySearch" report-eventparam="" page_name="" id="m_common_header_shortcut_category_search">
<a href=""> <span class="shortcut-categories"></span> <strong>分類搜索</strong> </a>
</li>
<li class="J_ping" report-eventid="MCommonHead_Cart" report-eventparam="" page_name="" id="m_common_header_shortcut_p_cart">
<a href="" id="html5_cart"> <span class="shortcut-cart"></span> <strong>購物車</strong> </a>
</li>
<li id="m_common_header_shortcut_h_home" class=" current">
<a class="J_ping" report-eventid="MCommonHead_MYJD" report-eventparam="" page_name="" href=""> <span class="shortcut-my-account"></span> <strong>我的商城</strong> </a>
</li>
</ul>
</header>
</div>
</header>
<style type="text/css">
.current-half-width li {
width: 50% !important;
}
</style>
<div class="common-wrapper">
<!--<div class="head-index">-->
<!--<a id="headindex" href="www.baidu.com">點擊回到首頁</a>-->
<!--</div>-->
<div class="head-img">
<span class="my-img" style="background-image:url('__INDEX__/images/gerenzx/defaul.png')"></span>
<p style="color: #CC5291"><?php echo session('susername');?></p>
</div>
<ul class="padding-list current-half-width">
<li>
<a id="waite4Payment" href="">
<p id="waite4PaymentSum">0</p>
<p>待付款</p>
</a>
</li>
<li>
<a id="waitDeliveryOrderList" href="">
<p id="waitDeliveryOrderListSum">0</p>
<p>待確認收貨</p>
</a>
</li>
<!--
-->
</ul>
<ul class="menu-list">
<li>
<a id="quanbudingdan" href="">
<img src="__INDEX__/images/gerenzx/547bc6b5Ncc52a3b8.png" alt="">
<p>全部訂單</p>
</a>
</li>
<li>
<a id="wodeqianbao" href="">
<img src="__INDEX__/images/gerenzx/547bc6dbN3dabf32a.png" alt="">
<p>我的賬戶</p>
</a>
</li>
<li>
<a id="liulanjilu" href="">
<img src="__INDEX__/images/gerenzx/547bc70aNf7e3462a.png" alt="">
<p>瀏覽記錄</p>
</a>
</li>
<li>
<a id="wodeguanzhu" href="">
<img src="__INDEX__/images/gerenzx/547bc6eaN6c97383c.png" alt="">
<p>我的關注</p>
</a>
</li>
<!--<li>-->
<!--<a id="fuwuguanjia" href="">-->
<!--<img src="images/547bc727Nde7da59c.png" alt="">-->
<!--<p>服務管家</p>-->
<!--</a>-->
<!--</li>-->
<!---->
<!--<li>-->
<!--<a id="zhanghuguanli" href="">-->
<!--<img src="images/547bc742N95a14876.png" alt="">-->
<!--<p>賬戶管理</p>-->
<!--</a>-->
<!--</li>-->
<!---->
<!--<li>-->
<!--<a id="wodeyuyue" href="">-->
<!--<img src="images/547bc75fNc5c6209c.png" alt="">-->
<!--<p>我的預約</p>-->
<!--</a>-->
<!--</li>-->
<!---->
<!--<li>-->
<!--<a id="yingyongtuijian" href="">-->
<!--<img src="images/547bc772Nbdf299f1.png" alt="">-->
<!--<p>應用推薦</p>-->
<!--</a>-->
<!--</li>-->
<!---->
</ul>
<ul class="couponIn-list">
<li>
<a id="wodebigouma" href="">
<div class="couponIn-item">
<div class="couponIn-icon"><img src="__INDEX__/images/gerenzx/55546b06Nbd7a17eb.png"></div>
<div class="couponIn-item-info">
<span class="info-title">查看訂單</span>
<span class="info-hint"></span>
</div>
</div>
<div class="couponIn-item">
<div class="couponIn-icon"><img src="__INDEX__/images/gerenzx/55546b06Nbd7a17eb.png"></div>
<div class="couponIn-item-info">
<span class="info-title">收貨地址</span>
<span class="info-hint"></span>
</div>
</div>
<div class="couponIn-item">
<div class="couponIn-icon"><img src="__INDEX__/images/gerenzx/55546b06Nbd7a17eb.png"></div>
<div class="couponIn-item-info">
<span class="info-title">我的投訴</span>
<span class="info-hint"></span>
</div>
</div>
</a>
</li>
</ul>
</div>
<link rel="stylesheet" type="text/css" href="__INDEX__/css/guessing.css" charset="utf-8">
<link rel="stylesheet" type="text/css" href="__INDEX__/css/list.css" charset="utf-8">
<script type="text/javascript" src="__INDEX__/js/jdslider.src.js"></script>
<script type="text/javascript" src="__INDEX__/js/news1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
showHeadInfo();
$('#guessing').jdSlider({
lineNum: 2,
fitToScreen: true
});
});
//顯示頭信息
var showHeadInfo = function() {
var t = (new Date()).valueOf();
jQuery.get('/myJd/showHeadInfo.json?t=' + t, {},
function(data) {
if(data) {
var waite4PaymentSum = data.waite4PaymentSum;
var waitDeliveryOrderListSum = data.waitDeliveryOrderListSum;
var infoCount = data.infoCount;
$('#waite4PaymentSum').html(waite4PaymentSum);
$('#waitDeliveryOrderListSum').html(waitDeliveryOrderListSum);
$('#infoCount').html(infoCount);
/*
if(infoCount > 0){
$('#unread-msg-point').addClass('unread-msg');
}else{
$('#unread-msg-point').removeClass('unread-msg');
}
*/
}
}, 'json');
}
//顯示商品詳情
var showProductDetail = function(wareId, sid, clk, meObj) {
//alert('MMyJD_GuessYouLike' + " | " + wareId + " | " + urlRemoveParam(meObj.href,'sid'));
pingClick(true, 'MMyJD_GuessYouLike', wareId, urlRemoveParam(meObj.href, 'sid'), '');
//埋點 猜猜你喜歡
//可能網絡原因 ajax 訪問服務器的時間過長或者是網絡問題,可能引起跳轉失敗,所以現在是 a標簽上 增加onclick方式.
jQuery.get('/myJd/loveProductDetail.json', {
'wareId': wareId,
'sid': sid,
'clk': clk
},
function(data) {
});
}
$(document).ready(function() {
//埋點
var pingObject = [{
id: 'waite4Payment',
eventId: 'MMyJD_Ordersnotpay'
}, {
id: 'waitDeliveryOrderList',
eventId: 'MMyJD_Ordersnotreceiving'
}, {
id: 'myMessage',
eventId: 'MMyJD_MyMessages'
}, {
id: 'quanbudingdan',
eventId: 'MMyJD_AllOrders'
}, {
id: 'wodeqianbao',
eventId: 'MMyJD_MyPurse'
}, {
id: 'wodeguanzhu',
eventId: 'MMyJD_MyFollows'
}, {
id: 'liulanjilu',
eventId: 'MMyJD_BrowserHistory'
}, {
id: 'fuwuguanjia',
eventId: 'MMyJD_ServiceManager'
}, {
id: 'zhanghuguanli',
eventId: 'MMyJD_AccountManager'
}, {
id: 'wodeyuyue',
eventId: 'MMyJD_MyAppointment'
}, {
id: 'yingyongtuijian',
eventId: 'MMyJD_ApplicationRecommend'
}, {
id: 'wodebigouma',
eventId: 'MMyJD_JCode'
}];
jQuery.each(pingObject, function(i, n) {
var jObj = $("#" + n.id);
jObj.bind("click", function() {
var href = jObj.attr("href").trim();
//alert(n.eventId + " | " + urlRemoveParam(href,'sid'));
pingClick(true, n.eventId, '', urlRemoveParam(href, 'sid'), '');
});
});
});
</script>
<!-- 通用尾 div -->
<div id="m_common_bottom" style="min-height:170px;">
<footer id="m_common_bottom_jd_footer" class="jd-footer">
<div class="jd-1px-line-up"></div>
<ul class="jd-footer-links">
<li class="">
<a class="J_ping" report-eventid="MCommonHTail_Account" report-eventparam="" page_name="" rel="nofollow" href=""><?php echo session('susername');?></a>
</li>
<li>
<a class="J_ping" report-eventid="MCommonHTail_Exit" report-eventparam="" page_name="" rel="nofollow" href="{:url('index/login/logout')}">退出</a>
</li>
<li>
<a class="J_ping" report-eventid="MCommonHTail_Feedback" report-eventparam="" page_name="" rel="nofollow" href="">反饋</a>
</li>
<li>
<a class="J_ping" report-eventid="MCommonHTail_ToTop" report-eventparam="" page_name="" rel="nofollow" href="">回到頂部</a>
</li>
</ul>
<div class="jd-1px-line-up"></div>
<ul class="jd-footer-platforms">
<li id="m_common_bottom_apps" class="jd-footer-icon-apps">
<a class="badge" "=" " report-eventid="MCommonHTail_ClientApp " report-eventparam=" " page_name=" ">客戶端</a></li><li id="m_common_bottom_touchscreen " class="jd-footer-icon-touchscreen current "><a class="J_ping " report-eventid="MCommonHTail_TouchEdition " report-eventparam=" " page_name=" ">觸屏版</a></li><li id="m_common_bottom_pc " class="jd-footer-icon-pc "><a class="J_ping " report-eventid="MCommonHTail_PCEdition " report-eventparam=" " page_name=" ">電腦版</a></li> </ul><div class="jd-1px-line-up "></div><div class="jd-footer-copyright ">Copyright ? 2014-2015 meijiashangcheng.com 版權所有 </div></footer></div>
<div style="display:none; ">
</div>
<script type="text/javascript ">
var jap = {
siteId : 'MO-J2011-1',
topic: 'traffic-jdm',
account : '',
skuid: '',
shopid: '',
orderid: '',
adsCookieName: 'mt_subsite',
jumpAppEnable : 1,
__cookie_jda: '__tra',
__cookie_jdb: '__trb',
__cookie_jdc: '__trc',
__cookie_jdu: '__tru',
__cookie_jdv: '__trv'
};
</script>
<script type="text/javascript " src="__INDEX__/js/pingJS.1.0.js "></script>
<script type="text/javascript ">
pingJS();
</script>
<script type="text/javascript ">
$("#unsupport ").hide();
if(!testLocalStorage()){ //not support html5
if(0!=0 && !$clearCart && !$teamId){
$("#html5_cart_num ").text(0>0>0);
}
}else{
updateToolBar('');
}
$("#html5_cart ").click(function(){
// syncCart('afddc2234d03b7e6974b75f6e79e0fd1',true);
location.href='';
});
function reSearch(){
var depCity = window.sessionStorage.getItem("airline_depCityName ");
if(testSessionStorage() && isNotBlank(depCity) && !/^\s*$/.test(depCity) && depCity!=" "){
var airStr = '<form action="/airline/list.action " method="post " id="reseach ">'
+'<input type="hidden " name="sid " value="afddc2234d03b7e6974b75f6e79e0fd1 "/>'
+'<input type="hidden " name="depCity " value=" '+ window.sessionStorage.getItem("airline_depCityName") +' "/>'
+'<input type="hidden " name="arrCity " value=" '+ window.sessionStorage.getItem("airline_arrCityName") +' "/>'
+'<input type="hidden " name="depDate " value=" '+ window.sessionStorage.getItem("airline_depDate") +' "/>'
+'<input type="hidden " name="depTime " value=" '+ window.sessionStorage.getItem("airline_depTime") +' "/>'
+'<input type="hidden " name="classNo " value=" '+ window.sessionStorage.getItem("airline_classNo") +' "/>'
+'</form>';
$("body ").append(airStr);
$("#reseach ").submit();
}else{
window.location.href='';
}
}
//banner 關閉點擊
$('.div_banner_close').click(function(){
$('#div_banner_header').unbind('click');
jQuery.post('/index/addClientCookieVal.json',function(d){
$('#div_banner_header').slideUp(500);
});
});
//banner 下載點擊
$('.div_banner_download').click(function(){
var downloadUrl = $(this).attr('url');
jQuery.post('',function(d){
window.location.href=downloadUrl;
});
});
</script>
<!--通用頭腳本 add by lizhenyou 2015-3-30 -->
<script>
$(document).ready(function(){
var mchb = new MCommonHeaderBottom();
var title = " ";
var headerArg = {hrederId : 'm_common_header', title:title, sid : 'afddc2234d03b7e6974b75f6e79e0fd1', isShowShortCut : false, selectedShortCut : '4'};
mchb.header(headerArg);
var sid = 'afddc2234d03b7e6974b75f6e79e0fd1';
var pin = 'dahai516802786';
var toPcSkipurl = ''; //跳轉電腦版url
var footerPlatforms = mchb.platformEnum(toPcSkipurl,sid).enum3_1;
var bottomArg = {bottomId : 'm_common_bottom', sid : sid, pin : pin ,footerPlatforms : footerPlatforms};
mchb.bottom(bottomArg);
});
</script>
<script>
var urlRemoveParam = function(url,paramName){
var myurl=new MJdUrl.URL(url);
myurl.remove(paramName); //刪除了 paramName
return myurl.url();
}
</script>
</body>
</html><!--LHC-2015-09-22-->
~~~
頂部主要代碼:
本來打算分開然后用include引入頁面文件的,但是要開啟iis環境,其他方法又沒有那么靈活。所以只好寫進去了
~~~
<div class="new-footer">
<ul>
<li>
<a href="index.html">
<img id="imggame" src="__INDEX__/images/heard/fenlei.png" />
<span>首頁</span>
</a>
</li>
<li>
<a href="/">
<img id="imggame" src="__INDEX__/images/heard/tognshubang-0604.png"/>
<span>娛樂</span>
</a>
</li>
<li>
<a href="/">
<img id="imggame" src="__INDEX__/images/heard/dianzihsu.png"/>
<span>聊天</span>
</a>
</li>
<li>
<a href="gerenzx.html">
<img id="imggame" src="__INDEX__/images/heard/547bc742N95a14876.png" />
<span>個人中心</span>
</a>
</li>
</ul>
</div>
~~~
css代碼:
~~~
.new-footer {
border-top: solid 1px #E9E9E9;
height: 100%;
background: #fff;
/*position: fixed;*/
/*bottom: 0;*/
/*left: 0;*/
width: 100%;
overflow: hidden;
/*position: relative;*/
margin: 0 auto;
max-width: 640px;
min-width: 320px;
z-index: 12;
}
.new-footer ul {
display: inline-block;
width: 100%;
height: 100%;
}
.new-footer ul li {
float: left;
width: 25%;
height: 100%;
}
.new-footer ul li a {
display: block;
height: 100%;
text-align: center;
font-size: 1.4rem;
}
/*.new-footer ul li a img {
margin: 0px 0 0 0;
/*width: 20px;*/
}*/
.new-footer ul li a img.gray{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.new-footer ul li a span {
display: block;
text-align: center;
height: 18px;
line-height: 18px;
font-size: 1.2rem;
}
/*.new-footer ul li a span {
display: block;
text-align: center;
}*/
.new-footer ul li a span.add-span {
width: 45px;
height: 45px;
margin: -19px auto 0 auto;
border-radius: 100%;
line-height: 45px;
margin-bottom: 0px;
background: url(../images/+.png) no-repeat;
background-size: 45px 45px;
}
#imggame{
width: 1.8125em;
height: 1.8125em;
}
~~~
下一章將會實現首頁的輪播圖片廣告修改和登錄狀態檢測。
