shop-web/src/pages/me/index.vue

54 lines
1.8 KiB
Vue

<script setup lang="ts">
import { useUserStore } from "@/pinia/stores/user"
import { useDark } from "@@/composables/useDark"
import faviconUrl from "/favicon.png?url"
const router = useRouter()
const userStore = useUserStore()
const { isDark, changeDark } = useDark()
function onClick() {
showToast("更多功能,敬请期待 ~")
}
function onLogout() {
userStore.resetToken()
router.push("/login")
}
</script>
<template>
<div un-py-16px>
<van-cell-group un-mb-8px>
<van-cell size="large" is-link center @click="onClick">
<template #title>
<div un-flex-y-center un-gap-16px>
<van-image :src="faviconUrl" un-w-44px un-h-44px />
<div un-flex un-flex-col>
<span un-fw-600>{{ userStore.username }}</span>
<span un-text-14px un-color-hex-969799>个人资料</span>
</div>
</div>
</template>
</van-cell>
</van-cell-group>
<van-cell-group un-mb-8px>
<van-cell title="🌗 Dark Mode 黑暗模式" center>
<template #right-icon>
<van-switch :model-value="isDark" size="min(5.333vw, 40px)" @click="changeDark" />
</template>
</van-cell>
<van-cell title="📚 Documentation 文档教程" is-link url="https://juejin.cn/column/7472609448201666599" />
<van-cell title="📦️ GitHub 代码仓库" is-link url="https://github.com/un-pany/mobvue" />
<van-cell title="☕ Donate 捐赠" is-link url="https://github.com/un-pany/mobvue/issues/1" />
<van-cell title="💰 Pay 付费服务" is-link url="https://github.com/un-pany/mobvue/issues/2" />
<van-cell title="💬 Group 交流群" is-link url="https://github.com/un-pany/mobvue/issues/3" />
</van-cell-group>
<van-button block @click="onLogout" un-b-0px un-rounded-0px>
退出登录
</van-button>
</div>
</template>