微信小程序白色背景简洁的个人中心页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="warp">
    <view>
        <view class="userPic">
            <image src="{{userInfo.avatarUrl}}"></image>
            <text>{{userInfo.nickName}}</text>
        </view>
    </view>
    <view class="myOrder">
        <view class="clearfix br">
            <text class="fl">我的订单</text>
            <text class="fr">></text>
        </view>
        <view class="clearfix paylist">
            <view class="fl" bindtap="no_handle">
                <image src="../../image/pay1.png"></image>
                <span>待付款</span>
            </view>
            <view class="fr" bindtap="handle">
                <image src="../../image/payed1.png"></image>
                <span>已付款</span>
            </view>
        </view>
    </view>
    <view class="myAddress clearfix br" bindtap="toAddress">
        <text class="fl">我的地址</text>
        <span class="fr">></span>
    </view>
</view>

二、wxss样式文件代码如下：

page{background-color: #fff;}
.warp{padding: 0 30rpx;font-family: "微软雅黑";color: #000;font-size: 30rpx;}
.userPic {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}
.userPic image {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userPic text{
  color: #aaa;
}
/*.userPic{width: 200rpx;height: 200rpx;}*/
.myOrder,.myAddress{line-height:80rpx;padding:0 20rpx;border-top: 1px #e6e6e6 solid;}
.myOrder{margin-bottom:40rpx;}
.myOrder .paylist{border-top: 1px #e6e6e6 solid}
.myOrder .paylist view{width:305rpx;text-align: center;}
.myOrder .paylist view image{width:60rpx;height: 60rpx;display: block;margin: 20rpx auto 0 }
.myAddress{border-bottom: 1px #e6e6e6 solid;}

三、js页面代码如下：

var app = getApp();
Page({
    data:{
        userInfo:{}
    },
    onLoad: function () {
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
            //更新数据
            that.setData({
                userInfo:userInfo
            })
        })
    },
    //跳转到编辑地址等信息页面
    toAddress:function(){
        wx.navigateTo({
            url: '../address/address',
            success: function(res){
            // success
            },
            fail: function() {
            // fail
            },
            complete: function() {
            // complete
            }
        })
    },
    //跳转到订单列表
    no_handle:function(e){
        wx.navigateTo({
            url: '../orderList/orderList?type=no_handle',
            success: function(res){
            // success
            },
            fail: function() {
            // fail
            },
            complete: function() {
            // complete
            }
        })
    },
    handle:function(e){
        wx.navigateTo({
            url: '../orderList/orderList?type=handle',
            success: function(res){
            // success
            },
            fail: function() {
            // fail
            },
            complete: function() {
            // complete
            }
        })
    }
    
})

模板简介：该模板名称为【微信小程序白色背景简洁的个人中心页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。