feat:头像

张含笑

2025-11-06 8ba2dc1126a4abdf96e2d92b365a3295c3b15025

 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;