添加更改用户头像，添加故障上报校验

Liuyi

2024-10-21 15a55f79a84e5dab670d54a9dc0c6b9133a18441

 pages/userInfo/index.vue

@@ -1,14 +1,66 @@
<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')))
   //修改用户头像
   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:headImgStatic}).then(async(res) =>{
                     if(res.code == 200){
                        uni.showToast({
                           title: '修改成功！',
                           duration: 1000,
                        });
                        await getUserInfo().then((res) =>{
                           userInfo.value.headImg = res.data.userInfo.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(){
      editForm.value.id = userInfo.value.id
      editForm.value.userName = userInfo.value.userName
      editForm.value.userPhone = userInfo.value.userPhone
      isEdit.value = true
      console.log('userInfo',userInfo.value)
   }
   function cancel(){
      isEdit.value = false
@@ -29,7 +81,7 @@
            })
         }else{
            uni.showToast({
               title: '请求错误！请重试',
               title: '网络错误！请重试',
               duration: 2000,
               icon:'none'
            });
@@ -47,7 +99,11 @@
            <view class="info-up">
               <view class="info-img">
                  <text>头像</text>
                  <image src='../../static/logo.png' alt=''></image>
                  <view class="img-box" @click="changeImg">
                     <image v-if="userInfo.headImg" :src='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>
@@ -60,13 +116,15 @@
            <view class="info-list">
               <view class="item">
                  <text>会员卡号</text>
                  <text>{{userInfo.waterCardNumber}}</text>
                  <text v-if="userInfo.waterCardNumber">{{userInfo.waterCardNumber}}</text>
                  <text v-else>未绑定会员卡</text>
               </view>
               <view class="item">
                  <text>联系方式</text>
                  <view>
                     <input v-if="isEdit" v-model="editForm.userPhone" placeholder="请输入新联系方式"/>
                     <text v-else>{{userInfo.userPhone}}</text>
                     <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> -->
                  </view>
               </view>
@@ -129,10 +187,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{