diff --git a/src/api/user.ts b/src/api/user.ts index fd307dc0..ab088500 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -276,6 +276,15 @@ export interface UserProfileVO { /** 邮箱 */ email?: string; + + /** 部门名称 */ + deptName?: string; + + /** 角色名称，多个使用英文逗号(,)分割 */ + roleNames?: string; + + /** 创建时间 */ + createTime?: Date; } /** 个人中心用户信息表单 */ @@ -309,3 +318,19 @@ export interface PasswordChangeForm { /** 新密码 */ newPassword?: string; } + +/** 手机绑定表单 */ +export interface MobileBindingForm { + /** 新手机号 */ + mobile?: string; + /** 验证码 */ + code?: string; +} + +/** 邮箱绑定表单 */ +export interface EmailBindingForm { + /** 新邮箱 */ + email?: string; + /** 验证码 */ + code?: string; +} diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue index a5b0b0e8..314ea562 100644 --- a/src/views/profile/index.vue +++ b/src/views/profile/index.vue @@ -1,10 +1,12 @@ - {{ userProfile.email }} + {{ userProfile.deptName }} - {{ userProfile.email }} + {{ userProfile.roleNames }} + + + + + {{ userProfile.createTime }} + + +
账户密码
@@ -90,7 +104,7 @@ type="primary" plain size="small" - @click="handleOpenDialog" + @click="() => handleOpenDialog(DialogType.PASSWORD)" class="ml-5" > 修改 @@ -98,85 +112,148 @@ - - - -
绑定手机
-
- - 已绑定手机号：{{ userProfile.mobile }} - - 未绑定手机 - - 修改 - - - 绑定 - -
- - - - - -
绑定邮箱
-
- 可用邮箱加密码登录，可通过邮箱找回密码 -
- - -
- - 绑定 - -
- - + +
+
绑定手机
+
+ + 已绑定手机号：{{ userProfile.mobile }} + + 未绑定手机 + + 更换 + + + 绑定 + +
+
+ +
+
绑定邮箱
+
+ + 已绑定邮箱：{{ userProfile.email }} + + 未绑定邮箱 + + 更换 + + + 绑定 + +
+
- + + - + - + - + + + + + + + + + + {{ + mobileCountdown > 0 + ? `${mobileCountdown}s后重新发送` + : "发送验证码" + }} + + + + + + + + + + + + + {{ + emailCountdown > 0 ? `${emailCountdown}s后重新发送` : "发送验证码" + }} + + + + @@ -188,6 +265,8 @@ import UserAPI, { UserProfileVO, UserProfileForm, PasswordChangeForm, + MobileBindingForm, + EmailBindingForm, } from "@/api/user"; import { useUserStore } from "@/store/modules/user"; import { Camera } from "@element-plus/icons-vue"; @@ -195,11 +274,30 @@ const userStore = useUserStore(); const userProfile = ref({}); -const passwordChangeForm = ref({}); +enum DialogType { + PASSWORD = "password", + MOBILE = "mobile", + EMAIL = "email", +} + +const dialog = reactive({ + visible: false, + title: "", + type: "" as DialogType, // 修改密码、绑定手机、绑定邮箱 +}); -const dialogVisible = ref(false); const confirmPassword = ref(""); +const passwordChangeForm = reactive({}); +const mobileBindingForm = reactive({}); +const emailBindingForm = reactive({}); + +const mobileCountdown = ref(0); +const mobileTimer = ref(null); + +const emailCountdown = ref(0); +const emailTimer = ref(null); + const passwordChangeRules = { oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }], newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }], @@ -208,18 +306,66 @@ const passwordChangeRules = { ], }; -const handleOpenDialog = () => { - dialogVisible.value = true; +const mobileBindingRules = { + mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }], + mobileCode: [{ required: true, message: "请输入验证码", trigger: "blur" }], }; -const handleChangePassword = async () => { - const form = passwordChangeForm.value; - if (form.newPassword !== confirmPassword.value) { +const emailBindingRules = { + email: [{ required: true, message: "请输入邮箱", trigger: "blur" }], + emailCode: [{ required: true, message: "请输入验证码", trigger: "blur" }], +}; + +const handleOpenDialog = (type: DialogType) => { + dialog.type = type; + dialog.visible = true; +}; + +const handleSendMobileCode = async () => { + if (!mobileBindingForm.value.mobile) { return; } + // await UserAPI.sendMobileCode(mobileBindingForm.value.mobile); - await UserAPI.changePassword(form); - dialogVisible.value = false; + mobileCountdown.value = 60; + mobileTimer.value = setInterval(() => { + if (mobileCountdown.value > 0) { + mobileCountdown.value -= 1; + } else { + clearInterval(mobileTimer.value!); + } + }, 1000); +}; + +const handleSendEmailCode = async () => { + if (!emailBindingForm.email) { + return; + } + // await UserAPI.sendEmailCode(emailBindingForm.value.email); + + emailCountdown.value = 60; + emailTimer.value = setInterval(() => { + if (emailCountdown.value > 0) { + emailCountdown.value -= 1; + } else { + clearInterval(emailTimer.value!); + } + }, 1000); +}; + +const handleSubmit = async () => { + if (dialog.type === DialogType.PASSWORD) { + if (passwordChangeForm.newPassword !== confirmPassword.value) { + ElMessage.error("两次输入的密码不一致"); + return; + } + await UserAPI.changePassword(passwordChangeForm); + } else if (dialog.type === "mobile") { + //await UserAPI.bindMobile(mobileBindingForm.value); + } else if (dialog.type === "email") { + //await UserAPI.bindEmail(emailBindingForm.value); + } + dialog.visible = false; }; const fileInput = ref(null); @@ -238,6 +384,13 @@ const handleFileChange = (event: Event) => { }; onMounted(async () => { + if (mobileTimer.value) { + clearInterval(mobileTimer.value); + } + if (emailTimer.value) { + clearInterval(emailTimer.value); + } + const data = await UserAPI.getProfile(userStore.user.userId); userProfile.value = data; });