版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25027593/article/details/83893032
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>个人中心</title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/gouwu.css" rel="stylesheet" />
<link href="../css/useritem.css" rel="stylesheet" />
<style type="text/css">
body,
.mui-content {
background: white;
}
#top {
width: 96%;
height: 130px;
background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
margin: 7px auto;
border-radius: 5px;
}
#top .acc_manager {
width: 35%;
font-size: 15px;
float: right;
text-align: center;
height: 30px;
margin-top: 15px;
font-weight: bold;
color: white;
}
#mui-icon-gear .mui-icon-gear {
font-weight: bold;
}
.mui-icon-gear:before {
font-size: 20px;
}
#top .top-info {
width: 80%;
height: 60px;
float: left;
margin-left: 30px;
}
#top .top-info .top-info-img {
width: 23%;
height: 100%;
float: left;
}
#top .top-info .top-info-name {
width: 77%;
height: 100%;
float: left;
}
#top .top-info .top-info-img img {
width: 60px;
height: 60px;
border-radius: 50%;
}
.user-name-box {
margin-left: 5px;
line-height: 35px;
}
.user-id {
margin-left: 5px;
color: white;
font-weight: bold;
font-size: 12px;
line-height: 20px;
}
.user-name {
color: white;
font-weight: bold;
font-size: 15px;
}
.user-name:hover {
color: white;
}
.user-lever {
color: #F9D50D;
font-weight: bold;
font-size: 15px;
}
.user-lever:hover {
color: #FFFF00;
}
.order-top {
margin: 15px 20px;
font-weight: bold;
font-size: 15px;
}
.ft {
font-size: 12px;
color: #E02D26;
font-weight: bold;
display: initial;
}
.bd {
border-right: 2px solid #EFEFF4;
}
.bg {
height: 10px;
background: #EFEFF4;
}
.st {
margin-top: 20px;
}
.sti {
border-radius: 50%;
}
.st_item1 {
background: #F5AB59;
}
.st_item2 {
background: #796BAF;
}
.st_item3 {
background: #E02D26;
}
.st_item4 {
background: #CACACB;
}
.st_item5 {
background: #4DC7BA;
}
.st_item6 {
background: #00A1E9;
}
.st_item7 {
background: #F09300;
}
.st_item8 {
background: #4E83DE;
}
.mui-bar-tab .mui-tab-item.mui-active {
color: #929292;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">个人中心</h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="top">
<div id="btn_accountManager" class="acc_manager mui-pull-right">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">账号管理</span>
</div>
<div class="top-info">
<div class="top-info-img" id="go_photo">
<img src="http://up.qqya.com/allimg/201710-t/17-101804_132321.jpg">
</div>
<div class="top-info-name">
<div class="user-name-box">
<a class="user-name">鬼话连篇</a>
<a class="user-lever">V1</a>
</div>
<div class="user-id">用户ID:10086</div>
</div>
</div>
</div>
<div id="order">
<div class="order-top">
我的订单
</div>
<div class="order-item mui-bar-tab ">
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-daifukuan"></span>
<span class="mui-tab-label">待付款</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-daishouhuo"></span>
<span class="mui-tab-label">待收货</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-daipingjia01"></span>
<span class="mui-tab-label">待评价</span>
</a>
<a class="mui-tab-item bd">
<span class="mui-icon iconfont icon-tuikuan"></span>
<span class="mui-tab-label">退换/售后</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-moban"></span>
<span class="mui-tab-label">全部订单</span>
</a>
</div>
</div>
<div class="bg"></div>
<div id="wallet">
<div class="order-top">
我的钱包
</div>
<div class="order-item mui-bar-tab ">
<a class="mui-tab-item">
<span class="mui-icon ft">6000元</span>
<span class="mui-tab-label">账户余额</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon ft">20张</span>
<span class="mui-tab-label">优惠券</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon ft">2200元</span>
<span class="mui-tab-label">奖金收益</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon ft">6000分</span>
<span class="mui-tab-label">消费积分</span>
</a>
</div>
</div>
<div class="bg"></div>
<div id="menuItem">
<div class="order-item mui-bar-tab st">
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-msnui-market sti st_item1"></span>
<span class="mui-tab-label">我的推广</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-kehu sti st_item2"></span>
<span class="mui-tab-label">我的客户</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-shoucang sti st_item3"></span>
<span class="mui-tab-label">我的收藏</span>
</a>
<a class="mui-tab-item bd">
<span class="mui-icon iconfont icon-tixing sti st_item4"></span>
<span class="mui-tab-label">消息提醒</span>
</a>
</div>
<div class="order-item mui-bar-tab st">
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-zuji sti st_item5"></span>
<span class="mui-tab-label">我的足迹</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-dizhi sti st_item6"></span>
<span class="mui-tab-label">收货地址</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-service sti st_item7"></span>
<span class="mui-tab-label">联系客服</span>
</a>
<a class="mui-tab-item bd">
<span class="mui-icon iconfont icon-shezhi sti st_item8"></span>
<span class="mui-tab-label">设置</span>
</a>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
mui.init();
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true,
deceleration: mui.os.ios ? 0.003 : 0.0009
});
//我的钱包
mui("#wallet").on("tap", ".mui-tab-item", function() {
alert($(this).children()[1].innerHTML.trim())
})
//菜单
mui(".mui-content").on("tap", ".mui-tab-item", function() {
switch($(this).children()[1].innerHTML.trim()) {
case "我的推广":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyExtension.html",
id: "MyExtension.html"
})
break;
case "我的客户":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyCustomer.html",
id: "MyCustomer.html"
})
break;
case "我的收藏":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyCollection.html",
id: "MyCollection.html"
})
break;
case "消息提醒":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MessageReminding.html",
id: "MessageReminding.html"
})
break;
case "我的足迹":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/Myfootprint.html",
id: "Myfootprint.html"
})
break;
case "收货地址":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/ReceivingAddress.html",
id: "ReceivingAddress.html"
})
break;
case "全部订单":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html",
id: "OrderIndex.html"
})
break;
case "待付款":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html",
id: "OrderIndex.html",
extras: {
gotoIndex: 1,
activeTab: "WaitPayment.html"
}
})
break;
case "待收货":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html",
id: "OrderIndex.html",
extras: {
gotoIndex: 4,
activeTab: "WaitReceipt.html"
}
})
break;
case "待评价":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html",
id: "OrderIndex.html",
extras: {
gotoIndex: 5,
activeTab: "WaitEvaluate.html"
}
})
break;
case "退换/售后":
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/ReturnSaleIndex.html",
id: "ReturnSaleIndex.html"
})
break;
default:
break;
}
})
//账号管理
document.getElementById("btn_accountManager").addEventListener("tap", function() {
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/AccountManager.html",
id: "AccountManager.html"
})
})
//点击头像跳转个人资料
document.getElementById("go_photo").addEventListener("tap", function() {
mui.openWindow({
url: "../tab-botton-subpage/File-tap-botton-subpage-5/AccountManager.html",
id: "AccountManager.html"
})
})
</script>
</body>
</html>