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

	<template>
		<view class="box">
			<!-- <view class="" @click="handleChane">
				改变
			</view> -->
			<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>
	</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 getListData = async () => {
			const res = await addressList()
			dataList.value = res.rows
			total.value = res.total
		}
		
		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()
		})
	</script>

	<style lang="scss">
		.box {
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999999;
			background: #f0f0f0;
		}
		
		
		.address-list {
			padding: 20rpx;
		}
		
		.header {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-bottom: 20rpx;
		}
		
		.add-item {
			display: flex;
			align-items: center;
		}
		
		.add-item image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
		
		.add-item text {
			font-size: 25rpx;
			color: crimson;
		}
		
		.address-item {
			display: flex;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		.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;
		}
	</style>