添加校验，修改头像

Liuyi

2024-10-23 9a139cc25da8396c1b257ccf99eb8d2fedfbc94d

 pages/addressAdd/index.vue

@@ -1,8 +1,87 @@
<script setup>
   import { onMounted, ref }  from 'vue';
   import { getRegionApi } 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({
      id:'',
      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
            console.log('form',form.value)
         })
      }else{
         console.log('xiznzeng')
      }
   }
   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: '修改成功',
                  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('上海市')
   const regionName = ref('')
   //展开关闭选择框
   function expandRegion(){
      if(isExpandIcon.value){
         isExpandIcon.value = false
@@ -22,21 +101,42 @@
         console.log(res)
      })
   }
   const treeListData = ref([])
   //设置选中区域名
   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){
      regionName.value = e
      isExpandIcon.value = false
      console.log('change',e,e2)
      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,code,childData){
   function setTreeData(data,id,childData){
      let treeList = data
      treeList.forEach((item) =>{
         if(item.code === code){
         if(item.id === id){
            item.children = childData
         }else{
            if(item.children && item.children.length > 0){
               setTreeData(item.children,code,childData);
               setTreeData(item.children,id,childData);
            }
         }
      })
@@ -45,11 +145,10 @@
   //展开节点，请求节点数据
   async function handleExpandChange(isExpand,item){
      if(item.children[0].key != undefined){
         console.log('1',isExpand,item,item.children[0].key)
      }else{
         let treeList =  treeListData.value
         let childData = []
         await getRegionApi(item.key).then((res) =>{
         await getRegionApi(item.originItem.code).then((res) =>{
            res.data.forEach((item)=>{
                  if((item.children == null) && item.level!=4){
                     item.children = [{}]
@@ -61,46 +160,36 @@
         DaTreeRef.value.setExpandedKeys([item.key],true)
      }
   }
   const DaTreeRef = ref()
   const isDefault =ref(false)
   const form = ref({
      name:'',
      phone:'',
      region:'',
      address:'',
   })
   function submit(){
		
   }
	
   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">
               <text>联系人</text>
               <input v-model="form.name" placeholder="请输入联系人" />
               <input v-model="form.userName" placeholder="请输入联系人" />
            </view>
            <view class="item">
               <text>联系电话</text>
               <input v-model="form.phpne" placeholder="请输入联系电话" />
               <input v-model="form.userPhone" placeholder="请输入联系电话" />
            </view>
            <view class=" item tree-item">
               <text>送水区域</text>
               <view class="tree-select" @click="expandRegion()">
                  <text v-if="!isExpandIcon && !regionName" class="tree-placehoder">请选择送水区域</text>
                  <text v-if="regionName" class="tree-placehoder">{{regionName}}</text>
                  <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="code"
                     valueField="id"
                     :showRadioIcon='false'
                     @change="handleTreeChange"
                     @expand="handleExpandChange"></DaTree>
@@ -108,13 +197,13 @@
            </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>
@@ -170,6 +259,14 @@
                     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;