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.
303 lines
7.6 KiB
303 lines
7.6 KiB
<template>
|
|
<view class="address-popup-box" :class="{'address-popup-box--page': pageMode}">
|
|
<view v-if="!hideHeader" :style="headerStyle" :class="{'address-header-page': pageMode}">
|
|
<uni-icons v-if="pageMode" type="left" size="24" @tap="$emit('close')" class="address-back-icon"
|
|
:style="backIconStyle"></uni-icons>
|
|
<text class="address-header-title">收货地址</text>
|
|
<uni-icons v-if="!pageMode" type="closeempty" size="24" @tap="$emit('close')" style="position:absolute;right:30rpx;top:20rpx;"></uni-icons>
|
|
</view>
|
|
<view style="padding-bottom: 140rpx;">
|
|
<view v-for="(item, index) in addressList" :key="index" @tap="selectAddress(item)"
|
|
class="address-item">
|
|
<view class="address-info">
|
|
<view class="address-title-row">
|
|
<text v-if="item.isDefault == 1" class="address-default-tag">默认</text>
|
|
<text class="address-title">{{item.areaName || ''}}{{item.floor ? item.floor + '层' : ''}}{{item.roomNum || ''}}</text>
|
|
</view>
|
|
<view style="color: #777;">
|
|
{{item.receiverName}} {{item.receiverPhone}}
|
|
</view>
|
|
</view>
|
|
<view class="address-actions">
|
|
<view @tap.stop="openEdit(item)"
|
|
style="width: 88rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #777;border-radius: 50rpx;color: #777;">
|
|
编辑
|
|
</view>
|
|
<view @tap.stop="deleteAddress(item.id)"
|
|
style="width: 88rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #e43d33;border-radius: 50rpx;color: #e43d33;">
|
|
删除
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="addressList.length === 0" style="text-align: center;color: #999;margin-top: 100rpx;">
|
|
暂无收货地址
|
|
</view>
|
|
</view>
|
|
<view class="bottom-btn" @tap="openAdd">
|
|
新增地址
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
pageMode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hideHeader: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
safeTop: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
addressList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getAddressList();
|
|
},
|
|
computed: {
|
|
headerStyle() {
|
|
if (this.pageMode) {
|
|
return {
|
|
height: (this.safeTop + 58) + 'px',
|
|
lineHeight: '44px',
|
|
paddingTop: this.safeTop + 'px',
|
|
fontSize: '36rpx',
|
|
fontWeight: 700,
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
boxSizing: 'border-box'
|
|
}
|
|
}
|
|
return {
|
|
height: '120rpx',
|
|
lineHeight: '120rpx',
|
|
fontSize: '36rpx',
|
|
fontWeight: 700,
|
|
textAlign: 'center',
|
|
position: 'relative'
|
|
}
|
|
},
|
|
backIconStyle() {
|
|
return {
|
|
position: 'absolute',
|
|
left: '30rpx',
|
|
top: (this.safeTop + 10) + 'px'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getCurrentRegionId() {
|
|
try {
|
|
const area = uni.getStorageSync('area');
|
|
if (!area) return '';
|
|
if (typeof area === 'object') return area.id ? String(area.id) : '';
|
|
const areaInfo = JSON.parse(area);
|
|
return areaInfo.id ? String(areaInfo.id) : '';
|
|
} catch (e) {
|
|
return '';
|
|
}
|
|
},
|
|
getAddressList() {
|
|
let that = this;
|
|
that.tui.request("/app/userAddress/list", "GET", {
|
|
userId: uni.getStorageSync('id'),
|
|
regionId: this.getCurrentRegionId()
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
that.addressList = res.result || [];
|
|
that.syncCache();
|
|
}
|
|
}).catch(() => {});
|
|
},
|
|
syncCache() {
|
|
let cached = uni.getStorageSync('selectedAddress');
|
|
let pending = uni.getStorageSync('pendingSelectedAddress');
|
|
let nextSelect = null;
|
|
if (this.addressList.length > 0) {
|
|
if (pending && pending.id) {
|
|
nextSelect = this.addressList.find(a => String(a.id) === String(pending.id));
|
|
}
|
|
if (!nextSelect && pending) {
|
|
nextSelect = this.addressList.find(a => {
|
|
return String(a.regionId || '') === String(pending.regionId || '') &&
|
|
String(a.areaId || '') === String(pending.areaId || '') &&
|
|
String(a.floor || '') === String(pending.floor || '') &&
|
|
String(a.roomNum || '') === String(pending.roomNum || '') &&
|
|
String(a.receiverName || '') === String(pending.receiverName || '') &&
|
|
String(a.receiverPhone || '') === String(pending.receiverPhone || '');
|
|
});
|
|
}
|
|
if (!nextSelect && cached && cached.id) {
|
|
// Look for the cached address in the fresh list to obtain updated fields if any
|
|
nextSelect = this.addressList.find(a => String(a.id) === String(cached.id));
|
|
}
|
|
if (!nextSelect) {
|
|
// If cached address was deleted or none existed, fallback to default or first
|
|
nextSelect = this.addressList.find(a => a.isDefault == 1) || this.addressList[0];
|
|
}
|
|
}
|
|
if (nextSelect) {
|
|
uni.setStorageSync('selectedAddress', nextSelect);
|
|
this.$emit('syncAddress', nextSelect);
|
|
} else {
|
|
uni.removeStorageSync('selectedAddress');
|
|
this.$emit('syncAddress', null);
|
|
}
|
|
if (pending) uni.removeStorageSync('pendingSelectedAddress');
|
|
uni.removeStorageSync('addressListNeedsRefresh');
|
|
},
|
|
selectAddress(item) {
|
|
this.$emit('selectAddress', item);
|
|
},
|
|
openAdd() {
|
|
if (!this.pageMode) uni.setStorageSync('keepAddressBookOpen', '1');
|
|
uni.navigateTo({
|
|
url: '/package1/address/addAddress'
|
|
});
|
|
},
|
|
openEdit(item) {
|
|
uni.setStorageSync('editingAddress', item);
|
|
if (!this.pageMode) uni.setStorageSync('keepAddressBookOpen', '1');
|
|
uni.navigateTo({
|
|
url: '/package1/address/addAddress?id=' + item.id
|
|
});
|
|
},
|
|
deleteAddress(id) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除该地址吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.tui.request("/app/userAddress/delById", "POST", {id: id}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
that.tui.toast("删除成功",1000);
|
|
that.getAddressList();
|
|
} else {
|
|
that.tui.toast(res.message,1000);
|
|
}
|
|
}).catch(() => {});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.address-popup-box {
|
|
height: 1200rpx;
|
|
}
|
|
|
|
.address-popup-box--page {
|
|
min-height: 100vh;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.address-header-page {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.address-header-page .address-header-title {
|
|
display: block;
|
|
width: 100%;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
text-align: center;
|
|
}
|
|
|
|
.address-back-icon {
|
|
z-index: 2;
|
|
}
|
|
|
|
.address-item {
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 20rpx 40rpx 40rpx;
|
|
background: rgba(247, 248, 248, 0.6);
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.address-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.address-title-row {
|
|
min-height: 70rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.address-default-tag {
|
|
flex-shrink: 0;
|
|
margin-top: 8rpx;
|
|
margin-right: 10rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
background: red;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.address-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
line-height: 42rpx;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.address-actions {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding-top: 25rpx;
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 90%;
|
|
height: 100rpx;
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
border-radius: 100rpx;
|
|
margin: 20rpx auto;
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
z-index: 20;
|
|
}
|
|
|
|
.bottom-btn--disabled {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.address-popup-box--page>.bottom-btn {
|
|
left: 5%;
|
|
}
|
|
|
|
</style>
|