完成地址管理新增、删除、编辑、设置默认地址，修改navbar组件

Liuyi

2024-09-29 0560eed4a389f806dc3254a526e929e8476c868a

 pages/address/index.vue

@@ -1,11 +1,100 @@
<script setup>
   import { ref ,onMounted } from 'vue'
   import { searchAddress,editAddress,setAddressDefaultApi,deleteAddressApi } from '../../api/index.js';
   import { onShow } from "@dcloudio/uni-app"
   const addressList = ref([])
   async function getAddressList(){
      await searchAddress({limit:100,page:1}).then((res) =>{
         if(res.code == 200){
            res.data.list.forEach((item) =>{
                res.data.list.forEach((item) =>{
                   item.isDefault = item.isDefault == 1 ? true : false
                  item.addressWhole = item.regionName.replace(/[,#]/g,' ') + item.address
                })
            })
            addressList.value = res.data.list
         }
      })
   }
   async function setDefault(isDefault,id,index1){
      if(isDefault == true){
         console.log('true')
      }else{
         console.log('false')
         await setAddressDefaultApi(id).then((res) =>{
            if(res.code == 200){
               getAddressList()
            }else{
               uni.showToast({
                  title: '设置失败',
                  image: '../../static/images/other/success.svg',
                  duration:500     
               })
            }
         })
      }
   }
   async function deleteAddress(id){
      await deleteAddressApi(id).then((res) =>{
         if(res.code == 200){
            uni.showToast({
               title: '删除成功',
               image: '../../static/images/other/success.svg',
               duration:500     
            })
            getAddressList()
         }
      })
   }
   
   function navToModify(id){
      uni.navigateTo({
         url:`/pages/addressAdd/index?id=${id}`
      })
   }
   function navToAdd(){
      let id = null
      uni.navigateTo({
         url:`/pages/addressAdd/index?id=${id}`
      })
   }
   onShow(async() =>{
      getAddressList()
   })
</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.userName}}</text>
                     <text>{{item.userPhone}}</text>
                  </view>
                  <view class="address-info">{{item.addressWhole}}</view>
                  <view class="address-divide"></view>
                  <view class="handel">
                     <view class="handel-left">
                         <radio color = "#4996E3" :value="item.id" :checked="item.isDefault" @click="setDefault(item.isDefault,item.id,index)"></radio>
                        <text>设为默认</text>
                     </view>
                     <view class="handel-right">
                        <view @click="navToModify(item.id)">
                           <image src="../../static/images/address/edit.png" alt=""></image>
                           <text>编辑</text>
                        </view>
                        <view @click="deleteAddress(item.id)">
                           <image src="../../static/images/address/delete.png" alt=""></image>
                           <text>删除</text>
                        </view>
                     </view>
                  </view>
               </view>
            </block>
         </view>
         <view class="subBtn" @click="navToAdd()">新增收货地址</view>
      </view>
   </view>
</template>
@@ -16,15 +105,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>