吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-app/src/subPackages/userDetail/infos/index.vue
@@ -1,5 +1,15 @@
<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">
         <!-- @click="uploadAvatar" -->
         <u-avatar  :src="userInfo.avatar || defaultAvatar" size="114" mode="aspectFill" />
@@ -15,6 +25,21 @@
               <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>
               <div>{{userInfo.phone}}</div>
               <!-- <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
@@ -23,15 +48,15 @@
            </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>{{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>
@@ -51,7 +76,22 @@
      phone: '',
      email: '',
      deptName: '',
      sex: 2,
   });
   const sexList = [
      {
         label: '男',
         name: '0'
      },
      {
         label: '女',
         name: '1'
      },
      // {
      //    label: '未知',
      //    name: '2'
      // }
   ]
   // 校验手机号
   const validatePhone = () => {
      const phone = userInfo.value.phone
@@ -93,6 +133,7 @@
            phone: user.sysDept.phone,
            email: user.sysDept.email,
            deptName: user.sysDept.deptName,
            sex: user.sex || 2,
         };
      });
@@ -218,19 +259,44 @@
      });
   };
// 返回按钮点击事件
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;
@@ -238,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;
      }
@@ -294,6 +362,9 @@
   .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;