WebAgent/src/pages/profile/index.vue

<script setup lang="ts">
import router from '@/router'
import { useUserStore } from '@/stores'
import defaultAvatar from '@/assets/images/default-avatar.svg'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLogin = computed(() => !!userInfo.value.uid)

function login() {
  if (isLogin.value)
    return

  router.push({ name: 'Login', query: { redirect: 'Profile' } })
}
</script>

<template>
  <div>
    <VanCellGroup :inset="true">
      <van-cell center :is-link="!isLogin" @click="login">
        <template #title>
          <van-image :src="userInfo.avatar || defaultAvatar" round class="h-14 w-14" />
        </template>

        <template #value>
          <span v-if="isLogin">{{ userInfo.name }}</span>
          <span v-else>Login</span>
        </template>
      </van-cell>
    </VanCellGroup>

    <VanCellGroup :inset="true" class="!mt-4">
      <van-cell title="Settings" icon="setting-o" is-link to="/settings">
        <template #icon>
          <div class="i-carbon:settings text-gray-400 mr-2 self-center" />
        </template>
      </van-cell>
      <van-cell title="Documentation" is-link url="https://vue-zone.github.io/docs/vue3-vant-mobile/">
        <template #icon>
          <div class="i-carbon:doc text-gray-400 mr-2 self-center" />
        </template>
      </van-cell>
    </VanCellGroup>
  </div>
</template>

<route lang="json5">
{
  name: 'Profile'
}
</route>