添加地址管理，新增地址页，导入tree树形组件

Liuyi

2024-09-26 0d17d9e049b4750a03ca7c8eb7b435b823446def

 pages/address/index.vue

@@ -1,11 +1,57 @@
<script setup>
	
   import { ref ,onMounted } from 'vue'
   const addressList = ref([
      {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
      {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
      {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
      {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
      {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
      {name:'张大左',phone:'13512334002',address:'重庆 重庆市 北碚区 互联网产业生态园 2-5-1',checked:true,id:'12'},
      {name:'',phone:'',address:'',checked:false,id:''},
      {name:'',phone:'',address:'',checked:false,id:''},
      {name:'',phone:'',address:'',checked:false,id:''},
   ])
   function navTo(){
      let title = '新增地址'
      let id = 0
      uni.navigateTo({
         url:'/pages/addressAdd/index'
      })
   }
</script>
<template>
   <view class="container">
      <navbar title = '地址管理'></navbar>
      <view class="content">
         <view class="main"></view>
         <view class="main">
            <block v-for="(item,index) in addressList">
               <view class="address-item">
                  <view class="user-info">
                     <text>{{item.name}}</text>
                     <text>{{item.phone}}</text>
                  </view>
                  <view class="address-info">{{item.address}}</view>
                  <view class="address-divide"></view>
                  <view class="handel">
                     <view class="handel-left">
                         <radio color = "#4996E3" :value="item.id" :checked="item.checked"></radio>
                        <text>设为默认</text>
                     </view>
                     <view class="handel-right">
                        <view>
                           <image src="../../static/images/address/edit.png" alt=""></image>
                           <text>编辑</text>
                        </view>
                        <view>
                           <image src="../../static/images/address/delete.png" alt=""></image>
                           <text>删除</text>
                        </view>
                     </view>
                  </view>
               </view>
            </block>
         </view>
         <view class="subBtn" @click="navTo()">新增收货地址</view>
      </view>
   </view>
</template>
@@ -16,15 +62,106 @@
      height: 100vh;
      .content{
         width: 100%;
         height:calc(100vh - 176rpx);
         height:calc(100vh - 176rpx - 20rpx);
         background:linear-gradient(to top,#FFFFFF,#E8EFFF);
          padding-top:20rpx;
         .main{
            width: 686rpx;
            height:1262rpx;
            background: #ffaaff;
            height:1162rpx;
            margin:0 auto;
            overflow-y: scroll;
            // background-color: #a6ffd3;
            .address-item{
               width:100%;
               height:254rpx;
               padding:20rpx 0 26rpx;
               box-sizing: border-box;
               margin-bottom:20rpx;
               background: #FFFFFF;
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               align-items:flex-start;
               .user-info{
                  width:100%;
                  padding: 0 65rpx;
                  box-sizing: border-box;
                  display: flex;
                  justify-content: space-between;
                  font-weight: 300;
                  font-size: 32rpx;
                  color: #000000;
               }
               .address-info{
                  padding: 0 65rpx;
                  box-sizing: border-box;
                  font-weight: 300;
                  font-size: 28rpx;
                  color: #646464;
               }
               .address-divide{
                  width: 100%;
                  height: 1rpx;
                  border-bottom:2rpx dashed #D5DDE0;
               }
               .handel{
                  width: 100%;
                  padding: 0 65rpx;
                  box-sizing: border-box;
                  display: flex;
                  justify-content: space-between;
                  align-items:flex-start;
                  .handel-left{
                     radio{
                        color: #000000;
                     }
                     text{
                        font-weight: 300;
                        font-size: 32rpx;
                        color: #0088FF;
                        line-height:28rpx;
                     }
                  }
                  .handel-right{
                     width:35%;
                     height:48rpx;
                     display: flex;
                     justify-content:space-between;
                     align-items:center;
                     view{
                        display: flex;
                        align-items:center;
                        image{
                           width:28rpx;
                           height:28rpx;
                           margin-right:10rpx;
                        }
                        text{
                           font-weight: 300;
                           font-size: 24rpx;
                           color: #373737;
                        }
                     }
                  }
               }
            }
         }
      .subBtn{
         width:686rpx;
         height: 98rpx;
         // margin-top:100rpx;
         padding:0 26rpx;
         box-sizing:border-box;
         background-color:#5EA1FA;
         border-radius:50rpx;
         font-weight: 300;
         font-size: 36rpx;
         color: #FFFFFF;
         line-height:98rpx;
         text-align: center;
         letter-spacing: 2rpx;
         margin: 100rpx auto 0;
      }
      }
   }
</style>