labsop_scientific_h5/pages/my/index.vue

<template>
  <view class="app-container">
    <view class="header">
      <view class="avatar mr10">
        <uv-image width="120rpx" height="120rpx" shape="circle"
          :src="userInfo.avatar || '../../static/imgs/tabBar/my-active.png'" />
      </view>
      <view class="content">
        <view class="bold flex align-center">
          <text class="ellipsis flex-1">{{ `${userInfo.nickName || '未知用户'}` }}</text>
          <!-- <uv-icon name="setting" size="20" color="#fff" @click="onRouterPush('/pages/user/edit')" /> -->
        </view>
        <view class="info-row">
          <text class="ellipsis">{{ userInfo.deptName || '暂无部门' }}</text>
        </view>
        <view class="info-row">
          <text class="ellipsis">{{ userInfo.phone || '暂无手机号' }}</text>
        </view>
      </view>
    </view>

    <view class="main">
      <!-- 占位预留 -->
    </view>

    <view class="footer">
      <!-- <uv-button customStyle="margin-bottom: 20rpx;" color="#1cb4fd" plain text="修改密码"
        @click="onRouterPush('/pages/user/password')"></uv-button> -->
      <uv-button type="primary" text="退出登录" @click="signOut"></uv-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const signOut = () => {
  uni.showModal({
    title: '提示',
    content: '确认退出登录?',
    success: async (res) => {
      if (res.confirm) {
        // 调用 store 中的注销方法，自动清理缓存
        await userStore.logout();
        // 跳转回登录页
        uni.reLaunch({ url: '/pages/login/index' });
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--window-top) - var(--window-bottom));
  background-color: #f5f7fa;
  padding: 20rpx;
  box-sizing: border-box;

  .header {
    background-color: #1c9bfd;
    color: #fff;
    padding: 30rpx 40rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(28, 155, 253, 0.3);

    .avatar {
      margin-right: 30rpx;
      flex-shrink: 0;
      background-color: #fff;
      border-radius: 50%;
      padding: 4rpx;
      /* 白色边框效果 */
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;

      .bold {
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 10rpx;
      }

      .info-row {
        font-size: 26rpx;
        margin-top: 8rpx;
        opacity: 0.9;
      }

      .ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
      }

      .flex-1 {
        flex: 1;
      }
    }
  }

  .main {
    flex: 1;
    overflow-y: auto;
  }

  .footer {
    flex: 0 0 auto;
    margin: 40rpx 0 10rpx;
  }
}

.mr10 {
  margin-right: 20rpx;
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}
</style>