<template>
  <view v-if="!authStore.user" class="guest-wrap">
    <slot name="guest">
      <text class="guest-text">请先登录</text>
      <view class="guest-login-btn" @tap="goLogin">去登录</view>
    </slot>
  </view>
  <slot v-else />
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

function goLogin() {
  uni.navigateTo({ url: '/pages/login/index' })
}
</script>

<style lang="scss" scoped>
.guest-wrap {
  @include flex-center;
  flex-direction: column;
  padding: 80px 40px;
}

.guest-text {
  font-size: var(--tk-font-body);
  color: $tx3;
  margin-bottom: 24px;
}

.guest-login-btn {
  @include btn-primary;
  width: auto;
  padding: 0 48px;
}
</style>
