<template>
|
<view class="">
|
<view class="bgc-ff">
|
<view class="form-item flex j-c-s-b a-i-c">
|
<text class="f-30">头像</text>
|
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
<u-avatar :src="avatar" size="50"></u-avatar>
|
</button>
|
</view>
|
<view class="form-item flex j-c-s-b a-i-c">
|
<text class="f-30">昵称</text>
|
<view class="nickname">
|
<input class="nickname-value" type="nickname" placeholder="请输入昵称" v-model="info.realName"
|
@blur="getInputValue" />
|
</view>
|
|
</view>
|
</view>
|
<footer-btn text="确定" @click="submitInfo" />
|
<zmm-watermark :watermark="watermark"></zmm-watermark>
|
</view>
|
</template>
|
|
<script>
|
import {
|
updateUserInfo
|
} from "@/api/user.js"
|
import {
|
Base64
|
} from '@/utils/base64.js';
|
import {
|
prodUrl,
|
clientId,
|
clientSecret,
|
minioBaseUrl
|
} from '@/common/setting'
|
export default {
|
data() {
|
return {
|
avatar: "",
|
info: {
|
avatar: "",
|
realName: "",
|
id: "",
|
deptId: ""
|
},
|
header: {},
|
uploadConfig: {
|
url: prodUrl + "/blade-resource/oss/endpoint/put-file",
|
header: {},
|
},
|
watermark: ""
|
}
|
},
|
onLoad() {
|
let {
|
nick_name,
|
phone
|
} = uni.getStorageSync("userInfo");
|
// this.watermark = `${nick_name} ${phone}`
|
this.watermark = `<h5>${nick_name}</h5><br><p style="font-size:11px;">${phone}</p>`
|
|
|
this.getHeader()
|
let {
|
avatar,
|
real_name,
|
user_id,
|
dept_id
|
} = uni.getStorageSync("userInfo");
|
if (avatar) {
|
this.avatar = `${minioBaseUrl}${avatar}`
|
} else {
|
this.avatar = avatar;
|
}
|
this.info.avatar = avatar;
|
this.info.realName = real_name
|
this.info.id = user_id
|
this.info.deptId = dept_id
|
},
|
methods: {
|
|
//获取头部
|
getHeader() {
|
let accessToken = uni.getStorageSync('accessToken');
|
let myHeader = {}
|
if (accessToken) {
|
myHeader['Blade-Auth'] = 'bearer ' + accessToken;
|
}
|
// 客户端认证参数
|
myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
|
this.uploadConfig.header = myHeader
|
},
|
|
chooseAvatar(e) {
|
let {
|
avatarUrl
|
} = e.detail
|
this.uploadAvatar(avatarUrl)
|
},
|
|
uploadAvatar(url) {
|
uni.uploadFile({
|
url: this.uploadConfig.url,
|
filePath: url,
|
name: 'file',
|
header: this.uploadConfig.header,
|
success: (res) => {
|
let data = JSON.parse(res.data);
|
console.log(data.data);
|
this.info.avatar = data.data.name;
|
this.avatar = data.data.link;
|
}
|
})
|
},
|
|
getInputValue(e) {
|
console.log(e);
|
this.info.realName = e.detail.value;
|
},
|
|
|
submitInfo() {
|
updateUserInfo(this.info).then(res => {
|
if (res.code == 200) {
|
uni.showToast({
|
title: res.msg
|
})
|
setTimeout(() => {
|
let userInfo = uni.getStorageSync("userInfo");
|
userInfo.avatar = this.info.avatar;
|
userInfo.real_name = this.info.realName;
|
this.$u.vuex('userInfo', userInfo);
|
uni.navigateBack()
|
}, 300)
|
}
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f5f5f5;
|
}
|
|
.form-item {
|
padding: 30rpx;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
|
.avatar-wrapper {
|
border: none;
|
background: transparent;
|
margin: 0;
|
padding: 0;
|
}
|
|
.avatar-wrapper::after {
|
border: none;
|
margin: 0;
|
}
|
|
.nickname {
|
width: 80%;
|
|
.nickname-value {
|
width: 100%;
|
text-align: right;
|
}
|
}
|
</style>
|
