空闲时间写个收货地址静态页面，用到时直接拿来用，需要的道友一键复制即可。

• <div class="address"> 是页面的主要容器，包含列表(<div class="lists">) 和添加按钮(<div class="addBtn">)。
• .lists 部分显示地址列表，通过 v-for 指令与Vue的数据绑定循环渲染了5个地址条目。每个条目有标题、详细地址以及设置操作的选项。
•  
• 使用Vue的指令 v-model 或者 :value 可能会在这段HTML中，但现在只看到固定数量的地址。
•  
• .addBtn 中有一个"新增地址"按钮，点击后可能会触发Vue的方法去增加新的地址。
• 运行结果：
• 

 代码如下：

<template>

  <view class="address">

    <view class="lists">

      <view class="item" v-for="(item,index) in 5" :key="index">

        <view class="tit">

          <text>唐先生</text>

          <text>156********06</text>

          <text class="tag">家</text>

        </view>

        <view class="detailAddress">

          <text>广东省 xxx市 xxx区 xxx街道 xxx门</text>

        </view>

        <view class="setbox">

          <view class="default">

            <label>

              <checkbox :value="1" /><text>设为默认</text>

            </label>

          </view>

 

                <view class="set">            <viewclass="setBtn"@click="deleteAddress(index)">删除</view>          

<view class="setBtn"@click="copyAddress(index)">复制</view>           

<view class="setBtn"@click="modifyAddress(index)">修改</view>         

</view>       

 </view>     

 </view>   

 </view>

 

    <view class="addBtn">

      <button class="btn" type="default">新增地址</button>

    </view>

  </view>

</template>

 

<script>

  methods: {
  deleteAddress(index) {
    // 调用服务端接口删除地址
    console.log('删除地址', index);
  },
  copyAddress(index) {
    // 复制地址到剪贴板
    console.log('复制地址', index);
  },
  modifyAddress(index) {
    // 打开修改地址的模态框
    console.log('修改地址', index);
  },
  setDefaultAddress(index) {
    // 设置默认地址的逻辑
    console.log('设置默认地址', index);
  }
}

</script>

 

<style scoped>

  .address {

    padding: 20rpx;

    box-sizing: border-box;

    background-color: #f5f5f5;

    min-height: calc(100vh - 88rpx);

  }

 

  .addBtn {

    width: 100%;

    height: 200rpx;

    background-color: #fff;

    position: fixed;

    bottom: 0;

    left: 0%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 10rpx;

    box-sizing: border-box;

  }

 

  .btn {

    width: 100%;

    background-color: #00aaff;

    color: #fff;

    border-radius: 40rpx;

  }

 

  .lists {

    margin-bottom: 240rpx;

  }

 

  .item {

    padding: 30rpx;

    box-sizing: border-box;

    border-radius: 15rpx;

    background-color: #fff;

    margin-bottom: 20rpx;

  }

 

  .tit {

    font-size: 34rpx;

    font-weight: 700;

    color: #333;

  }

 

  .detailAddress {

    margin: 15rpx 0 30rpx;

    font-size: 30rpx;

    color: #333;

  }

 

  .setbox {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

 

  .set {

    width: 40%;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

 

  .setBtn {

    font-size: 24rpx;

    color: #333;

    background-color: #f1f1f1;

    border-radius: 10rpx;

    padding: 5rpx 15rpx;

    box-sizing: border-box;

  }

 

  /deep/uni-checkbox .uni-checkbox-input {

    width: 18px;

    height: 18px;

  }

 

  .default text {

    font-size: 26rpx;

  }

 

  .tag {

    font-size: 20rpx;

    margin-left: 15rpx;

    padding: 0rpx 10rpx;

    box-sizing: border-box;

    border-radius: 4rpx;

    border: 1px solid #00aaff;

    color: #00aaff;

  }

</style>