张含笑
2025-11-07 450dc8a1e4e0d643817ffd0eee04b938cc84af74
src/pages/user/index.vue
@@ -1,68 +1,231 @@
<!-- 我的 -->
<template>
  <view class="page-wrap">
    <u-navbar title="" placeholder left-icon="" right-icon="camera-fill"/>
    <view class="flex items-center pb-30rpx pl-30rpx pr-20rpx">
      <view class="mr-10rpx">
        <u-avatar src="/static/images/logo.png" size="70"/>
      </view>
      <view class="flex-1">
        <view class="pb-20rpx text-36rpx">{{ userStore?.userInfo?.nick_name }}</view>
        <view class="u-tips-color text-28rpx" @click="toCopy">
          ID:{{ userStore?.userInfo?.user_id }}
        </view>
      </view>
      <view class="ml-10rpx p-10rpx">
        <u-icon name="scan" color="#969799"/>
      </view>
      <view class="ml-10rpx p-10rpx">
        <u-icon name="arrow-right" color="#969799"/>
      </view>
    </view>
  <view class="userBox">
     <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">
           <image src="@/static/images/user/mobile.svg" alt="" />
           <span>{{user.deptName}}</span>
         </view>
       </view>
       <view class="rightLogo">
         <image 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)">点击编辑
           <image src="@/static/images/user/rightBtn.svg" alt="" />
         </div>
       </div>
       <div class="passwordBox">
         <div class="messagebox">修改密码</div>
         <div class="editInfo" @click="handelEdit(2)">点击编辑 <image src="@/static/images/user/rightBtn.svg" alt="" />
         </div>
       </div>
     </view>
    <view class="mt-20rpx">
      <u-cell-group>
        <u-cell icon="setting" title="退出登录" is-link @click="logOut"/>
      </u-cell-group>
    </view>
     <view class="mt-20rpx">
       <div class="goOutStyle" @click="logOut">退出登录</div>
     </view>
     <div class="bottomLogo"><image src="@/static/images/user/logo1.png" alt="" /></div>
  </view>
  </view>
</template>
<script setup>
import {useClipboard} from "@/hooks";
import {useUserStore} from "@/store/index.js";
import {onShow} from "@dcloudio/uni-app";
import {getDeviceRegionApi} from "@/api/map.js";
  import {
    getUserInfo,
const {setClipboardData, getClipboardData} = useClipboard();
const userStore = useUserStore();
// 复制
const toCopy = async () => {
  await setClipboardData({data: "1234567890"});
  const data = await getClipboardData();
};
  } 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";
function logOut() {
  userStore.setUserInfo(null)
  uni.redirectTo({
    url: '/pages/login/index'
  })
}
  const {
    setClipboardData,
    getClipboardData
  } = useClipboard();
  const userStore = useUserStore();
  const user = ref('')
  const getUserInfoData = () => {
    getUserInfo().then(res => {
      user.value = res.data.data;
    });
  };
function getDeviceRegion() {
  getDeviceRegionApi().then(res =>{
    console.log(res.data.data,'用户设备')
  })
}
  function logOut() {
    userStore.setUserInfo(null)
    uni.reLaunch({
      url: '/pages/login/index'
    })
  }
// 登录鉴权,微信小程序端点击tabbar的底层逻辑不触发uni.switchTab,需要在页面onShow生命周期中校验权限
onShow(async () => {
  getDeviceRegion()
  // window.addEventListener('message', (event) => {
  //   console.log('message')
  // })
  // setInterval(() => {
    // sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
  // }, 2000)
});
  function getDeviceRegion() {
    getDeviceRegionApi().then(res => {
    })
  }
  const handelEdit = (val) => {
    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,
    });
  });
</script>
<style scoped lang="scss">
  .page-wrap {
    width: 100%;
    height: 100%;
  }
.userBox {
    padding-top: 88rpx;
}
  .userName {
    font-weight: 700;
    font-size: 36rpx;
    color: #000000;
  }
  .departs {
    display: flex;
    align-items: center;
    margin-top: 22rpx;
    image {
      width: 28rpx;
      height: 28rpx;
    }
    span {
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-left: 6rpx;
    }
  }
  .rightLogo {
    width: 200rpx;
    height: 80rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .bottomLogo {
    position: absolute;
    bottom: 50rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    image {
      width: 128rpx;
      height: 52rpx;
    }
  }
  .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;
        image {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
    .message {
      background: url(@/static/images/user/info.png) no-repeat center;
      background-size: 100% 100%;
    }
    .passwordBox {
      background: url(@/static/images/user/password.png) no-repeat center;
      background-size: 100% 100%;
    }
  }
</style>