Dining_Hall/pages/mine/me/myAddress.vue

<template>
  <view class="address-list">
    <Navbar title="我的地址" :showRightText="true" :isBack="false" :text="'新增地址'" @clickIcon="addAddress"/>
    <view
      v-for="(item, index) in addressList"
      :key="index"
      class="address-item"
      @click="handleEdit(index)"
    >
      <view class="address-info">
        <text class="address-text">{{ item.address }}</text>
        <view class="contact-info">
          <text class="contact-text">{{ item.name }}</text>
          <text class="contact-text">{{ item.phone }}</text>
        </view>
      </view>
      <u-icon name="edit-pen-fill" color="#c8c9cc" size="22"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          address: '府前西街与站前北街交叉口南200米',
          name: '冯先生1',
          phone: '153****5876'
        },
        {
          address: '怡馨家园30号楼(近达人街商城)',
          name: '冯先生',
          phone: '153****5876'
        },
        {
          address: '西辛南区46号楼2单元101室',
          name: '冯先生',
          phone: '153****5876'
        }
      ]
    }
  },
  methods: {
    handleEdit(index) {
      // 处理编辑事件
      uni.$u.toast(`编辑第${index + 1}个地址`)
    },
    addAddress() {
      console.log('🚀 ~ handleRightText ~ ')
    },
  }
}
</script>

<style lang="scss" scoped>
.address-list {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 30rpx;
}

.address-item {
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-info {
  flex: 1;

  .address-text {
    font-size: 28rpx;
    color: #333333;
    line-height: 1.5;
    margin-bottom: 8rpx;
  }

  .contact-info {
    display: flex;
    align-items: center;

    .contact-text {
      font-size: 26rpx;
      color: #999999;

      &:first-child {
        margin-right: 20rpx;
      }
    }
  }
}
</style>