|
|
|
|
@ -1,25 +1,38 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="add_box"> |
|
|
|
|
<view class="address_box" v-for="item in addressData" :key="item.name"> |
|
|
|
|
<view class="address_item"> |
|
|
|
|
<view class="top"> |
|
|
|
|
<span>{{item.name}}</span> |
|
|
|
|
<span>{{item.phone}}</span> |
|
|
|
|
<span v-if="item.status == 0">默认</span> |
|
|
|
|
<span>{{item.label}}</span> |
|
|
|
|
</view> |
|
|
|
|
<view class="bottom"> |
|
|
|
|
<view class="left_bot"> |
|
|
|
|
{{item.address}} |
|
|
|
|
<view class="address_box" > |
|
|
|
|
<view class="address_item" v-for="item in addressData" :key="item.name"> |
|
|
|
|
<view class="top_box"> |
|
|
|
|
<view class="top_item"> |
|
|
|
|
<view class="top"> |
|
|
|
|
<span class="name_txt">{{item.name}}</span> |
|
|
|
|
<span class="phone_txt">{{item.phone}}</span> |
|
|
|
|
</view> |
|
|
|
|
<view class="bottom"> |
|
|
|
|
{{item.address}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="right_bot"> |
|
|
|
|
|
|
|
|
|
<view class="edit_box"> |
|
|
|
|
<view class="img_box"> |
|
|
|
|
<image class="img" src="../../../static/image/edit.png" mode=""></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="bottom_item"> |
|
|
|
|
<view v-if="item.status == 0" class="no_checked"></view> |
|
|
|
|
<view v-if="item.status == 1" class="checked"> |
|
|
|
|
<p class="item"></p> |
|
|
|
|
</view> |
|
|
|
|
<p class="no_default" v-if="item.status == 0">设为默认</p> |
|
|
|
|
<p v-if="item.status == 1" class="default_txt">默认地址</p> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore" |
|
|
|
|
:content-text="contentText"></uni-load-more> |
|
|
|
|
<view class="btn_box"> |
|
|
|
|
<p class="btn">添加新地址</p> |
|
|
|
|
</view> |
|
|
|
|
<!-- <uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore" |
|
|
|
|
:content-text="contentText"></uni-load-more> --> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -27,7 +40,10 @@ |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
addressData: [], |
|
|
|
|
addressData: [ |
|
|
|
|
{name:'张三',phone:'15612345678',address:'山东省青岛市市北区大港街道大港三路8号铁路住宅小区6号楼6单元666室',status:1}, |
|
|
|
|
{name:'张三',phone:'15612345678',address:'山东省青岛市市北区大港街道大港三路8号铁路住宅小区6号楼6单元666室',status:0}, |
|
|
|
|
], |
|
|
|
|
current: 0, |
|
|
|
|
size: 10, |
|
|
|
|
hasMore: true, |
|
|
|
|
@ -86,25 +102,140 @@ |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.add_box { |
|
|
|
|
width: 100%; |
|
|
|
|
background: #fff; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.address_box { |
|
|
|
|
width: 95%; |
|
|
|
|
height: 82%; |
|
|
|
|
width: 690rpx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top: 40rpx; |
|
|
|
|
margin-top: 30rpx; |
|
|
|
|
|
|
|
|
|
.address_item { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 200rpx; |
|
|
|
|
border-bottom: 2rpx solid #ccc; |
|
|
|
|
|
|
|
|
|
.bottom { |
|
|
|
|
height: 255rpx; |
|
|
|
|
border-bottom: 1rpx solid #F2F2F2; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
.bottom_item{ |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
.left_bot { |
|
|
|
|
width: 90%; |
|
|
|
|
height: 25%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
.no_checked{ |
|
|
|
|
width: 28rpx; |
|
|
|
|
height: 28rpx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
border: 1rpx solid #666666; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
margin: 0 30rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.checked{ |
|
|
|
|
width: 28rpx; |
|
|
|
|
height: 28rpx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
border: 1rpx solid #D73232; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
margin: 0 30rpx; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
.item{ |
|
|
|
|
width: 16rpx; |
|
|
|
|
height: 16rpx; |
|
|
|
|
background: #D73232; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.default_txt{ |
|
|
|
|
font-size: 22rpx; |
|
|
|
|
color: #D73232; |
|
|
|
|
} |
|
|
|
|
.no_default{ |
|
|
|
|
color: #B8B8B8; |
|
|
|
|
font-size: 22rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top_box{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 75%; |
|
|
|
|
display: flex; |
|
|
|
|
.top_item{ |
|
|
|
|
width: 85%; |
|
|
|
|
margin-left: 30rpx; |
|
|
|
|
.top{ |
|
|
|
|
margin-top: 30rpx; |
|
|
|
|
display: flex; |
|
|
|
|
height: 40rpx; |
|
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
|
|
.name_txt{ |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #333; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.phone_txt{ |
|
|
|
|
font-size: 22rpx; |
|
|
|
|
color: #999; |
|
|
|
|
margin-left: 20rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.bottom { |
|
|
|
|
width: 484rpx; |
|
|
|
|
height: 74rpx; |
|
|
|
|
font-size: 26rpx; |
|
|
|
|
color: #333; |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
line-height: 40rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.edit_box{ |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.img_box{ |
|
|
|
|
width: 44rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.img{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.btn_box{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 150rpx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 0; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
.btn{ |
|
|
|
|
width: 690rpx; |
|
|
|
|
height: 78rpx; |
|
|
|
|
background: #D73232; |
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
margin-top: 30rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
xuechunyuan
2 years ago
