一 概述
- 个人详情页对应的页面为：
pages/address/address - 页面搭建
- 页面逻辑
二 页面搭建
2.1 布局文件(address.wml)
<view class="list">
<!--收货人姓名-->
<view>
<view class="head">收货人姓名</view>
<view class="body">{{addressInfo.userName}}</view>
</view>
<!--邮编-->
<view>
<view class="head">邮编</view>
<view class="body">{{addressInfo.postalCode}}</view>
</view>
<!--地区-->
<view>
<view class="head">地区</view>
<view class="body">{{addressInfo.provinceName}}</view>
</view>
<!--收货地址-->
<view>
<view class="head">收货地址</view>
<view class="body">{{addressInfo.detailInfo}}</view>
</view>
<!--国家码-->
<view>
<view class="head">国家码</view>
<view class="body">{{addressInfo.nationalCode}}</view>
</view>
<!--手机号-->
<view>
<view class="head">手机号</view>
<view>{{addressInfo.telNumber}}</view>
</view>
</view>
<view class="add" bindtap="chooseAddress">
<image class="left" src="/images/6.png" mode="widthFix"/>
<view class="text">获取收货地址</view>
<image class="right" src="/images/right.png" mode="widthFix"></image>
</view>
2.2 页面样式文件(address.wxss)
page{
background-color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 30rpx;
color: black;
}
.list{
font-size: 36rpx;
}
.list>view{
background-color: white;
padding: 20rpx;
border-bottom: 1rpx solid gray;
display: flex;
}
.list .head{
width: 210rpx;
}
.list .body{
flex: 1;
}
.add{
width: 100%;
background-color: white;
position: absolute;
bottom: 0;
padding: 15rpx 15rpx 30rpx 40rpx;
border-top: 1rpx solid gray;
}
.add>image{
width: 50rpx;
margin-top: 15rpx;
margin-right: 20rpx;
}
.add>.left{
float: left;
}
.add>.right{
width: 25rpx;
float: right;
margin-right: 60rpx;
padding-top: 15rpx;
color: gray;
}
.add>.text{
float: left;
margin-top: 20rpx;
}
2.3 修改标题显示内容(address.json)
{
"usingComponents": {},
"navigationBarTitleText": "收货地址"
}
三 页面逻辑—address.js
Page({
/**
* 页面的初始数据
*/
data: {
addressInfo: null
},
chooseAddress: function () {
wx.chooseAddress({
//成功之后，把所有数据存放到addressInfo里，在wxml中调用
success: (result) => {
this.setData({
addressInfo: result
})
},
//接口调试失败信息，打印在控制台中
fail: err => {
console.log(err)
}
})
}
})
四 源码
|