hello world

src/views/system/user/center/components/security-settings/update-pwd.vue

@@ -0,0 +1,212 @@
+<template>
+  <a-list-item-meta>
+    <template #avatar>
+      <a-typography-paragraph>
+        {{ $t('userCenter.securitySettings.password.label') }}
+      </a-typography-paragraph>
+    </template>
+    <template #description>
+      <div class="tip">
+        {{ $t('userCenter.securitySettings.password.tip') }}
+      </div>
+      <div class="content">
+        <a-typography-paragraph v-if="userStore.pwdResetTime">
+          {{ $t('userCenter.securitySettings.content.hasBeenSet') }}
+        </a-typography-paragraph>
+        <a-typography-paragraph v-else class="tip">
+          {{ $t('userCenter.securitySettings.password.content') }}
+        </a-typography-paragraph>
+      </div>
+      <div class="operation">
+        <a-link
+          :title="$t('userCenter.securitySettings.button.update')"
+          @click="toUpdate"
+        >
+          {{ $t('userCenter.securitySettings.button.update') }}
+        </a-link>
+      </div>
+    </template>
+  </a-list-item-meta>
+
+  <a-modal
+    :title="$t('userCenter.securitySettings.updatePwd.modal.title')"
+    :visible="visible"
+    :mask-closable="false"
+    :esc-to-close="false"
+    @ok="handleUpdate"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" size="large">
+      <a-form-item
+        v-if="userStore.pwdResetTime"
+        :label="
+          $t('userCenter.securitySettings.updatePwd.form.label.oldPassword')
+        "
+        field="oldPassword"
+      >
+        <a-input-password
+          v-model="form.oldPassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePwd.form.placeholder.oldPassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updatePwd.form.label.newPassword')
+        "
+        field="newPassword"
+      >
+        <a-input-password
+          v-model="form.newPassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePwd.form.placeholder.newPassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item
+        :label="
+          $t('userCenter.securitySettings.updatePwd.form.label.rePassword')
+        "
+        field="rePassword"
+      >
+        <a-input-password
+          v-model="form.rePassword"
+          :placeholder="
+            $t(
+              'userCenter.securitySettings.updatePwd.form.placeholder.rePassword'
+            )
+          "
+          :max-length="32"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { getCurrentInstance, ref, reactive, computed } from 'vue';
+  import { FieldRule } from '@arco-design/web-vue';
+  import { updatePassword } from '@/api/system/user-center';
+  import { useI18n } from 'vue-i18n';
+  import { useUserStore } from '@/store';
+  import { encryptByRsa } from '@/utils/encrypt';
+
+  const { proxy } = getCurrentInstance() as any;
+
+  const { t } = useI18n();
+  const userStore = useUserStore();
+  const visible = ref(false);
+
+  // 表单数据
+  const form = reactive({
+    oldPassword: '',
+    newPassword: '',
+    rePassword: '',
+  });
+  // 表单验证规则
+  const rules = computed((): Record<string, FieldRule[]> => {
+    return {
+      oldPassword: [
+        {
+          required: true,
+          message: t(
+            'userCenter.securitySettings.updatePwd.form.error.required.oldPassword'
+          ),
+        },
+      ],
+      newPassword: [
+        {
+          required: true,
+          message: t(
+            'userCenter.securitySettings.updatePwd.form.error.required.newPassword'
+          ),
+        },
+        {
+          match: /^(?=.*\d)(?=.*[a-z]).{6,32}$/,
+          message: t(
+            'userCenter.securitySettings.updatePwd.form.error.match.newPassword'
+          ),
+        },
+        {
+          validator: (value, callback) => {
+            if (value === form.oldPassword) {
+              callback(
+                t(
+                  'userCenter.securitySettings.updatePwd.form.error.validator.newPassword'
+                )
+              );
+            } else {
+              callback();
+            }
+          },
+        },
+      ],
+      rePassword: [
+        {
+          required: true,
+          message: t(
+            'userCenter.securitySettings.updatePwd.form.error.required.rePassword'
+          ),
+        },
+        {
+          validator: (value, callback) => {
+            if (value !== form.newPassword) {
+              callback(
+                t(
+                  'userCenter.securitySettings.updatePwd.form.error.validator.rePassword'
+                )
+              );
+            } else {
+              callback();
+            }
+          },
+        },
+      ],
+    };
+  });
+
+  /**
+   * 取消
+   */
+  const handleCancel = () => {
+    visible.value = false;
+    proxy.$refs.formRef.resetFields();
+  };
+
+  /**
+   * 修改
+   */
+  const handleUpdate = () => {
+    proxy.$refs.formRef.validate((valid: any) => {
+      if (!valid) {
+        updatePassword({
+          oldPassword: encryptByRsa(form.oldPassword) || '',
+          newPassword: encryptByRsa(form.newPassword) || '',
+        }).then((res) => {
+          userStore.getInfo();
+          handleCancel();
+          proxy.$message.success(res.msg);
+        });
+      }
+    });
+  };
+
+  /**
+   * 打开修改对话框
+   */
+  const toUpdate = () => {
+    visible.value = true;
+  };
+</script>
+
+<style scoped lang="less"></style>