先开始我的页面的wxml
<view class="headline" style="padding-top: {{paddingTopNum}}px;">
<view style="padding: 100rpx 30rpx 0rpx 30rpx; display: flex;">
<view style="flex: 1;display: flex;">
<view class="sculpture" bindtap="bindViewTab">
<image style="width: 100%;height: 100%;border-radius: 100%;" src="
{{datalist.img==null?'/Images/wxtx.jpeg':datalist.img}}"></image>
</view>
<view class="click_login" bindtap="bindViewTab">
<view>{{datalist.name==null?'点击登录':datalist.name}}
<span wx:if="{{datalist.type != null}}" class="type">{{datalist.type}}
</span>
</view>
<view style="margin-top: 15rpx;text-align: left;">ID:<span style="margin-
left: 10rpx;">{{ datalist.id==null?'0':datalist.id}}</span></view>
</view>
</view>
<view style="flex: 1;text-align: right;margin-top: 30rpx;" bindtap="setup">
<image style="width: 40rpx; height: 40rpx;" src="/Images/shezhi.png">
</image>
</view>
</view>
</view>
<view style="padding-top: {{pageTopHeight}}px;">
<view class="goods_wrap">
<!-- 订单 -->
<view class="orderforgoods">
<view style="display: flex;border-bottom:1px dashed #e8e8e8;padding: 25rpx;">
<view style="flex: 1;">我的订单</view>
<view class="whole" bindtap="myorder">
全部
<span>></span>
</view>
</view>
<view class="gwt_wrap">
<view style="flex: 1;position: relative;" bindtap="completed">
<view class="yorder">
<image src="/Images/dingdan-daifukuan.png"></image>
</view>
<view class="wp_number" wx:if="{{Paymentlist!=''}}">{{Paymentlist}}
</view>
<view>待付款</view>
</view>
<view style="flex: 1;" bindtap="noSend">
<view class="yorder"><image src="/Images/daishouhuo.png"></image>
</view>
<view>待收货</view>
</view>
<view style="flex: 1;" bindtap="sended">
<view class="yorder"><image src="/Images/qian.png"></image></view>
<view>已完成</view>
</view>
<view style="flex: 1;" bindtap="noPay">
<view class="yorder"><image src="/Images/xinxi.png"></image></view>
<view>已取消</view>
</view>
</view>
</view>
<!-- 钱包 -->
<view class="wallet">
<view class="gwt_wrap">
<view style="flex: 1;" bindtap="mywallet">
<view class="yorder">
<image src="/Images/qianqian.png"></image>
</view>
<view>我的钱包</view>
</view>
<view style="flex: 1;" bindtap="coupon">
<view class="yorder">
<image src="/Images/wodeyouhuiquan.png"> </image>
</view>
<view>优惠券</view>
</view>
<view style="flex: 1;">
<view class="yorder">
<image src="/Images/erweima.png"></image>
</view>
<view>推广名片</view>
</view>
<view style="flex: 1;" bindtap="addmanagement">
<view class="yorder">
<image src="/Images/dizhiguanli.png"></image>
</view>
<view>地址管理</view>
</view>
</view>
<view class="gwt_wrap">
<view style="flex: 1;" bindtap="company">
<view class="yorder">
<image src="/Images/24gl-questionCircle.png"></image>
</view>
<view>关于我们</view>
</view>
<view style="flex: 1;">
<view class="yorder">
<image src="/Images/kefu1.png"></image>
</view>
<view>联系客服</view>
</view>
<view style="flex: 1;" bindtap="refresh">
<view class="yorder">
<image src="/Images/shuaxin.png"></image>
</view>
<view>刷新缓存</view>
</view>
<view style="flex: 1;">
</view>
</view>
</view>
<!-- 团长 -->
<view class="orderforgoods">
<view style="display: flex;border-bottom:1px dashed #e8e8e8;padding: 25rpx;">
<view style="flex: 1;">团长中心</view>
</view>
<view class="gwt_wrap" style="padding-left: 50rpx;">
<view class="applyfor" bindtap="applyfor">
<view class="yorder">
<image src="/Images/shenqing.png"></image>
</view>
<view>申请团长</view>
</view>
</view>
</view>
</view>
</view>
WXSS
/* pages/mine/mine.wxss */
/* 标题 */
.headline{
text-align: center;
background-color: #e44032;
position: fixed;
width: 100%;
padding-bottom: 20rpx;
z-index: 9;
height: 430rpx;
border-radius: 0rpx 0rpx 30rpx 30rpx;
color: #fff;
}
/* 头像 */
.sculpture{
width: 110rpx;
height: 110rpx;
border: 1px solid #fff;
border-radius: 100%;
}
.click_login{
margin:17rpx 30rpx;
}
/* 订单 */
.goods_wrap{
margin: 0rpx 20rpx;
}
.orderforgoods{
width:100%;
display: inline-block;
background-color: #ffffff;
position: relative;
z-index: 9;
border-radius: 20rpx;
}
.whole{
flex: 1;
text-align: right;
font-size: 14px;
color: #6d7a85;
}
.gwt_wrap{
display: flex;
padding: 30rpx;
font-size: 14px;
text-align: center;
}
.gwt_wrap .yorder image{
width: 50rpx;height: 50rpx;
}
.applyfor image{
width: 50rpx;height: 50rpx;
}
/* 钱包 */
.wallet{
width:100%;
display: inline-block;
height: 300rpx;
background-color: #ffffff;
margin: 20rpx 0;
border-radius: 20rpx;
}
/* 个人 */
.type{
font-size: 10px;
background-color:rgba(0, 0, 0, 0.3);
padding: 10rpx;
border-radius: 50px;
}
/* 數量 */
.wp_number{
position: absolute;
top:-10rpx;
margin-left: 105rpx;
border: 1px solid #ea4233;
border-radius: 100rpx;
padding:0rpx 6rpx;
font-size: 11px;
color:#ea4233;
}
现在开始js
var app = getApp()//选项卡
onLoad: function (options) {
setInterval(() => {
var user = wx.getStorageSync('muserlist')//账户存储
this.setData({
datalist:user
})
},1000)
var Paymentlist = wx.getStorageSync('payment')
this.setData({
Paymentlist:Paymentlist.length
})
},
//登录跳转
refresh:function(){
wx.navigateTo({
url:"/components/logoin/logoin",
})
},
//设置
setup:function(){
wx.navigateTo({
url:"/components/setup/setup",
})
},
//钱包
mywallet:function(){
wx.navigateTo({
url:"/components/mywallet/mywallet",
})
},
//优惠券
coupon:function(){
wx.navigateTo({
url:"/components/coupon/coupon",
})
},
//关于我们
company:function(){
wx.navigateTo({
url:"/components/company/company",
})
},
//用户
bindViewTab:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
wx.navigateTo({
url:"/components/bdetails/bdetails",
})
}
},
// 申请
applyfor:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
wx.navigateTo({
url:"/components/applyfor/applyfor",
})
}
},
//我的订单
myorder:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
app.globalData.currentLocation = '',//跳转选项卡
wx.navigateTo({
url:"/components/myorder/myorder",
})
}
},
//已取消
noPay:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
app.globalData.currentLocation = 3,//跳转选项卡页面的位置
wx.navigateTo({
url:"/components/myorder/myorder",
})
}
},
//待付款
completed:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
app.globalData.currentLocation = 0,
wx.navigateTo({
url:"/components/myorder/myorder",
})
}
},
//待收货
noSend:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
app.globalData.currentLocation = 1,
wx.navigateTo({
url:"/components/myorder/myorder",
})
}
},
//已完成
sended:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
app.globalData.currentLocation = 2,
wx.navigateTo({
url:"/components/myorder/myorder",
})
}
},
//收货地址
addmanagement:function(){
var user = wx.getStorageSync('muserlist')
if(!user){
wx.navigateTo({
url:"/components/logoin/logoin",
})
}else{
wx.navigateTo({
url:"/components/management/management",
})
}
},
app.js里面添加
globalData: {
userInfo: null
}
“我的”页面已完成