|
@@ -3,7 +3,11 @@
|
|
|
<image style="width: 100%;" mode="aspectFill" :src="imgSrc('/profile/logo/menuBackgroundImage.png')"></image>
|
|
|
<view class="big-circle"></view>
|
|
|
<view class="avatar-area z10" >
|
|
|
- <u-avatar :src="avatar.length > 0 ? imgSrc(avatar) : src" size="80" shape="circle"></u-avatar>
|
|
|
+ <view class="img-boxs">
|
|
|
+ <image :src="avatar.length > 0 ? imgSrc(avatar) : src" @click="handleUpImg"></image>
|
|
|
+ <cover-view>修改头像</cover-view>
|
|
|
+ </view>
|
|
|
+ <!-- <u-avatar :src="avatar.length > 0 ? imgSrc(avatar) : src" size="80" shape="circle"></u-avatar> -->
|
|
|
</view>
|
|
|
<view class="menu-area z10">
|
|
|
<view class="basic-msg">
|
|
@@ -82,8 +86,10 @@
|
|
|
<script>
|
|
|
import cache from '@/utils/storage.js'
|
|
|
import { sumBorrow } from '@/api/asset.js'
|
|
|
- import { logout,resetPwd } from '@/api/user.js'
|
|
|
+ import { uploadAvatar,logout,resetPwd } from '@/api/user.js'
|
|
|
import { getImage } from '@/api/visitor.js'
|
|
|
+ import { getToken } from '@/utils/auth';
|
|
|
+ import baseUrl from '@/utils/baseurl.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -94,10 +100,36 @@
|
|
|
role:"",
|
|
|
show: false,
|
|
|
userName:"",
|
|
|
- password:""
|
|
|
+ password:"",
|
|
|
+ token: ""
|
|
|
};
|
|
|
},
|
|
|
methods:{
|
|
|
+ handleUpImg() {// 点击图片区域,选择图片并上传
|
|
|
+ const token = this.token
|
|
|
+ let avatar = ""
|
|
|
+ uni.chooseImage({// 选择图片
|
|
|
+ count: 1,
|
|
|
+ success: (res) => {// 图片选择成功的回调(必传),会返回一个对象
|
|
|
+ // this.avatar = res.tempFilePaths[0] // 用于更新视图
|
|
|
+ uni.uploadFile({
|
|
|
+ url: baseUrl + "/system/user/profile/avatar", // 请求地址
|
|
|
+ filePath: res.tempFilePaths[0], // 临时文件路径
|
|
|
+ name: "avatarfile", // 文件对应的key值
|
|
|
+ header: {
|
|
|
+ Authorization: token // 需要带的请求头,token等等
|
|
|
+ },
|
|
|
+ formData: {// 额外的请求数据
|
|
|
+ },
|
|
|
+ success: (response) => {// 成功后的回调
|
|
|
+ const data = JSON.parse(response.data)
|
|
|
+ cache.session.setJSON('avatar', data.imgUrl)
|
|
|
+ this.avatar = data.imgUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
close(){
|
|
|
this.show = false
|
|
|
},
|
|
@@ -243,6 +275,7 @@
|
|
|
this.name = cache.session.getJSON('nickName')
|
|
|
this.role = cache.session.getJSON('role')
|
|
|
this.avatar = cache.session.getJSON('avatar')
|
|
|
+ this.token = `Bearer ${getToken()}`
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -271,7 +304,37 @@
|
|
|
top: 25%;
|
|
|
left: 20%;
|
|
|
transform: translateY(-50%);
|
|
|
+
|
|
|
+ .img-boxs {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 0 0 3px hsla(0,0%,100%,.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-boxs image {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-boxs cover-view {
|
|
|
+ width: 90px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(107, 96, 99, .4);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 76%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.z10{
|
|
|
z-index: 10;
|
|
|
}
|