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" @change="handleRadioChange">
      <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 class="edit-icon" @click="hadlClickEdit(item)">
          <up-icon name="trash" size="16"></up-icon>
        </view>
      </view>
    </up-radio-group>

    <!-- 新增底部按钮 -->
    <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, addressAddressIds } 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 onLoadOptions = ref({})

const hadlClickTo = (item) => {
  console.log(item)
  const {
    address,
    addressId,
    age,
    cityName,
    districtName,
    label,
    name,
    provinceName,
    sex,
    telephone,
    cityCode,
    districtCode,
    provinceCode,
    detailAddress,
  } = 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)}&cityCode=${encodeURIComponent(
    cityCode
  )}&districtCode=${encodeURIComponent(
    districtCode
    )}&provinceCode=${encodeURIComponent(provinceCode)}&detailAddress=${encodeURIComponent(detailAddress)}`

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

const hadlClickEdit = async (item) => {
  try {
    const res = await addressAddressIds(item.addressId) // 使用 addressId
   if (res.code == 200) {
      uni.showToast({
      title: '删除成功',
      icon: 'success',
    })
   }
    await getListData()
  } catch (error) {
    console.error('删除失败', error)
    uni.showToast({
      title: '删除失败',
      icon: 'error',
    })
  }
}
const handlHeader = () => {
  uni.navigateTo({
    url: `/pages_mine/pages/setupUser/Address`,
  })
}

const handleRadioChange = (addressId, item) => {
  console.log('当前选中的 addressId:', addressId)
  const selectedItem = dataList.value.find(
    (item) => item.addressId === addressId
  )
  console.log('选中项完整数据:', selectedItem)
}

// onLoad((options) => {
// 	onLoadOptions.value = JSON.parse(decodeURIComponent(options.onLoadOptions));
// })

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: center; /* 确保垂直居中 */
  justify-content: space-between; /* 让内容均匀分布 */
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative; /* 可选：用于绝对定位 */
  width: 100%;
}
.radio-group {
  flex-shrink: 0;
  /* 禁止压缩 */
  margin-right: 20rpx;
}

.content-wrapper {
  flex: 1;
  min-width: 0;
}

.edit-icon {
  flex-shrink: 0;
  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>