feat:我的

张含笑

2025-10-22 5bab32c7f7fa0a232d407a1ff0f6b21adfd764b0

 src/subPackages/userDetail/infos/index.vue

@@ -1,43 +1,121 @@
<!-- 个人资料 -->
<template>
  <view class="infoBox"> 
  <div class="avatarBox">
     <u-avatar :src="userInfo.avatar" size="114" mode="aspectFill" />
  </div>
   <view class="container">
      <div class="avatarBox">
         <u-avatar :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" />

   </view>
   <viewclass="detailBox">
        111
   </view>
         </div>
         <div class="orderRow">
            <div class="rowTitle">邮箱</div>
            <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
               class="input-item" />
         </div>
      </view>
      <view class="btngroup">
         <u-button color="#AEAEAE" round @click="reset">重置</u-button>
         <u-button color="#1D6FE9" round @click="submit">提交</u-button>
      </view>
   </view>
</template>

<script setup>
   import { getUserInfo, updateInfo, updatePassword } from '@/api/user/index.js';

   import {
      getUserInfo,
      updateInfo,
      updatePassword
   } from '@/api/user/index.js';
   const userInfo = ref({
     id: '',
     avatar: '',
     realName: '',
     name: '',
     phone: '',
     email: '',
     deptName: '',
      id: '',
      avatar: '',
      realName: '',
      name: '',
      phone: '',
      email: '',
      deptName: '',
   });
   // 校验手机号
   const validatePhone = () => {
      const phone = userInfo.value.phone
      if (!phone) return true
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(phone)) {
			
         uni.showToast({
            title: '请输入正确的手机号码',
            icon: 'none',
            duration: 2000
         });
         return false
      }
      return true
   }
   // 校验邮箱
   const validateEmail = () => {
      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',
            duration: 2000
         });
         return false
      }
      return true
   }
   const getUserInfoData = () => {
     getUserInfo().then(res => {
       const user = res.data.data;
	
       userInfo.value = {
         id: user.id,
         avatar: user.avatar,
         name: user.name,
         realName: user.realName,
         phone: user.phone,
         email: user.email,
         deptName: user.deptName,
       };
      console.log('用户信息',userInfo.value)
     });
      getUserInfo().then(res => {
         const user = res.data.data;
         userInfo.value = {
            id: user.id,
            avatar: user.avatar,
            name: user.name,
            realName: user.realName,
            phone: user.phone,
            email: user.email,
            deptName: user.deptName,
         };

      });
   };
   const reset = () => {
      getUserInfoData();
   };
   const submit = () => {
      if (!validatePhone() || !validateEmail()) return
      userInfo.value.name = userInfo.value.realName;
      updateInfo(userInfo.value).then(res => {
         if (res.data.code === 200) {
            uni.showToast({
               title: '修改信息成功',
               icon: 'none',
               duration: 2000
            });

         } else {
            uni.showToast({
               title: res.msg,
               icon: 'none',
               duration: 2000
            });
         }
			
      });
      getUserInfoData()
   };
   onShow(async () => {
      getUserInfoData()
@@ -45,26 +123,72 @@
</script>

<style lang="scss" scoped>
   .infoBox {
   .container {

      width: 100%;
      height: 298px;
      background: url('/src/static/images/user/userBg.svg') no-repeat center;
      background-size: 100% 100%;
        display: flex;
          justify-content: center;
			
      .avatarBox {
         width: 114px;
         height: 114px;
         margin: 38px 0;
			
      }
		
      // min-height: 100vh;
      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;
   }

   .detailBox {
      width: 351px;
      height: 215px;

      min-height: 215px;
      background: #FFFFFF;
      border-radius: 6px 6px 6px 6px;
      border-radius: 6px;

      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

      .orderRow {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 48px;
         border-bottom: 1px solid #f5f5f5;
         color: #7b7b7b;
         padding: 0 12px;

         .rowTitle {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 15px;
            color: #222324;
            white-space: nowrap;
         }

         ::v-deep .u-input {
            border: none !important;
            background: transparent !important;
         }

         ::v-deep .u-input__input {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            padding: 0 !important;
            margin: 0 !important;
            height: auto !important;
         }
      }
   }
</style>

   .btngroup {
      display: flex;
      margin-top: 120px;
   }
</style>