吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-wx/src/subPackages/userDetail/infos/index.vue
@@ -3,21 +3,32 @@
   <view class="container">
      <view class="pageBg"></view>
      <div class="avatarBox">
         <u-avatar @click="uploadAvatar" :src="userInfo.avatar || showDefaultHeader" size="114" mode="aspectFill" />
         <u-avatar @click="uploadAvatar" :src="userInfo.avatar ? userInfo.avatar : showDefaultHeader" size="114" mode="aspectFill" />
      </div>
      <view class="detailBox">
         <div class="detailCon">
            <div class="orderRow">
               <div class="rowTitle">姓名</div>
               <div class="rowTitle">昵称</div>
               <div>{{userInfo.nickName}}</div>
            </div>
            <!-- <div class="orderRow">
               <div class="rowTitle">所属单位</div>
               <div>{{userInfo.deptName}}</div>
            </div> -->
            <div class="orderRow">
               <div class="rowTitle">认证状态</div>
               <div>{{userInfo.status === 1 ? '已认证' : '未认证'}}</div>
            </div>
            <div class="orderRow">
               <div class="rowTitle">性别</div>
               <div>
                  <u-radio-group v-model="userInfo.sex">
                     <up-radio
                        v-for="(item, index) in sexList"
                        :key="index"
                        :label="item.label"
                        :name="item.name"
                        @change="radioChange"
                        >
                     </up-radio>
                  </u-radio-group>
               </div>
            </div>
            <div class="orderRow">
               <div class="rowTitle">手机号</div>
@@ -41,6 +52,7 @@
</template>
<script setup>
   import { uploadFileApi } from '@/api/index'
   import showDefaultHeader from "@/static/images/user/default-header.png";
   import {
      getEnvObj,
@@ -62,7 +74,22 @@
      phone: '',
      email: '',
      deptName: '',
      sex: 2,
   });
   const sexList = [
      {
         label: '男',
         name: '0'
      },
      {
         label: '女',
         name: '1'
      },
      {
         label: '未知',
         name: '2'
      }
   ]
   // 校验手机号
   const validatePhone = () => {
      const phone = userInfo.value.phone
@@ -97,15 +124,14 @@
   const getUserInfoData = () => {
      getUserInfo().then(res => {
         const user = res.data.data;
         console.log('user',user)
         userInfo.value = {
            id: user.userId,
            avatar: user.avatar,
            nickName: user.nickName,
            // realName: user.realName,
            phone: user.phonenumber,
            email: user.sysDept.email,
            deptName: user.sysDept.deptName,
            sex: user.sex || 2,
         };
      });
@@ -113,45 +139,47 @@
   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)
            }
         });
      })
   }
   // 提交文件
function afterReadFile(event) {
    console.log('上传的文件:', event);
    // 准备上传参数
    const uploadParams = {
        name: event.name, // 服务器端接收文件的字段名
        file: event.file, // 传入文件对象
        filePath: event.filePath, // 文件路径
    };
    // 调用上传文件接口
    uploadFileApi(uploadParams).then(res => {
        uni.hideLoading();
        console.log('上传成功结果:', res);
        // 根据接口返回的数据结构处理结果
        if (res.data && res.data.code === 200) {
            const uploadResult = res.data.data;
         userInfo.value.avatar = uploadResult.fileUrl || '文件上传成功';
            uni.showToast({
                title: '上传成功',
                icon: 'success'
            });
        } else {
            uni.showToast({
                title: res.msg || '上传失败',
                icon: 'none'
            });
        }
    }).catch(err => {
        uni.hideLoading();
        console.error('上传失败:', err);
        uni.showToast({
            title: '上传失败',
            icon: 'none'
        });
    });
}
   const uploadAvatar = () => {
      uni.chooseImage({
         count: 1,
@@ -176,35 +204,11 @@
               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'
               });
            });
            afterReadFile({
               file: tempFile,
               filePath: filePath,
               name: fileName,
            })
         }
      });
   }
@@ -247,24 +251,21 @@
      position: relative;
   }
   .pageBg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("../../../static/images/user/userbg.svg")  no-repeat ;
      background-size: 100%;
      background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/images/user/userBg1.png")  no-repeat ;
        background-size: 100%;
   }
   .avatarBox {
      position: absolute;
      top: 30rpx;
      width: 228rpx;
      height: 228rpx;
      margin: 76rpx 0;
   }
   .detailBox {
      position: absolute;
      top: 360rpx;
      // left: 0;
      top: 280rpx;
      width: 702rpx;
      min-height: 430rpx;
      background: #FFFFFF;
@@ -320,15 +321,15 @@
   .custom-style {
      width: 276rpx;
      height: 100rpx;
      height: 76rpx;
   }
   :deep(.u-button.data-v-461e713c){
      width: 276rpx !important;
      height: 100rpx !important;
      height: 76rpx !important;
   }
   .note {
      position: absolute;
      bottom: 400rpx;
      bottom: 300rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 10px;