xiangyuan-gov-app/src/pages/user/index.vue

<template>
  <FlexCol :padding="[40,30,50,30]">
    <FlexRow align="center">
      <Image 
        :src="userInfo?.avatar || UserHead"
        mode="aspectFill" 
        class="avatar" 
        width="100rpx"
        height="100rpx"
        round
      />
      <Width :width="20" />
      <Touchable v-if="userInfo" direction="column" touchable @click="navTo('/pages/user/update/profile')" :flex="1">
        <H4>{{ userInfo.nickname }}</H4>
        <text class="extra"><text class="label">守护编号</text><text>{{ userInfo.id }}</text><text class="label point-label">积分</text><text>{{ userInfo.totalCheckins }}</text></text>
      </Touchable>
      <Touchable v-else direction="column" touchable @click="navTo('/pages/user/login')" :flex="1">
        <H4 class="nickname">请登录</H4>
      </Touchable>
      <Width :width="20" />
      <Icon icon="arrow-right" />
    </FlexRow>
    <Height :height="50" />
    <CellGroup v-if="userInfo">
      <Cell icon="https://mn.wenlvti.net/uploads/20250313/cbc47d0b9cad7891e6154359952858c6.png" title="退出登录" showArrow touchable @click="doLogout" />
    </CellGroup>
  </FlexCol>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store/auth';
import { computed } from 'vue';
import UserHead from '@/static/images/home/UserHead.png';
import CellGroup from '@/components/basic/CellGroup.vue';
import Cell from '@/components/basic/Cell.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Image from '@/components/basic/Image.vue';
import Icon from '@/components/basic/Icon.vue';
import H4 from '@/components/typography/H4.vue';
import Width from '@/components/layout/space/Width.vue';
import Height from '@/components/layout/space/Height.vue';
import { confirm } from '@/components/utils/DialogAction';
import { navTo } from '@/components/utils/PageAction';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

const authStore = useAuthStore();
const userInfo = computed(() => authStore.userInfo);

function doLogout() {
  confirm({
    content: '您确定要退出登录吗？',
  }).then((res) => {
    if (res)
      authStore.logout();
  });
}
</script>