From 8ba2dc1126a4abdf96e2d92b365a3295c3b15025 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 06 Nov 2025 14:19:12 +0800
Subject: [PATCH] feat:头像
---
src/subPackages/userDetail/infos/index.vue | 202 ++++++++++++++++++++++++++++++--------------------
1 files changed, 121 insertions(+), 81 deletions(-)
diff --git a/src/subPackages/userDetail/infos/index.vue b/src/subPackages/userDetail/infos/index.vue
index 59eb9ce..07b4f68 100644
--- a/src/subPackages/userDetail/infos/index.vue
+++ b/src/subPackages/userDetail/infos/index.vue
@@ -17,7 +17,7 @@
<div class="rowTitle">手机号</div>
<u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
class="input-item" />
-
+
</div>
<div class="orderRow">
<div class="rowTitle">邮箱</div>
@@ -34,13 +34,18 @@
</template>
<script setup>
- import {getEnvObj, getWebViewUrl} from "@/utils/index.js";
+ import {
+ getEnvObj,
+ getWebViewUrl
+ } from "@/utils/index.js";
import {
getUserInfo,
updateInfo,
updatePassword
} from '@/api/user/index.js';
- import {useUserStore} from "@/store/index.js";
+ import {
+ useUserStore
+ } from "@/store/index.js";
const userInfo = ref({
id: '',
avatar: '',
@@ -56,7 +61,7 @@
if (!phone) return true
const phoneRegex = /^1[3-9]\d{9}$/
if (!phoneRegex.test(phone)) {
-
+
uni.showToast({
title: '请输入正确的手机号码',
icon: 'none',
@@ -68,10 +73,10 @@
}
// 校验邮箱
const validateEmail = () => {
- if (!userInfo.value.email) return true
+ if (!userInfo.value.email) return true
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
if (!emailRegex.test(userInfo.value.email)) {
-
+
uni.showToast({
title: '请输入正确的邮箱地址',
icon: 'none',
@@ -100,76 +105,107 @@
getUserInfoData();
};
- const {VITE_API_BASE_URL} = getEnvObj()
+ const {
+ VITE_API_BASE_URL
+ } = getEnvObj()
+
function uploadUtil(options) {
- const {formData, file, url} = options
-
- return new Promise((resolve, reject) => {
- let accessToken = useUserStore()?.$state?.userInfo?.access_token;
-
- uni.uploadFile({
- url: `${VITE_API_BASE_URL}${url}`,
- name: 'file',
- header: {'Blade-Auth': 'bearer ' + accessToken},
- file,
- formData,
- success: (res) => {
- const resData = JSON.parse(res.data)
- if (resData.code === 200 || resData.code === 0) {
- resolve(res)
- } else {
- showToast(resData.message)
-
- reject(res)
- }
- },
- fail: (err) => {
- reject(err)
- }
- });
- })
+ const {
+ formData,
+ filePath,
+ url
+ } = options;
+
+ return new Promise((resolve, reject) => {
+ let accessToken = useUserStore()?.$state?.userInfo?.access_token;
+
+ uni.uploadFile({
+ url: `${VITE_API_BASE_URL}${url}`,
+ name: 'file',
+ header: {
+ 'Blade-Auth': 'bearer ' + accessToken
+ },
+ filePath: filePath,
+ formData,
+ success: (res) => {
+ const resData = JSON.parse(res.data)
+ if (resData.code === 200 || resData.code === 0) {
+ resolve(res)
+ } else {
+ showToast(resData.message)
+
+ reject(res)
+ }
+ },
+ fail: (err) => {
+ reject(err)
+ }
+ });
+ })
}
const uploadAvatar = () => {
- uni.chooseImage({
- count: 1,
- success: (res) => {
- const tempFilePaths = res.tempFiles[0];
- // 显示加载中
- uni.showLoading({
- title: '上传中...'
- });
-
- // 上传文件
- uploadUtil({
- file: tempFilePaths,
- formData: {
- fileName: tempFilePaths.name,
- sn: 'avatar_upload'
- },
- url: '/blade-resource/oss/endpoint/put-file'
- }).then(res => {
- const resData = JSON.parse(res.data);
- if (resData.code === 200 || resData.code === 0) {
- // 更新头像显示
- userInfo.value.avatar = resData.data.link || resData.data.url;
- uni.hideLoading();
- uni.showToast({
- title: '头像上传成功',
- icon: 'success'
- });
- } else {
- throw new Error(resData.message || '上传失败');
-
- }
- }).catch(err => {
- uni.hideLoading();
- uni.showToast({
- title: err.message || '上传失败',
- icon: 'none'
- });
- });
- }
- });
+ uni.chooseImage({
+ count: 1,
+ success: (res) => {
+
+ // const tempFilePaths = res.tempFiles[0];
+ // const a = tempFilePaths.name? tempFilePaths.name : tempFilePaths.path
+
+ const tempFile = res.tempFiles[0]; // 获取文件对象
+ // 1. 获取文件路径（兼容不同端的路径字段）
+ const filePath = tempFile.path || tempFile.tempFilePath;
+ if (!filePath) {
+ uni.showToast({
+ title: '获取文件路径失败',
+ icon: 'none'
+ });
+ return;
+ }
+
+
+ let fileName = tempFile.name;
+ if (!fileName) {
+
+ const pathWithoutProtocol = filePath.replace(/^file:\/\//, '');
+ fileName = pathWithoutProtocol.split('/').pop() || 'unknown.png';
+ }
+ console.log('filePath', filePath)
+ // 显示加载中
+ uni.showLoading({
+ title: '上传中...'
+ });
+
+ // 上传文件
+ uploadUtil({
+ filePath: filePath,
+ formData: {
+ fileName: fileName,
+ sn: 'avatar_upload'
+ },
+ url: '/blade-resource/oss/endpoint/put-file'
+ }).then(res => {
+ const resData = JSON.parse(res.data);
+ if (resData.code === 200 || resData.code === 0) {
+ // 更新头像显示
+ userInfo.value.avatar = resData.data.link || resData.data.url;
+ uni.hideLoading();
+ uni.showToast({
+ title: '头像上传成功',
+ icon: 'success'
+ });
+ } else {
+ throw new Error(resData.message || '上传失败');
+
+ }
+ }).catch(err => {
+ uni.hideLoading();
+ uni.showToast({
+ title: err.message || '上传失败',
+ icon: 'none'
+ });
+ });
+ }
+ });
}
const submit = () => {
if (!validatePhone() || !validateEmail()) return
@@ -189,7 +225,7 @@
duration: 2000
});
}
-
+
});
getUserInfoData()
};
@@ -200,19 +236,19 @@
<style lang="scss" scoped>
.container {
- width: 100%;
+ width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
-
+
}
.avatarBox {
width: 228rpx;
height: 228rpx;
- margin:76rpx 0;
+ margin: 76rpx 0;
}
.detailBox {
@@ -221,9 +257,11 @@
background: #FFFFFF;
border-radius: 12rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
.detailCon {
padding: 0 24rpx;
}
+
.orderRow {
display: flex;
justify-content: space-between;
@@ -231,7 +269,7 @@
height: 96rpx;
border-bottom: 2rpx solid #f5f5f5;
color: #7b7b7b;
-
+
.rowTitle {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@@ -239,6 +277,7 @@
color: #222324;
white-space: nowrap;
}
+
::v-deep .u-input {
border: none !important;
background: transparent !important;
@@ -259,12 +298,13 @@
.btngroup {
display: flex;
position: absolute;
- bottom:150rpx;
+ bottom: 150rpx;
}
- .u-button:first-child{
+
+ .u-button:first-child {
margin-right: 30rpx;
}
-
+
.custom-style {
width: 276rpx;
height: 76rpx;
--
Gitblit v1.9.3