上面講基本的樣式和地址信息，但是如果沒有地址就需要添加地址，如果有不同的地址就要選地址。
來看看處理方式，
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 框架
