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>
|