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)" />
				
				<!-- 空状态 -->
				<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 { 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)
	
	
	onShow(() => {
		pageNum.value = 1
		getAddressList()
	})
	// 下拉刷新
	onPullDownRefresh(()=>{
		pageNum.value = 1
		getAddressList()
	})
	
	// 触底加载更多
	onReachBottom(()=>{
		if (pageNum.value < pages.value) {
			pageNum.value++;
			getAddressList()
		}
	})

	// 设置默认地址
	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>