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

<template>
	<view class="address-page">
		<!-- 地址列表 -->
		<view class="address-list">


			<!-- 地址项组件 -->
			<address-item v-if="addressList.length > 0" 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)" @click="onSelectAddress(item)" />

			<!-- 空状态 -->
			<view class="empty-state" v-if="addressList.length === 0 && !loadState">
				<u-icon class="empty-icon" name="list" size="60" color="#ccc"></u-icon>
				<text class="empty-text">暂无数据</text>
			</view>

			<!-- 加载状态提示 -->
			<view class="load-more-status" v-if="loadState">
				<text>加载中...</text>
			</view>

			<view class="load-more-status" v-if="loadFinished && addressList.length !== 0">
				<text>没有更多数据了</text>
			</view>
		</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 {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import AddressItem from '@/components/AddressItem.vue'
	import {
		listBook,
		delBook
	} from '../../api/address'


	const pageNum = ref(1)
	const pageSize = ref(10)
	const recordTotal = ref(0)
	const loadState = ref(false)
	const loadFinished = ref(false)

	// 模拟地址数据
	const addressList = ref([])
	const pages = ref(0) //数据总条数

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

	const addType = ref('')

	onLoad((option) => {
		addType.value = option.addType
	})

	onShow(() => {
		pageNum.value = 1
		getAddressList()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		pageNum.value = 1
		getAddressList()
	})

	// 触底加载更多
	onReachBottom(() => {
		if (pageNum.value < pages.value) {
			pageNum.value++;
			getAddressList()
		}
	})

	const onSelectAddress = (address) => {
		console.log('-------address---',address)
		if (!addType.value) {
			return
		}
		uni.$emit('addressSelected', {
			type:addType.value, // 'sender' 或 'receiver'
			address // 选中的地址对象
		})
		uni.navigateBack() // 返回上一页
	}

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

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

	// 删除地址
	const handleDelete = (index) => {
		currentIndex.value = index
		uni.showModal({
			title: '确认删除',
			content: '是否确认删除这个地址',
			// showCancel:false,
			success: async (res) => {
				if (res.confirm) {

					let res = await delBook(addressList.value[index].addressId)

					if (res.code == 200) {
						addressList.value.splice(currentIndex.value, 1)
						currentIndex.value = -1
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

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

	const loadMore = () => {
		pageNum.value++
		getAddressList(true)
	}



	// 获取地址列表
	const getAddressList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}

		uni.showLoading({
			mask: true
		})
		listBook(params).then(res => {
			uni.hideLoading()
			uni.stopPullDownRefresh()

			if (res.code === 200) {
				const list = res.rows || []
				addressList.value = pageNum.value == 1 ? list : [...addressList.value, ...list]
				pages.value = Math.ceil(res.total / pageSize.value) || 0



			}
		}, err => {
			uni.hideLoading()
		})
	}
</script>

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

	.address-list {

		padding: 20rpx 30rpx 152rpx;
		box-sizing: border-box;
	}

	.load-more-status {
		text-align: center;
		padding: 20rpx;
		font-size: 24rpx;
		color: #999;
	}


	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		color: #999999;
	}

	.empty-text {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.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>