确认订单
添加收货地址
利用 vant提供的 button组件来实现
页面布局
<view>
<view class="chooseAddressBox">
<van-button type="primary" size="small">+ 选择收货地址</van-button>
</view>
<!-- 分割线 -->
<image src="/assets/order/cart_border@2x.png" class="split_line"/>
</view>
样式
.chooseAddressBox{
text-align: center;
padding: 60rpx 0;
}
.split_line{
display: block;
width: 100%;
height: 7rpx;
}
点击收货地址按钮的时候应该跳转到收获地址接口
methods = {
async chooseAddress() {
// 调用api
let res = await wepy.chooseAddress().catch(err => err)
console.log(res);
// 判断是否返回正确的地址
if (res.errMsg != 'chooseAddress:ok') return;
this.addressInfo = res;
// 存储在缓存中
wepy.setStorageSync('address', res);
this.$apply()
}
}
根据 data 里面的 addressInfo 数据来判断显示按钮还是收货人信息
<view>
<view class="chooseAddressBox" wx:if="{
{addressInfo === null || addressInfo == ''}}">
<van-button type="primary" size="small" @tap="chooseAddress">+ 选择收货地址</van-button>
</view>
<view class="addressInfo" wx:else>收货人信息</view>
<!-- 分割线 -->
<image src="/assets/order/cart_border@2x.png" class="split_line"/>
</view>
收货人信息布局
<view class="addressInfo" wx:else>
<!-- 收货人,联系电话 -->
<view class="box1">
<text>收货人:{
{addressInfo.userName}}</text>
<view @tap="chooseAddress">
<text>联系电话:{
{addressInfo.telNumber}}</text>
<van-icon name="arrow" />
</view>
</view>
<!-- 收货地址 -->
<view class="box2">收货地址:{
{addressStr}}</view>
</view>
样式属性
.addressInfo {
font-size: 26rpx;
padding: 0 10rpx;
.box1 {
display: flex;
justify-content: space-between;
padding: 30rpx 0;
}
.box2 {
padding-bottom: 30rpx;
}
}
需要得到收货地址的信息
methods = {
async chooseAddress() {
...
this.addressStr = this.addressInfo.provinceName