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

Liuyi

2024-09-29 0560eed4a389f806dc3254a526e929e8476c868a

 pages/address/index.vue

@@ -1,23 +1,66 @@
<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'
   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">
@@ -27,22 +70,22 @@
            <block v-for="(item,index) in addressList">
               <view class="address-item">
                  <view class="user-info">
                     <text>{{item.name}}</text>
                     <text>{{item.phone}}</text>
                     <text>{{item.userName}}</text>
                     <text>{{item.userPhone}}</text>
                  </view>
                  <view class="address-info">{{item.address}}</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.checked"></radio>
                         <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>
                        <view @click="navToModify(item.id)">
                           <image src="../../static/images/address/edit.png" alt=""></image>
                           <text>编辑</text>
                        </view>
                        <view>
                        <view @click="deleteAddress(item.id)">
                           <image src="../../static/images/address/delete.png" alt=""></image>
                           <text>删除</text>
                        </view>
@@ -51,7 +94,7 @@
               </view>
            </block>
         </view>
         <view class="subBtn" @click="navTo()">新增收货地址</view>
         <view class="subBtn" @click="navToAdd()">新增收货地址</view>
      </view>
   </view>
</template>