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

<template>
	<view class="address-page">
		<!-- 地址列表 -->
		<scroll-view class="address-list" scroll-y @scrolltolower="loadMore">
			<!-- 地址项组件 -->
			<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>
		</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 { onShow } from '@dcloudio/uni-app'
	import AddressItem from '@/components/AddressItem.vue'
	import { listBook } 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([{
			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)
	
	
	onShow(() => {
		getAddressList(false)
	})

	// 设置默认地址
	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'
		})
	}
	
	const loadMore = () => {
		pageNum.value++
		getAddressList(true)
	}
	
	
	
	// 获取收益明细列表
	const getAddressList = (isLoadMore = false) => {
		if (loadState.value) return
	
		if (!isLoadMore) {
			pageNum.value = 1
			loadFinished.value = false
			addressList.value = []
		}
		loadState.value = true
		//商品状态(0 待上架  1 上架  2 下架 )
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}
	
		uni.showLoading({mask:true})
		listBook(params).then(res => {
			uni.hideLoading()
			loadState.value = false
			if (res.code === 200) {
				const list = res.rows || []
				const total = res.total || 0
	
	
				if (isLoadMore) {
					addressList.value = [...addressList.value, ...list]
				} else {
					addressList.value = list
				}
				recordTotal.value = total
				
				if(currentStatus.value === "1"){
					saleTotal.value = res.total || 0
				}else{
					downTotal.value = res.total || 0
				}
				
				// 判断是否还有更多数据
				if (list.length < pageSize.value) {
					loadFinished.value = true
				}
			}
		}, err => {
			loadState.value = false
			uni.hideLoading()
		})
	}
	
	
</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;
	}
	
	.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>