mirror of https://github.com/jeecgboot/jeecg-boot
v3.8.1发布,上传前端缺少文件
parent
7848881dcb
commit
eabf98533a
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="注销" @ok="handleSubmit" destroyOnClose :width="400">
|
||||
<a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
|
||||
<div class="cancellation-tip">
|
||||
<p style="color: red;margin-bottom: 10px !important;">注销后账号会保留10天,如需恢复请QQ管理员 </p>
|
||||
</div>
|
||||
<a-form-item label="" name="phone" class="cancellation-tip">
|
||||
<div class="black font-size-13" style="margin-bottom: 6px">验证方式</div>
|
||||
<div class="pass-padding">
|
||||
<a-input placeholder="请输入手机号" v-model:value="formState.phone" />
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="" name="smscode" class="cancellation-tip">
|
||||
<CountdownInput v-model:value="formState.smscode" placeholder="请输入6位验证码" :sendCodeApi="sendCodeApi" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" name="UserCancellationModal" setup>
|
||||
import { ref, unref, reactive } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { Rule } from '/@/components/Form/index';
|
||||
import { userLogOff } from '../UserSetting.api';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { CountdownInput } from '/@/components/CountDown';
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
|
||||
const { createMessage, createErrorModal } = useMessage();
|
||||
//用户名
|
||||
const username = ref<string>('');
|
||||
const formRef = ref();
|
||||
const formState = reactive({
|
||||
smscode: '',
|
||||
phone: '',
|
||||
});
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
//表单赋值
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
username.value = data.record.username;
|
||||
Object.assign(formState, { password: '', smscode: '', phone: '' });
|
||||
});
|
||||
const userStore = useUserStore();
|
||||
const validatorRules: Record<string, Rule[]> = {
|
||||
phone: [{ required: true, message: '请输入手机号' }],
|
||||
smscode: [{ required: true, message: '请输入6位验证码' }],
|
||||
};
|
||||
|
||||
//表单提交事件
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
let values = await formRef.value.validateFields();
|
||||
setModalProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
values.username = unref(username);
|
||||
await userLogOff(values).then((res) => {
|
||||
if (res.success) {
|
||||
createMessage.info({
|
||||
content: '注销成功!',
|
||||
duration: 1,
|
||||
});
|
||||
//返回登录页面
|
||||
setTimeout(() => {
|
||||
userStore.logout(true);
|
||||
}, 1000);
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
} else {
|
||||
createMessage.warn(res.message);
|
||||
}
|
||||
});
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 倒计时执行前的函数
|
||||
*/
|
||||
function sendCodeApi() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if(!formState.phone){
|
||||
createErrorModal({ title: '错误提示', content: '请输入手机号!' });
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
let params = { phone: formState.phone, username: username.value };
|
||||
defHttp
|
||||
.post({ url: '/sys/user/sendLogOffPhoneSms', params }, { isTransformResponse: false })
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
resolve(true);
|
||||
} else {
|
||||
createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
|
||||
reject();
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
|
||||
reject();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.black {
|
||||
color: @text-color;
|
||||
}
|
||||
.font-size-13 {
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.cancellation-tip {
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue