feat: 个人中心修改密码

src/pages/src/components/ChangePassword.vue

@@ -0,0 +1,111 @@
+<template>
+  <bk-dialog
+    ext-cls="dialog-reset-password"
+    :is-show="config.isShow"
+    :title="config.title"
+    theme="primary"
+    :quick-close="false"
+    :is-loading="isLoading"
+    @closed="$emit('closed')"
+    @confirm="confirm"
+  >
+    <bk-alert
+      theme="info"
+      title="密码修改成功后需要进行重新登录"
+      closable
+    />
+    <bk-form
+      form-type="vertical"
+      ref="formRef"
+      :model="formData">
+      <bk-form-item label="旧密码" property="oldPassword" required>
+        <bk-input v-model="formData.oldPassword" />
+      </bk-form-item>
+      <bk-form-item label="新密码" property="newPassword" required>
+        <bk-input v-model="formData.newPassword" />
+      </bk-form-item>
+      <bk-form-item label="确认密码" property="confirmPassword" required>
+        <bk-input :class="{ 'is-error': isError }" v-model="formData.confirmPassword" @input="changePassword" />
+        <p class="error" v-show="isError">两次输入的密码不一致，请重新输入</p>
+      </bk-form-item>
+    </bk-form>
+  </bk-dialog>
+</template>
+
+<script setup lang="ts">
+import { Message } from 'bkui-vue';
+import { reactive, ref, watch } from 'vue';
+
+import { putPersonalCenterUserPassword } from '@/http/personalCenterFiles';
+
+const emit = defineEmits(['closed']);
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const formRef = ref();
+const formData = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+});
+const isLoading = ref(false);
+const isError = ref(false);
+
+watch(() => props.config?.isShow, (value: boolean) => {
+  if (value) {
+    Object.keys(formData).forEach((key) => {
+      formData[key] = '';
+    });
+    isError.value = false;
+  }
+});
+
+const changePassword = () => {
+  isError.value = false;
+};
+
+const confirm = async () => {
+  try {
+    await formRef.value.validate();
+    if (formData.newPassword === formData.confirmPassword) {
+      return isError.value = true;
+    }
+    isLoading.value = true;
+    await putPersonalCenterUserPassword({
+      id: props.config?.id,
+      old_password: formData.oldPassword,
+      new_password: formData.newPassword,
+    });
+    emit('closed');
+    Message({ theme: 'success', message: '修改密码成功' });
+  } catch (e) {
+    console.warn(e);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-reset-password {
+  ::v-deep .bk-alert {
+    margin: 5px 0 16px;
+  }
+
+  .is-error {
+    border-color: #ea3636;
+  }
+
+  .error {
+    position: absolute;
+    padding-top: 4px;
+    font-size: 12px;
+    line-height: 1;
+    color: #ea3636;
+  }
+}
+</style>

src/pages/src/http/personalCenterFiles.ts

@@ -3,6 +3,7 @@ import type {
   PatchUserEmailParams,
   PatchUserLogoParams,
   PatchUserPhoneParams,
+  PutUserPasswordParams,
 } from './types/personalCenterFiles';
 
 /**
@@ -39,3 +40,8 @@ export const getPersonalCenterUserVisibleFields = (id: string) => http.get(`/api
  * 修改用户自定义字段
  */
 export const putPersonalCenterUserExtrasFields = (params: any) => http.put(`/api/v1/web/personal-center/tenant-users/${params.id}/extras/`, params);
+
+/**
+ * 个人中心修改密码
+ */
+export const putPersonalCenterUserPassword = (params: PutUserPasswordParams) => http.put(`/api/v1/web/personal-center/tenant-users/${params.id}/password/`, params);

src/pages/src/http/types/personalCenterFiles.ts

@@ -24,3 +24,12 @@ export interface PatchUserLogoParams {
   id: string,
   logo: string,
 }
+
+/**
+ * 租户用户更新密码
+ */
+export interface PutUserPasswordParams {
+  id: string,
+  old_password: string,
+  new_password: string,
+}

src/pages/src/views/personal-center/index.vue

@@ -90,6 +90,9 @@
             </div>
           </div>
           <div class="header-right">
+            <bk-button class="w-[88px]" @click="showPasswordModal">
+              修改密码
+            </bk-button>
             <span v-bk-tooltips="{
               content: '该账号已登录',
               distance: 20,
@@ -295,6 +298,10 @@
           </ul>
         </div>
       </div>
+      <!-- 修改密码 -->
+      <ChangePassword
+        :config="passwordModalConfig"
+        @closed="hidePasswordModal" />
     </template>
   </bk-resize-layout>
 </template>
@@ -303,6 +310,7 @@
 import { bkTooltips as vBkTooltips, Message } from 'bkui-vue';
 import { computed, inject, nextTick, onMounted, ref, watch } from 'vue';
 
+import ChangePassword from '@/components/ChangePassword.vue';
 import phoneInput from '@/components/phoneInput.vue';
 import useValidate from '@/hooks/use-validate';
 import { useCustomFields } from '@/hooks/useCustomFields';
@@ -484,15 +492,15 @@ const changeEmail = async () => {
     custom_email: currentUserInfo.value.custom_email,
   }).then(() => {
     isEditEmail.value = false;
-    isEditFn();
+    isEditing();
   });
 };
 // 取消编辑邮箱
 const cancelEditEmail = () => {
   currentUserInfo.value.is_inherited_email = isInheritedEmail.value;
   currentUserInfo.value.custom_email = customEmail.value;
   isEditEmail.value = false;
-  isEditFn();
+  isEditing();
 };
 
 const isEditPhone = ref(false);
@@ -524,7 +532,7 @@ const changePhone = () => {
     custom_phone_country_code: currentUserInfo.value.custom_phone_country_code,
   }).then(() => {
     isEditPhone.value = false;
-    isEditFn();
+    isEditing();
   });
 };
 // 取消编辑手机号
@@ -534,7 +542,7 @@ const cancelEditPhone = () => {
   currentUserInfo.value.custom_phone_country_code = customPhoneCode.value;
   isEditPhone.value = false;
   telError.value = false;
-  isEditFn();
+  isEditing();
 };
 // 切换关联账号
 const handleClickItem = async (item) => {
@@ -586,10 +594,26 @@ const handleError = (file) => {
 };
 
 // 是否是编辑状态
-const isEditFn = () => {
+const isEditing = () => {
   const allFalse = currentUserInfo.value?.extras.every(item => !item.isEdit);
   window.changeInput = !(allFalse && isEditEmail.value === false && isEditPhone.value === false);
 };
+
+// 修改密码
+const passwordModalConfig = ref({
+  isShow: false,
+  title: '修改密码',
+  id: '',
+});
+
+const showPasswordModal = () => {
+  passwordModalConfig.value.isShow = true;
+  passwordModalConfig.value.id = currentUserInfo.value?.id;
+};
+
+const hidePasswordModal = () => {
+  passwordModalConfig.value.isShow = false;
+};
 </script>
 
 <style lang="less" scoped>