EmploymentSite/h5app/src/views/pages/user/myInfo.vue

<template>
  <ion-page>
    <ion-header  class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="()=>router.push('./')"></ion-icon>
        </ion-buttons>
        <ion-title>个人信息</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <form class="form-table">
        <ion-item>
          <ion-label>登录名</ion-label>
          <ion-text>{{ userInfo.loginID }}</ion-text>
        </ion-item>
        <ion-item>
          <ion-label>姓名</ion-label>
          <ion-text>{{ userInfo.siteUserName }}</ion-text>
        </ion-item>
        <ion-item>
          <ion-label>性别</ion-label>
          <ion-text>{{ userInfo.genderName }}</ion-text>
        </ion-item>
        <ion-item>
          <ion-label>人员类别</ion-label>
          <ion-text>{{ userInfo.userTypeName }}</ion-text>
        </ion-item>
        <ion-item>
        <ion-label>电话号码</ion-label>
          <ion-text>{{ userInfo.userMobile }}</ion-text>
        </ion-item>
      </form>
    </ion-content>

  </ion-page>
</template>

<script setup lang="ts">
import {defineComponent, onUpdated, reactive, ref} from 'vue';
import router from '@/router';
import {useUserStore} from '@/store/modules/user';
import {arrowBackOutline} from 'ionicons/icons';
const userStore = useUserStore();
const userInfo = ref(userStore.getUserInfo);
</script>

<style scoped lang="less">
ion-content {
  --background: #ffffff !important;
}

ion-item {
  --inner-border-width: 0px 0px 1px 0px;
  margin-right: 10px;
}

</style>