leromro-mini/pages_mine/pages/selectAddress/index.vue

<template>
	<view class="address-list">
		<!-- 上方区域：图片和"新增"文字在右边 -->
		<view class="header">
			<view class="add-item" @click="handlHeader">
				<image src="../../../static/img/新增.png" mode=""></image>
				<text>新增</text>
			</view>
		</view>

		<up-radio-group v-model="radioValue">
			<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 getListData = async () => {
		const res = await addressList()
		dataList.value = res.rows
		total.value = res.total
		console.log(dataList.value, '>>>>>dataList.value');
	}

	const hadlClickTo = (item) => {
		const {
			address,
			addressId,
			age,
			cityName,
			districtName,
			label,
			name,
			provinceName,
			sex,
			telephone,
			haveContagion
		} = item;

		// 手动构建查询参数
		const params =
			`address=${encodeURIComponent(address)}&addressId=${encodeURIComponent(addressId)}&age=${encodeURIComponent(age)}&cityName=${encodeURIComponent(cityName)}&districtName=${encodeURIComponent(districtName)}&label=${encodeURIComponent(label)}&name=${encodeURIComponent(name)}&provinceName=${encodeURIComponent(provinceName)}&sex=${encodeURIComponent(sex)}&telephone=${encodeURIComponent(telephone)}&haveContagion=${encodeURIComponent(haveContagion)}`;

		// 使用拼接的查询参数进行页面跳转
		uni.navigateTo({
			url: `/pages_mine/pages/selectAddress/edit?${params}`
		});
	};
	
	const handlHeader = ()=>{
		uni.navigateTo({
			url: `/pages_mine/pages/setupUser/Address`
		});
	}

	onMounted(() => {
		getListData()
	})
</script>

<style scoped>
	.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: 300rpx;
		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>