feat: 修改密码

config/config.js

@@ -182,6 +182,12 @@ export default {
               icon: 'smile',
               component: './PaymentMange',
             },
+            {
+              path: '/password',
+              name: 'password',
+              icon: 'smile',
+              component: './password',
+            },
             // {
             //   path: '/GoodsManage-new',
             //   name: 'GoodsManageNew',

src/components/GlobalHeader/AvatarDropdown.jsx

-import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import { LogoutOutlined, SettingOutlined, UserOutlined, EditOutlined } from '@ant-design/icons';
 import { Avatar, Menu, Spin } from 'antd';
 import React from 'react';
 import { connect } from 'dva';
@@ -21,6 +21,10 @@ class AvatarDropdown extends React.Component {
 
       return;
     }
+    if (key === 'password') {
+      history.push('/password');
+      return;
+    }
 
     history.push(`/account/${key}`);
   };
@@ -48,7 +52,10 @@ class AvatarDropdown extends React.Component {
           </Menu.Item>
         )}
         {menu && <Menu.Divider />}
-
+        <Menu.Item key="password">
+          <EditOutlined />
+          修改密码
+        </Menu.Item>
         <Menu.Item key="logout">
           <LogoutOutlined />
           退出登录

src/pages/password/index.jsx

+import React, { useRef, useState } from 'react';
+import { Form, Input, Button, Checkbox, Card } from 'antd';
+import { history } from 'umi';
+import styles from './style.less';
+
+const Password = props => {
+  const formRef = useRef();
+  const onFinish = values => {
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const goHome = () => {
+    formRef.current.resetFields();
+    history.push('/');
+  };
+  return (
+    <div className={styles.div}>
+      <Card className={styles.card}>
+        <p>修改密码</p>
+        <Form
+          initialValues={{ remember: true }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+          className={styles.form}
+          ref={formRef}
+        >
+          <Form.Item name="val" rules={[{ required: true, message: '请输入原密码!' }]}>
+            <Input.Password placeholder="输入原密码" />
+          </Form.Item>
+          <Form.Item
+            name="loginpass"
+            rules={[
+              { required: true, message: '请输入新密码！' },
+              {
+                message: '至少13最多18位且必须包含大小写字母、数字和特殊字符',
+                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{13,18}/,
+              },
+            ]}
+          >
+            <Input.Password placeholder="输入新密码" maxLength={18} />
+          </Form.Item>
+          <Form.Item
+            name="cfmloginpass"
+            rules={[
+              { required: true, message: '请输入新密码！' },
+              {
+                message: '至少13位最多18位且必须包含大小写字母、数字和特殊字符',
+                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{13,18}/,
+              },
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (value && getFieldValue('loginpass') !== value) {
+                    // eslint-disable-next-line prefer-promise-reject-errors
+                    return Promise.reject('两次密码输入不一致');
+                  }
+                  return Promise.resolve();
+                },
+              }),
+            ]}
+          >
+            <Input.Password placeholder="输入新密码" maxLength={18} />
+          </Form.Item>
+          <Form.Item className={styles.btn}>
+            <Button type="primary" htmlType="submit">
+              {' '}
+              确认修改
+            </Button>
+            <Button type="primary" ghost onClick={goHome}>
+              返回首页
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
+};
+
+export default Password;

src/pages/password/style.less

+.div {
+  width: 100%;
+}
+.card {
+  width: 70%;
+  margin: 0 auto;
+  padding: 30px 0;
+  .form {
+    width: 40%;
+    margin: 0 auto;
+  }
+  p {
+    margin-bottom: 30px;
+    font-weight: bold;
+    font-size: 18px;
+    text-align: center;
+  }
+  .btn {
+    margin: 0 auto;
+    text-align: center;
+    button {
+      &:first-child {
+        width: 200px;
+        margin-right: 10px;
+      }
+    }
+  }
+}