pages/addressAdd/index.vue
@@ -1,115 +1,209 @@
<script setup>
   import{ref} from 'vue'
   const isDefault =ref(false)
   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({
      name:'',
      phone:'',
      region:'',
      address:'',
      id:'',
      userName:'',
      userPhone:'',
      listRegion:[],
      userAddress:'',
      isDefault:null,
   })
   function submit(){
   //获取地址
   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
            console.log('form',form.value)
         })
      }else{
         console.log('xiznzeng')
      }
   }
   const treeListData = ref([
     {
       id: '2',
       name: '行政中心',
       children: [
         {
           id: '21',
           name: '行政部',
           children: [
             {
               id: '211',
               name: '行政一部',
               children: null,
             },
             {
               id: '212',
               name: '行政二部',
               children: [],
               disabled: true,
             },
           ],
         },
         {
           id: '22',
           name: '财务部',
           children: [
             {
               id: '221',
               name: '财务一部',
               children: [],
               disabled: true,
             },
             {
               id: '222',
               name: '财务二部',
               children: [],
             },
           ],
         },
         {
           id: '23',
           name: '人力资源部',
           children: [
             {
               id: '231',
               name: '人力一部',
               children: [],
             },
             {
               id: '232',
               name: '人力二部',
               append: '更多示例,请下载示例项目查看',
             },
           ],
         },
       ],
     },
   ])
   function handleTreeChange(e){
      console.log(e)
   onLoad(async(option)=>{
      addressId.value = option.id
      console.log('1')
   })
   onMounted(()=>{
      getAddress()
   })
   function change(e){
      form.value.isDefault = e.detail.value ? 1 : 0
   }
   function handleExpandChange(e){
      console.log(e)
   //提交表单数据
   async function submit(){
      //修改地址
      if(form.value.id){
         await editAddressApi(form.value).then((res) =>{
            if(res.code == 200){
               uni.showToast({
                  title: '修改成功',
                  duration:500
               })
               setTimeout(() =>{
                  uni.navigateBack()
                  form.value = {}
               },500)
            }
         })
      }else{
      //新增地址
      form.value.id = JSON.parse(uni.getStorageSync('userInfo')).id
         await creatUserArchive(form.value).then((res) =>{
            if(res.code == 200){
               uni.showToast({
                  title: '新增成功',
                  duration:1000
               })
               setTimeout(() =>{
                  uni.navigateBack()
                  form.value = {}
               },1000)
            }
         })
      }
   }
   const DaTreeRef = ref()
   const treeListData = ref([])
   const isExpandIcon = ref(false)
   const regionName = ref('')
   //展开关闭选择框
   function expandRegion(){
      if(isExpandIcon.value){
         isExpandIcon.value = false
      }else{
         isExpandIcon.value = true
      }
   }
   //请求行政区域数据
   async function getRegion(){
      await getRegionApi('').then((res) =>{
         res.data.forEach((item)=>{
            if(item.children == null){
               item.children = [{}]
            }
         })
         treeListData.value = res.data
         console.log(res)
      })
   }
   //设置选中区域名
   function setRegionName(){
      let nodeList
      let nameList = []
      //判断选中是否根节点,根节点直接取选中node值
      if(DaTreeRef.value.getHalfCheckedNodes()){
         nodeList = DaTreeRef.value.getHalfCheckedNodes().concat(DaTreeRef.value.getCheckedNodes())
         console.log('ban',DaTreeRef.value.getHalfCheckedNodes(),DaTreeRef.value.getCheckedNodes())
      }else{
         nodeList = DaTreeRef.value.getCheckedNodes()
      }
      nodeList.forEach((item)=>{
         nameList.push(item.label)
      })
      regionName.value = nameList.join()
   }
   //选中区域
   function handleTreeChange(e,e2){
      isExpandIcon.value = false
      if(DaTreeRef.value.getHalfCheckedKeys()){
         form.value.listRegion = DaTreeRef.value.getHalfCheckedKeys().concat(DaTreeRef.value.getCheckedKeys())
      }else{
         form.value.listRegion = DaTreeRef.value.getCheckedKeys()
      }
      setRegionName()
      console.log('select',form.value.listRegion,regionName.value)
   }
   //遍历树形数据,给展开子节点数据赋值
   function setTreeData(data,id,childData){
      let treeList = data
      treeList.forEach((item) =>{
         if(item.id === id){
            item.children = childData
         }else{
            if(item.children && item.children.length > 0){
               setTreeData(item.children,id,childData);
            }
         }
      })
      return treeList
   }
   //展开节点,请求节点数据
   async function handleExpandChange(isExpand,item){
      if(item.children[0].key != undefined){
      }else{
         let treeList =  treeListData.value
         let childData = []
         await getRegionApi(item.originItem.code).then((res) =>{
            res.data.forEach((item)=>{
                  if((item.children == null) && item.level!=4){
                     item.children = [{}]
                  }
            })
            childData = res.data
         })
         treeListData.value =  setTreeData(treeList,item.key,childData)
         DaTreeRef.value.setExpandedKeys([item.key],true)
      }
   }
   onMounted(async() =>{
      await getRegion()
   })
</script>
<template>
   <view class="container">
      <navbar title ='新增地址'></navbar>
      <navbar :title ='pageTitle'></navbar>
      <view class="content">
         <view class="main">
            <view>
            <view class="item">
               <text>联系人</text>
               <input v-model="form.name" placeholder="请输入联系人" />
               <input v-model="form.userName" placeholder="请输入联系人" />
            </view>
            <view>
            <view class="item">
               <text>联系电话</text>
               <input v-model="form.phpne" placeholder="请输入联系电话" />
               <input v-model="form.userPhone" placeholder="请输入联系电话" />
            </view>
            <view >
            <view class=" item tree-item">
               <text>送水区域</text>
               <!-- <da-tree ref="DaTreeRef"
                  :data="treeListData"
                  labelField="name"
                  valueField="id"
                  defaultExpandAll
                  showCheckbox
                  @change="handleTreeChange"
                  @expand="handleExpandChange"></da-tree> -->
                  <input v-model="form.phpne" placeholder="请选择区域" />
               <view class="tree-select" @click="expandRegion()">
                  <text v-if="!isExpandIcon && !regionName" class="tree-placehoder">省市区域</text>
                  <view v-if="regionName" class="tree-name">{{regionName}}</view>
                  <image :class="isExpandIcon ? 'tree-img' : 'tree-img-fold'" src="../../static/images/address/expand.png"></image>
               </view>
               <view v-if='isExpandIcon' class="tree">
                  <DaTree ref="DaTreeRef"
                     :data="treeListData"
                     labelField="name"
                     valueField="id"
                     :showRadioIcon='false'
                     @change="handleTreeChange"
                     @expand="handleExpandChange"></DaTree>
               </view>
            </view>
            <view>
            <view class="item">
               <text>送水地址</text>
               <input v-model="form.address" placeholder="请输入详细地址" />
               <input v-model="form.userAddress" placeholder="请输入详细地址" />
            </view>
         </view>
         <view class="default">
            <view>设为默认收货地址</view>
            <switch :checked = 'isDefault' color="#1890FF"/>
            <switch :checked='isCheckedDefault' @change="change" color="#1890FF"/>
         </view>
         <view class="subBtn" @click="submit()">提交信息</view>
      </view>
@@ -130,7 +224,7 @@
            width: 100%;
            height:565rpx;
            // background: #E8EFFF;
            view{
            .item{
               width:100%;
               height:93rpx;
               display: flex;
@@ -149,18 +243,62 @@
                  border-radius:22rpx;
                  height:100%;
                  width:534rpx;
                  box-shadow:0 0 7rpx 1rpx rgba(85, 170, 255, 0.3);
               }
               .tree-select{
                  // padding-left:36rpx;
                  box-sizing: border-box;
                  background: #FFFFFF;
                  width:534rpx;
                  height:100%;
                  border-radius:22rpx;
                  box-shadow:0 0 5rpx 2rpx rgba(85, 170, 255, 0.5);
                  .tree-placehoder{
                     height: 100%;
                     line-height:93rpx;
                     color: #868686;
                     margin-left:36rpx;
                  }
                  .tree-name{
                     height: 100%;
                     width:400rpx;
                     line-height:93rpx;
                     color: #000;
                     margin-left:36rpx;
                     overflow-x:hidden;
                  }
                  .tree-img-fold{
                     width:36rpx;
                     height:36rpx;
                     position: absolute;
                     right:40rpx;
                     top:30rpx;
                  }
                  .tree-img{
                     width:36rpx;
                     height:36rpx;
                     position: absolute;
                     right:40rpx;
                     top:30rpx;
                     transform: rotate(180deg);
                  }
               }
            }
            .tree{
               width:100%;
               height:93rpx;
               background: #FFFFFF;
               border-radius:22rpx;
               da-tree{
                  width:543rpx;
                  height:93rpx;
            .tree-item{
               position: relative;
               .tree{
                  padding-top:30rpx;
                  width:534rpx;
                  height:600rpx;
                  background: #FFFFFF;
                  border-radius:22rpx;
                  // border:1px solid #72757d;
                  z-index:100;
                  position: absolute;
                  top:95rpx;
                  right:0;
                  border-radius:12rpx;
                  // border:1px solid rgba(93, 163, 255, 0.3);
                  box-shadow: 0 0 5rpx 1rpx rgba(93, 163, 255, 0.3);
               }
            }
         }