罗广辉
2026-04-24 648904d076ae6e17892b40675598b1c8dc474277
src/subPackages/userDetail/infos/index.vue
@@ -1,27 +1,29 @@
<template>
   <view class="container">
      <div class="avatarBox">
         <u-avatar :src="userInfo.avatar" size="114" mode="aspectFill" />
         <u-avatar @click="uploadAvatar" :src="userInfo.avatar" size="114" mode="aspectFill" />
      </div>
      <view class="detailBox">
         <div class="orderRow">
            <div class="rowTitle">姓名</div>
            <div>{{userInfo.realName}}</div>
         </div>
         <div class="orderRow">
            <div class="rowTitle">所属单位</div>
            <div>{{userInfo.deptName}}</div>
         </div>
         <div class="orderRow">
            <div class="rowTitle">手机号</div>
            <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
               class="input-item" />
         <div class="detailCon">
            <div class="orderRow">
               <div class="rowTitle">姓名</div>
               <div>{{userInfo.realName}}</div>
            </div>
            <div class="orderRow">
               <div class="rowTitle">所属单位</div>
               <div>{{userInfo.deptName}}</div>
            </div>
            <div class="orderRow">
               <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>
            <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
               class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">邮箱</div>
               <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
                  class="input-item" />
            </div>
         </div>
      </view>
      <view class="btngroup">
@@ -33,10 +35,17 @@
<script setup>
   import {
      getEnvObj,
      getWebViewUrl
   } from "@/utils/index.js";
   import {
      getUserInfo,
      updateInfo,
      updatePassword
   } from '@/api/user/index.js';
   import {
      useUserStore
   } from "@/store/index.js";
   const userInfo = ref({
      id: '',
      avatar: '',
@@ -52,7 +61,7 @@
      if (!phone) return true
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(phone)) {
         uni.showToast({
            title: '请输入正确的手机号码',
            icon: 'none',
@@ -64,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',
@@ -95,6 +104,101 @@
   const reset = () => {
      getUserInfoData();
   };
   const {
      VITE_API_BASE_URL
   } = getEnvObj()
   function uploadUtil(options) {
      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 tempFile = res.tempFiles[0]; // 获取文件对象
            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';
            }
            // 显示加载中
            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
      userInfo.value.name = userInfo.value.realName;
@@ -105,6 +209,7 @@
               icon: 'none',
               duration: 2000
            });
               getUserInfoData()
         } else {
            uni.showToast({
@@ -112,10 +217,11 @@
               icon: 'none',
               duration: 2000
            });
               getUserInfoData()
         }
      });
      getUserInfoData()
   };
   onShow(async () => {
      getUserInfoData()
@@ -124,47 +230,49 @@
<style lang="scss" scoped>
   .container {
      width: 100%;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: url('/src/static/images/user/allBg.svg') no-repeat center center;
      background-size: cover;
      background-attachment: fixed;
   }
   .avatarBox {
      width: 114px;
      height: 114px;
      margin: 38px 0;
      width: 228rpx;
      height: 228rpx;
      margin: 76rpx 0;
   }
   .detailBox {
      width: 351px;
      min-height: 215px;
      width: 702rpx;
      min-height: 430rpx;
      background: #FFFFFF;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      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;
         align-items: center;
         height: 48px;
         border-bottom: 1px solid #f5f5f5;
         height: 96rpx;
         border-bottom: 2rpx solid #f5f5f5;
         color: #7b7b7b;
         padding: 0 12px;
         .rowTitle {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 15px;
            font-size: 30rpx;
            color: #222324;
            white-space: nowrap;
         }
         ::v-deep .u-input {
            border: none !important;
            background: transparent !important;
            padding: 0 !important;
         }
         ::v-deep .u-input__input {
@@ -181,14 +289,19 @@
   .btngroup {
      display: flex;
      position: absolute;
      bottom:75px;
      bottom: 150rpx;
   }
   .u-button:first-child{
      margin-right: 15px;
   :deep(.u-button:first-child) {
      margin-right: 30rpx !important;
   }
   .custom-style {
      width: 138px;
      height: 38px;
      width: 276rpx;
      height: 76rpx;
   }
   :deep(.u-button){
      width: 276rpx !important;
      height: 76rpx !important;
   }
</style>