uniapp-vue3-vite-ts-template/src/pages/about/index.vue

<script lang="ts" setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/inedx.vue';
import { useAuthStore } from '@/state/modules/auth';
import { useRouter } from '@/hooks/router';

const authStore = useAuthStore();
const isLogin = ref(false);
const router = useRouter();
onShow(() => {
    isLogin.value = authStore.isLogin;
});
const handleJump = (url: string) => {
    router.push(url);
};

// 登出
const handleLoginOut = () => {
    authStore.loginOut().then(() => {
        isLogin.value = false;
    });
};
</script>

<template>
    <AppProvider>
        <view class="container">
            <view class="head-wrap">
                <view class="avatar">
                    <image class="img" src="/static/images/avatar.png" />
                </view>
                <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
            </view>
            <view class="cell"><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log')">log</BasicButton></view>
            <view class="cell" v-if="isLogin"><BasicButton @click="handleLoginOut">登出</BasicButton></view>
            <view class="cell" v-else>
                <BasicButton @click="handleJump('/pages/login/index')"> 登入 </BasicButton>
            </view>
        </view>
    </AppProvider>
</template>

<style lang="scss" scoped>
.container {
    padding: 96rpx 24rpx;
    .head-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        .avatar {
            height: 120rpx;
            width: 120rpx;
            border: 2rpx solid #d1d5db;
            border-radius: 120rpx;
            overflow: hidden;
            padding: 6rpx;
            .img {
                height: 100%;
                width: 100%;
            }
        }
        .desc {
            font-size: 28rpx;
            line-height: 120rpx;
        }
    }
    .cell {
        margin-top: 60rpx;
        text-align: center;
    }
}
</style>