WorkBuddy
69ebf33e18
CI/CD Pipeline / Backend Build & Test (push) Canceled after 0s
CI/CD Pipeline / Admin Web Build (push) Canceled after 0s
CI/CD Pipeline / Mini Program Compile Check (push) Canceled after 0s
CI/CD Pipeline / Migration Validation (push) Canceled after 0s
CI/CD Pipeline / Test Shell Guard (Phase 23 Gate) (push) Canceled after 0s
CI/CD Pipeline / UI Contracts (source-structure gates) (push) Canceled after 0s
CI/CD Pipeline / E2E (live stack) (push) Canceled after 0s
117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
<template>
|
||
<PageLayout title="退出登录">
|
||
<div class="logout">
|
||
<div class="logout__banner">
|
||
<div class="logout__banner-icon">!</div>
|
||
<div class="logout__banner-title">确认退出登录</div>
|
||
</div>
|
||
|
||
<div class="logout__card">
|
||
<div class="logout__section-title">退出后：</div>
|
||
<ul class="logout__list">
|
||
<li>需要重新登录才能继续使用推荐与公益服务</li>
|
||
<li>已拉黑、已匹配等关系数据仍会保留</li>
|
||
<li>个人资料不会被删除，再次登录即可恢复</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<van-button class="logout__btn" type="danger" block round :loading="submitting" @click="onConfirm">
|
||
退出登录
|
||
</van-button>
|
||
<p class="logout__hint">平台不会要求您打电话或邮寄身份证，退出全程在线完成</p>
|
||
</div>
|
||
</PageLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { showConfirmDialog } from 'vant'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { useAppStore } from '@/stores/app'
|
||
import PageLayout from '@/layouts/PageLayout.vue'
|
||
|
||
const router = useRouter()
|
||
const authStore = useAuthStore()
|
||
const appStore = useAppStore()
|
||
|
||
const submitting = ref(false)
|
||
|
||
async function onConfirm() {
|
||
try {
|
||
await showConfirmDialog({ title: '退出登录', message: '确定要退出当前账号吗？' })
|
||
} catch {
|
||
return
|
||
}
|
||
submitting.value = true
|
||
try {
|
||
await authStore.logout()
|
||
appStore.toastSuccess('已退出登录')
|
||
router.replace('/login?clear=1')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.logout {
|
||
padding: 16px;
|
||
}
|
||
.logout__banner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: rgba(240, 72, 62, 0.08);
|
||
border: 1px solid rgba(240, 72, 62, 0.16);
|
||
border-radius: var(--mini-radius);
|
||
padding: 14px;
|
||
}
|
||
.logout__banner-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: rgba(240, 72, 62, 0.14);
|
||
color: var(--mini-danger);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
flex: none;
|
||
}
|
||
.logout__banner-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--mini-danger);
|
||
}
|
||
.logout__card {
|
||
margin-top: 14px;
|
||
background: var(--mini-surface);
|
||
border-radius: var(--mini-radius);
|
||
box-shadow: var(--mini-shadow);
|
||
padding: 14px 16px;
|
||
}
|
||
.logout__section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--mini-text-strong);
|
||
}
|
||
.logout__list {
|
||
margin: 10px 0 0;
|
||
padding-left: 18px;
|
||
font-size: 13px;
|
||
line-height: 1.9;
|
||
color: var(--mini-text-secondary);
|
||
}
|
||
.logout__btn {
|
||
margin-top: 24px;
|
||
}
|
||
.logout__hint {
|
||
text-align: center;
|
||
font-size: 11px;
|
||
color: var(--mini-text-muted);
|
||
margin: 12px 0 0;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|