微信小程序开发之——个人中心-个人中心(5)

订单物流查询

选择收货地址

客服联系方式

2.2 页面样式文件(person.wxss)

page{

background-color: #f4f4f4;

font-size: 32rpx;

}

.avatar{

width: 100%;

background-color: wheat;

height: 400rpx;

display: flex;

justify-content: center;

align-items: center;

}

.avatar>image{

width: 200rpx;

height: 200rpx;

border-radius: 50%;

border: 10rpx solid rgba(0, 0, 0, 0.1);

}

.content{

background-color: white;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

padding: 65rpx 0;

}

.content>view{

flex: 1;

text-align: center;

}

.content>view>image{

width: 64rpx;

height: 50rpx;

}

.menu{

padding: 20rpx;

background-color: white;

​
margin-top: 20rpx;

box-sizing: border-box;

}

.menu>view{

padding: 20rpx;

line-height: 60rpx;

border-bottom: 1px solid gray;

height: 60rpx;

}

.menu>view:last-child{

border: none;

}

.arrow{

width: 30rpx;

height: 32rpx;

float: right;

margin-top: 16rpx;

}

三 页面逻辑—person.js

---

Page({

//点击个人资料

info:function(){

//保留当前页面，点击页面上左脚箭头，返回上一个页面

wx.navigateTo({

url: ‘/pages/detail/detail’,

})

},

//订单物流查询

order:function(e){

//跳转到订单查询页面

wx.navigateTo({

url: ‘/pages/order/order’,

})

},

//选择收货地址

address:function(){

wx.navigateTo({

url: ‘/pages/address/address’,

})

},

//客服联系方式

contact:function(){

wx.makePhoneCall({

phoneNumber: ‘123456789’,

})

}

})

四 源码

• 源码
• 物流查询服务器

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取
**。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-g8Rt3yVa-1719103523238)]一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取