lanan-repair/pages/my/myInfo.vue

<template>
	<view class="container">
		<VNavigationBarVue titleColor="#333" backgroundColor="#fff" title="我的资料"></VNavigationBarVue>
		<view class="body">
      <view class="formItem">
        <text class="formLabel">姓名</text>
        <input type="text" style="text-align: right" placeholder="请输入姓名" v-model="customInfo.nickname"/>
      </view>
			<view class="formItem">
				<text class="formLabel">手机号</text>
				<text class="formValue">{{ customInfo.mobile }}</text>
			</view>
      <view class="formItem">
        <text class="formLabel">头像</text>
        <view class="dl-avatar-box">
          <u-upload
              :action="uploadUrl"
              :headers="headers"
              :file-list="fileList"
              :max-count="1"
              :show-upload-btn="true"
              @after-read="afterRead"
              @delete="deleteFile"
          ></u-upload>
        </view>
      </view>
      <button type="primary" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	import VNavigationBarVue from '../../components/VNavigationBar.vue';
  import config from '@/config'
  import request from "@/utils/request";
  import upload from '@/utils/upload'
  import {getUserInfo,setUserInfo} from '@/utils/auth'
	export default {
		components: {
			VNavigationBarVue
		},
		data() {
			return {
        uploadUrl: config.baseUrl+"/app-api/infra/file/upload",
        headers: {},
        fileList: [],
        customInfo:{
          id:"",
          nickname:"",
          mobile:"",
          avatar:""
        }
			};
		},
    onLoad(data) {
      //当前登录用户信息
      this.customInfo = JSON.parse(getUserInfo())
      console.log(this.customInfo)
      if(this.customInfo && ""!=this.customInfo.avatar && null!=this.customInfo.avatar){
        this.fileList = [
          {
            url:config.baseImageUrl+this.customInfo.avatar
          }
        ]
      }
    },
    methods:{
      afterRead(file) {
        //上传
        // uploadFileApi  为上传到服务端的接口 count大于1 使用 await
        upload({
          url:'/app-api/infra/file/upload',
          filePath: file.file.url
        }).then((res)=>{
          this.fileList=[{
            url: config.baseImageUrl+res.data
          }]
          console.log(this.fileList)
        })
      },
      deleteFile(file, index) {
        console.log('删除文件');
        this.fileList.splice(index, 1);
      },
      async submit(){
        if(this.fileList.length>0){
          this.customInfo.avatar = this.fileList[0].url.replace(config.baseImageUrl,"")
        }
        let res = await request({
          url: '/app-api/system/user/update',
          method: 'PUT',
          data: this.customInfo,
          tenantIdFlag: false
        })
        console.log(res)
        if (res.code == 200) {
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          })
          //更新数据
          setUserInfo(JSON.stringify(this.customInfo))
          setTimeout(()=>{
            // 操作成功返回上一个页面
            uni.navigateBack();
          },500)
        }else {
          uni.showToast({
            title: '修改失败',
            icon: 'none'
          })
        }
      }
    }
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #fff;

		.body {

		}

		.formItem {
			box-sizing: border-box;
			width: 686rpx;
			margin: 0 auto;
			padding: 40rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;
			column-gap: 20rpx;

			border-bottom: 1rpx solid #DDDDDD;
		}

		.formLabel {
			font-size: 32rpx;
			color: #333333;
		}

		.formValue {
			flex: 1;
			width: 0;
			text-align: right;
			font-size: 32rpx;
			color: #999999;
		}

		.formBtn {
			width: 24rpx;
			height: 24rpx;
		}

		.dl-avatar-box {
      text-align: right;
		}
	}
</style>