张含笑
2025-10-22 965e92b958ebc50dc7d475da9e198f135091f93f
src/pages/user/index.vue
@@ -1,74 +1,196 @@
<!-- 我的 -->
<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="mt-20rpx">
      <u-cell-group>
        <u-cell icon="setting" title="退出登录" is-link @click="logOut"/>
      </u-cell-group>
    </view>
  </view>
   <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-20rpx">
            <u-avatar :src="userStore?.userInfo?.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>中图智飞(江西省)</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="mt-20rpx">
         <div class="goOutStyle" @click="logOut">退出登录</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 {
      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 toCopy = async () => {
  await setClipboardData({data: "1234567890"});
  const data = await getClipboardData();
};
   const {
      setClipboardData,
      getClipboardData
   } = useClipboard();
   const userStore = useUserStore();
   // console.log('userStore', userStore.userInfo);
   // 复制
   const toCopy = async () => {
      await setClipboardData({
         data: "1234567890"
      });
      const data = await getClipboardData();
   };
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,'用户设备')
  })
}
// 登录鉴权,微信小程序端点击tabbar的底层逻辑不触发uni.switchTab,需要在页面onShow生命周期中校验权限
onShow(async () => {
  getDeviceRegion()
  onShow(()=>{
    uni.setTabBarItem({
      index: 2, // Tab 的索引(从0开始)
      visible: false,
    })
  })
  // window.addEventListener('message', (event) => {
  //   console.log('message')
  // })
  // setInterval(() => {
    // sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
  // }, 2000)
});
   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`
         });
      }
   }
   // 登录鉴权,微信小程序端点击tabbar的底层逻辑不触发uni.switchTab,需要在页面onShow生命周期中校验权限
   onShow(async () => {
      getDeviceRegion()
      // window.addEventListener('message', (event) => {
      //   console.log('message')
      // })
      // setInterval(() => {
      // sWebViewRef.value.evalJs(`x_sun('${test.value}')`)
      // }, 2000)
   });
</script>
<style scoped lang="scss">
   .page-wrap {
      width: 100%;
      height: 298px;
      background: url('/src/static/images/user/userBg.svg') no-repeat center;
      background-size: 100% 100%;
   }
   .userName {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #000000;
   }
   .departs {
      display: flex;
      align-items: center;
      margin-top: 11px;
      span {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: rgba(0, 0, 0, 0.6);
         margin-left: 3px;
      }
   }
   .rightLogo {
      width: 100px;
      height: 40px;
   }
   .goOutStyle {
      width: 295px;
      height: 38px;
      background: #1D6FE9;
      border-radius: 20px 20px 20px 20px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      text-align: center;
      line-height: 38px;
      margin: auto;
      margin-top: 57px;
   }
   .personalInformation {
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      .message,
      .passwordBox {
         width: 170px;
         height: 80px;
         .messagebox{
            padding: 10px 12px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #000000;
         }
         .editInfo {
            padding: 10px 12px;
            color: rgba(0, 0, 0, 0.5);
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 12px;
            display: flex;
            align-items: center;
            img{
               width: 14px;
               height: 14px;
            }
         }
      }
      .message {
         background: url('/src/static/images/user/info.svg') no-repeat center;
         background-size: 100% 100%;
      }
      .passwordBox {
         background: url('/src/static/images/user/password.svg') no-repeat center;
         background-size: 100% 100%;
      }
   }
</style>