manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/my/index.vue

<template>
  <Page title="我的" styleReset="backNone">
    <template v-slot:body>
      <div class="w-full h-full flex flex-col items-center">
        <div class="headPortrait">
          <img src="/src/assets/image/camera.png" class="w-full h-full">
        </div>
        <div class="flex-1">
          <div class="xinming">
            <TranslationComponent :openId="userInfo.userInfo.name" />
          </div>
          <div class="flex flex-col justify-center text-[#5D5D5D] leading-6">
            <div class="text-center">公司: {{ userInfo.userInfo?.company?.companyName }}</div>
            <div class="text-center">角色: {{ userInfo.userInfo?.roleName }}</div>
          </div>
        </div>
        
        <div class="w-full mb-40 px-24">
          <van-button type="primary" @click="signOut" class="w-full">退出登录</van-button>
        </div>
      </div>
      <!-- <van-button type="primary" @click="signOut">退出</van-button> -->
    </template>

    <template v-slot:footer>
      <Footer />
    </template>
  </Page>
</template>

<script setup>
import { ref } from "vue";
import { useLifecycle } from "@hooks/useCommon.js";
import useRouterStore from "@store/useRouterStore.js";
import useInfoStore from "@store/useInfoStore.js";
import Footer from "@components/page/footer.vue";

const router = useRouterStore()
const userInfo = useInfoStore()
function signOut() {
  router.redirectTo({
    pathName: 'login',
    success: () => {
      localStorage.clear()
      sessionStorage.clear()
      window.location.reload();
    }
  })
}

useLifecycle({
  load: () => {

  }
});
</script>

<style lang="scss" scoped>
.backNone {
  background: linear-gradient(to bottom, #E0EFFF, #F8F8F8 30%) !important;

  :deep(.van-nav-bar) {
    background: none;
  }
}

.headPortrait {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;

  &::after {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url('@/assets/image/camera.png');
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.xinming {
  color: #000000;
  font-family: PingFang SC;
  font-weight: semibold;
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0px;
  text-align: left;
  margin-bottom: 6px;
  text-align: center;
}
</style>