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

<template>
	<view class="address-list">
		<view v-for="(item, index) in dataList" :key="index" class="address-item">
			<!-- 左侧单选框 -->
			<view class="radio-group">
				<up-radio-group v-model="value">
					<up-radio shape="circle"></up-radio>
				</up-radio-group>
			</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>
	</view>
</template>

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

	const value = ref('')
	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
	}

	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}`
		});
	};


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

<style scoped>
	.address-list {
		padding: 20rpx;
	}

	.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: 20rpx;
		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>