十五、实战开发 uni-app x 项目（仿京东）- 收货地址

不再讲如何添加新页面了，如不会，可以看

六、实战开发 uni-app x 项目（仿京东）- 分类页-CSDN博客

添加新页面addres.uvue文件，我们先逐行讲解代码，最后附上整个代码

页面功能

• 展示收货地址列表: 展示用户保存的收货地址，包括收货人姓名、电话、详细地址等信息。

• 添加/编辑收货地址: 用户可以添加新的收货地址或编辑已有的收货地址。

• 删除收货地址: 用户可以删除不需要的收货地址。

• 设置默认地址: 用户可以设置默认收货地址。

1. <template> 部分

<template>
  <view class="address">
    <!-- 收货地址列表 -->
    <view class="address-list">
      <view class="address-item" v-for="(item, index) in addressList" :key="index">
        <!-- 收货人信息 -->
        <view class="address-info">
          <text class="name">{
  { item.name }}</text>
          <text class="phone">{
  { item.phone }}</text>
          <text class="default" v-if="item.isDefault">默认</text>
        </view>
        <!-- 详细地址 -->
        <text class="address-detail">{
  { item.detail }}</text>
        <!-- 操作按钮 -->
        <view class="address-action">
          <button class="action-btn" @click="editAddress(index)">编辑</button>
          <button class="action-btn" @click="deleteAddress(index)">删除</button>
          <button class="action-btn" v-if="!item.isDefault" @click="setDefault(index)">设为默认</button>
        </view>
      </view>
    </view>

    <!-- 添加地址按钮 -->
    <view class="address-add">
      <button class="add-btn" @click="addAddress">添加新地址</button>
    </view>
  </view>
</template>

• <view class="address">: 地址管理页面的容器。

• <view class="address-list">: 收货地址列表的容器。

• <view class="address-item">: 每个地址项，v-for 遍历 addressList 数组。

• <view class="address-info">: 收货人信息的容器。

• <text class="name">: 收货人姓名，绑