上面讲基本的样式和地址信息，但是如果没有地址就需要添加地址，如果有不同的地址就要选地址。

来看看处理方式，

1、回顾

在delivery-layout中

		methods:{goAddress(){uni.navigateTo({url:"/pagesub/pageshop/address/addrlist"})}}

我们可以看到这里的地址

如果选择不一样的地址，就跳转到地址页面 我的地址页面

2、建立地址文件夹和页面  我的地址页面

3、我的地址页面样式

4、我的地址页面代码

<template><view class="selfAddress"><!-- 地址列表 --><view class="headTop"><view class="title">地址簿</view><navigator class="addressBtn" url="/pagesub/pageshop/address/addredit">+ 添加地址</navigator></view><view class="list"><view class="item" v-for="item,index in 3" :key="index"><view class="head"><view class="user">张三,18066668888</view><view class="select"><u-button v-if="false" color="#EC544F" plain size="mini" text="默认地址"></u-button><u-button color="#666" v-else plain size="mini" text="设为默认"></u-button></view></view><view class="more">云南省昆明市高新区XXX楼</view></view></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">
page{background: $page-bg-color;
}
.selfAddress{padding:30rpx;.headTop{@include flex-box();font-size: 30rpx;font-weight: bold;.addressBtn{border:1px solid #000;border-radius: 50rpx;padding:6rpx 15rpx;}}.list{padding-top:30rpx;.item{background: #fff;padding:40rpx 20rpx;margin-bottom: 30rpx;border-radius: 15rpx;.head{@include flex-box();font-weight: bold;}.more{font-size: 28rpx;color:$text-font-color-3;padding-top:10rpx;}}}
}
</style>

5、我的地址页面解析

5.1、地址薄  添加地址

样式：

添加地址   addressBtn

<style lang="scss">
page{background: $page-bg-color;
}
.selfAddress{padding:30rpx;.headTop{@include flex-box();font-size: 30rpx;font-weight: bold;.addressBtn{border:1px solid #000;border-radius: 50rpx;padding:6rpx 15rpx;}}.list{padding-top:30rpx;.item{background: #fff;padding:40rpx 20rpx;margin-bottom: 30rpx;border-radius: 15rpx;.head{@include flex-box();font-weight: bold;}.more{font-size: 28rpx;color:$text-font-color-3;padding-top:10rpx;}}}
}
</style>

5.2、地址列表

默认地址 和设置为默认

<view class="select"><u-button v-if="false" color="#EC544F" plain size="mini" text="默认地址"></u-button><u-button color="#666" v-else plain size="mini" text="设为默认"></u-button>
</view>

相应样式也在 u-button中设置了。Button 按钮 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架