<template>
|
<view>
|
<view class="address-window" :class="address.address==true?'on':''">
|
<view class='title'>选择地址<text class='iconfont icon-guanbi' @tap='close'></text></view>
|
<view class='list'>
|
<view class='item acea-row row-between-wrapper' :class='active==index?"active":""' v-for="(item,index) in addressList"
|
@tap='tapAddress(index,item.id)' :key='index'>
|
<view class='address'>
|
<view class='name'>{{item.realName}}<text class='phone'>{{item.phone}}</text></view>
|
<view class='line1'>{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
|
</view>
|
<view class="icon" :class="active==index?'active':''">
|
<text class="iconfont icon-complete" v-if="active==index"></text>
|
</view>
|
</view>
|
</view>
|
<!-- 无地址 -->
|
<view class='pictrue' v-if="!is_loading && !addressList.length">
|
<image src='https://ossacmall.bluedeer.com.cn/app/static/images/noAddress.png'></image>
|
</view>
|
<view class='addressBnt' @tap='goAddressPages'>选择其他地址</view>
|
</view>
|
<view class='mask' catchtouchmove="true" :hidden='address.address==false' @tap='close'></view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getAddressList
|
} from '@/api/user.js';
|
export default {
|
props: {
|
pagesUrl: {
|
type: String,
|
default: '',
|
},
|
address: {
|
type: Object,
|
default: function() {
|
return {
|
address: true,
|
addressId: 0,
|
};
|
}
|
},
|
isLog: {
|
type: Boolean,
|
default: false,
|
}
|
},
|
data() {
|
return {
|
active: 0,
|
is_loading: true,
|
addressList: []
|
};
|
},
|
|
methods: {
|
tapAddress: function(e, addressid) {
|
this.active = e;
|
let a = {};
|
for (let i = 0, leng = this.addressList.length; i < leng; i++) {
|
if (this.addressList[i].id == addressid) {
|
a = this.addressList[i];
|
}
|
}
|
this.$emit('OnChangeAddress', a);
|
},
|
close: function() {
|
this.$emit('changeClose');
|
this.$emit('changeTextareaStatus');
|
},
|
goAddressPages: function() {
|
this.$emit('changeClose');
|
this.$emit('changeTextareaStatus');
|
uni.navigateTo({
|
url: this.pagesUrl
|
});
|
},
|
getAddressList: function() {
|
let that = this;
|
getAddressList({
|
page: 1
|
}).then(res => {
|
let addressList = res.data.list;
|
that.$set(that, 'addressList', addressList);
|
that.is_loading = false;
|
let defaultAddress = {};
|
//处理默认选中项
|
if(!that.address.addressId) return;
|
for (let i = 0, leng = addressList.length; i < leng; i++) {
|
if (addressList[i].id == that.address.addressId) {
|
that.active = i;
|
defaultAddress = this.addressList[i];
|
}
|
}
|
this.$emit('OnDefaultAddress', defaultAddress);
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.address-window {
|
background-color: #f5f5f5;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
z-index: 101;
|
transform: translate3d(0, 100%, 0);
|
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
}
|
|
.address-window.on {
|
transform: translate3d(0, 0, 0);
|
}
|
|
.address-window .title {
|
font-size: 32rpx;
|
font-weight: bold;
|
text-align: center;
|
height: 123rpx;
|
line-height: 123rpx;
|
position: relative;
|
}
|
|
.address-window .title .iconfont {
|
position: absolute;
|
right: 30rpx;
|
color: #8a8a8a;
|
font-size: 35rpx;
|
}
|
.address-window .list{
|
height: 50vh;
|
overflow-y: scroll;
|
}
|
.address-window .list .item {
|
width: 690rpx;
|
margin: 0 auto 30rpx auto;
|
border-radius: 15rpx;
|
box-sizing: border-box;
|
padding: 30rpx;
|
font-size: 25rpx;
|
color: #333;
|
background-color: #ffffff;
|
}
|
.address-window .list .item .icon{
|
width: 34rpx;
|
height: 34rpx;
|
box-shadow: inset 0 0 0 1rpx #000000;
|
border-radius: 50%;
|
text-align: center;
|
}
|
.address-window .list .item .icon.active{
|
background-color: #FFE20E;
|
box-shadow: unset;
|
}
|
.address-window .list .item .iconfont{
|
font-size: 20rpx;
|
line-height: 34rpx;
|
color: #000000;
|
}
|
.address-window .list .item .address {
|
width: 560rpx;
|
}
|
|
.address-window .list .item .address .name {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #282828;
|
margin-bottom: 4rpx;
|
}
|
|
.address-window .list .item .address .name .phone {
|
margin-left: 18rpx;
|
}
|
|
.address-window .addressBnt {
|
font-size: 27rpx;
|
font-weight: bold;
|
color: #ffffff;
|
text-align: center;
|
line-height: 76rpx;
|
margin: 85rpx auto;
|
width: 382rpx;
|
height: 76rpx;
|
background: #016DCC;
|
border-radius: 11rpx 11rpx 11rpx 11rpx;
|
}
|
|
.address-window .pictrue {
|
width: 414rpx;
|
height: 336rpx;
|
margin: 0 auto;
|
}
|
|
.address-window .pictrue image {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
