feat: 添加注销功能

locales/en.yaml

@@ -1,6 +1,7 @@
 title: System Title
 buttons:AccountSettings: Account
 buttons:LoginOut: LoginOut
+buttons:Cancell: Cancell Account
 buttons:Login: Login
 buttons:OpenSystemSet: Open System Configs
 buttons:Reload: Reload
@@ -172,6 +173,10 @@ logout:message: Whether to exit the system?
 logout:success: Logout Success
 logout:fail: Logout Fail
 logout:cancel: Logout Cancel
+logout:cancellMessage: Would you like to deactivate your account?
+logout:cancellSuccess: Deletion successful
+logout:cancellFail: Failed to cancell
+logout:cancellCancel: cancell Cancel
 user:buttons:addRole: Add User Role
 user:buttons:deleteRole: Delete User Role
 user:buttons:updateRole: Update User Role

locales/zh-CN.yaml

@@ -1,6 +1,7 @@
 title: 系统标题
 buttons:AccountSettings: 账户设置
 buttons:LoginOut: 退出系统
+buttons:Cancell: 注销账号
 buttons:Login: 登录
 buttons:OpenSystemSet: 打开系统配置
 buttons:Reload: 重新加载
@@ -172,6 +173,10 @@ logout:message: 是否退出当前系统?
 logout:success: 退出成功
 logout:fail: 退出失败
 logout:cancel: 退出取消
+logout:cancellMessage: 是否注销账号?
+logout:cancellSuccess: 注销成功
+logout:cancellFail: 注销失败
+logout:cancellCancel: 注销取消
 user:buttons:addRole: 添加用户角色
 user:buttons:deleteRole: 删除用户角色
 user:buttons:updateRole: 更新用户角色

src/api/login.ts

@@ -156,3 +156,8 @@ export const postResetPasswordAPI = (data: ResetPasswordParams) => {
     data
   });
 };
+
+/**用户注销 */
+export const postUnbscribeAPI = () => {
+  return http.request<null>("post", `/api/unsubscribe`);
+};

src/views/account-settings/components/AccountSafe.vue

@@ -5,7 +5,8 @@ defineOptions({
   name: "AccountSafe"
 });
 
-const { handleReset, handlePhone, handleEmail, userInfo } = useUserInfo();
+const { handleReset, handlePhone, handleEmail, userInfo, handleUnsubscribe } =
+  useUserInfo();
 </script>
 
 <template>
@@ -57,6 +58,14 @@ const { handleReset, handlePhone, handleEmail, userInfo } = useUserInfo();
       >
     </div>
     <el-divider />
+    <div class="flex items-center">
+      <div class="flex-1">
+        <p>注销账号</p>
+        <el-text class="mx-1" type="info" />
+      </div>
+      <el-button type="danger" text @click="handleUnsubscribe">注销</el-button>
+    </div>
+    <el-divider />
   </div>
 </template>
 

src/views/account-settings/utils/hooks.tsx

@@ -1,8 +1,14 @@
 import { message } from "@/utils/message";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, watch } from "vue";
-import { ElForm, ElFormItem, ElInput, ElProgress } from "element-plus";
-import { getUserInfoAPI } from "@/api/login";
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessageBox,
+  ElProgress
+} from "element-plus";
+import { getUserInfoAPI, postUnbscribeAPI } from "@/api/login";
 import {
   putUpdateEmailAPI,
   putUpdatePasswordAPI,
@@ -12,6 +18,8 @@ import { isAllEmpty, isEmail, isPhone, storageLocal } from "@pureadmin/utils";
 import { zxcvbn } from "@zxcvbn-ts/core";
 import { setUserInfo, userInfoKey } from "@/utils/auth";
 import type { UserInfo } from "types/system";
+import { transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
 
 export const useUserInfo = () => {
   /** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
@@ -337,12 +345,46 @@ export const useUserInfo = () => {
       }
     });
   };
-
+  /**注销账号 */
+  const handleUnsubscribe = async () => {
+    ElMessageBox.confirm(
+      transformI18n("logout:cancellMessage"),
+      transformI18n("buttons:Cancell"),
+      {
+        confirmButtonText: transformI18n("buttons:Confirm"),
+        cancelButtonText: transformI18n("buttons:Cancel"),
+        type: "warning",
+        center: true
+      }
+    )
+      .then(async () => {
+        const res = await postUnbscribeAPI();
+        if (!res.success) {
+          useUserStoreHook().logOut();
+          message(transformI18n("logout:cancellSuccess"), {
+            type: "success",
+            duration: 1000
+          });
+        } else {
+          message(transformI18n("logout:cancellFail"), {
+            type: "error",
+            duration: 1000
+          });
+        }
+      })
+      .catch(() => {
+        message(transformI18n("logout:cancellCancel"), {
+          type: "info",
+          duration: 1000
+        });
+      });
+  };
   return {
     userInfo,
     getUserInfo,
     handleReset,
     handlePhone,
-    handleEmail
+    handleEmail,
+    handleUnsubscribe
   };
 };