99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<!--
|
||
* @Author: RenXiaoDong
|
||
* @Date: 2025-06-26 17:23:52
|
||
-->
|
||
<template>
|
||
<a-modal
|
||
v-model:visible="visible"
|
||
width="400px"
|
||
modal-class="exit-account-modal"
|
||
show-close="false"
|
||
:footer="false"
|
||
@close="onClose"
|
||
>
|
||
<div class="flex items-center mb-16px">
|
||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||
<span class="s1">确认退出登录吗？</span>
|
||
</div>
|
||
<p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
|
||
<div class="flex items-center justify-end">
|
||
<a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
|
||
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
|
||
>退出登录</a-button
|
||
>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { fetchLogOut } from '@/api/all/login';
|
||
import { handleUserLogout } from '@/utils/user';
|
||
|
||
import icon1 from './img/icon1.png';
|
||
|
||
const visible = ref(false);
|
||
|
||
function onClose() {
|
||
visible.value = false;
|
||
}
|
||
|
||
const open = (record) => {
|
||
visible.value = true;
|
||
};
|
||
|
||
async function onLogout() {
|
||
const { code } = await fetchLogOut();
|
||
if (code === 200) {
|
||
handleUserLogout();
|
||
AMessage.success('退出登录成功');
|
||
onClose();
|
||
}
|
||
}
|
||
|
||
defineExpose({ open });
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.exit-account-modal {
|
||
border-radius: 8px;
|
||
border: 1px solid var(--BG-300, #e6e6e8) !important;
|
||
background-color: var(--BG-white, #fff) !important;
|
||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
|
||
.arco-modal-header {
|
||
display: none;
|
||
}
|
||
.arco-modal-body {
|
||
padding: 24px;
|
||
.s1 {
|
||
color: var(--Text-1, #211f24);
|
||
font-family: 'PuHuiTi-Medium';
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 22px; /* 157.143% */
|
||
}
|
||
.s2 {
|
||
color: var(--Text-2, #3c4043);
|
||
font-family: 'PuHuiTi-Regular';
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 20px; /* 166.667% */
|
||
}
|
||
.cancel-btn {
|
||
border-radius: 4px;
|
||
border: 1px solid var(--BG-500, #b1b2b5);
|
||
&:hover {
|
||
border: 1px solid var(--BG-500, #b1b2b5);
|
||
}
|
||
}
|
||
.danger-btn {
|
||
border-radius: 4px;
|
||
background: var(--Functional-Danger-6, #f64b31) !important;
|
||
border: none !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|