add /api/getUsersCount

frontend/vben/src/views/page/settings/SecureSetting.vue

@@ -6,7 +6,7 @@
           <ListItemMeta>
             <template #title>
               {{ item.title }}
-              <div class="extra" v-if="item.extra">
+              <div class="extra" v-if="item.extra" @click="item.click">
                 {{ item.extra }}
               </div>
             </template>
@@ -24,12 +24,16 @@
   import { defineComponent } from 'vue'
   import { CollapseContainer } from '/@/components/Container/index'
   import { useUserStore } from '/@/store/modules/user'
+  import { PageEnum } from '/@/enums/pageEnum'
+  import { useGo } from '/@/hooks/web/usePage'
 
   export default defineComponent({
     components: { CollapseContainer, List, ListItem: List.Item, ListItemMeta: List.Item.Meta },
     setup() {
       const userStore = useUserStore()
       const { last, contact } = userStore.getUserInfo
+      const go = useGo()
+
       return {
         list: [
           {
@@ -37,11 +41,14 @@
             title: '账户密码',
             description: '上次修改密码: ' + last,
             extra: '修改',
+            click: () => {
+              go(PageEnum.PAGE_PASSWORD_SETTINGS)
+            },
           },
           {
             key: '2',
-            title: '我的手机',
-            description: '已绑定手机: ' + contact,
+            title: '联系方式',
+            description: '已记录的联系方式: ' + contact,
             extra: '修改',
           },
         ],

frontend/vben/src/views/page/settings/contact/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <PageWrapper title="修改当前联系方式" content="修改成功后会自动退出当前登录！">
+    <div class="py-8 bg-white flex flex-col justify-center items-center">
+      <BasicForm @register="register" />
+      <div class="flex justify-center">
+        <a-button @click="resetFields"> 重置 </a-button>
+        <a-button class="!ml-4" type="primary" @click="handleSubmit"> 确认 </a-button>
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { PageWrapper } from '/@/components/Page'
+  import { BasicForm, useForm } from '/@/components/Form'
+
+  import { formSchema } from './pwd.data'
+  export default defineComponent({
+    name: 'ChangeContact',
+    components: { BasicForm, PageWrapper },
+    setup() {
+      const [register, { validate, resetFields }] = useForm({
+        size: 'large',
+        baseColProps: { span: 24 },
+        labelWidth: 100,
+        showActionButtonGroup: false,
+        schemas: formSchema,
+      })
+
+      async function handleSubmit() {
+        try {
+          const values = await validate()
+          const { passwordOld, passwordNew } = values
+
+          // TODO custom api
+          console.log(passwordOld, passwordNew)
+          // const { router } = useRouter()
+          // router.push(pageEnum.BASE_LOGIN)
+        } catch (error) {}
+      }
+
+      return { register, resetFields, handleSubmit }
+    },
+  })
+</script>

frontend/vben/src/views/page/settings/contact/pwd.data.ts

@@ -0,0 +1,46 @@
+import { FormSchema } from '/@/components/Form'
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'passwordOld',
+    label: '当前密码',
+    component: 'InputPassword',
+    required: true,
+  },
+  {
+    field: 'passwordNew',
+    label: '新密码',
+    component: 'StrengthMeter',
+    componentProps: {
+      placeholder: '新密码',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入新密码',
+      },
+    ],
+  },
+  {
+    field: 'confirmPassword',
+    label: '确认密码',
+    component: 'InputPassword',
+
+    dynamicRules: ({ values }) => {
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (!value) {
+              return Promise.reject('密码不能为空')
+            }
+            if (value !== values.passwordNew) {
+              return Promise.reject('两次输入的密码不一致!')
+            }
+            return Promise.resolve()
+          },
+        },
+      ]
+    },
+  },
+]

frontend/vben/src/views/page/settings/password/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <PageWrapper title="修改当前用户密码" content="修改成功后会自动退出当前登录！">
+    <div class="py-8 bg-white flex flex-col justify-center items-center">
+      <BasicForm @register="register" />
+      <div class="flex justify-center">
+        <a-button @click="resetFields"> 重置 </a-button>
+        <a-button class="!ml-4" type="primary" @click="handleSubmit"> 确认 </a-button>
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { PageWrapper } from '/@/components/Page'
+  import { BasicForm, useForm } from '/@/components/Form'
+
+  import { formSchema } from './pwd.data'
+  export default defineComponent({
+    name: 'ChangePassword',
+    components: { BasicForm, PageWrapper },
+    setup() {
+      const [register, { validate, resetFields }] = useForm({
+        size: 'large',
+        baseColProps: { span: 24 },
+        labelWidth: 100,
+        showActionButtonGroup: false,
+        schemas: formSchema,
+      })
+
+      async function handleSubmit() {
+        try {
+          const values = await validate()
+          const { passwordOld, passwordNew } = values
+
+          // TODO custom api
+          console.log(passwordOld, passwordNew)
+          // const { router } = useRouter()
+          // router.push(pageEnum.BASE_LOGIN)
+        } catch (error) {}
+      }
+
+      return { register, resetFields, handleSubmit }
+    },
+  })
+</script>

frontend/vben/src/views/page/settings/password/pwd.data.ts

@@ -0,0 +1,46 @@
+import { FormSchema } from '/@/components/Form'
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'passwordOld',
+    label: '当前密码',
+    component: 'InputPassword',
+    required: true,
+  },
+  {
+    field: 'passwordNew',
+    label: '新密码',
+    component: 'StrengthMeter',
+    componentProps: {
+      placeholder: '新密码',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入新密码',
+      },
+    ],
+  },
+  {
+    field: 'confirmPassword',
+    label: '确认密码',
+    component: 'InputPassword',
+
+    dynamicRules: ({ values }) => {
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (!value) {
+              return Promise.reject('密码不能为空')
+            }
+            if (value !== values.passwordNew) {
+              return Promise.reject('两次输入的密码不一致!')
+            }
+            return Promise.resolve()
+          },
+        },
+      ]
+    },
+  },
+]