Quellcode durchsuchen

新增修改头像

LinWuTai vor 1 Jahr
Ursprung
Commit
d91e189239
2 geänderte Dateien mit 74 neuen und 3 gelöschten Zeilen
  1. 8 0
      api/user.js
  2. 66 3
      pages/menus/menu/menu.vue

+ 8 - 0
api/user.js

@@ -14,6 +14,14 @@ export function getInfo() {
 export function saveUserInfo(data){
 	return fly.put('/system/user/profile',data).then(res=>res)
 }
+// 用户头像上传
+export function uploadAvatar(data) {
+  return request({
+    url: '/system/user/profile/avatar',
+    method: 'post',
+    data: data
+  })
+}
 //修改用户密码
 export function savePassword(oldPwd,newPwd){
 	return fly.put('/system/user/profile/updatePwd',{

+ 66 - 3
pages/menus/menu/menu.vue

@@ -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;
 }