添加校验，修改头像

Liuyi

2024-10-23 9a139cc25da8396c1b257ccf99eb8d2fedfbc94d

 pages/userInfo/index.vue

@@ -1,10 +1,67 @@
<script setup>
   import { onMounted, ref } from 'vue'
   import { BASE_URL } from '../../config/baseUrl';
   import { editUserInfoApi,getUserInfo } from '../../api/index.js'
   const isEdit = ref(false)
   const editForm = ref({id:'',userName:'',userPhone:''})
   const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
   // const showHeadImg = ref(BASE_URL + '/upload' + userInfo.value.headImg)
   //修改用户头像
   function changeImg(){
      uni.chooseImage({
         success: async(res) =>{
             //建立表单，请求参数传表单形式
             let fileForm = {
                file1:res.tempFiles,
                path:'qingyuan'
             }
            uni.uploadFile({
               url:BASE_URL+ '/file/upload', 
               filePath:res.tempFilePaths[0],
               name: 'file',
               formData:fileForm,
               success: async(success) => {
                  console.log('success',success);
                  let dataObj = JSON.parse(success.data)
                  // let headImgStatic =  BASE_URL + '/upload' + dataObj.data.newFileName
                  await editUserInfoApi({id:userInfo.value.id,headImg:dataObj.data.newFileName}).then(async(res) =>{
                     if(res.code == 200){
                        uni.showToast({
                           title: '修改成功！',
                           duration: 1000,
                        });
                        await getUserInfo().then((res) =>{
                           userInfo.value.headImg = res.data.userInfo.headImg
                           // showHeadImg.value = BASE_URL + '/upload' + userInfo.value.headImg
                           console.log('resheadImg',userInfo.value.headImg)
									
                           uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
                        })
                     }else{
                        uni.showToast({
                           title: '网络错误！请重试',
                           duration: 1000,
                           icon:'none'
                        });
                     }
                  })
               },
               fail: (err) => {
                  uni.showToast({
                     title: '上传失败，请重试',
                     duration: 2000,
                     icon:'none'
                  });
                  console.log('err',err,res.tempFilePaths[0])
               }
            });
         }
      });
   }
   //修改用户电话及名称
   function edit(){
      validatePhone.value = true
      validateUserName.value = true
      editForm.value.id = userInfo.value.id
      editForm.value.userName = userInfo.value.userName
      editForm.value.userPhone = userInfo.value.userPhone
@@ -15,29 +72,65 @@
      isEdit.value = false
      editForm.vlaue = {id:'',userName:'',userPhone:''}
   }
   //添加校验
   const validateUserName = ref(true)
   function onBlur1(event){
      const nameValue = event.target.value
      const regExp =/^[\u4e00-\u9fa5\\.]+$/
      if(!regExp.test(nameValue)){
         validateUserName.value = false
      }else{
         validateUserName.value = true
      }
   }
   const validatePhone = ref(true)
   function onBlur2(event){
      const nameValue = event.target.value
      const regExp =/^1[3-9]\d{9}$/
      if(!regExp.test(nameValue)){
         validatePhone.value = false
      }else{
         validatePhone.value = true
      }
   }
   function validate(){
      if(validatePhone.value && validateUserName.value){
         return true
      }else{
         return false
      }
   }
   //提交修改表单
   async function submitEdit(){
      await editUserInfoApi(editForm.value).then(async(res) =>{
			
         if(res.code == 200){
            uni.showToast({
               title: '修改成功！',
               duration: 2000,
            });
            await getUserInfo().then((res) =>{
               userInfo.value.userName = res.data.userInfo.userName
               userInfo.value.userPhone = res.data.userInfo.userPhone
               uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
            })
         }else{
            uni.showToast({
               title: '网络错误！请重试',
               duration: 2000,
               icon:'none'
            });
         }
         isEdit.value = false
         editForm.vlaue = {id:'',userName:'',userPhone:''}
      })
      if(validate()){
         await editUserInfoApi(editForm.value).then(async(res) =>{
				
            if(res.code == 200){
               uni.showToast({
                  title: '修改成功！',
                  duration: 2000,
               });
               await getUserInfo().then((res) =>{
                  userInfo.value.userName = res.data.userInfo.userName
                  userInfo.value.userPhone = res.data.userInfo.userPhone
                  uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
               })
            }else{
               uni.showToast({
                  title: '网络错误！请重试',
                  duration: 2000,
                  icon:'none'
               });
            }
            isEdit.value = false
            editForm.vlaue = {id:'',userName:'',userPhone:''}
         })
      }else{
         uni.showToast({
            title:'输入不符合格式',
            icon:'none'
         })
      }
   }
</script>
<template>
@@ -48,12 +141,19 @@
            <view class="info-up">
               <view class="info-img">
                  <text>头像</text>
                  <image src='../../static/images/index/head.png' alt=''></image>
                  <view class="img-box" @click="changeImg">
                     <image v-if="userInfo.headImg" :src="BASE_URL + '/upload' + userInfo.headImg" alt=''></image>
                     <image v-else src='../../static/images/index/head.png' alt=''></image>
                     <image src='../../static/images/other/more.png' alt=''></image>
                  </view>
               </view>
               <view class="info-name">
                  <text>用户名称</text>
                  <view>
                     <input v-if="isEdit" v-model="editForm.userName" placeholder="请输入新用户名"/>
                     <view v-if="isEdit">
                        <input v-model="editForm.userName" @blur="onBlur1" placeholder="请输入新用户名"/>
                        <text class="validate-text" v-if="!validateUserName">请输入中文或" . "符号</text>
                     </view>
                     <text v-else class="info-value">{{userInfo.userName}}</text>
                  </view>
               </view>
@@ -66,8 +166,11 @@
               </view>
               <view class="item">
                  <text>联系方式</text>
                  <view>
                     <input v-if="isEdit" v-model="editForm.userPhone" placeholder="请输入新联系方式"/>
                  <view class="item-change">
                     <view v-if="isEdit">
                        <input v-model="editForm.userPhone" @blur="onBlur2" placeholder="请输入新联系方式"/>
                        <text v-if="!validatePhone">请输入正确的手机号格式</text>
                     </view>
                     <text v-if="userInfo.userPhone && !isEdit">{{userInfo.userPhone}}</text>
                     <text v-if="!userInfo.userPhone && !isEdit">未添加联系方式</text>
                     <!-- <image class="edit"src="../../static/images//other/more.png" alt=''></image> -->
@@ -106,10 +209,11 @@
            width: 100%;
            //该页面公用input样式
            input{
               border-radius: 10rpx;
               border:1px solid rgba(101, 156, 244, 0.2);
               border-radius:5rpx;
               border-bottom: 1px solid rgba(83, 131, 203, 0.5);
               // border:1px solid rgba(101, 156, 244, 0.2);
               padding:5rpx 10rpx;
               box-shadow: 0 0 12rpx 1rpx rgba(101, 156, 244, 0.2);
               // box-shadow: 0 0 12rpx 1rpx rgba(101, 156, 244, 0.2);
               color: #777777;
               height:50rpx;
               line-height:50rpx;
@@ -132,10 +236,20 @@
                  display: flex;
                  justify-content:space-between;
                  align-items:center;
                  image{
                     width:100rpx;
                     height:100rpx;
                     border-radius: 50rpx;
                  .img-box{
                     display: flex;
                     align-items: center;
                     image:first-child{
                        width:100rpx;
                        height:100rpx;
                        border-radius: 50rpx;
                        margin-right:10rpx;
                     }
                     image:last-child{
                        width:30rpx;
                        height:36rpx;
                        border-radius: 50rpx;
                     }
                  }
               }
               .info-name{
@@ -143,6 +257,10 @@
                  display: flex;
                  justify-content:space-between;
                  align-items:center;
                  .validate-text{
                     color:#f56c6c;
                     font-size:24rpx;
                  }
               }
            }
            .info-list{
@@ -165,11 +283,19 @@
                  text:last-child{
                     color: #777777;
                  }
                  view{
                  .item-change{
                     height: 116rpx;
                     display: flex;
                     justify-content:flex-end;
                     align-items: center;
                     view{
                        display: flex;
                        flex-direction: column;
                        text{
                           color:#f56c6c;
                           font-size:24rpx;
                        }
                     }
                     text{
                        color: #777777;
                     }