lanan-repair/pages/my/myInfo.vue
2024-10-11 20:50:05 +08:00

164 lines
3.8 KiB
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>