微信小程序,我的,对应选项卡

先开始我的页面的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
  }

“我的”页面已完成

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值