吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-app/src/subPackages/userDetail/infos/index.vue
@@ -1,60 +1,97 @@
<template>
   <view class="container">
    <u-navbar
      title="个人资料"
      :is-back="true"
      back-text=""
      :back-icon-size="40"
      @left-click="onBackClick"
    >
    </u-navbar>
      <view class="pageBg"></view>
      <div class="avatarBox">
         <u-avatar @click="uploadAvatar" :src="userInfo.avatar" size="114" mode="aspectFill" />
         <!-- @click="uploadAvatar" -->
         <u-avatar  :src="userInfo.avatar || defaultAvatar" size="114" mode="aspectFill" />
      </div>
      <view class="detailBox">
         <div class="detailCon">
            <div class="orderRow">
               <div class="rowTitle">姓名</div>
               <div>{{userInfo.realName}}</div>
            </div>
         <div class="rowTitle">姓名</div>
         <u-input input-align="right" v-model="userInfo.nickName" placeholder="请输入姓名" class="input-item" />
      </div>
            <div class="orderRow">
               <div class="rowTitle">所属单位</div>
               <div>{{userInfo.deptName}}</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>
               <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
                  class="input-item" />
               <div>{{userInfo.phone}}</div>
               <!-- <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
                  class="input-item" /> -->
            </div>
            <div class="orderRow">
               <div class="rowTitle">邮箱</div>
               <!-- <div>{{userInfo.email}}</div> -->
               <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
                  class="input-item" />
            </div>
         </div>
      </view>
      <view class="btngroup">
         <u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button>
         <u-button color="#1D6FE9" class="custom-style" shape="circle" @click="submit">提交</u-button>
         <u-button color="#AEAEAE" class="custom-style"  @click="reset">重置</u-button>
         <u-button color="#1D6FE9" class="custom-style"  @click="submit">提交</u-button>
      </view>
   </view>
</template>
<script setup>
import defaultAvatar  from '/static/images/defaultAvatar.svg'
   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: '',
import { getUserInfo, updateInfo, updatePassword } from '@/api/user/index.js';
import { useUserStore } from "@/store/index.js";
const userInfo = ref({
      userId: '',
      avatar: '',
      realName: '',
      name: '',
      nickName: '',
      phone: '',
      email: '',
      deptName: '',
      sex: 2,
   });
   const sexList = [
      {
         label: '男',
         name: '0'
      },
      {
         label: '女',
         name: '1'
      },
      // {
      //    label: '未知',
      //    name: '2'
      // }
   ]
   // 校验手机号
   const validatePhone = () => {
      const phone = userInfo.value.phone
@@ -90,13 +127,13 @@
      getUserInfo().then(res => {
         const user = res.data.data;
         userInfo.value = {
            id: user.id,
            userId: user.userId,
            avatar: user.avatar,
            name: user.name,
            realName: user.realName,
            phone: user.phone,
            email: user.email,
            deptName: user.deptName,
            nickName: user.nickName,
            phone: user.sysDept.phone,
            email: user.sysDept.email,
            deptName: user.sysDept.deptName,
            sex: user.sex || 2,
         };
      });
@@ -161,7 +198,7 @@
               const pathWithoutProtocol = filePath.replace(/^file:\/\//, '');
               fileName = pathWithoutProtocol.split('/').pop() || 'unknown.png';
            }
            // 显示加载中
            uni.showLoading({
               title: '上传中...'
@@ -169,9 +206,9 @@
            // 上传文件
            uploadUtil({
               filePath: filePath,
               filePath: filePath,
               formData: {
                  fileName: fileName,
                  fileName: fileName,
                  sn: 'avatar_upload'
               },
               url: '/blade-resource/oss/endpoint/put-file'
@@ -201,7 +238,6 @@
   }
   const submit = () => {
      if (!validatePhone() || !validateEmail()) return
      userInfo.value.name = userInfo.value.realName;
      updateInfo(userInfo.value).then(res => {
         if (res.data.code === 200) {
            uni.showToast({
@@ -221,21 +257,46 @@
         }
      });
   };
// 返回按钮点击事件
const onBackClick = () => {
  uni.navigateBack()
}
   onShow(async () => {
      getUserInfoData()
   });
</script>
<style lang="scss" scoped>
   .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
   }
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  // 添加导航栏高度的padding-top,避免内容被遮挡
  padding-top: 88rpx;
}
:deep(){
  .u-navbar__content{
    background: url("@/static/images/user/userbg.svg")  no-repeat !important;
    background-size: 100%!important;
    height: 44px !important;
  }
}
      .pageBg {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: url("@/static/images/user/userbg.svg")  no-repeat ;
         background-size: 100%;
      }
   .avatarBox {
      width: 228rpx;
      height: 228rpx;
@@ -243,12 +304,14 @@
   }
   .detailBox {
         position: absolute;
            top: 360rpx;
      width: 702rpx;
      min-height: 430rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-top: 88rpx;
      .detailCon {
         padding: 0 24rpx;
      }
@@ -269,13 +332,13 @@
            white-space: nowrap;
         }
         ::v-deep .u-input {
         :deep(.u-input) {
            border: none !important;
            background: transparent !important;
            padding: 0 !important;
         }
         ::v-deep .u-input__input {
         :deep(.u-input__input) {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
@@ -299,9 +362,12 @@
   .custom-style {
      width: 276rpx;
      height: 76rpx;
        font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 28rpx;
   }
   :deep(.u-button.data-v-461e713c){
      width: 276rpx !important;
      height: 76rpx !important;
   }
</style>
</style>