jd_logistics/jd_logistics-app/pages/address/address_list.vue

<template>
	<view class="address-page">
		<!-- 地址列表 -->
		<scroll-view class="address-list" scroll-y>
			<!-- 地址项组件 -->
			<address-item v-for="(item, index) in addressList" :key="item.id" :address="item"
				:is-default="item.isDefault" @set-default="handleSetDefault(index)" @edit="handleEdit(index)"
				@delete="handleDelete(index)" />
		</scroll-view>

		<!-- 添加新地址按钮 -->
		<view class="add-btn-container">
			<button class="add-btn" @click="handleAddAddress">
				<text class="add-btn-text">添加新地址</text>
			</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import AddressItem from '@/components/AddressItem.vue'

	// 模拟地址数据
	const addressList = ref([{
			id: 1,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路97号',
			isDefault: true
		},
		{
			id: 2,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		},
		{
			id: 3,
			name: '张三',
			phone: '132****5678',
			address: '广东省深圳市罗湖区贝丽北路97号',
			isDefault: false
		}
	])

	// 当前要操作的地址索引
	const currentIndex = ref(-1)

	// 设置默认地址
	const handleSetDefault = (index) => {
		addressList.value.forEach((item, i) => {
			item.isDefault = i === index
		})
	}

	// 编辑地址
	const handleEdit = (index) => {
		console.log('编辑地址:', index)
		// 这里可以跳转到编辑页面
		// uni.navigateTo({ url: '/pages/address/edit?id=' + addressList.value[index].id })
	}

	// 删除地址
	const handleDelete = (index) => {
		currentIndex.value = index
		uni.showModal({
			title: '确认删除',
			content: '是否确认删除这个地址',
			// showCancel:false,
			success: function(res) {
				if (res.confirm) {
					confirmDelete()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	// 确认删除
	const confirmDelete = () => {
		if (currentIndex.value >= 0) {
			addressList.value.splice(currentIndex.value, 1)
			currentIndex.value = -1
		}
	}

	// 添加新地址
	const handleAddAddress = () => {
		console.log('添加新地址')
		uni.navigateTo({
			url: '/pages/address/edit'
		})
	}
</script>

<style scoped>
	.address-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #F5F7FA;
	}

	.address-list {
		flex: 1;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.add-btn-container {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		padding: 32rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}

	.add-btn {
		height: 88rpx;
		background: #1B64F0;
		border-radius: 44rpx;
	}

	.add-btn-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		height: 88rpx;
		line-height: 88rpx;
	}

	/* 按钮激活效果 */
	.add-btn:active {
		opacity: 0.8;
	}
</style>