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 { ref ,onMounted} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app";
import { addressList } from '@/api/userSettings.js'
const radioValue = ref(null)
const dataList = ref([])
const total = ref(0)

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

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

onShow(() => {
  getListData()
})
onMounted(() => {
  getListData()
})
</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>