304 lines
7.7 KiB
Vue
304 lines
7.7 KiB
Vue
<template>
|
||
<page-container title="选择地址" :showBack="true">
|
||
<view class="address-list">
|
||
<view v-for="(item, index) in addressList" :key="index" class="address-item">
|
||
<view class="address-radio" @click="selectAddress(item)">
|
||
<radio :checked="item.id === selectedAddressId" color="#1296db" />
|
||
</view>
|
||
<view class="address-content" @click="selectAddress(item)">
|
||
<view class="address-top">
|
||
<text class="name">{{ item.receiver_name }}</text>
|
||
<text class="phone">{{ item.receiver_phone }}</text>
|
||
<text v-if="item.is_default === 1" class="default-tag">默认</text>
|
||
</view>
|
||
<view class="address-bottom">
|
||
<text class="address-text">{{ item.detailed_address }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="edit-btn" @click="editAddress(item)">
|
||
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
width="24" height="24">
|
||
<path
|
||
d="M391.467 736.322a31.99 31.99 0 0 1-13.783 8.126l-232.261 66.798c-12.088 3.477-23.276-7.711-19.799-19.799l66.798-232.261a32 32 0 0 1 8.126-13.782l472.869-472.87c12.496-12.496 32.758-12.496 45.254 0L864.335 218.2c12.497 12.496 12.497 32.758 0 45.255L391.467 736.322z m248.009-516.709l77.781 77.782 56.569-56.569-77.782-77.782-56.568 56.569z m-50.912 50.911L265.88 593.209l-31.401 109.182 109.182-31.401 322.685-322.684-77.782-77.782zM129.001 889h768v72h-768v-72z"
|
||
fill="#999999" />
|
||
</svg>
|
||
</view>
|
||
<view class="delete-btn" @click="showDeleteConfirm(item)">
|
||
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
width="24" height="24">
|
||
<path
|
||
d="M417.06 790.286V285.224c0-22.014-17.86-39.874-39.872-39.874-22.014 0-39.874 17.86-39.874 39.874v505.062c0 22.01 17.86 39.87 39.874 39.87 22.012-0.002 39.872-17.862 39.872-39.87z m398.732 93.036c0 29.36-23.804 53.162-53.162 53.162H230.986c-29.36 0-53.164-23.802-53.164-53.162V245.35H98.074v664.552c0 58.72 47.61 106.328 106.33 106.328h584.806c58.72 0 106.33-47.608 106.33-106.328V245.35h-79.748v637.972z m-159.494-93.036V285.224c0-22.014-17.86-39.874-39.872-39.874-22.018 0-39.876 17.86-39.876 39.874v505.062c0 22.01 17.86 39.87 39.876 39.87 22.014-0.002 39.872-17.862 39.872-39.87zM935.412 59.276H576.55c0-29.36-23.8-53.164-53.162-53.164h-53.164c-29.36 0-53.166 23.804-53.166 53.164H84.784c-22.012 0-39.874 17.86-39.874 39.874 0 22.014 17.86 39.874 39.874 39.874h850.628c22.014 0 39.874-17.858 39.874-39.874 0-22.014-17.86-39.874-39.874-39.874z"
|
||
fill="#999999" />
|
||
</svg>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="addressList.length === 0" class="empty-tip">
|
||
<text>暂无收货地址</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="add-btn" @click="addNewAddress">
|
||
<text>新增地址</text>
|
||
</view>
|
||
<template #nav-right>
|
||
<view @click="confirmSelection">确定</view>
|
||
</template>
|
||
</page-container>
|
||
</template>
|
||
|
||
<script>
|
||
import PageContainer from '@/components/page-container/page-container.vue'
|
||
import { getAddressList, deleteAddress } from '@/common/server/userAddress.js'
|
||
|
||
export default {
|
||
components: {
|
||
PageContainer
|
||
},
|
||
data() {
|
||
return {
|
||
addressList: [],
|
||
selectedAddressId: null,
|
||
eventChannel: null
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.load();
|
||
// 获取事件通道
|
||
this.eventChannel = this.getOpenerEventChannel();
|
||
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
|
||
this.eventChannel.on('acceptDataFromOpenerPage', (data) => {
|
||
console.log('从打开页面接收的数据:', data);
|
||
if (data && data.selectedAddressId) {
|
||
this.selectedAddressId = data.selectedAddressId;
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
async load() {
|
||
try {
|
||
const res = await getAddressList();
|
||
if (res.status === 1 && res.data) {
|
||
// 如果有默认地址且未选择地址，则默认选中默认地址
|
||
const defaultAddress = res.data.find(item => item.is_default === 1);
|
||
if (defaultAddress && !this.selectedAddressId) {
|
||
this.selectedAddressId = defaultAddress.id;
|
||
}
|
||
|
||
// 将地址列表保存到本地
|
||
this.addressList = res.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '获取地址列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('获取地址列表失败', error);
|
||
uni.showToast({
|
||
title: '网络异常，请稍后再试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
selectAddress(item) {
|
||
// 只更新选中状态，不立即返回
|
||
this.selectedAddressId = item.id;
|
||
},
|
||
|
||
editAddress(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/other/address_edit?id=' + item.id
|
||
});
|
||
},
|
||
|
||
addNewAddress() {
|
||
uni.navigateTo({
|
||
url: '/pages/other/address_edit'
|
||
});
|
||
},
|
||
|
||
// 显示删除确认对话框
|
||
showDeleteConfirm(item) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要删除该收货地址吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
await this.deleteAddress(item.id);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 删除地址
|
||
async deleteAddress(id) {
|
||
try {
|
||
uni.showLoading({
|
||
title: '删除中...'
|
||
});
|
||
|
||
const res = await deleteAddress({
|
||
id: id
|
||
});
|
||
|
||
uni.hideLoading();
|
||
|
||
if (res.status === 1) {
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 重新加载地址列表
|
||
this.load();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '删除失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('删除地址失败', error);
|
||
uni.showToast({
|
||
title: '网络异常，请稍后再试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 确认选择并返回上一页
|
||
confirmSelection() {
|
||
// 如果没有选中任何地址，提示用户
|
||
if (!this.selectedAddressId) {
|
||
return uni.showToast({
|
||
title: '请选择一个收货地址',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
// 获取选中的地址对象
|
||
const selectedAddress = this.addressList.find(item => item.id === this.selectedAddressId);
|
||
if (!selectedAddress) {
|
||
return uni.showToast({
|
||
title: '所选地址不存在',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
// 将选中的地址传回上一页面
|
||
if (this.eventChannel) {
|
||
this.eventChannel.emit('selectAddress', {
|
||
address: selectedAddress
|
||
});
|
||
|
||
// 返回上一页
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.address-list {
|
||
padding: 0 30rpx;
|
||
background-color: #fff;
|
||
|
||
.address-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx 0;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.address-radio {
|
||
width: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.address-content {
|
||
flex: 1;
|
||
margin: 0 20rpx;
|
||
|
||
.address-top {
|
||
margin-bottom: 10rpx;
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.default-tag {
|
||
display: inline-block;
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
background-color: #1296db;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.address-bottom {
|
||
.address-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-btn,
|
||
.delete-btn {
|
||
width: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
|
||
.icon {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.add-btn {
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
height: 90rpx;
|
||
background-color: #1296db;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
border-radius: 45rpx;
|
||
}
|
||
</style> |