leromro-mini/pages_home/components/volunteerSide/adresss.vue

	<template>
		<view class="box">
			<view class="address-list">
				<up-radio-group v-model="radioValue" @change="handleChane">
					<view v-for="(item, index) in dataList" :key="index" class="address-item">
						<!-- 左侧单选框 -->
						<view class="radio-group">
							<up-radio shape="circle" activeColor="red" :name="item.addressId"></up-radio>
						</view>

						<!-- 中间内容区（自动伸缩） -->
						<view class="content-wrapper">
							<view class="address-line">
								<text class="address-text">
									{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}
								</text>
							</view>
							<view class="contact-info">
								<text class="name">{{ item.name }}</text>
								<text class="phone">{{ item.telephone }}</text>
							</view>
						</view>

						<!-- 右侧编辑图标（固定宽度） -->
						<view class="edit-icon" @click="hadlClickTo(item)">
							<up-icon name="edit-pen" size="16"></up-icon>
						</view>
					</view>
				</up-radio-group>
			</view>
			<!-- 底部新增按钮 -->
			<view class="add-bottom-btn" @click="handlHeader">
			<view class="add-bottom-btn-inner">
				<text class="plus">＋</text>
				<text>新增收货地址</text>
			</view>
		</view>
		</view>
	</template>

	<script setup>
		import {
			onMounted,
			ref
		} from 'vue'
		import {
			addressList
		} from "@/api/userSettings.js"

		const radioValue = ref(null)
		const dataList = ref([])
		const total = ref(0)
		const addressId = ref('')
		const onLoadOptions = ref({})


  	const handlHeader = () => {
		uni.navigateTo({
			url: `/pages_home/pages/setupUser/Address`
		});
	}


		const props = defineProps({
			modelValue: {
				type: Boolean,
				default: false
			},
			addressInfo: {
				type: Object,
				default: () => {}
			},
		})
		const emits = defineEmits([
			'update:modelValue',
			'update:addressInfo'
		])

		function handleChane(addressId, item) {
			const selectedItem = dataList.value.find(item => item.addressId === addressId);
			emits('update:modelValue', false)
			emits('update:addressInfo',selectedItem)
		}

		onMounted(() => {
			getListData()
		})

		const getListData = async () => {
			const res = await addressList()
			dataList.value = res.rows
			total.value = res.total
		}
	</script>

	<style lang="scss">
		.box {
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999999;
			background: #f0f0f0;
			display: flex;
			flex-direction: column;
		}
		
		.address-list {
			flex: 1;
			overflow-y: auto;
			padding: 0 0 120rpx 0;
		}
		
		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: transparent;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 1000;
		}
		
		.add-item {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			background: #fff;
			border-radius: 40rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
			padding: 0 40rpx;
			height: 80rpx;
			margin: 20rpx 0 30rpx 0;
			font-size: 30rpx;
			color: #222;
			font-weight: 500;
		}
		
		.add-item text {
			font-size: 30rpx;
			color: #222;
		}
		
		.address-item {
			display: flex;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			background: transparent;
		}
		
		.radio-group {
			flex-shrink: 0;
			/* 禁止压缩 */
			margin-right: 20rpx;
		}
		
		.content-wrapper {
			flex: 1;
			min-width: 0;
		}
		
		.edit-icon {
			flex-shrink: 0;
			margin-left: 330rpx;
			padding: 8rpx;
		}
		
		.address-text {
			display: inline-block;
			max-width: 100%;
			font-size: 32rpx;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.contact-info {
			display: flex;
			gap: 20rpx;
			margin-top: 8rpx;
		}
		
		.name,
		.phone {
			font-size: 28rpx;
			color: #666;
		}

    .add-bottom-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 24rpx 0 32rpx 0;
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.03);
	}
	.add-bottom-btn-inner {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #222;
		font-weight: 500;
		background: #fff;
		border-radius: 40rpx;
		padding: 8rpx 32rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	}
	.add-bottom-btn-inner .plus {
		font-size: 38rpx;
		color: #f5b400;
		margin-right: 12rpx;
	}
	</style>