You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.3 KiB
136 lines
3.3 KiB
<template>
|
|
<view class="select-address">
|
|
<view class="default-address">
|
|
<u-cell @click="select" class="celi" :title="(defaultAddress.region || '') + ' ' + (defaultAddress.detailAddress || '')" isLink
|
|
:value="$t('page.address.select_address')">
|
|
<view class="address-info" slot="label">
|
|
{{ (defaultAddress.name || '') + ' ' + (defaultAddress.phone || '') }}
|
|
</view>
|
|
</u-cell>
|
|
</view>
|
|
<u-popup :show="showAddressList" @close="closeAddressList" :round="10">
|
|
<view class="address-list">
|
|
<u-list @scrolltolower="scrolltolower" height="auto">
|
|
<u-list-item v-for="(item,index) in addressList" :key="index">
|
|
<view @click="selectAddress(item)" class="address-item">
|
|
<view class="address-info">
|
|
<view class="user-info">
|
|
<text class="name">{{ item.name }}</text>
|
|
<text class="phone">{{ item.phone }}</text>
|
|
<u-tag v-if="item.default_flag == 1" text="默认" shape="circle" bgColor="#e68534"
|
|
borderColor="#e68534" size="mini"></u-tag>
|
|
</view>
|
|
<view class="address-detail">
|
|
<text class="body">{{ item.region }}</text>
|
|
<text class="detail">{{ item.detailAddress }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="icon">
|
|
<u-icon name="checkbox-mark" @click="selectAddress(item)" size="40rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
<u-list-item>
|
|
<view @click="addAddress" class="address-item">
|
|
<view class="add-address">
|
|
{{ $t('page.address.addAddress') }}
|
|
</view>
|
|
<view class="icon">
|
|
<!-- <u-icon name="edit-pen" size="40rpx"></u-icon> -->
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showAddressList: false,
|
|
addressList: [],
|
|
defaultAddress: {},
|
|
status: 'nomore',
|
|
queryParams: {
|
|
pageSize: 9999,
|
|
currentPage: 0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getAddressList();
|
|
},
|
|
methods: {
|
|
getAddressList() {
|
|
this.request("addressPage", {}, this.queryParams).then(res => {
|
|
this.addressList = res.result.records;
|
|
this.selectAddress(res.result.records[0] || {})
|
|
if (this.addressList.length === res.result.total) {
|
|
this.nomore = true;
|
|
}
|
|
})
|
|
},
|
|
clickListStop(e){
|
|
|
|
},
|
|
addAddress(){
|
|
this.$emit('toAdd')
|
|
},
|
|
scrolltolower() { //滑动到了底部
|
|
// this.queryParams.pageSize += 10;
|
|
// this.getAddressList();
|
|
},
|
|
selectAddress(addressItem) { //用户选择了地址
|
|
this.defaultAddress = addressItem;
|
|
this.showAddressList = false;
|
|
this.$emit('selectAddress', addressItem.id);
|
|
},
|
|
select(){
|
|
this.showAddressList = true;
|
|
},
|
|
closeAddressList(){
|
|
this.showAddressList = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.select-address {
|
|
.default-address{
|
|
.celi {
|
|
background-color: #F8F8F8;
|
|
border-radius: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
.address-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15px 10px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
|
|
|
.user-info {
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.icon {
|
|
// width: ;
|
|
}
|
|
|
|
text {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
.add-address{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|