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

一 概述

• 个人中心对应的页面为：pages/person/person
• 页面搭建
• 页面逻辑

二 页面搭建

2.1 布局文件(person.wml)

<!--头像-->
<view class="avatar">
 <image src="/images/avatar.png" mode="scaleToFill"></image>
</view>
<!--付款及订单-->
<view class="content"> 
  <view>
    <image src="/images/iconone.png"></image>
    <view>待付款</view>
  </view>
  <view>
    <image src="/images/icontwo.png"></image>
    <view>已退款</view>
  </view>
  <view>
    <image src="/images/iconthree.png"></image>
    <view>全部订单</view>
  </view>
</view>
<!--个人资料等-->
<view class="menu">
  <view bindtap="info">个人资料
    <image class="arrow" src="/images/arrow.png"></image>
  </view>
  <view bindtap="order">订单物流查询
    <image class="arrow" src="/images/arrow.png"></image>
  </view>
  <view bindtap="address">选择收货地址
    <image class="arrow" src="/images/arrow.png"></image>
  </view>
  <view bindtap="contact">客服联系方式
    <image class="arrow" src="/images/arrow.png"></image>
  </view>
</view>

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',
    })
  }
})

四 源码

• 源码
• 物流查询服务器