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

Liuyi

2024-09-29 0560eed4a389f806dc3254a526e929e8476c868a

 pages/addressAdd/index.vue

@@ -1,12 +1,86 @@
<script setup>
   import { onMounted, ref }  from 'vue';
   import { getRegionApi,creatUserArchive } from '../../api/index.js';
   import { onMounted, ref, watchEffect }  from 'vue';
   import { getRegionApi,creatUserArchive,getAddressApi,editAddressApi } from '../../api/index.js';
   import { onLoad } from "@dcloudio/uni-app"
	
   const addressId = ref()
   const pageTitle = ref('新增地址')
   const isCheckedDefault =ref(false)
   const form = ref({
      userName:'',
      userPhone:'',
      listRegion:[],
      userAddress:'',
      isDefault:null,
   })
   //获取地址
   async function getAddress(){
      if(addressId.value){
         pageTitle.value = "编辑地址"
         await getAddressApi(addressId.value).then((res) =>{
            form.value.id = res.data.id
            form.value.userName = res.data.userName
            form.value.userPhone = res.data.userPhone
            form.value.listRegion = res.data.region.replace(/#/g,'').split(',')
            form.value.userAddress = res.data.address
            form.value.isDefault = res.data.isDefault 
            regionName.value =  res.data.regionName.replace(/[#,]/g,' ')
            isCheckedDefault.value = form.value.isDefault == 1 ? true : false
            pageTitle.value = "编辑地址"
            console.log('form',form.value)
         })
      }
   }
   onLoad(async(option)=>{
      addressId.value = option.id
      console.log('1')
   })
   onMounted(()=>{
      getAddress()
   })
   function change(e){
      form.value.isDefault = e.detail.value ? 1 : 0
   }
   //提交表单数据
   async function submit(){
      //修改地址
      if(form.value.id){
         await editAddressApi(form.value).then((res) =>{
            if(res.code == 200){
               uni.showToast({
                  title: '修改成功',
                  image: '../../static/images/other/success.svg',
                  duration:500     
               })
               setTimeout(() =>{
                  uni.navigateBack()
                  form.value = {}
               },500)
            }
         })
      }else{
      //新增地址
         await creatUserArchive(form.value).then((res) =>{
            if(res.code == 200){
               uni.showToast({
                  title: '新增成功',
                  image: '../../static/images/other/success.svg',
                  duration:500     
               })
               setTimeout(() =>{
                  uni.navigateBack()
                  form.value = {}
               },500)
            }
         })
      }
   }
   
   const DaTreeRef = ref()
   const treeListData = ref([])
   const selectRegionName = ref()
   const isExpandIcon = ref(false)
   const regionName = ref('')
   //展开关闭选择框
   function expandRegion(){
      if(isExpandIcon.value){
         isExpandIcon.value = false
@@ -40,8 +114,7 @@
      nodeList.forEach((item)=>{
         nameList.push(item.label)
      })
      selectRegionName.value = nameList
      regionName.value = selectRegionName.value.join()
      regionName.value = nameList.join()
   }
   //选中区域
   function handleTreeChange(e,e2){
@@ -86,42 +159,14 @@
         DaTreeRef.value.setExpandedKeys([item.key],true)
      }
   }
   const isCheckedDefault =ref(false)
   const form = ref({
      userName:'',
      userPhone:'',
      listRegion:[],
      userAddress:'',
      isDefault:null,
   })
   //提交表单数据
   async function submit(){
      console.log('form',form.value)
      await creatUserArchive(form.value).then((res) =>{
         if(res.code == 200){
            uni.showToast({
               title: '新增成功',
               image: '../../static/images/other/success.svg',
               duration:500     
            })
            setTimeout(() =>{
               uni.navigateBack()
               form.value = {}
            },500)
         }
      })
   }
   function change(e){
      console.log('e',e)
      form.value.isDefault = e.detail.value ? 1 : null
   }
	
   onMounted(async() =>{
      await getRegion()
   })
</script>
<template>
   <view class="container">
      <navbar title ='新增地址'></navbar>
      <navbar :title ='pageTitle'></navbar>
      <view class="content">
         <view class="main">
            <view class="item">