gypsy-crm-frontend-vu/components/cwg-logout.vue

<template>
  <view class="cursor-pointer" :data-tooltip="t('mine.logout')">
    <view class="pc-btn" @click="handleLogout">
      <view>{{t('vu.Btn.Logout')}}</view>
    </view>
  </view>
  <cwg-global-popup/>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { userApi } from '@/api/user'
import useUserStore from '@/stores/use-user-store'
import useRouter from "@/hooks/useRouter"
import { usePopup } from '@/hooks/usePopup'

const router = useRouter()
const userStore = useUserStore()
const { confirm } = usePopup()
const { t } = useI18n()

async function handleLogout() {
  const res = await confirm({
    title: t('Msg.SystemPrompt'),
    content: t('mine.p'),
    showCancel: t('mine.b2'),
    confirmText: t('mine.b1'),
  })
  if (!res) return
  try {
    await userApi.logout()
  } catch (e) { }
  userStore.clearUserInfo()
  uni.setStorageSync('logoutToSystem', 1)
  // uni.$emit('updateSystemList')
  router.push('/pages/login/index')
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.pc-btn {
  width: auto;
  height: px2rpx(28);
  border-radius: px2rpx(4);
  padding: 0 px2rpx(10);
  border: 1px solid #EE1C25;
  background: #FFF5F5;
  display: flex;
  align-items: center;
  font-size: px2rpx(14);
  margin-left: px2rpx(20);
  &:hover {
    color: #ffffff;
    background: #EE1C25;
    border-color: #EE1C25;
  }
}



:deep(.cwg-dropdown-menu-container .menu .menu-item) {
  min-height: px2rpx(36);
}

:deep(.cwg-dropdown) {
  overflow: visible !important;
}
</style>