feat:我的页面资源更换，及部分样式调整

shuishen

2025-10-28 91cc1c09b056ffd630fd4b699cda3d63e18b1ff6

 src/pages/user/index.vue

@@ -1,209 +1,225 @@
<!-- 我的 -->
<template>
   <view class="page-wrap">
		
      <view class="flex items-center pb-30rpx pl-30rpx pr-20rpx">
         <view class="mr-20rpx">
            <u-avatar :src="user.avatar" size="70" />
         </view>
         <view class="flex-1">
            <view class="userName">{{ userStore?.userInfo?.nick_name }}</view>
            <view class="departs">
               <img src="/src/static/images/user/mobile.svg" alt="" />
               <span>{{user.deptName}}</span>
            </view>
         </view>
         <view class="rightLogo">
            <img src="/src/static/images/user/logo2.svg" alt="" />
         </view>
      </view>
      <view class="personalInformation">
         <div class="message">
            <div class="messagebox">个人信息</div>
            <div class="editInfo" @click="handelEdit(1)">点击编辑
            <img src="/src/static/images/user/rightBtn.svg" alt="" /></div>
         </div>
         <div class="passwordBox">
            <div class="messagebox">修改密码</div>
            <div class="editInfo" @click="handelEdit(2)">点击编辑 <img src="/src/static/images/user/rightBtn.svg" alt="" /></div>
         </div>
      </view>
  <view class="page-wrap">

      <view class="mt-20rpx">
         <div class="goOutStyle" @click="logOut">退出登录</div>
      </view>
      <div class="bottomLogo"><img src="/src/static/images/user/logo1.svg" alt="" /></div>
   </view>
    <view class="flex items-center pb-30rpx pl-30rpx pr-20rpx">
      <view class="mr-20rpx">
        <u-avatar :src="user.avatar" size="70" />
      </view>
      <view class="flex-1">
        <view class="userName">{{ userStore?.userInfo?.nick_name }}</view>
        <view class="departs">
          <img src="/src/static/images/user/mobile.svg" alt="" />
          <span>{{user.deptName}}</span>
        </view>
      </view>
      <view class="rightLogo">
        <img src="/src/static/images/user/logo2.png" alt="" />
      </view>
    </view>
    <view class="personalInformation">
      <div class="message">
        <div class="messagebox">个人信息</div>
        <div class="editInfo" @click="handelEdit(1)">点击编辑
          <img src="/src/static/images/user/rightBtn.svg" alt="" />
        </div>
      </div>
      <div class="passwordBox">
        <div class="messagebox">修改密码</div>
        <div class="editInfo" @click="handelEdit(2)">点击编辑 <img src="/src/static/images/user/rightBtn.svg" alt="" />
        </div>
      </div>
    </view>

    <view class="mt-20rpx">
      <div class="goOutStyle" @click="logOut">退出登录</div>
    </view>
    <div class="bottomLogo"><img src="/src/static/images/user/logo1.png" alt="" /></div>
  </view>
</template>

<script setup>
   import {
      getUserInfo,
      updateInfo,
      updatePassword
   } from '@/api/user/index.js';
   import {
      useClipboard
   } from "@/hooks";
   import {
      useUserStore
   } from "@/store/index.js";
   import {
      onShow
   } from "@dcloudio/uni-app";
   import {
      getDeviceRegionApi
   } from "@/api/map.js";
  import {
    getUserInfo,
    updateInfo,
    updatePassword
  } from '@/api/user/index.js';
  import {
    useClipboard
  } from "@/hooks";
  import {
    useUserStore
  } from "@/store/index.js";
  import {
    onShow
  } from "@dcloudio/uni-app";
  import {
    getDeviceRegionApi
  } from "@/api/map.js";

   const {
      setClipboardData,
      getClipboardData
   } = useClipboard();
   const userStore = useUserStore();
   const user = ref('')
   const getUserInfoData = () => {
      getUserInfo().then(res => {
          user.value = res.data.data;
      });
   };
  const {
    setClipboardData,
    getClipboardData
  } = useClipboard();
  const userStore = useUserStore();
  const user = ref('')
  const getUserInfoData = () => {
    getUserInfo().then(res => {
      user.value = res.data.data;
    });
  };

   function logOut() {
      userStore.setUserInfo(null)
      uni.redirectTo({
         url: '/pages/login/index'
      })
   }
  function logOut() {
    userStore.setUserInfo(null)
    uni.redirectTo({
      url: '/pages/login/index'
    })
  }

   function getDeviceRegion() {
      getDeviceRegionApi().then(res => {
         // console.log(res.data.data, '用户设备')
      })
   }
   const handelEdit=(val)=>{
  function getDeviceRegion() {
    getDeviceRegionApi().then(res => {
      // console.log(res.data.data, '用户设备')
    })
  }
  const handelEdit = (val) => {

      if(val === 1){
         uni.navigateTo({
           url: `/subPackages/userDetail/infos/index`
         });
      }else {
         uni.navigateTo({
           url: `/subPackages/userDetail/password/index`
         });
      }
    if (val === 1) {
      uni.navigateTo({
        url: `/subPackages/userDetail/infos/index`
      });
    } else {
      uni.navigateTo({
        url: `/subPackages/userDetail/password/index`
      });
    }

   }
   // 登录鉴权，微信小程序端点击tabbar的底层逻辑不触发uni.switchTab，需要在页面onShow生命周期中校验权限
   onShow(async () => {
      getDeviceRegion()
      getUserInfoData()
      uni.setTabBarItem({
        index: 2, // Tab 的索引（从0开始）
        visible: false,
      })
      uni.setTabBarItem({
        index: 3, // Tab
        visible: true,
      });
   });
  }
  // 登录鉴权，微信小程序端点击tabbar的底层逻辑不触发uni.switchTab，需要在页面onShow生命周期中校验权限
  onShow(async () => {
    getDeviceRegion()
    getUserInfoData()
    uni.setTabBarItem({
      index: 2, // Tab 的索引（从0开始）
      visible: false,
    })
    uni.setTabBarItem({
      index: 3, // Tab
      visible: true,
    });
  });
</script>
<style scoped lang="scss">
   .page-wrap {
      width: 100%;
      height: 100%;
		
      padding-top: 88rpx;
   }
  .page-wrap {
    width: 100%;
    height: 100%;

   .userName {
      font-family: "Source Han Sans CN";
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
    padding-top: 88rpx;
  }

   }
  .userName {
    font-weight: 700;
    font-size: 36rpx;
    color: #000000;

   .departs {
      display: flex;
      align-items: center;
      margin-top: 22rpx;
  }

      span {
         font-family: "Source Han Sans CN";
         font-weight: 400;
         font-size: 28rpx;
         color: rgba(0, 0, 0, 0.6);
         margin-left: 6rpx;
      }
   }
  .departs {
    display: flex;
    align-items: center;
    margin-top: 22rpx;

   .rightLogo {
      width: 200rpx;
      height: 80rpx;
   }
      .bottomLogo {
          position: absolute;
          bottom:50rpx;
          left: 0;
          right: 0;
          margin: 0 auto;
          text-align: center;
      }
   .goOutStyle {
      width: 590rpx;
      height: 76rpx;
      background: #1D6FE9;
      border-radius: 40rpx;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 76rpx;
      margin: auto;
      margin-top: 114rpx;
   }
    span {
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-left: 6rpx;
    }
  }

   .personalInformation {
      display: flex;
      justify-content: space-between;
      padding: 0 24rpx;
  .rightLogo {
    width: 200rpx;
    height: 80rpx;

      .message,
      .passwordBox {
         width: 340rpx;
         height:160rpx;
         .messagebox{
            padding: 20rpx 24rpx;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
         }
         .editInfo {
            padding: 20rpx 24rpx;
            color: rgba(0, 0, 0, 0.5);
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            img{
               width: 28rpx;
               height: 28rpx;
            }
         }
      }
    img {
      width: 100%;
      height: 100%;
    }
  }

      .message {
         background: url('/src/static/images/user/info.svg') no-repeat center;
         background-size: 100% 100%;
  .bottomLogo {
    position: absolute;
    bottom: 50rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;

      }
    img {
      width: 128rpx;
      height: 52rpx;
    }
  }

      .passwordBox {
         background: url('/src/static/images/user/password.svg') no-repeat center;
         background-size: 100% 100%;
  .goOutStyle {
    width: 590rpx;
    height: 76rpx;
    background: #1D6FE9;
    border-radius: 40rpx;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 76rpx;
    margin: auto;
    margin-top: 114rpx;
  }

      }
   }
  .personalInformation {
    display: flex;
    justify-content: space-between;
    padding: 0 24rpx;

    .message,
    .passwordBox {
      width: 340rpx;
      height: 160rpx;

      .messagebox {
        padding: 20rpx 24rpx;
        font-family: "Source Han Sans CN";
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }

      .editInfo {
        padding: 20rpx 24rpx;
        color: rgba(0, 0, 0, 0.5);
        font-family: "Source Han Sans CN";
        font-weight: 400;
        font-size: 24rpx;
        display: flex;
        align-items: center;

        img {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }

    .message {
      background: url('/src/static/images/user/info.png') no-repeat center;
      background-size: 100% 100%;

    }

    .passwordBox {
      background: url('/src/static/images/user/password.png') no-repeat center;
      background-size: 100% 100%;

    }
  }
</style>